:root{color-scheme:light;font-family:Noto Sans Thai,Leelawadee UI,system-ui,sans-serif;color:#16253a;background:#f5f0e6;font-synthesis:none;--navy: #13253f;--navy-soft: #233e61;--cream: #f5f0e6;--paper: #fffdf8;--gold: #b68a44;--gold-light: #e8d3a8;--muted: #6b7280;--line: #dfd7c9;--danger: #9f2f2f;--success: #226748;--shadow: 0 18px 50px rgba(19, 37, 63, .1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top right,#fff9eb 0,transparent 35%),var(--cream)}button,input,select,textarea{font:inherit}button,[role=tab]{touch-action:manipulation}a{color:inherit}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(18px,4vw,48px);color:#fff;background:#13253ffa;border-bottom:3px solid var(--gold)}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--gold-light);border-radius:50%;color:var(--gold-light);font-weight:800}.brand strong{display:block;letter-spacing:.12em}.brand small{display:block;color:#dfd7c9;font-size:.72rem;letter-spacing:.08em}.user-tools{display:flex;align-items:center;gap:10px;min-width:0}.user-meta{text-align:right;max-width:260px}.user-meta strong,.user-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta small{color:#dfd7c9}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 73px)}.sidebar{padding:24px 14px;background:#eae3d5;border-right:1px solid var(--line)}.tablist{display:grid;gap:8px;position:sticky;top:98px}.tab-button{width:100%;padding:12px 14px;border:0;border-radius:12px;background:transparent;color:var(--navy);text-align:left;font-weight:700;cursor:pointer}.tab-button:hover{background:#ffffff9e}.tab-button[aria-selected=true]{color:#fff;background:var(--navy);box-shadow:0 8px 22px #13253f2e}.content{width:min(1180px,100%);margin:0 auto;padding:clamp(22px,4vw,48px)}.page-heading{margin-bottom:24px}.eyebrow{margin:0 0 6px;color:var(--gold);font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:8px;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.18}h2{margin-bottom:16px;font-size:1.25rem}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{padding:clamp(18px,3vw,28px);background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.card+.card{margin-top:20px}.grid .card+.card{margin-top:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.metric{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:16px}.metric strong{display:block;color:var(--navy);font-size:1.9rem}.metric span{color:var(--muted);font-size:.9rem}form{display:grid;gap:15px}label,legend{color:var(--navy);font-weight:700}label span{display:inline-block;margin-bottom:6px}.required{color:var(--danger)}input,select,textarea{width:100%;min-height:44px;padding:10px 12px;color:#17243a;background:#fff;border:1px solid #cfc6b7;border-radius:10px}textarea{min-height:95px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid rgba(182,138,68,.2);border-color:var(--gold)}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.help{margin:-7px 0 0;color:var(--muted);font-size:.82rem}fieldset{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:12px}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid transparent;border-radius:11px;color:#fff;background:var(--navy);font-weight:800;text-decoration:none;cursor:pointer}button:hover{background:var(--navy-soft)}button:disabled{opacity:.55;cursor:wait}.secondary{color:var(--navy);background:transparent;border-color:#aab3c0}.secondary:hover{background:#edf0f4}.danger{background:var(--danger)}.small{min-height:34px;padding:6px 10px;font-size:.86rem}.actions{display:flex;flex-wrap:wrap;gap:9px}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:660px;background:#fff}th,td{padding:12px 14px;border-bottom:1px solid #ece6db;text-align:left;vertical-align:top}th{color:var(--navy);background:#f3efe8;font-size:.86rem}tbody tr:last-child td{border-bottom:0}.status{display:inline-flex;padding:4px 9px;color:var(--navy);background:#e9edf2;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap}.status.active,.status.completed{color:#1f6044;background:#e2f2e9}.empty{padding:24px;color:var(--muted);text-align:center}.notice,.success,.error{margin-bottom:18px;padding:13px 16px;border-radius:12px}.notice{color:#604916;background:#fff4d8;border:1px solid #efd294}.success{color:var(--success);background:#e6f5ed;border:1px solid #acd5be}.error{color:var(--danger);background:#fdecec;border:1px solid #efb7b7}.loading{min-height:50vh;display:grid;place-items:center;color:var(--muted)}.spinner{width:34px;height:34px;margin:0 auto 12px;border:4px solid #ddd5c8;border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,var(--navy) 0 48%,var(--cream) 48%)}.auth-card{width:min(480px,100%);padding:34px;background:var(--paper);border-radius:24px;box-shadow:0 28px 80px #00000040}.auth-brand{margin-bottom:28px}.auth-brand h1{letter-spacing:.12em}.auth-actions{display:grid;gap:10px}.divider{display:flex;align-items:center;gap:12px;margin:4px 0;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}.mobile-tabs{display:none}@media(max-width:850px){.layout{display:block}.sidebar{display:none}.mobile-tabs{position:sticky;top:71px;z-index:25;display:flex;gap:8px;overflow-x:auto;padding:10px 14px;background:#eae3d5f5;border-bottom:1px solid var(--line)}.mobile-tabs .tab-button{flex:0 0 auto;width:auto;white-space:nowrap}.grid,.metrics{grid-template-columns:1fr 1fr}.content{padding:22px 16px 42px}.user-meta{display:none}}@media(max-width:560px){.topbar{padding:12px 14px}.brand small{display:none}.grid,.metrics,.form-row{grid-template-columns:1fr}.auth-page{background:var(--cream)}.auth-card{padding:24px 20px}}
