:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--color-bg); color:var(--color-text); font-family:"Inter","Noto Sans Thai",system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }
a { color:var(--color-accent); }
.loading { min-height:100vh; display:grid; place-items:center; color:var(--color-text-muted); }
.shell { max-width:1280px; margin:auto; padding:32px clamp(16px,4vw,44px) 64px; }
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:18px; padding:10px clamp(16px,4vw,44px); background:color-mix(in srgb,var(--color-bg) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--color-divider); }
.nav-brand { margin-right:auto; font-weight:600; display:flex; align-items:center; gap:9px; }
.brand-mark { width:18px; height:18px; border:1px solid var(--color-accent); border-radius:5px; box-shadow:0 0 14px color-mix(in srgb,var(--color-accent) 40%,transparent); }
.login { min-height:100vh; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.login-main { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:clamp(40px,7vw,96px); }
.login-art { border-left:1px solid var(--color-divider); background:radial-gradient(560px 380px at 74% 22%,var(--color-section-glow),transparent 70%),var(--color-section); min-height:240px; }
.login-box { max-width:430px; display:grid; gap:12px; }
.eyebrow { color:var(--color-accent); text-transform:uppercase; letter-spacing:.08em; font-size:12px; }
.muted { color:var(--color-neutral-400); }
.error { color:var(--color-accent-300); font-size:13px; }
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:20px 0; }
.toolbar .input { width:auto; min-width:180px; }
.title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.two-col { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:22px; align-items:start; }
.kpi-value { font-size:36px; line-height:1; font-weight:500; }
.section { margin-top:30px; }
.list { display:grid; gap:9px; }
.row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.row-main { flex:1; min-width:0; }
.bar { height:3px; border-radius:2px; background:var(--color-neutral-800); overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--color-accent); }
.table-wrap { overflow:auto; border-radius:var(--radius-md); border:1px solid var(--color-divider); }
table { width:100%; border-collapse:collapse; min-width:920px; }
th,td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--color-divider); font-size:13px; }
th { color:var(--color-text-muted); font-weight:500; background:var(--color-section); }
td.actions,th.actions { position:sticky; right:0; background:var(--color-surface); box-shadow:-8px 0 14px rgba(0,0,0,.14); }
.employee-cards { display:none; }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.detail-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.avatar { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--color-section); border:1px solid var(--color-divider); color:var(--color-accent); font-size:19px; }
.detail-actions { margin-left:auto; display:flex; gap:8px; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.data-field dt { color:var(--color-text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.data-field dd { margin:4px 0 0; overflow-wrap:anywhere; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { display:inline-flex; gap:6px; align-items:center; padding:5px 9px; border:1px solid var(--color-divider); border-radius:999px; font-size:12px; background:var(--color-section); }
.chip button { border:0; background:none; color:inherit; cursor:pointer; padding:0; }
.documents { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.document { padding:12px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-section); }
dialog { width:min(920px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:0; box-shadow:var(--shadow-lg); }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(2px); }
.modal-head,.modal-foot { position:sticky; z-index:2; display:flex; align-items:center; gap:10px; padding:16px 20px; background:var(--color-surface); }
.modal-head { top:0; border-bottom:1px solid var(--color-divider); }
.modal-head h3 { margin:0; flex:1; }
.modal-body { padding:20px; }
.modal-foot { bottom:0; justify-content:flex-end; border-top:1px solid var(--color-divider); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field.full { grid-column:1/-1; }
.field label { display:block; margin-bottom:5px; font-size:12px; color:var(--color-text-muted); }
.inline { display:flex; gap:8px; align-items:center; }
.inline > * { min-width:0; }
.effect { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12px; margin-top:6px; }
.multi { position:relative; }
.multi summary { cursor:pointer; min-width:160px; list-style:none; }
.multi-panel { position:absolute; z-index:8; top:calc(100% + 5px); min-width:210px; max-height:260px; overflow:auto; padding:10px; border:1px solid var(--color-divider); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-md); }
.multi-panel label { display:block; padding:5px; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:30; opacity:0; pointer-events:none; padding:10px 16px; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-divider); transition:opacity .2s; }
#toast.show { opacity:1; }
.viewer { max-width:100%; max-height:70vh; display:block; margin:auto; }
.history-table { min-width:640px; }
@media(max-width:760px) {
  .nav { flex-wrap:wrap; }
  .two-col,.field-grid,.form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .table-wrap { display:none; }
  .employee-cards { display:grid; gap:10px; }
  .login-art { display:none; }
  .detail-actions { margin-left:0; width:100%; }
}