:root{color-scheme:light;font-family:Noto Sans Thai,Noto Sans,Leelawadee UI,Arial,sans-serif;--navy: #10233f;--ink: #1d2939;--muted: #667085;--line: #d8e2e7;--soft: #f6faf8;--green: #16825d;--green-dark: #0f6849;--amber: #c78316;--amber-soft: #fff7e8;--white: #ffffff;--shadow: 0 18px 50px rgba(16, 35, 63, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#f3f7f8;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:286px 1fr}.sidebar{min-height:100vh;padding:26px 18px;background:var(--navy);color:var(--white);display:flex;flex-direction:column;gap:30px}.brand{display:flex;align-items:center;gap:13px;padding:0 8px}.brand-mark{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--green);color:var(--white);font-weight:800;letter-spacing:0}.brand-mark.large{width:58px;height:58px;border-radius:14px;font-size:24px}.brand strong,.brand span{display:block}.brand strong{font-size:18px}.brand span{color:#b9c8d3;font-size:13px}.nav-list{display:grid;gap:8px}.nav-item{width:100%;border:1px solid transparent;background:transparent;color:#d5e0e7;border-radius:8px;padding:12px;display:flex;align-items:center;gap:11px;text-align:left}.nav-item.active{background:#ffffff1a;border-color:#ffffff21;color:var(--white)}.nav-item strong,.nav-item small{display:block}.nav-item strong{font-size:15px}.nav-item small{margin-top:1px;color:#aebdca;font-size:12px}.sidebar-footer{margin-top:auto;display:grid;gap:12px}.signed-in,.ghost-button{min-width:0;display:flex;align-items:center;gap:8px;color:#d5e0e7;font-size:13px}.signed-in span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ghost-button{border:1px solid rgba(255,255,255,.15);background:#ffffff12;border-radius:8px;padding:10px 11px}.main-panel{min-width:0;padding:38px}.page-header{margin-bottom:24px;display:flex;justify-content:space-between;gap:24px}.page-header h1{margin:0;color:var(--navy);font-size:32px;line-height:1.2;letter-spacing:0}.page-header p{max-width:720px;margin:8px 0 0;color:var(--muted);font-size:16px;line-height:1.65}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.metric-card,.notice-panel,.message-card,.auth-card,.auth-copy{border:1px solid var(--line);background:var(--white);border-radius:8px;box-shadow:var(--shadow)}.metric-card{min-height:146px;padding:22px;display:grid;align-content:space-between;color:var(--green)}.metric-card strong{color:var(--navy);font-size:34px;line-height:1.1}.metric-card span{color:var(--muted);font-weight:650}.notice-panel{margin-top:18px;padding:22px;display:flex;gap:14px;color:var(--amber);background:var(--amber-soft);border-color:#f0d29b}.notice-panel h2{margin:0 0 5px;color:var(--navy);font-size:20px}.notice-panel p{margin:0;color:#7a5618;line-height:1.65}.search-bar{margin-bottom:18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);background:var(--white);border-radius:8px;padding:10px 12px;box-shadow:var(--shadow)}.search-bar svg{color:var(--green)}.search-bar input{width:100%;border:0;outline:0;color:var(--ink);font-size:16px}.search-bar button,.primary-button{border:0;border-radius:8px;background:var(--green);color:var(--white);padding:10px 18px;font-weight:750}.search-bar button:hover,.primary-button:hover{background:var(--green-dark)}.table-wrap{overflow:auto;border:1px solid var(--line);background:var(--white);border-radius:8px;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:13px 16px;border-bottom:1px solid #e7edf1;text-align:left;vertical-align:top;font-size:14px}th{position:sticky;top:0;z-index:1;background:#f8fbfa;color:var(--navy);font-weight:800}td{color:#27364a;line-height:1.45}tr:last-child td{border-bottom:0}.center-screen,.auth-screen{min-height:100vh;display:grid;place-items:center;padding:30px;background:linear-gradient(135deg,rgba(22,130,93,.08),transparent 42%),#f3f7f8}.message-card{max-width:520px;padding:34px;text-align:center;color:var(--green)}.message-card h1{margin:18px 0 8px;color:var(--navy)}.message-card p{margin:0;color:var(--muted);line-height:1.7}.auth-screen{grid-template-columns:minmax(0,460px) minmax(320px,420px);gap:22px}.auth-copy,.auth-card{width:100%;padding:34px}.auth-copy h1,.auth-card h2{margin:18px 0 10px;color:var(--navy);line-height:1.2}.auth-copy p{margin:0;color:var(--muted);line-height:1.8}.auth-card{display:grid;gap:15px}.auth-card h2{margin-top:0}.auth-card label{display:grid;gap:7px;color:var(--navy);font-weight:750;font-size:14px}.auth-card input{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 13px;outline:0}.text-button{border:0;background:transparent;color:var(--green);font-weight:750}.form-message{margin:0;color:var(--muted);line-height:1.55}@media (max-width: 980px){.app-shell{grid-template-columns:1fr}.sidebar{min-height:auto}.nav-list,.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-screen{grid-template-columns:1fr}}@media (max-width: 620px){.main-panel{padding:24px 16px}.page-header h1{font-size:26px}.nav-list,.metric-grid,.search-bar{grid-template-columns:1fr}.search-bar{align-items:stretch}}