:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EDF1F6; --surface-3:#E1E7EF;
  --ink:#162034; --ink-2:#465169; --ink-3:#6A7489;
  --line:#D8DEE7; --line-2:#C3CBD8;
  --navy:#1D2F52; --navy-ink:#FFFFFF; --navy-soft:#E6ECF6;
  --appbar:#16264A; --on-appbar:#FFFFFF; --on-appbar-2:#AFC0DD;
  --gold:#94732F; --gold-soft:#F4ECDD;
  --ok:#2D7552; --ok-soft:#E2F0E8;
  --warn:#94600F; --warn-soft:#FAEFD9;
  --bad:#A33838; --bad-soft:#F7E3E3;
  --info:#2F4F8A; --info-soft:#E6ECF6;
  --focus:#3A63B8;
  --shadow:0 12px 32px rgba(15,27,51,.18);
  --w1:#1D2F52; --w2:#2F4F8A; --w3:#94732F; --w4:#465169; --w5:#5C7A8A;
  --f-ui:"IBM Plex Sans Thai Looped","Sarabun","Leelawadee UI","Tahoma",sans-serif;
  --f-display:"Noto Serif Thai","IBM Plex Sans Thai Looped","Leelawadee UI",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Consolas",monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num,td.n,th.n{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono)}
.muted{color:var(--ink-3)}
.small{font-size:.86rem}
.xs{font-size:.78rem}
.nowrap{white-space:nowrap}
.hide{display:none!important}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-4px}
.ic.sm{width:14px;height:14px;vertical-align:-2px}
.ic.lg{width:24px;height:24px}

/* ribbon + topbar */
.ribbon{background:var(--gold-soft);color:var(--gold);font-size:.8rem;padding:5px 16px;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.ribbon b{font-weight:600}
.topbar{background:var(--appbar);color:var(--on-appbar);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(16px,2.5vw,24px);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:32px;height:32px;border:1.5px solid var(--gold);color:var(--gold);border-radius:4px;display:grid;place-items:center;font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.04em;flex:none}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.02em}
.brand-sub{color:var(--on-appbar-2);font-size:.8rem;border-left:1px solid color-mix(in srgb,var(--on-appbar) 25%,transparent);padding-left:10px}
.top-right{display:flex;align-items:center;gap:14px;font-size:.84rem;color:var(--on-appbar-2);flex-wrap:wrap}
.who{display:flex;align-items:center;gap:9px;color:var(--on-appbar);text-align:left;line-height:1.3}
.who small{display:block;color:var(--on-appbar-2);font-size:.74rem}
.avatar{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--on-appbar) 16%,transparent);display:grid;place-items:center;font-size:.74rem;flex:none}
.btn-bar{background:transparent;border:1px solid color-mix(in srgb,var(--on-appbar) 30%,transparent);color:var(--on-appbar);border-radius:4px;padding:4px 12px;font-size:.8rem;cursor:pointer}
.btn-bar:hover{background:color-mix(in srgb,var(--on-appbar) 10%,transparent)}
.mode-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:.76rem;font-weight:500;background:color-mix(in srgb,var(--on-appbar) 14%,transparent);color:var(--on-appbar)}
.mode-pill.admin{background:color-mix(in srgb,var(--gold) 30%,transparent);color:#FCEFD9}
@media (max-width:700px){.brand-sub{display:none}}

/* หน้าบ้าน (พนักงาน/ผู้บริหาร): แถบบนสว่าง เป็นมิตร แยกจากหลังบ้านให้เห็นชัด */
body[data-mode="front"] .topbar{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
body[data-mode="front"] .brand-sub{color:var(--ink-3);border-color:var(--line)}
body[data-mode="front"] .top-right{color:var(--ink-2)}
body[data-mode="front"] .who{color:var(--ink)}
body[data-mode="front"] .who small{color:var(--ink-3)}
body[data-mode="front"] .avatar{background:var(--surface-3);color:var(--ink-2)}
body[data-mode="front"] .btn-bar{border-color:var(--line-2);color:var(--ink-2)}
body[data-mode="front"] .btn-bar:hover{background:var(--surface-2)}
body[data-mode="front"] .mode-pill{background:var(--surface-2);color:var(--ink-2)}

/* shell */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 88px)}
.sidenav{background:var(--surface);border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.sidenav .grp{font-size:.74rem;color:var(--ink-3);padding:14px 12px 4px;font-weight:600}
.sidenav button{display:flex;justify-content:flex-start;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:9px 12px;border-radius:4px;color:var(--ink-2);cursor:pointer;font-size:.9rem;line-height:1.4}
.sidenav button .lbl{min-width:0}
.sidenav button .badge{margin-left:auto}
.sidenav button:hover{background:var(--surface-2);color:var(--ink)}
.sidenav button.on{background:var(--navy-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--navy)}
.badge{background:var(--navy);color:var(--navy-ink);font-size:.7rem;border-radius:999px;padding:0 7px;font-weight:600;line-height:1.6}
.main{padding:24px clamp(16px,3vw,36px) 72px;min-width:0;max-width:1240px;width:100%;display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidenav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px;gap:4px}
  .sidenav .grp{display:none}
  .sidenav button{width:auto;white-space:nowrap}
}

/* หลังบ้าน (ฝ่ายบุคคล): แถบข้างเข้มแบบแผงควบคุม แยกจากหน้าบ้านให้เห็นชัด */
body[data-mode="admin"] .sidenav{background:#101A30;border-right:0}
body[data-mode="admin"] .sidenav .grp{color:rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.12);margin-top:8px;padding-top:14px}
body[data-mode="admin"] .sidenav button{color:#C3CCE0}
body[data-mode="admin"] .sidenav button:hover{background:rgba(255,255,255,.07);color:#fff}
body[data-mode="admin"] .sidenav button.on{background:rgba(210,178,116,.16);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
body[data-mode="admin"] .sidenav button .badge{background:var(--gold);color:#241B0A}
@media (max-width:860px){body[data-mode="admin"] .sidenav .grp{border-top:0;margin-top:0}}

/* page head */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap}
.page-head h1{font-family:var(--f-display);font-size:1.55rem;line-height:1.35;display:flex;align-items:center;gap:10px}
.page-head h1 .ic{color:var(--gold)}
.crumb{font-size:.82rem;color:var(--ink-3);margin-bottom:2px}
.crumb button{background:none;border:0;padding:0;color:var(--info);cursor:pointer;font-size:inherit}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;min-width:0}
.panel.tile{border-left:4px solid var(--line-2)}
.panel.tile-ok{border-left-color:var(--ok)}
.panel.tile-warn{border-left-color:var(--warn)}
.panel.tile-info{border-left-color:var(--info)}
.panel-h{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel-h h2{font-size:.98rem;display:flex;align-items:center;gap:8px}
.panel-h h2 .ic{color:var(--gold)}
.panel-h .muted{font-size:.84rem}
.panel-b{padding:16px}
.panel-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap}
.panel-f .note{margin-right:auto;font-size:.82rem;color:var(--ink-3)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* buttons */
.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:4px;padding:6px 16px;font-size:.88rem;cursor:pointer;line-height:1.5;white-space:nowrap}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--navy-ink);font-weight:500}
.btn.primary:hover{filter:brightness(1.1)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--info)}
.btn.sm{padding:3px 10px;font-size:.8rem}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:999px;font-size:.78rem;font-weight:500;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface);white-space:nowrap;line-height:1.75}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.chip.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.chip.gold{background:var(--gold-soft);color:var(--gold);border-color:transparent}

/* notes */
.note-box{border-radius:6px;padding:12px 16px;font-size:.9rem;display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.note-box.info{background:var(--info-soft);color:var(--ink)}
.note-box.warn{background:var(--warn-soft);color:var(--ink)}
.note-box.ok{background:var(--ok-soft);color:var(--ink)}
.note-box.bad{background:var(--bad-soft);color:var(--ink)}
.note-box b{font-weight:600}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{border-collapse:collapse;width:100%;font-size:.88rem}
table.t th,table.t td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.t thead th{background:var(--surface-2);color:var(--ink-3);font-weight:500;font-size:.8rem;white-space:nowrap}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr.click:hover td{background:var(--surface-2)}
table.t td.c,table.t th.c{text-align:center}
table.t td.r,table.t th.r{text-align:right}
table.t .sub{display:block;color:var(--ink-3);font-size:.78rem;line-height:1.4}
table.t tfoot td{background:var(--surface-2);font-weight:600}
table.t.dense th,table.t.dense td{padding:6px 10px}
td.hl{background:var(--gold-soft)}

/* fields */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field > span{font-size:.8rem;color:var(--ink-3);font-weight:500}
.inp,select.inp,textarea.inp{border:1px solid var(--line-2);background:var(--surface);border-radius:4px;padding:6px 10px;font-size:.9rem;width:100%;min-width:0}
textarea.inp{resize:vertical;min-height:64px;line-height:1.55}
.inp:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.inp[readonly]{background:var(--surface-2);color:var(--ink-2)}
.inp.num{text-align:right;font-family:var(--f-mono)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.check{display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:.9rem;line-height:1.5}
.check input{margin-top:4px;accent-color:var(--navy)}
.radio-set{display:flex;flex-direction:column;gap:6px}

/* tabs / segmented */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;color:var(--ink-2);cursor:pointer;white-space:nowrap;font-size:.9rem;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--navy);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;flex-wrap:wrap}
.seg button{background:var(--surface);border:0;border-right:1px solid var(--line-2);padding:5px 14px;font-size:.84rem;color:var(--ink-2);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:var(--navy-ink)}

/* definition list */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;font-size:.9rem;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}

/* steps (my form) */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.steps li:last-child{border-bottom:0}
.steps b{font-weight:600;margin-right:6px}

/* task list */
.tasks{list-style:none;margin:0;padding:0}
.tasks li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.tasks li:last-child{border-bottom:0}
.tasks .who-l{line-height:1.4}
.tasks .who-l small{display:block;color:var(--ink-3);font-size:.78rem}
@media (max-width:560px){.tasks li{grid-template-columns:minmax(0,1fr) auto}.tasks li .chip{grid-column:1}}

/* progress bar */
.pbar{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-3)}
.pbar i{display:block;width:90px;height:6px;border-radius:3px;background:var(--surface-3);position:relative;overflow:hidden}
.pbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--ok)}

/* rating screen */
.rate-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.rate-layout{grid-template-columns:minmax(0,1fr)}}
.itemlist{list-style:none;margin:0;padding:6px 0}
.itemlist .h{padding:10px 16px 4px;font-size:.76rem;color:var(--ink-3);font-weight:600}
.itemlist button{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:none;border:0;padding:7px 16px;color:var(--ink-2);cursor:pointer;line-height:1.45;font-size:.86rem}
.itemlist button:hover{background:var(--surface-2)}
.itemlist button.cur{background:var(--navy-soft);color:var(--ink);font-weight:500;box-shadow:inset 3px 0 0 var(--navy)}
.itemlist .m{min-width:22px;height:20px;border-radius:10px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:.7rem;font-family:var(--f-mono);flex:none;padding:0 4px}
.itemlist .m.done{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.rate{padding:20px;display:flex;flex-direction:column;gap:16px}
.rate .q{font-size:1.1rem;font-weight:600;line-height:1.5}
.scale{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.sc{border:1px solid var(--line-2);background:var(--surface);border-radius:6px;padding:10px 6px 8px;cursor:pointer;display:grid;gap:1px;justify-items:center;color:var(--ink-2)}
.sc b{font-family:var(--f-display);font-size:1.4rem;color:var(--ink);line-height:1.2}
.sc small{font-size:.72rem;color:var(--ink-3)}
.sc:hover:not(:disabled){border-color:var(--navy)}
.sc.tgt{border-style:dashed;border-color:var(--gold)}
.sc.on{background:var(--navy);border-color:var(--navy);border-style:solid}
.sc.on b,.sc.on small{color:var(--navy-ink)}
.sc:disabled{cursor:default}
.behav{background:var(--surface-2);border-radius:4px;padding:10px 14px;font-size:.86rem;color:var(--ink-2)}
.behav b{color:var(--ink);font-weight:600}

/* grid rating */
.gcell{width:42px;height:34px;text-align:center;font-family:var(--f-mono);font-size:.95rem;border:1px solid var(--line-2);border-radius:4px;background:var(--surface)}
.gcell::placeholder{color:var(--line-2)}
.gcell:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.gcell.err{border-color:var(--bad);background:var(--bad-soft)}
.gcell[readonly]{border-color:transparent;background:transparent}
tr.sent td{background:color-mix(in srgb,var(--ok-soft) 60%,transparent)}
.kbd{font-family:var(--f-mono);font-size:.74rem;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:var(--surface)}

/* KPI rows */
.kpi{border:1px solid var(--line);border-radius:6px;background:var(--surface);display:grid;gap:12px;padding:14px 16px}
.kpi-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.kpi-h h3{font-size:.95rem}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px}
.kpi-grid .wide{grid-column:1/-1}
.rubric{border:1px solid var(--line);border-radius:4px;font-size:.84rem}
.rubric summary{padding:6px 12px;cursor:pointer;color:var(--info)}
.rubric ol{margin:0;padding:4px 14px 10px 14px;list-style:none;display:grid;gap:6px}
.rubric li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;color:var(--ink-2)}
.rubric li b{font-family:var(--f-mono);color:var(--ink)}

/* score summary */
.scorecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sc-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:2px}
.sc-card .k{font-size:.8rem;color:var(--ink-3)}
.sc-card .v{font-family:var(--f-display);font-size:1.8rem;line-height:1.3;font-variant-numeric:tabular-nums}
.sc-card .v small{font-size:.9rem;color:var(--ink-3);font-family:var(--f-ui)}
.sc-card.grade{border-color:var(--navy);background:var(--navy-soft)}
.gradebadge{display:inline-grid;place-items:center;min-width:30px;height:26px;border-radius:4px;font-family:var(--f-display);font-weight:700;background:var(--navy-soft);color:var(--ink);padding:0 6px}

/* formula page */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px 28px}
.set{display:flex;flex-direction:column;gap:8px}
.set > b{font-size:.9rem}
.set .src{font-size:.78rem;color:var(--ink-3)}
.wtbl input{width:64px}
.sbx input{width:48px;height:30px;text-align:center;font-family:var(--f-mono);border:1px solid var(--line-2);border-radius:4px;background:var(--surface);font-size:.9rem}
.sbx input:focus{outline:2px solid var(--focus);outline-offset:0}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cmp > div{border:1px solid var(--line);border-radius:6px;padding:14px 16px;background:var(--surface);display:grid;gap:6px}
.cmp h4{font-size:.9rem}
.cmp .big{font-family:var(--f-display);font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:1.3}
.cmp .line{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;border-bottom:1px dashed var(--line-2);padding-bottom:3px}
.cmp .line span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.cmp .line:last-child{border-bottom:0}

/* login */
.login{min-height:calc(100vh - 30px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.login-side{background:var(--appbar);color:var(--on-appbar);padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.login-side h1{font-family:var(--f-display);font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:700;letter-spacing:.01em;line-height:1.2}
.login-side p{color:var(--on-appbar-2);max-width:40ch}
.login-side .brand-mark{width:44px;height:44px;font-size:.78rem}
.login-main{display:grid;place-items:center;padding:32px 16px}
.login-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}
.login-card h2{font-family:var(--f-display);font-size:1.5rem}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);cursor:pointer;font-size:.95rem;font-weight:500}
.gbtn:hover{border-color:var(--navy)}
.gbtn .g{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.acct-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:6px;max-height:min(56vh,520px);overflow:auto;background:var(--surface)}
.acct-list .h{padding:8px 14px 4px;font-size:.74rem;color:var(--ink-3);font-weight:600;background:var(--surface-2);position:sticky;top:0}
.acct-list button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 14px;cursor:pointer;line-height:1.35}
.acct-list button:hover{background:var(--navy-soft)}
.acct-list .avatar{background:var(--surface-3);color:var(--ink-2)}
.acct-list small{display:block;color:var(--ink-3);font-size:.76rem}
.hint{font-size:.84rem;color:var(--ink-3);display:grid;gap:6px}
.hint ol{margin:0;padding-left:1.2em;display:grid;gap:4px}
@media (max-width:820px){.login{grid-template-columns:minmax(0,1fr)}.login-side{gap:16px}}

/* modal + toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,16,30,.5);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column}
.modal.wide{max-width:980px}
.modal-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-h h3{font-family:var(--f-display);font-size:1.12rem}
.modal-b{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.x{background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink-3);padding:4px 8px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:8px 18px;border-radius:6px;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
.empty{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:.9rem}

@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* file button (แทนปุ่ม Choose File ของเบราว์เซอร์) */
.file-btn{position:relative;display:inline-flex;align-items:center;overflow:hidden;cursor:pointer}
.file-btn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.file-btn:focus-within{outline:2px solid var(--focus);outline-offset:2px}

/* checklist เริ่มต้นใช้งาน */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo .n{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:.86rem;color:var(--ink-3)}
.todo li.now .n{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.todo li.done .n{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.todo li.now{background:var(--navy-soft)}
.todo .ttl{display:flex;align-items:center;gap:8px}
.todo .ttl b{font-weight:600}
.todo .ttl .ic{color:var(--ink-3)}
.todo li.now .ttl .ic{color:var(--navy)}
.todo li.done .ttl .ic{color:var(--ok)}
.todo .t .d{display:block;color:var(--ink-2);font-size:.86rem;line-height:1.5;margin-top:4px}
.todo .t .s{display:block;margin-top:6px}
.todo .a{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.todo li{grid-template-columns:36px minmax(0,1fr)}.todo .a{grid-column:2;justify-content:flex-start}}

/* แจ้งข้อสังเกต */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--navy);color:var(--navy-ink);border:0;border-radius:999px;padding:10px 18px;font-size:.88rem;font-weight:500;box-shadow:var(--shadow);cursor:pointer}
.fab:hover{filter:brightness(1.12)}
.notes-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.notes-list li{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:grid;gap:4px;background:var(--surface-2)}
.notes-list .m{font-size:.76rem;color:var(--ink-3)}
.help-steps{margin:0;padding-left:1.3em;display:grid;gap:8px;font-size:.93rem}
.help-steps li::marker{font-family:var(--f-mono);color:var(--gold)}
.qrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 0}
.next-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 16px}

/* competency review page */
.lead{color:var(--ink-2);font-size:.95rem;max-width:80ch}
h4.sub{font-size:.95rem;font-weight:600;margin-top:4px}

/* แถบสัดส่วนน้ำหนัก (หน้าเกณฑ์การประเมินสมรรถนะ) */
.wbar{display:flex;border-radius:6px;overflow:hidden;min-height:48px;font-size:.78rem;line-height:1.3;border:1px solid var(--line)}
.wbar > div{padding:7px 10px;display:flex;flex-direction:column;justify-content:center;min-width:0;color:#fff}
.wbar b{font-family:var(--f-mono);font-weight:600;display:block;font-size:.88rem}
.wbar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbar .w1{background:var(--w1)}
.wbar .w2{background:var(--w2)}
.wbar .w3{background:var(--w3)}
.wbar .w4{background:var(--w4)}
.wbar .w5{background:var(--w5)}
@media (max-width:560px){.wbar{flex-direction:column}.wbar > div{width:100%!important}}
.wbar-cap{font-size:.8rem;color:var(--ink-3);margin-top:6px}

/* พฤติกรรมบ่งชี้ตามระดับ (กรอบสมรรถนะ 2569) */
.behav .muted{font-weight:400}
.behav ul{margin:4px 0 8px;padding-left:1.3em;display:grid;gap:3px}
.behav .beh-list{margin-top:8px}
.beh-h{margin-top:10px;font-weight:600;color:var(--ink)}
.beh-h.beh-pre{font-weight:400;font-style:italic;color:var(--ink-3)}
.beh-lv{padding-top:8px;border-top:1px solid var(--line)}
.behav > .beh-lv:first-of-type{border-top:0;padding-top:0}
.beh-more{margin-top:10px;font-size:.84rem}
.beh-more summary{cursor:pointer;color:var(--info)}
.beh-more p{margin:8px 0 0;color:var(--ink-2)}
.sc.na{opacity:.38;border-style:dotted}