/* ---------- Design tokens: light (default, un-stamped) ---------- */
:root{
  /* บอกเบราว์เซอร์ให้ใช้จานสีอ่อนกับตัวควบคุมของระบบ (dropdown, checkbox, scrollbar ฯลฯ)
     ไม่ตั้งไว้จะพึ่งค่าเริ่มต้นของเครื่อง ซึ่งอาจกลายเป็นตัวเลือกในดรอปดาวน์สีเข้มบนพื้นเข้ม อ่านไม่ออก */
  color-scheme: light;
  --ground:#F8F6F1;
  --surface:#FFFFFF;
  --surface-2:#F1EEE6;
  --tint:#DCEAE4;
  --line:#E4E0D5;
  --line-soft:#ECE9DF;
  --ink:#151C1B;
  --ink-2:#4B564F;
  --ink-3:#7C877E;
  --accent:#0E6B5C;
  --accent-ink:#0E6B5C;
  --accent-soft:#DCEAE4;
  --gold:#A87A1F;
  --gold-soft:#F3E7C9;
  --ok:#1D7A4C;
  --ok-soft:#DCEFE3;
  --warn:#96600A;
  --warn-soft:#F7E9CD;
  --brand-ground:#0B2622;
  --on-accent:#FFFFFF;
  --ext:#3B5BA9;
  --ext-soft:#E3E9F7;
  --shadow:0 1px 2px rgba(21,28,27,.05),0 20px 40px -18px rgba(21,28,27,.16);
  --shadow-lift:0 10px 30px -10px rgba(21,28,27,.24);
  --r:16px;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  --glass-border:rgba(255,255,255,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0E1613;
    --surface:#16211D;
    --surface-2:#1C2924;
    --tint:#14302B;
    --line:#2B3833;
    --line-soft:#222E29;
    --ink:#EDEFEA;
    --ink-2:#A9B6AE;
    --ink-3:#7C8A82;
    --accent:#3FAFA2;
    --accent-ink:#57C4B6;
    --accent-soft:#14302B;
    --gold:#D7A745;
    --gold-soft:#3A2E14;
    --ok:#5BC98D;
    --ok-soft:#123425;
    --warn:#E0AB55;
    --warn-soft:#352915;
    --brand-ground:#081C19;
  --on-accent:#06201D;
  --ext:#9DB2EC;
  --ext-soft:#1C2440;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.55);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.65);
    --glass-bg:linear-gradient(180deg,rgba(22,33,29,.72),rgba(22,33,29,.42));
    --glass-border:rgba(255,255,255,.08);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0E1613;
  --surface:#16211D;
  --surface-2:#1C2924;
  --tint:#14302B;
  --line:#2B3833;
  --line-soft:#222E29;
  --ink:#EDEFEA;
  --ink-2:#A9B6AE;
  --ink-3:#7C8A82;
  --accent:#3FAFA2;
  --accent-ink:#57C4B6;
  --accent-soft:#14302B;
  --gold:#D7A745;
  --gold-soft:#3A2E14;
  --ok:#5BC98D;
  --ok-soft:#123425;
  --warn:#E0AB55;
  --warn-soft:#352915;
  --brand-ground:#081C19;
  --on-accent:#06201D;
  --ext:#9DB2EC;
  --ext-soft:#1C2440;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -12px rgba(0,0,0,.55);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5),0 18px 38px -14px rgba(0,0,0,.65);
  --glass-bg:linear-gradient(180deg,rgba(22,33,29,.72),rgba(22,33,29,.42));
  --glass-border:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
/* ขยายทั้งหน้า 15% — หน่วย vh ภายใต้ zoom ถูกขยายตามไปด้วย
   อะไรที่ต้องสูงเท่าหน้าจอพอดีให้ใช้ var(--screen-h) แทน 100vh */
:root{--zoom:1.15;--screen-h:calc(100vh / var(--zoom))}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  zoom:var(--zoom);
}
h1,h2,h3,.display{font-family:"Prompt","IBM Plex Sans Thai",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance;margin:0}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
svg{display:block}
.hidden{display:none !important}
[hidden]{display:none !important}

/* ============ LOGIN ============ */
#login{
  min-height:var(--screen-h);display:grid;place-items:center;padding:32px 16px;position:relative;
  background:#CFE3EE url("img/login-bg.jpg") center 70% / cover no-repeat;
}
#login::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,28,25,.12),rgba(8,28,25,.38));
}
.login-card{
  position:relative;width:100%;max-width:400px;padding:34px 34px 26px;text-align:center;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);border-radius:22px;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 60px -20px rgba(8,28,25,.45),0 2px 6px rgba(8,28,25,.08);
  animation:loginIn .5s cubic-bezier(.16,1,.3,1) both;
  /* การ์ดสว่างเสมอ ให้เข้ากับภาพกลางวันและโลโก้อ่านชัดในทุกธีม */
  color-scheme:light;
  --surface:#FFFFFF;--surface-2:#F1EEE6;--line:#E4E0D5;--line-soft:#ECE9DF;
  --ink:#151C1B;--ink-2:#4B564F;--ink-3:#7C877E;--accent:#0E6B5C;--accent-ink:#0E6B5C;
  color:var(--ink);
}
#login .btn-primary{color:#fff}
#login .err{color:#C0392B}
@keyframes loginIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.login-card{animation:none}}
.login-logo{width:128px;height:128px;margin:-6px auto 6px;display:block}
.login-card h1{font-size:26px;font-weight:600;margin:0 0 4px}
.login-card .sub{color:var(--ink-3);font-size:14px;margin:0 0 20px}
.login-hint{
  display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 20px;padding:11px 14px;text-align:left;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
}
.login-hint dt{font-weight:600;color:var(--ink)}
.login-hint dd{margin:0}
.login-hint b{color:var(--accent-ink);font-weight:600}
.login-card form{text-align:left}
.mark{width:40px;height:40px;border-radius:11px;background:#3FAFA2;color:#07201E;display:grid;place-items:center;font-family:"Prompt",sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;box-shadow:0 6px 16px rgba(63,175,162,.28)}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.field input{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.field input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:inset 0 2px 4px rgba(0,0,0,.03)}

/* ---- หน้าเข้าสู่ระบบ: ช่องกรอกมีชีวิตชีวา ---- */
.field label{transition:color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.field:focus-within label{color:var(--accent);transform:translateX(4px)}
.fin{position:relative;display:flex;align-items:center}
.fin input{width:100%;padding-left:44px}
.fin .fic{position:absolute;left:14px;width:19px;height:19px;color:var(--ink-3);pointer-events:none;z-index:1;
  transition:color .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.fin:focus-within .fic{color:var(--accent);transform:scale(1.18) rotate(-8deg)}
.fin .fic .shackle{transition:transform .45s cubic-bezier(.34,1.56,.64,1);transform-origin:16px 10.5px}
.fin:focus-within .fic .shackle{transform:rotate(18deg) translateY(-1px)}   /* แม่กุญแจเปิด */
.fin .fic.pop{animation:ficPop .28s ease}
@keyframes ficPop{50%{transform:scale(1.34) rotate(-12deg)}}
/* เส้นแสงไล่สีวิ่งใต้ช่องที่กำลังพิมพ์ */
.fin::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,#14907C,#E2BD6B,#2BB39C,#14907C);background-size:300% 100%;
  transform:scaleX(0);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fin:focus-within::after{transform:scaleX(1);animation:finFlow 2.6s linear infinite}
@keyframes finFlow{to{background-position:-300% 0}}
.login-card .field input:focus{box-shadow:0 0 0 4px rgba(14,107,92,.13),0 10px 24px -14px rgba(14,107,92,.55);transform:translateY(-1px);animation:ringIn .5s ease}
@keyframes ringIn{from{box-shadow:0 0 0 0 rgba(14,107,92,.45)}}
.pw-eye{position:absolute;right:8px;width:34px;height:34px;border:0;background:none;border-radius:9px;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:color .2s,background .2s}
.pw-eye:hover{background:var(--surface-2);color:var(--accent)}
.pw-eye svg{width:18px;height:18px}
.pw-eye .slash{stroke-dasharray:23;stroke-dashoffset:0;transition:stroke-dashoffset .3s ease}
.pw-eye.on .slash{stroke-dashoffset:23}
.fin input#p{padding-right:46px}
.caps{margin:-2px 0 0;font-size:12px;color:#B7791F;font-weight:600;animation:loginIn .25s ease}
/* ปุ่ม: กำลังเข้า (วงหมุน) · สำเร็จ (เครื่องหมายถูก) */
.btn-primary .bl{display:inline-flex;align-items:center;gap:10px}
.btn-primary.loading .bl::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-primary.ok{background:#14907C;box-shadow:0 0 0 6px rgba(20,144,124,.18),0 8px 22px rgba(14,107,92,.45)}
.btn-primary.ok .bl::before{content:"";width:16px;height:9px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-2px) rotate(-45deg);animation:okTick .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes okTick{from{transform:translateY(-2px) rotate(-45deg) scale(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.login-card.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.login-card.leaving{animation:cardOut .6s cubic-bezier(.7,0,.84,0) forwards}
@keyframes cardOut{to{opacity:0;transform:scale(.94) translateY(-10px)}}
/* วงเปิดหน้าระบบ: ขยายจากปุ่มจนเต็มจอ แล้วจางออก */
.login-reveal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at var(--x) var(--y),#1A8C78,#0E6B5C 45%,#0B3F37);
  clip-path:circle(0 at var(--x) var(--y));animation:revealIn .75s cubic-bezier(.65,0,.35,1) forwards}
.login-reveal.out{animation:revealOut .5s ease forwards;clip-path:circle(150% at var(--x) var(--y))}
@keyframes revealIn{to{clip-path:circle(150% at var(--x) var(--y))}}
@keyframes revealOut{from{opacity:1}to{opacity:0;transform:scale(1.04)}}
.lr-in{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-align:center;opacity:0;transform:translateY(14px) scale(.96);animation:lrIn .5s .35s cubic-bezier(.16,1,.3,1) forwards}
.lr-in img{width:96px;height:96px;border-radius:50%;background:#fff;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.3);margin-bottom:10px}
.lr-in b{font-family:"Prompt",sans-serif;font-size:30px;font-weight:600;letter-spacing:.01em}
.lr-in span{font-family:"Prompt",sans-serif;font-size:20px;color:#E9D9A8}
@keyframes lrIn{to{opacity:1;transform:none}}
/* หน้าระบบค่อย ๆ เลื่อนเข้ามาหลังเข้าสู่ระบบ */
.app-entering .sidebar{animation:appSide .7s cubic-bezier(.16,1,.3,1) both}
.app-entering .topbar{animation:appDrop .6s .08s cubic-bezier(.16,1,.3,1) both}
.app-entering main .view.on > *{animation:appUp .7s cubic-bezier(.16,1,.3,1) both}
.app-entering main .view.on > *:nth-child(2){animation-delay:.08s}
.app-entering main .view.on > *:nth-child(3){animation-delay:.16s}
.app-entering main .view.on > *:nth-child(4){animation-delay:.24s}
.app-entering main .view.on > *:nth-child(n+5){animation-delay:.3s}
@keyframes appSide{from{opacity:0;transform:translateX(-28px)}}
@keyframes appDrop{from{opacity:0;transform:translateY(-16px)}}
@keyframes appUp{from{opacity:0;transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.fin::after,.fin .fic,.login-card.shake,.app-entering *{animation:none !important;transition:none !important}}
.btn-primary{
  width:100%;margin-top:10px;background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:13px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 14px rgba(14,107,92,.3);
}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#06201D}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,107,92,.4)}
.btn-primary:active{transform:translateY(1px)}
.err{color:#C0392B;font-size:13px;min-height:19px;margin:9px 0 0}
:root[data-theme="dark"] .err{color:#F0837A}

/* ============ APP SHELL ============ */
#app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:var(--screen-h)}

/* ---- แถบข้างสีเขียวเข้ม (เหมือนกันทั้งโหมดสว่างและมืด) ---- */
.sidebar{
  background:#0B2622 radial-gradient(120% 50% at 0% 0%,rgba(63,175,162,.16),transparent 60%);color:#E9F3F1;
  display:flex;flex-direction:column;gap:22px;padding:22px 18px 18px;position:sticky;top:0;height:var(--screen-h);z-index:40;overflow-y:auto;
}
.sb-brand{display:flex;align-items:center;gap:12px;padding:6px 4px;margin:-6px 0;border-radius:14px;cursor:pointer;transition:background .15s}
.sb-brand:hover{background:rgba(255,255,255,.06)}
.sb-brand:focus-visible{outline:2px solid #E2BD6B;outline-offset:2px}
.sb-logo{width:48px;height:48px;border-radius:50%;background:#fff;padding:3px;object-fit:contain;flex:0 0 auto;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sb-brand b{display:block;font-family:"Prompt",sans-serif;font-size:18px;font-weight:600;color:#fff;line-height:1.25}
.sb-brand span{display:block;font-size:11.5px;color:#9FC4BE;line-height:1.45}

.usercard{display:flex;align-items:center;gap:12px;background:#113A33;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
.avatar{width:42px;height:42px;border-radius:13px;background:#E2BD6B;color:#0B2622;display:grid;place-items:center;font-family:"Prompt",sans-serif;font-weight:600;font-size:14px;flex:0 0 auto}
.uc-text{min-width:0}
.usercard .nm{font-weight:600;font-size:14px;line-height:1.4;color:#fff;overflow-wrap:anywhere}
.usercard .ps{font-size:11.5px;color:#9FC4BE;line-height:1.45}
.rolebadge{display:block;margin-top:1px;font-size:12px;font-weight:600;color:#E2BD6B;line-height:1.45}

nav{display:flex;flex-direction:column;gap:2px}
nav .eyebrow{padding:0 14px 6px;color:#9FC4BE;opacity:.85;letter-spacing:0;text-transform:none;font-size:12px;font-weight:600}
nav button,nav a.navlink{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  padding:10px 14px;border-radius:13px;cursor:pointer;color:#B9D3CE;font-size:14px;font-weight:500;transition:background .15s,color .15s;
}
nav button:hover,nav a.navlink:hover{background:rgba(255,255,255,.06);color:#fff}
nav a.navlink{text-decoration:none}
nav a.navlink.site{border:1px solid rgba(226,189,107,.45);background:rgba(226,189,107,.10);color:#F1DDA8;font-weight:600}
nav a.navlink.site svg{color:#E2BD6B}
nav a.navlink.site:hover{background:rgba(226,189,107,.2);color:#fff}
nav a.navlink svg.ext{margin-left:auto;width:14px;height:14px;opacity:.6}
nav button[aria-current="true"]{background:#16463E;color:#fff;font-weight:600}
nav button[aria-current="true"] svg{color:#E2BD6B}
nav button svg,nav a.navlink svg{width:19px;height:19px;flex:0 0 auto;stroke-width:1.8}
nav button .ct{margin-left:auto;font-size:11.5px;color:#9FC4BE;font-family:"IBM Plex Mono",monospace;opacity:.8}
.sidebar :focus-visible{outline-color:#E2BD6B}
.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.logout{display:flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:10px 14px;cursor:pointer;color:#B9D3CE;font-size:14px;transition:border-color .15s,color .15s,background .15s}
.logout:hover{border-color:#F0837A;color:#F0837A;background:rgba(240,131,122,.06)}
.logout svg{width:18px;height:18px;stroke-width:1.8}
.build{font-size:11px;color:#7FA8A2;padding:0 6px;opacity:.8}

/* ---- ส่วนเนื้อหา ---- */
main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:16px 40px;
  background:color-mix(in srgb,var(--ground) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.menubtn{display:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px;cursor:pointer;color:var(--ink-2)}
.menubtn svg{width:19px;height:19px;stroke-width:1.8}
.search{position:relative;flex:1;max-width:540px}
.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke-width:1.8;color:var(--ink-3)}
.search input{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:12px 84px 12px 46px;font-size:14px;
  box-shadow:0 1px 2px rgba(21,28,27,.04);transition:border-color .15s,box-shadow .15s;
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border-radius:8px;padding:3px 8px;pointer-events:none}
.iconbtn{display:grid;place-items:center;width:46px;height:46px;background:var(--surface);border:1px solid var(--line);border-radius:50%;cursor:pointer;color:var(--ink-2);transition:border-color .15s,color .15s}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.iconbtn svg{width:19px;height:19px;stroke-width:1.8}
.topbar .spacer{flex:1}

.page{padding:8px 40px 60px;max-width:1260px;width:100%}

/* ---- แบนเนอร์ภาพวิทยาลัย ---- */
.hero{
  position:relative;overflow:hidden;border-radius:28px;min-height:232px;margin-bottom:32px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px 32px 30px 40px;color:#fff;
  background:linear-gradient(90deg,rgba(11,38,34,.94) 0%,rgba(11,38,34,.74) 55%,rgba(11,38,34,.28) 100%),#113A33 url("img/login-bg.jpg") center 62% / cover no-repeat;
  box-shadow:0 22px 40px -26px rgba(11,38,34,.6);
}
.hero-text{flex:1 1 360px;min-width:0}
.datechip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border-radius:999px;padding:5px 14px 5px 12px;font-size:12.5px;font-weight:600;color:#E9F3F1;margin-bottom:10px}
.datechip svg{width:15px;height:15px;stroke-width:1.8;color:#E2BD6B}
.hero h2{font-size:clamp(26px,3vw,34px);font-weight:600;line-height:1.3;color:#fff}
.hero p{margin:8px 0 0;max-width:58ch;font-size:14px;line-height:1.65;color:#E9F3F1;opacity:.92}
.hero-stats{display:flex;gap:12px;flex-wrap:wrap}
.stat-tile{
  min-width:150px;display:flex;flex-direction:column;padding:14px 18px;border-radius:20px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.stat-tile b{font-family:"Prompt",sans-serif;font-size:26px;font-weight:600;line-height:1.2}
.stat-tile span{font-size:13px;color:#E9F3F1;line-height:1.5}

/* ---- หน้าหลัก: การ์ดระบบงาน ---- */
.sectools{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:-14px 0 24px;padding:10px 16px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow);
}
.sectools:empty{display:none}
.sectools{scroll-margin-top:96px}
.sectools .seg.pill{margin-left:auto}

/* ---- เลือกฝ่ายงาน (ผู้ที่เห็นทุกระบบ): ปุ่มเดียว + แผงรายชื่อฝ่าย ---- */
.deptchips{position:relative;display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.deptbtn{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;height:38px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s}
.deptbtn:hover,.deptbtn[aria-expanded="true"]{border-color:var(--accent)}
.deptbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.deptbtn svg{width:16px;height:16px;flex:none}
.deptbtn .dl{color:var(--ink-3);flex:none}
.deptbtn.on .dl{color:inherit;opacity:.75}
.deptbtn b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deptbtn .ct{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);background:var(--surface-2);padding:1px 8px;border-radius:999px}
.deptbtn .chev{display:inline-flex;transition:transform .2s}
.deptbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.deptclear{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.deptclear:hover{border-color:var(--accent);color:var(--accent-ink)}
.deptclear svg{width:14px;height:14px}
.deptpop{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(580px,calc(100vw - 40px));max-height:min(70vh,540px);overflow-y:auto;
  padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.deptpop[hidden]{display:none}
.deptq{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:9px 12px;font:inherit;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.dp-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink-3);margin:12px 4px 6px}
.dp-h::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.dp-h[hidden],.dp-grid[hidden]{display:none}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px}
.dp-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;border:0;background:none;font:inherit;font-size:13.5px;line-height:1.35;color:var(--ink);text-align:left;cursor:pointer}
.dp-item:hover{background:var(--surface-2)}
.dp-item[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff);font-weight:600}
.dp-item[hidden]{display:none}
.dp-item em{flex:none;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.dp-item[aria-pressed="true"] em{color:inherit;opacity:.85}
.dp-empty .dp-item{color:var(--ink-3)}
.dp-none{margin:10px 4px 4px;font-size:13px;color:var(--ink-3)}

/* หัวข้อฝ่ายที่กดเข้าไปดูหน้าของฝ่ายได้ */
.sectitle{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.sectitle svg{width:20px;height:20px;stroke-width:2.2;color:var(--ink-3);transition:transform .2s,color .2s}
.sectitle:hover{color:var(--accent-ink)}
.sectitle:hover svg{transform:translateX(3px);color:var(--accent-ink)}
.countpill.soft{font-family:inherit;font-weight:600;border-radius:999px;padding:2px 11px}
.countpill.ok{background:var(--ok-soft);color:var(--ok)}
.seg.pill{border-radius:999px;background:var(--surface-2);padding:4px}
.seg.pill button{border-radius:999px;padding:6px 14px;font-size:13px}
.seg.pill button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}

.sec{margin-bottom:34px}
.sechead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;min-height:40px}

/* ---- หน้าปกของฝ่าย (บนสุดของ "ระบบของฉัน") ---- */
.dept-banner{
  position:relative;overflow:hidden;border-radius:22px;min-height:clamp(240px,30vw,380px);margin-bottom:14px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow);
}
.dept-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dept-banner-overlay{
  position:relative;z-index:1;width:100%;padding:20px 26px;
  background:linear-gradient(0deg,rgba(6,16,14,.68) 0%,rgba(6,16,14,.15) 65%,transparent 100%);
}
.dept-banner-overlay h2{color:#fff;font-size:clamp(20px,2.4vw,26px);font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ---- ตัวแก้ไขภาพหน้าปก (หน้าจัดการของฝ่าย / แผงของแอดมิน) ---- */
.banner-edit{display:flex;flex-direction:column;gap:14px}
.banner-edit .dept-banner{margin-bottom:0;min-height:240px}
.bannergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.bannergrid button{border:0;background:none;padding:0;cursor:pointer;text-align:left;border-radius:22px;transition:transform .15s}
.bannergrid button:hover{transform:translateY(-2px)}
.bannergrid .dept-banner{min-height:120px;margin-bottom:0}
.sechead h3{font-size:22px;font-weight:600}
.sechead .seg{margin-left:auto}
.countpill.gold{background:var(--gold-soft);color:var(--gold);font-family:inherit;font-weight:600;border-radius:999px;padding:2px 11px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:20px;padding:22px 22px 18px;text-align:left;
  display:flex;flex-direction:column;gap:16px;cursor:pointer;box-shadow:var(--shadow);
  transition:border-color .2s,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;background:var(--surface-2);color:var(--ink-3)}
.card.live .ic{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.card.locked .ic{background:#B23A2C;color:#fff;box-shadow:none}
.card .ic svg{width:26px;height:26px;stroke-width:1.7}
.card-body{display:flex;flex-direction:column;gap:4px;flex:1}
.card h4{margin:0;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)}
.card p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.6}
.card-owner{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:12px;color:var(--ink-3)}
.card-owner svg{width:13px;height:13px;stroke-width:2;flex:0 0 auto}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line-soft);padding-top:14px}
.card-foot .act{font-size:14px;font-weight:500;color:var(--ink-3)}
.card.live .card-foot .act{color:var(--accent-ink)}
.card.locked .card-foot .act{color:#B23A2C}
.card .go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--surface-2);color:var(--ink-3);transition:transform .2s}
.card.live .go{background:var(--accent-soft);color:var(--accent-ink)}
.card.locked .go{background:#FBE3DF;color:#B23A2C}
:root[data-theme="dark"] .card.locked .go{background:#3A1D19;color:#F0837A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card.locked .go{background:#3A1D19;color:#F0837A}}
.card:hover .go{transform:translateX(3px)}
.card .go svg{width:16px;height:16px;stroke-width:2}

/* compact rows = ใช้ร่วมกัน */
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.rowitem{
  display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:16px;padding:13px 15px;cursor:pointer;text-align:left;box-shadow:0 1px 2px rgba(21,28,27,.04);
  transition:background .15s,border-color .15s,transform .15s;
}
.rowitem:hover{border-color:var(--accent);transform:translateY(-1px)}
.rowitem .ic{width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.rowitem .ic svg{width:19px;height:19px;stroke-width:1.7}
.rowitem .tx{min-width:0}
.rowitem .tx b{display:block;font-size:14.5px;font-weight:600}
.rowitem .tx span{font-size:12.5px;color:var(--ink-3)}
.rowitem .go{margin-left:auto;color:var(--ink-3);opacity:.6}
.rowitem .go svg{width:15px;height:15px;stroke-width:2}

/* ป้ายสถานะ (มีจุดสีนำหน้า) */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 11px 3px 9px;border-radius:999px;line-height:1.5}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.t-ready{background:var(--ok-soft);color:var(--ok)}
.t-dev{background:var(--warn-soft);color:var(--warn)}
.t-ext{background:var(--ext-soft);color:var(--ext)}


.empty{border:1px dashed var(--line);border-radius:var(--r);padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:4px}

.note{margin-top:8px;border-left:2px solid var(--accent);background:var(--surface);padding:14px 16px;border-radius:0 12px 12px 0;font-size:13px;color:var(--ink-2)}
.note b{font-weight:600;color:var(--ink)}
.note code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:var(--surface-2);padding:1px 5px;border-radius:4px}

.scrim{display:none}
@media (max-width:900px){
  #login{background-position:62% 70%}
  .login-card{padding:28px 22px 20px}
  .login-logo{width:104px;height:104px}
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:60;left:0;top:0;width:270px;transform:translateX(-104%);transition:transform .22s ease;box-shadow:var(--shadow-lift)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(6,16,22,.5);z-index:50}
  .menubtn{display:block}
  .topbar{padding:10px 16px}
  .kbd{display:none}
  .topbar .spacer{display:none}
  .search input{padding-right:16px}
  .iconbtn{width:42px;height:42px}
  .page{padding:6px 16px 48px}
  .hero{padding:24px 20px 20px;border-radius:22px;min-height:0;margin-bottom:24px}
  .hero-stats{width:100%;gap:8px}
  .sectools{margin:-10px 0 20px;padding:10px 14px}
  .deptchips{flex-basis:100%}
  .deptpop{width:auto;left:0;right:0}
  .deptbtn .dl{display:none}
  .stat-tile{flex:1 1 0;min-width:0;padding:10px 12px;border-radius:16px}
  .stat-tile b{font-size:21px}
  .stat-tile span{font-size:12px}
  .cards{grid-template-columns:1fr}
  .rows{grid-template-columns:1fr}
  .sechead h3{font-size:19px}
  .sechead .seg{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ============================================================
   ส่วนเพิ่มเติมสำหรับเวอร์ชัน Node server
   ============================================================ */
.view{display:none}
.view.on{display:block}

.phead{margin-bottom:24px}
.phead h2{font-size:25px;font-weight:600;letter-spacing:-.015em;margin:0}
.phead p{margin:6px 0 0;color:var(--ink-3);font-size:13.5px;max-width:62ch}
.phead .evaltabs{margin-top:16px}

/* ---- ปุ่ม ---- */
.btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--ink-2);
  transition:border-color .15s,color .15s,background .15s;
}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn svg{width:16px;height:16px;stroke-width:1.8}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(14,107,92,.25)}
:root[data-theme="dark"] .btn.pri{color:#06201D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{color:#06201D}}
.btn.pri:hover{filter:brightness(1.08);color:#fff}
:root[data-theme="dark"] .btn.pri:hover{color:#06201D}
.btn.danger:hover{border-color:#C0392B;color:#C0392B}
.btn.sm{padding:5px 9px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- แผง + ตาราง ---- */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}
.panel > header{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel > header h3{font-size:15.5px;font-weight:600;font-family:"Prompt",sans-serif}
.panel > header .sp{flex:1}
.panel > header .hint{font-size:12.5px;color:var(--ink-3)}
.panel-body{padding:18px}

.tbl-wrap{overflow-x:auto}
/* ตารางบนมือถือ (table.mcards): แถวเป็นการ์ด ไม่ต้องเลื่อนซ้าย-ขวา — ชื่อรายการขึ้นก่อนเต็มบรรทัด ช่องอื่นมีป้ายกำกับจากหัวตาราง */
@media (max-width:700px){
  .tbl-wrap:has(table.mcards){overflow:visible}
  table.mcards{min-width:0 !important;display:block}
  .mcards thead{display:none}
  .mcards tbody{display:block}
  .mcards tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
  .mcards tbody tr:hover{background:none}
  .mcards td{display:block;padding:0;border:0;min-width:0;text-align:left !important;white-space:normal}
  .mcards td[colspan]{grid-column:1/-1}
  .mcards td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-bottom:3px;text-transform:none;letter-spacing:0}
  .mcards td:has(.nm){grid-column:1/-1;order:-1}
  .mcards td:has(.nm)::before{display:none !important}
  .mcards td.acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .mcards td.acts::before{display:none !important}
  .mcards td.acts .btn{margin:0}
  .mcards .urlcell{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{padding:12px 18px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td .nm{font-weight:500}
td .sub{font-size:12.5px;color:var(--ink-3)}
td.acts{text-align:right;white-space:nowrap}
td.acts .btn{margin-left:5px}
.mono-sm{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2)}
.urlcell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}

.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--tint);color:var(--accent-ink)}
.pill.off{background:var(--surface-2);color:var(--ink-3)}
.pill.on{background:var(--ok-soft);color:var(--ok)}

/* ---- ฟอร์ม ---- */
.fgrid{display:grid;gap:16px}
/* ช่องในฟอร์มหดตามความกว้างกล่องได้ — ไม่ให้ข้อความยาว/ไม่ตัดบรรทัดดันฟอร์มจนล้นขอบจอมือถือ */
.fgrid > *{min-width:0}
.fgrid.two{grid-template-columns:1fr 1fr}
.f label{display:block;font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.f input,.f select,.f textarea,.rl-row input,.rl-add input{
  width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:14px;
  transition:all .2s cubic-bezier(.16,1,.3,1);
}
.f textarea{resize:vertical;min-height:66px;font-family:inherit}
.f input:focus,.f select:focus,.f textarea:focus,.rl-row input:focus,.rl-add input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.f .hint{font-size:12px;color:var(--ink-3);margin-top:5px}
.ssobox{margin-top:10px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.ssorow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px;font-size:12.5px;color:var(--ink-3)}
.ssorow span{flex:0 0 108px;font-weight:600}
.ssorow code{flex:1 1 200px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.rolepick{display:flex;flex-wrap:wrap;gap:8px}
.rolepick label{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer;margin:0;font-weight:400;color:var(--ink-2);
  transition:border-color .15s,background .15s,color .15s;
}
.rolepick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:500}
.rolepick input{accent-color:var(--accent);margin:0}

.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:150px;overflow-y:auto;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.iconpick button{display:grid;place-items:center;aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:none;cursor:pointer;color:var(--ink-3)}
.iconpick button:hover{background:var(--surface);color:var(--ink)}
.iconpick button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.iconpick svg{width:19px;height:19px;stroke-width:1.7}

/* ---- กล่องโต้ตอบ ---- */
dialog{border:0;padding:0;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lift);width:min(540px,calc(94vw / var(--zoom)));max-height:calc(var(--screen-h) * .88)}
dialog::backdrop{background:rgba(11,38,34,.5);backdrop-filter:blur(3px)}
dialog header{display:flex;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line-soft)}
dialog header h3{font-size:16.5px;font-weight:600;font-family:"Prompt",sans-serif}
dialog .dbody{padding:20px;overflow-y:auto;max-height:calc(var(--screen-h) * .62)}
dialog footer{display:flex;gap:9px;justify-content:flex-end;padding:15px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
dialog .derr{color:#C0392B;font-size:13px;margin:12px 0 0;min-height:0}
:root[data-theme="dark"] dialog .derr{color:#F0837A}

/* ---- แจ้งเตือน ---- */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
  background:var(--brand-ground);color:#fff;padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:500;z-index:300;
  transition:opacity .25s,transform .25s;box-shadow:var(--shadow-lift);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.bad{background:#B23A2C;color:#fff}

/* ---- แถบเตือนรหัสผ่านเริ่มต้น ---- */
.warnbar{
  display:flex;align-items:flex-start;gap:10px;background:var(--warn-soft);color:var(--warn);
  border-radius:12px;padding:12px 14px;font-size:13.5px;margin-bottom:20px;
}
.warnbar svg{width:18px;height:18px;stroke-width:1.8;flex:0 0 auto;margin-top:1px}
.warnbar b{font-weight:600}
.warnbar button{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}

nav .navsec{margin-top:14px}
.loading{padding:40px;text-align:center;color:var(--ink-3);font-size:13.5px}

@media (max-width:900px){
  .fgrid.two{grid-template-columns:1fr}
  td.acts .btn{margin:2px 0 2px 4px}
}

/* ---- แก้การตัดบรรทัดในตาราง ---- */
.tag,.pill{white-space:nowrap}
#v-apps table{min-width:920px}
#v-users table{min-width:820px}

/* ============================================================
   จัดการผู้ใช้: ค้นหา กรอง เลือกหลายคน
   ============================================================ */
.countpill{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);background:var(--surface-2);padding:3px 10px;border-radius:7px;font-variant-numeric:tabular-nums}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.toolbar .search{flex:1 1 240px;max-width:none}
.toolbar select,.panel > header select{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--ink-2);max-width:100%;
}
.toolbar select:focus,.panel > header select:focus{outline:none;border-color:var(--accent)}
.toolbar.plain{padding:0;border:0;margin:-8px 0 22px}
.toolbar .acad{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--ink-3);white-space:nowrap}
.toolbar .acad b{color:var(--ink);font-weight:600}
.toolbar .lbl{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.bulkbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px;
  background:var(--accent-soft);border-bottom:1px solid var(--line-soft);
}
.bulkbar b{font-size:13.5px;color:var(--accent-ink);margin-right:6px}
.bulkbar .sp{flex:1}
th.ck,td.ck{width:44px;padding-right:0}
td.ck input,th.ck input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
tbody tr.sel{background:var(--accent-soft)}
tbody tr.sel:hover{background:var(--tint)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.dnote{margin:0 0 14px;font-size:13.5px;color:var(--ink-3)}
.dnote:empty{display:none}
dialog.wide{width:min(680px,calc(94vw / var(--zoom)))}
dialog .derr ul{margin:6px 0 0;padding-left:20px}
dialog .derr b{font-weight:600}
.f textarea#im-rows{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;white-space:pre;overflow-x:auto}

/* ============================================================
   ระบบประเมิน
   ============================================================ */
.t-lock{background:#FBE3DF;color:#B23A2C}
:root[data-theme="dark"] .t-lock{background:#3A1D19;color:#F0837A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-lock{background:#3A1D19;color:#F0837A}}

.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent-ink);font-weight:600;box-shadow:0 1px 3px rgba(21,28,27,.12)}
.seg.sm button{padding:5px 11px;font-size:13px}
.seg .ct{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);margin-left:2px}

.termstate{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.termstate p{margin:0;font-size:13.5px;color:var(--ink-3);flex:1 1 260px}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column}
.stat span{font-size:12px;color:var(--ink-3);font-weight:600}
.stat b{font-size:17px;font-family:"Prompt",sans-serif;font-weight:600}
.stat em{font-style:normal;font-size:12px;color:var(--ink-3)}
.minibar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;width:120px;margin-bottom:4px;border:1px solid var(--line-soft)}
.minibar span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.evtable{min-width:680px}
.evtable td .pill{margin:2px 2px 2px 0}

/* ---- เลือกอาจารย์ ---- */
.pickfilter{margin-bottom:8px}
.pickchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pickchips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;font-weight:500}
.chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%}
.chip button:hover{background:rgba(0,0,0,.08)}
.picklist{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.f .picklist label{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0;border-bottom:1px solid var(--line-soft);cursor:pointer;font-weight:400}
.picklist label:last-child{border-bottom:0}
.picklist label:hover{background:var(--surface)}
.picklist input{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}
.picklist span{display:flex;flex-direction:column;min-width:0}
.picklist b{font-weight:500;font-size:14px;color:var(--ink)}
.picklist em{font-style:normal;font-size:12px;color:var(--ink-3)}
.hint-inline{font-weight:400;color:var(--ink-3);font-size:12.5px}

/* ---- นักศึกษา ---- */
.evprogress .panel-body{padding:16px 18px}
.evp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.evp-top b{font-size:15px;font-weight:600}
.evp-top span{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-3)}
.bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line-soft)}
.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#3FAFA2);transition:width .5s cubic-bezier(.16,1,.3,1)}
.evdone{display:flex;align-items:center;flex-wrap:wrap;gap:14px;background:var(--ok-soft);border-radius:var(--r);padding:16px 18px;margin-bottom:26px}
.evdone .ic{width:42px;height:42px;border-radius:12px;background:var(--surface);color:var(--ok);display:grid;place-items:center;flex:0 0 auto}
.evdone .ic svg{width:22px;height:22px;stroke-width:1.8}
.evdone > div{flex:1 1 220px;display:flex;flex-direction:column}
.evdone b{font-size:15px;font-weight:600;color:var(--ok)}
.evdone span{font-size:13px;color:var(--ink-2)}
.evlist{display:flex;flex-direction:column;gap:10px}
.evrow{
  display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;
  padding:14px 16px;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(21,28,27,.04);transition:border-color .15s,transform .15s,background .15s;width:100%;
}
.evrow:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.evrow:disabled{cursor:default;background:var(--surface-2);opacity:.85}
.evrow .ic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto}
.evrow.done .ic{background:var(--ok-soft);color:var(--ok)}
.evrow .ic svg{width:19px;height:19px;stroke-width:1.7}
.evrow .tx{min-width:0;flex:1}
.evrow .tx b{display:block;font-size:14.5px;font-weight:600}
.evrow .tx span{font-size:12.5px;color:var(--ink-3)}
.evrow .go{color:var(--ink-3)}
.evrow .go svg{width:16px;height:16px;stroke-width:2}

.backlink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink-3);cursor:pointer;padding:4px 0;margin-bottom:12px;font-size:13.5px}
.backlink svg{width:15px;height:15px;stroke-width:2;transform:rotate(180deg)}
.backlink:hover{color:var(--accent-ink)}
.scalekey{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-3);margin:-8px 0 18px}
.scalekey b{color:var(--ink-2);font-family:"IBM Plex Mono",monospace}
.step{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gold);background:var(--gold-soft);padding:3px 9px;border-radius:999px;white-space:nowrap}
.evsec .who{font-weight:600;font-size:14.5px}
.evsec .who .hint{font-weight:400}
fieldset.q{border:0;margin:0;padding:4px 0 18px;min-width:0}
fieldset.q + fieldset.q,.q + .q{border-top:1px solid var(--line-soft);padding-top:18px}
fieldset.q legend{display:flex;gap:10px;font-size:14.5px;font-weight:500;margin-bottom:12px;padding:0;line-height:1.5;float:left;width:100%}
fieldset.q legend + *{clear:both}

/* ---- แบบประเมิน: แถวกะทัดรัด ฟอนต์ Sarabun (TH Sarabun) ---- */
#evalBody{font-family:"Sarabun","IBM Plex Sans Thai",sans-serif}
#evalBody .phead h2,#evalBody .evsec h3{font-family:"Sarabun",sans-serif;font-weight:700}
#evalBody .evsec h3{font-size:19px}
#evalBody .evsec .panel-body{padding:6px 18px 14px}
#evalBody .qsec{font-size:17px;margin:14px 0 2px}
#evalBody .qhead{display:flex;align-items:flex-end;gap:16px;padding:6px 6px 6px 10px;font-size:13.5px;color:var(--ink-3);border-bottom:1px solid var(--line)}
#evalBody .qhead > span{flex:1}
#evalBody .qhead .scale span{width:40px;padding:0;border:0;background:none;display:block;text-align:center;line-height:1.15;font-size:13px;color:var(--ink-3)}
#evalBody fieldset.q{display:flow-root;padding:7px 6px 7px 10px;border-radius:8px}
#evalBody fieldset.q + fieldset.q{border-top:1px solid var(--line-soft);padding-top:7px}
#evalBody fieldset.q:hover{background:var(--surface-2)}
#evalBody fieldset.q legend{float:left;width:calc(100% - 246px);margin:0;padding-top:3px;font-size:17px;font-weight:400;line-height:1.45;gap:6px}
#evalBody fieldset.q legend + *{clear:none}
#evalBody .qn{font-family:"Sarabun",sans-serif;font-size:14px;height:auto;min-width:34px;width:auto;padding:1px 4px 0 0;background:none;color:var(--ink-3);font-weight:600;place-items:start}
#evalBody .scale{display:flex;gap:6px;float:right}
#evalBody .qhead .scale{float:none}
#evalBody .scale label{display:block}
#evalBody .scale label > span{
  width:40px;height:34px;padding:0;display:grid;place-items:center;border-radius:9px;
  font-family:"Sarabun",sans-serif;font-size:17px;font-weight:600;color:var(--ink-2)
}
#evalBody .scale input:checked + span{box-shadow:none}
#evalBody fieldset.q.missing{background:rgba(178,58,44,.08)}
#evalBody .f.q label{font-size:16px}
#evalBody .f.q textarea{font-family:inherit;font-size:16px}
#evalBody .scalekey{font-size:15px}
@media (max-width:640px){
  #evalBody .qhead{display:none}
  #evalBody fieldset.q{padding:10px 4px}
  #evalBody fieldset.q legend{width:100%;margin-bottom:8px}
  #evalBody .scale{float:none;clear:both;width:100%}
  #evalBody .scale label{flex:1}
  #evalBody .scale label > span{width:auto}
}
.qn{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--surface-2);color:var(--ink-3);display:grid;place-items:center;font-size:12px;font-weight:700;font-family:"IBM Plex Mono",monospace}
fieldset.q.missing legend{color:#B23A2C}
fieldset.q.missing .qn{background:#FBE3DF;color:#B23A2C}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.scale label{position:relative;cursor:pointer}
.scale input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.scale span{
  display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);font-size:12px;color:var(--ink-3);text-align:center;transition:all .15s;
}
.scale span b{font-size:18px;font-family:"Prompt",sans-serif;font-weight:600;color:var(--ink-2)}
.scale label:hover span{border-color:var(--accent)}
.scale input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(14,107,92,.25)}
.scale input:checked + span b{color:#fff}
.scale input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
fieldset.q.missing .scale span{border-color:#E6A49A}
.evsubmit{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin:6px 0 30px}
.evsubmit .derr{margin:0;color:#B23A2C;font-size:13.5px}
.evsubmit .btn{padding:12px 26px;font-size:15px}

/* ---- ผลการประเมิน ---- */
.panel-body.tight{padding:12px 18px}
.itemkey{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
.itemkey b{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);margin-right:4px}
.restable{min-width:640px}
.restable th.num,.restable td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.restable td.strong{font-weight:700;color:var(--ink)}
.restable td.lvl{white-space:nowrap;font-size:13px;color:var(--ink-2)}
.restable tr.total td{background:var(--surface-2);font-weight:600;border-top:1px solid var(--line)}
.tcard .restable{table-layout:fixed}
.tcard .restable th:nth-child(1){width:34%}
.tcard .restable th:nth-child(2){width:9%}
.tcard .restable th:nth-child(3){width:12%}
.tcard .restable th:last-child{width:16%}
.tcard > header{gap:14px}

/* หัวข้อส่วนในแบบประเมิน */
.qsec{display:flex;align-items:baseline;gap:10px;margin:8px 0 14px;padding:8px 12px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-size:14.5px;font-weight:600}
.qsec span{margin-left:auto;font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap}
fieldset.q + .qsec{margin-top:22px}
.qn{width:auto;min-width:30px;padding:0 6px}
.kindseg{display:inline-flex}
.toolbar .sp{flex:1}

/* ตารางคะแนนรายข้อ (แถว = หัวข้อ, คอลัมน์ = รายวิชา) */
.matwrap{border-top:1px solid var(--line-soft)}
.matwrap > summary{cursor:pointer;padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--accent-ink)}
.matrix{border-collapse:separate;border-spacing:0;font-size:13px;width:max-content;min-width:100%}
.matrix th,.matrix td{padding:7px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.matrix .item{position:sticky;left:0;z-index:1;background:var(--surface);min-width:260px;max-width:420px;text-align:left;box-shadow:1px 0 0 var(--line-soft)}
.matrix td.item b{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);margin-right:4px}
.matrix th.col{min-width:96px;max-width:130px;text-align:right;font-weight:500;vertical-align:bottom}
.matrix th.col span{display:block}
.matrix th.col .yr{font-size:11px;color:var(--gold)}
.matrix th.col .cd{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.matrix th.col .cn{font-size:12px;color:var(--ink);line-height:1.35;white-space:normal}
.matrix th.col .nn{font-size:11px;color:var(--ink-3)}
.matrix td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.matrix td.strong{font-weight:700}
.matrix tr.sec td{background:var(--surface-2);font-weight:600;color:var(--accent-ink);position:sticky;left:0}
.matrix tr.total td,.matrix tr.grand td,.matrix tr.lvlrow td{background:var(--surface-2);font-weight:600}
.matrix tr.grand td{border-top:2px solid var(--line)}
.matrix tr.total td.item,.matrix tr.grand td:first-child,.matrix tr.lvlrow td:first-child,.matrix tr.total td:first-child{position:sticky;left:0;z-index:1}
.matrix td.lvl{text-align:right;white-space:nowrap}
.tcard .avatar{width:48px;height:64px;border-radius:10px}
.evsec .who{display:inline-flex;align-items:center;gap:10px}
.evsec .who .avatar{width:36px;height:48px;border-radius:8px}
.avatar img{object-position:top}

/* ---- รูปโปรไฟล์ / โลโก้ที่อัปโหลด ---- */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.xl{width:96px;height:96px;border-radius:24px;font-size:30px}
.avatar-edit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.avatar-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.card .ic .ic-img,.rowitem .ic .ic-img,.tile .ic .ic-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.deptnm{display:flex;align-items:center;gap:12px}
.ic-sm{width:36px;height:36px;border-radius:10px;background:var(--surface-2);color:var(--ink-3);display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden}
.ic-sm svg{width:19px;height:19px;stroke-width:1.7}
.ic-sm .ic-img{width:100%;height:100%;object-fit:cover;display:block}
.iconupload{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.icon-preview{width:56px;height:56px;border-radius:14px;background:var(--surface-2);color:var(--ink-3);display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid var(--line)}
.icon-preview svg{width:28px;height:28px;stroke-width:1.7}
.icon-preview img{width:100%;height:100%;object-fit:cover;display:block}
.iconupload-btns{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ---- สลิปเงินเดือน ---- */
.slip{margin-bottom:12px}
.slip summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 18px;list-style:none;font-weight:600}
.slip summary::-webkit-details-marker{display:none}
.slip summary::marker{content:""}
.slip-period{font-size:15px}
.slip-net{margin-left:auto;color:var(--accent-ink);font-family:"IBM Plex Mono",monospace;font-size:13.5px}
.slip[open] summary{border-bottom:1px solid var(--line-soft)}
.slip .panel-body{padding-top:8px}
.slip-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--line-soft)}
.slip-row:first-child{border-top:0}
.slip-row span{color:var(--ink-2)}
.slip-row b{font-family:"IBM Plex Mono",monospace;font-weight:500;white-space:nowrap}
.slip-row.total{border-top:2px solid var(--line);margin-top:6px;padding-top:12px;font-size:15px}
.slip-row.total span{color:var(--ink)}
.slip-row.total b{color:var(--accent-ink);font-weight:700}
.tcard h3{margin:0}
.bigmean{display:flex;flex-direction:column;align-items:flex-end}
.bigmean b{font-family:"Prompt",sans-serif;font-size:24px;font-weight:600;line-height:1.1;color:var(--accent-ink)}
.bigmean span{font-size:12px;color:var(--ink-3)}
details.cmts{margin-top:6px;font-size:13px}
details.cmts summary{cursor:pointer;color:var(--accent-ink);font-size:12.5px}
details.cmts ul{margin:6px 0 0;padding-left:18px;color:var(--ink-2)}
details.cmts li{margin-bottom:4px}

@media (max-width:900px){
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scale span{font-size:11px;padding:8px 2px}
  .scale span b{font-size:16px}
  .bulkbar .sp{display:none}
  .bigmean{align-items:flex-start}
}
td .nm{line-height:1.4}
.rolepick label{white-space:nowrap;flex:0 0 auto}
.rolepick{align-items:center}
/* จอแคบ: ตัวเลือกที่ข้อความยาวตัดบรรทัดได้ ไม่ล้นขอบกล่อง */
@media (max-width:600px){.rolepick label{white-space:normal;flex:0 1 auto;max-width:100%}}

/* ============================================================
   คลังข้อสอบ
   ============================================================ */
.exrow{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line-soft)}
.exrow:first-of-type{border-top:0}
.exrow .tx{flex:1;min-width:0}
.exrow .tx b{display:block;font-weight:600}
.exrow .tx span{font-size:12.5px;color:var(--ink-3)}
.exnone{color:var(--ink-3);font-size:13px}
.exbar{
  position:sticky;top:78px;z-index:10;display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--shadow);
}
.exbar .tx{flex:1 1 220px;min-width:0}
.exbar .tx b{display:block;font-weight:600}
.exbar .tx span{font-size:12.5px;color:var(--ink-3)}
.exprog{font-size:13px;color:var(--ink-3)}
.exclock{font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:600;padding:4px 12px;border-radius:10px;background:var(--surface-2)}
.exclock.low{background:#FBE3DF;color:#B23A2C}
.exq{border:1px solid var(--line-soft);background:var(--surface);border-radius:16px;padding:18px;margin:0 0 14px;box-shadow:var(--shadow)}
.exq legend{display:flex;gap:10px;float:left;width:100%;padding:0;margin-bottom:12px;font-weight:500;line-height:1.6;white-space:pre-wrap}
.exq legend + *{clear:both}
.exopt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;margin-top:6px;border:1px solid var(--line-soft);border-radius:12px;cursor:pointer;line-height:1.55}
.exopt:hover{border-color:var(--accent)}
.exopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.exopt input{margin-top:5px;accent-color:var(--accent)}
.exopt .ltr,.qchoice .ltr{flex:0 0 auto;font-weight:600;color:var(--ink-3)}
.exopt em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;white-space:nowrap}
div.exopt{cursor:default}
.exopt.ans{border-color:var(--ok);background:var(--ok-soft)}
.exopt.ans em{color:var(--ok)}
.exopt.mine{border-color:#C0392B;background:#FBE3DF}
.exopt.mine em{color:#B23A2C}
.exq.wrong{border-left:4px solid #C0392B}
.exq.right{border-left:4px solid var(--ok)}
.exnote{margin:10px 0 0;font-size:13px;color:#B23A2C}
.exexplain{margin:12px 0 0;padding:10px 14px;border-radius:10px;background:var(--surface-2);font-size:13.5px;color:var(--ink-2);white-space:pre-wrap}
.exexplain b{display:block;font-size:12px;color:var(--ink-3);margin-bottom:2px}
.exfoot{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:8px 0 30px}
.exscore .panel-body:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.exscore span{display:block;font-size:13px;color:var(--ink-3)}
.exscore b{font-size:18px}
.exscore strong{font-family:"Prompt",sans-serif;font-size:34px;color:var(--accent-ink)}
.exstats{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--ink-3);border-bottom:1px solid var(--line-soft)}
.exstats b{color:var(--ink)}
.qchoice{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.qchoice input[type=radio]{accent-color:var(--ok);width:18px;height:18px;flex:0 0 auto}
.qchoice input[data-f]{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px}
.qchoice input[data-f]:focus{outline:none;border-color:var(--accent)}
td.actions{white-space:nowrap;text-align:right}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .exopt.mine,:root:not([data-theme="light"]) .exclock.low{background:#3A1D19;color:#F0837A}}
:root[data-theme="dark"] .exopt.mine,:root[data-theme="dark"] .exclock.low{background:#3A1D19;color:#F0837A}
.login-manual{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;font-size:14px;font-weight:500;color:var(--accent-ink);text-decoration:none}
.login-manual svg{width:17px;height:17px}
.login-manual:hover{text-decoration:underline}
.login-privacy{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3);text-align:center}
/* ล็อกอินในกรอบจอประชาสัมพันธ์ */
.in-kiosk #installBtn{display:none!important}
.kiosk-view .sidebar,.kiosk-view .topbar,.kiosk-view .bottomnav,.kiosk-view .scrim{display:none!important}
.kiosk-view #app{grid-template-columns:minmax(0,1fr)!important}
.kiosk-view main{padding-top:12px}
/* ในกรอบจอ 55 นิ้ว: ขยายตัวอักษร/ปุ่มให้อ่านและแตะง่าย */
body.kiosk-view{zoom:1.3}
.kiosk-note{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#FBF1DA;color:#7A5A12;font-size:13.5px;line-height:1.5}

/* ---- ปุ่มติดตั้งแอป (PWA) ที่แถบด้านบน ---- */
/* ปุ่มติดตั้งแอป (PWA) อยู่ท้ายเมนูข้าง เหนือปุ่มออกจากระบบ — โผล่เฉพาะตอนที่ยังติดตั้งได้ */
.installbtn{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:13px;border:1px solid rgba(45,212,178,.42);background:rgba(45,212,178,.10);color:#8FE8D6;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.installbtn:hover{border-color:#2DD4B2;background:rgba(45,212,178,.18);color:#BFF4E9}
.installbtn svg{width:18px;height:18px;stroke-width:1.8;flex:0 0 auto}
.installbtn[hidden]{display:none}
.install-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.install-steps b{color:var(--ink)}

/* ---- อีเมลสำหรับรับแจ้งเตือน (บัญชีของฉัน) ---- */
.pf-emailnote{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}
.pf-emailrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-emailrow input{flex:1;min-width:220px}
.pf-topics{display:flex;flex-direction:column;gap:8px}
.pf-topic{display:flex !important;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:400 !important;margin:0 !important}
.pf-topic:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pf-topic input{width:17px;height:17px;accent-color:var(--accent);margin-top:2px;flex:0 0 auto}
.pf-topic span{display:flex;flex-direction:column;gap:2px}
.pf-topic b{font-weight:600;color:var(--ink);font-size:14px}
.pf-topic em{font-style:normal;font-size:12px;color:var(--ink-3)}
.pf-emailbtns{display:flex;gap:8px;flex-wrap:wrap}
/* แถบชวนตั้งค่าบนหน้าหลัก */
#emailNudge:empty{display:none}
.nudge{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-soft);border-left:4px solid var(--accent);border-radius:14px;padding:12px 14px;margin-bottom:22px;box-shadow:var(--shadow)}
.nudge > svg{width:22px;height:22px;flex:0 0 auto;color:var(--accent-ink);stroke-width:1.7}
.nudge span{flex:1;font-size:13px;color:var(--ink-2);line-height:1.5}
.nudge b{display:block;color:var(--ink);font-size:14px}
.nudge .btn{flex:0 0 auto}
.nudge-x{border:0;background:none;color:var(--ink-3);font-size:20px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;flex:0 0 auto}
.nudge-x:hover{background:var(--surface-2);color:var(--ink)}

/* ---- การ์ดผู้ใช้ในเมนูข้าง: แนวตั้ง รูปโปรไฟล์เด่น ---- */
.usercard{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 14px 16px;
  background:linear-gradient(180deg,#16483F 0%,#0F342E 100%);border-radius:20px}
.usercard .avatar{width:112px;height:150px;border-radius:18px;font-size:36px;
  box-shadow:0 0 0 3px rgba(226,189,107,.6),0 16px 30px -12px rgba(0,0,0,.65)}
.usercard .uc-text{display:flex;flex-direction:column;align-items:center;gap:2px}
.usercard .nm{font-size:15.5px;line-height:1.35}
.usercard .rolebadge{margin-top:4px;background:rgba(226,189,107,.14);border-radius:999px;padding:2px 10px}
/* รูปโปรไฟล์ในหน้าบัญชีของฉัน: แนวตั้งเหมือนกัน */
.avatar.xl{width:108px;height:144px;border-radius:20px}

/* ---- ตัวปรับรูป (cropper.js) ---- */
dialog.crop-dlg{width:min(560px,calc(94vw / var(--zoom)))}
.crop-stage{background:#0B1512;display:flex;justify-content:center;padding:0;overflow:hidden}
.crop-stage canvas{display:block;touch-action:none;cursor:grab}
.crop-stage canvas:active{cursor:grabbing}
.crop-tools{display:flex;align-items:center;gap:12px;padding:14px 20px 4px}
.crop-tools input[type=range]{flex:1;accent-color:var(--accent)}
.crop-tools svg{width:18px;height:18px;stroke-width:1.8;color:var(--ink-3);flex:0 0 auto}
.crop-tools svg.z-lg{width:24px;height:24px}
.crop-tools .iconbtn.sm svg{width:18px;height:18px}
.crop-hint{margin:0;padding:4px 20px 14px;font-size:12px;color:var(--ink-3);text-align:center}

.dept-back{margin-bottom:10px}
.dept-back svg{width:15px;height:15px}

/* จัดการผู้ใช้: รูปในตาราง · รูปในฟอร์ม · บทบาท */
.u-cell{display:flex;align-items:center;gap:10px}
.avatar.sm{width:34px;height:34px;flex:none;font-size:13px}
.fu-ava{display:flex;align-items:center;gap:10px}
.fu-ava .avatar{width:56px;height:56px;flex:none}
.rl-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding-right:4px}
.rl-row{display:flex;align-items:center;gap:10px}
.rl-row input{flex:1;min-width:0}
.rl-row .pill{flex:none;min-width:58px;text-align:center}
.rl-core{flex:none;width:34px;text-align:center;font-size:12px;color:var(--muted)}
.rl-add{display:flex;gap:10px;margin-top:14px}
.rl-add input{flex:1;min-width:0}

/* ---------- กรอบโหลด (skeleton) ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skel{padding:6px 0 24px;opacity:0;animation:skIn .3s ease .12s forwards}   /* หน่วงนิดหน่อย โหลดเร็วจะไม่เห็นกรอบกะพริบ */
.skel-list{padding:4px 0}
.sk{display:block;position:relative;overflow:hidden;border-radius:10px;background:var(--surface-2)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);animation:skShine 1.3s ease-in-out infinite;
  background:linear-gradient(90deg,transparent,var(--sk-shine,rgba(255,255,255,.55)),transparent)}
.sk-title{height:28px;width:min(340px,60%);margin-bottom:12px}
.sk-sub{height:14px;width:min(560px,85%);margin-bottom:26px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px}
.sk-card{height:160px;border-radius:18px}
.sk-row{height:16px;margin:12px 0}
.sk-row.w60{width:60%}
tr.sk-tr td{padding:15px 14px}
.sk-cell{height:14px;width:78%}
tr.sk-tr td:first-child .sk-cell{width:60%}
@keyframes skShine{to{transform:translateX(100%)}}
@keyframes skIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}
:root[data-theme="dark"]{--sk-shine:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sk-shine:rgba(255,255,255,.06)}}

/* ---------- หน้าหลัก: งานค้างของฉัน ---------- */
.hero-stats.tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;flex:1 1 440px;max-width:640px}
.task-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;padding:14px 16px 13px;border-radius:20px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:#fff;font:inherit;cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s,border-color .18s}
button.task-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
button.task-tile:focus-visible{outline:2px solid #E2BD6B;outline-offset:2px}
.task-tile .tt-ic{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.task-tile .tt-ic svg{width:17px;height:17px}
.task-tile b{font-family:"Prompt",sans-serif;font-size:28px;font-weight:600;line-height:1.15}
.task-tile .tt-l{font-size:13px;line-height:1.4;color:#E9F3F1;padding-right:28px}
.task-tile em{font-style:normal;font-size:11.5px;color:#E9F3F1;opacity:.75;margin-top:2px}
.task-tile.warn .tt-ic{background:#E2BD6B;color:#0B2622}
.task-tile.danger .tt-ic{background:#E0605A;color:#fff}
.task-tile.danger b{color:#FFD6D3}
.task-tile.ok{cursor:default}
.task-tile.ok b{font-size:22px}
.task-tile.ok .tt-ic{background:rgba(94,201,160,.35)}
@media (max-width:900px){.hero-stats.tasks{max-width:none;grid-template-columns:repeat(2,1fr);gap:8px}.task-tile{padding:11px 12px;border-radius:16px}.task-tile b{font-size:22px}.task-tile .tt-ic{width:26px;height:26px;right:9px;top:9px}}

/* ---------- ค้นหารวม (Ctrl K) ---------- */
.search input[readonly]{cursor:pointer}
.cmdk{width:min(640px,calc(100vw - 24px));max-height:min(72vh,640px);margin:10vh auto auto;padding:0;border:1px solid var(--line);border-radius:20px;
  background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);overflow:hidden;flex-direction:column}
.cmdk[open]{display:flex;animation:ckIn .22s cubic-bezier(.16,1,.3,1)}
.cmdk::backdrop{background:rgba(6,16,22,.45);backdrop-filter:blur(3px)}
@keyframes ckIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.cmdk-in svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.cmdk-in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16.5px;color:var(--ink);outline:none}
.cmdk-list{flex:1;overflow-y:auto;padding:6px 8px 10px;overscroll-behavior:contain}
.ck-g{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);padding:12px 10px 5px}
.ck-it{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:9px 10px;border-radius:12px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ck-it[aria-selected="true"]{background:var(--accent-soft)}
.ck-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);overflow:hidden}
.ck-ic svg{width:18px;height:18px}
.ck-ic .ic-img{width:100%;height:100%;object-fit:cover}
.ck-ava{width:100%;height:100%;display:grid;place-items:center;font-size:12px;font-weight:600;background:#E2BD6B;color:#0B2622}
.ck-ava img{width:100%;height:100%;object-fit:cover}
.ck-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ck-t b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-t em{font-style:normal;font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-go{color:var(--ink-3);opacity:0;transition:opacity .12s}
.ck-go svg{width:16px;height:16px}
.ck-it[aria-selected="true"] .ck-go{opacity:1}
.ck-empty,.ck-wait{padding:26px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}
.ck-wait{padding:10px 16px 6px;font-size:12.5px}
.cmdk-foot{display:flex;gap:16px;justify-content:flex-end;padding:9px 16px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}
.cmdk-foot kbd,.cmdk-in kbd{font:inherit;font-size:11px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);margin-right:3px}
@media (max-width:640px){.cmdk{margin:8px auto auto;max-height:calc(100vh - 16px);border-radius:16px}.cmdk-foot{display:none}}

/* ---------- การ์ดบุคลากร ---------- */
.person-dlg{width:min(340px,calc(100vw - 32px))}
.pc-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 22px 10px;gap:4px}
.pc-ava.avatar{width:132px;height:176px;border-radius:22px;font-size:40px;margin-bottom:12px}
.pc-body h3{font-size:19px;margin:0}
.pc-body p{margin:0;color:var(--ink-2);font-size:14px}
.pc-body .pill{margin-top:8px}

/* จอมือถือ: ปิดการซูมด้วยการแตะสองครั้ง (ยังย่อ-ขยายด้วยการหุบ/กางสองนิ้วได้ตามปกติ) */
@media (max-width:900px){
  html{touch-action:manipulation;-webkit-text-size-adjust:100%}
}

/* ---------- แถบเมนูลัดด้านล่าง (มือถือ) ---------- */
.bottomnav{display:none}
@media (max-width:900px){
  .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 88%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-soft)}
  .bottomnav button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:6px 0 4px;border-radius:12px;
    font:inherit;font-size:11px;color:var(--ink-3);cursor:pointer}
  .bottomnav button svg{width:22px;height:22px}
  .bottomnav button[aria-current="page"]{color:var(--accent)}
  .bottomnav button[aria-current="page"] svg{transform:translateY(-1px)}
  .page{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  body.sar-open .bottomnav{display:none}
}

/* ---------- เปลี่ยนหน้าแบบนุ่มนวล (View Transitions) ---------- */
::view-transition-old(root){animation:vtOut .16s ease both}
::view-transition-new(root){animation:vtIn .24s cubic-bezier(.16,1,.3,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
.cmdk-in .kbd{position:static;transform:none;display:inline-block;flex:none;margin:0}

/* ---------- สมุดรายชื่อบุคลากร (people.js) ---------- */
.pp-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pp-search{flex:1 1 280px;max-width:none}
.pp-tools select{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink)}
.pp-group{margin-bottom:22px}
.pp-group .countpill{font-size:12px;margin-left:4px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.pp-card{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-soft);border-radius:18px;background:var(--surface);
  font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s}
.pp-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.pp-ava.avatar{width:62px;height:82px;border-radius:14px;font-size:20px;flex:none}
.pp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pp-info b{font-size:14.5px;line-height:1.35}
.pp-info em{font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pp-tel{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--accent-ink);margin-top:3px}
.pp-tel svg{width:14px;height:14px}
.pc-tel{margin-top:14px;display:inline-flex;align-items:center;gap:8px}
.pc-tel svg{width:16px;height:16px}

/* ============================================================
   ชุดดีไซน์กลาง — ปุ่ม · ชิปตัวกรอง · ป้ายสถานะ · ตาราง · แท็บ
   ทุกระบบใช้ชุดนี้ (ไฟล์ของแต่ละระบบไม่ต้องกำหนดหน้าตาซ้ำ)
   ============================================================ */
:root{--danger:#B23A2C;--danger-soft:#FBE3DF}
:root[data-theme="dark"]{--danger:#F2978E;--danger-soft:rgba(224,96,90,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--danger:#F2978E;--danger-soft:rgba(224,96,90,.16)}}

/* ปุ่ม: ปกติ · .pri หลัก · .sm เล็ก · .big ใหญ่เต็มแถว · .danger ลบ · .rp-link ปุ่มแบบลิงก์ */
.btn{border-radius:12px;min-height:38px;padding:8px 15px;justify-content:center}
.btn.sm{border-radius:10px;min-height:32px;padding:5px 11px}
.btn.big{flex:1;padding:13px 18px;font-size:15px;border-radius:14px}
.btn.big svg{width:18px;height:18px;stroke-width:2.4}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.btn.pri.danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:none}
.rp-link{border:0;background:none;padding:4px 0;font:inherit;font-size:13px;font-weight:500;color:var(--accent-ink);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.rp-link svg{width:16px;height:16px}
.rp-link.danger{color:var(--danger)}
.rp-link:hover{text-decoration:underline}
.lt-btn{border-radius:10px}
.btn:focus-visible,.fchip:focus-visible,.seg button:focus-visible,.rp-link:focus-visible,.lt-btn:focus-visible,.iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ชิปตัวกรอง (เลือกฝ่าย / ช่วงเวลา / หมวด): .on หรือ aria-pressed="true" = ที่เลือกอยู่ */
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.fchip:hover{border-color:var(--accent);color:var(--accent-ink)}
.fchip.on,.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);font-weight:600}
.fchip em,.fchip .ct{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;opacity:.7}
.fchip.sm{padding:4px 11px;font-size:12.5px}
.sar-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.sv-presets{display:inline-flex;gap:6px;flex-wrap:wrap}

/* ป้ายสถานะ: .pill (และป้ายของแต่ละระบบ) ใช้รูปทรง/สีชุดเดียวกัน */
.pill,.tag,.ln-state,.rp-state,.sv-state,.sv-lv,.lx-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1.5;
  padding:2px 10px;border-radius:999px;white-space:nowrap;background:var(--tint);color:var(--accent-ink);vertical-align:middle}
.pill svg,.ln-state svg,.rp-state svg{width:12px;height:12px;stroke-width:2.6;margin:0}
.pill.off,.ln-state.cx,.rp-state.cx,.sv-state.closed{background:var(--surface-2);color:var(--ink-3)}
.pill.on,.ln-state.done,.rp-state.done,.sv-state.open,.lx-tag.add,.sv-lv.lv5{background:var(--ok-soft);color:var(--ok)}
.ln-state.ok,.ln-state.on,.lx-tag.upd,.sv-lv.lv4{background:var(--accent-soft);color:var(--accent-ink)}
.pill.gold,.pill.team,.ln-state.wait,.rp-state.wait,.sv-lv.lv3{background:var(--gold-soft);color:var(--gold)}
.ln-state.due{background:var(--warn-soft);color:var(--warn)}
.pill.cx,.ln-state.late,.lx-tag.bad,.sv-lv.lv2{background:var(--danger-soft);color:var(--danger)}
.pill.club{background:var(--ext-soft);color:var(--ext)}
.countpill{border-radius:999px;padding:2px 10px}

/* ตาราง: หัวตารางสีอ่อนตามธีม ตัวหนังสือปกติ (ไม่ใช้ตัวพิมพ์ใหญ่/เว้นระยะแบบภาษาอังกฤษ) */
th{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);padding:12px 16px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-bottom:1px solid var(--line)}
td{padding:12px 16px}
.lt-wrap{border-radius:var(--r)}

/* แท็บ (segmented): แคปซูลเดียวกันทุกระบบ — แท็บที่เลือกเป็นพื้นขาวยกขึ้น */
.seg,.seg.pill{border-radius:18px;padding:4px;gap:2px;background:var(--surface-2);border:1px solid var(--line-soft)}
.seg button,.seg.pill button{border-radius:14px;padding:6px 14px;font-size:13px}
.seg button[aria-pressed="true"],.seg.pill button[aria-pressed="true"]{background:var(--surface);color:var(--accent-ink);font-weight:600;box-shadow:0 1px 3px rgba(21,28,27,.14)}
.seg.sm button{padding:5px 11px;font-size:12.5px}

/* หน้าฝ่าย: แบนเนอร์ด้านบนเป็นภาพหน้าปกของฝ่าย */
.hero.dept{min-height:clamp(220px,26vw,340px);align-items:flex-end}
.hero.dept .datechip{display:none}
.hero.dept::before,.hero.dept::after{display:none}
.hero-back{margin-bottom:12px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(8px)}
.hero-back:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff}
.hero-back[hidden]{display:none}

/* ---------- จัดการการประเมินรายวิชา ---------- */
.ea-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:s}
.ea-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line-soft);opacity:.75}
.ea-steps li .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:"Prompt",sans-serif;font-weight:600;font-size:14px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3)}
.ea-steps li .n svg{width:16px;height:16px;stroke-width:2.6}
.ea-steps li b{display:block;font-size:14.5px;font-family:"Prompt",sans-serif;font-weight:600}
.ea-steps li em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.ea-steps li.done{opacity:1}
.ea-steps li.done .n{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.ea-steps li.cur{opacity:1;background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ea-steps li.cur .n{background:var(--accent);border-color:var(--accent);color:#fff}
.ea-next{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:14px 16px;border-radius:16px;border:1px dashed var(--line)}
.ea-check,.ea-prog{flex:1 1 360px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.ea-check > b,.ea-prog > b{font-size:14.5px}
.ea-check div{display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.ea-check svg{width:17px;height:17px;flex:none;margin-top:2px;stroke-width:2.4}
.ea-check .ok svg{color:var(--ok)}
.ea-check .warn{color:var(--ink)}
.ea-check .warn svg{color:var(--gold)}
.ea-prog em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ea-bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ea-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#E2BD6B)}
.ea-bar.sm{height:6px;margin:6px 0 2px}
.ea-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:190px}
.ea-acts .rp-link{justify-content:center;font-size:12.5px}
.statrow .stat{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.statrow .stat:hover{border-color:var(--accent)}
.statrow .stat.on{border-color:var(--accent);background:var(--accent-soft)}
.ea-tools{display:flex;gap:8px;flex-wrap:wrap}
.ea-pbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:0}
.ea-pbar .sar-chips{margin:0}
.ea-danger{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 4px 30px;font-size:12.5px;color:var(--ink-3)}
.ea-danger[hidden]{display:none}
.ei-guide{margin:4px 0 8px;box-shadow:none}
.ei-guide table{font-size:12.5px}
.ei-guide th,.ei-guide td{padding:7px 10px;white-space:nowrap}
#ei-rows{font-family:"IBM Plex Mono",monospace;font-size:13px}
@media (max-width:760px){.ea-steps{grid-template-columns:1fr}.ea-acts{width:100%}}
#cf-text{white-space:pre-line}   /* ข้อความยืนยันขึ้นบรรทัดใหม่ได้ (เช่น รายการที่ควรตรวจ) */

/* ---------- ประเมินรายวิชา: กล่องแยกชั้นปี ---------- */
.ea-ctools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.ea-ctools h3{font-size:18px;margin:0 6px 0 0}
.ea-jump{display:flex;gap:6px;flex-wrap:wrap}
.ea-dot{width:9px;height:9px;border-radius:50%;background:var(--yc);display:inline-block}
.ea-year{border-top:0;box-shadow:var(--shadow),inset 0 4px 0 var(--yc);scroll-margin-top:90px}
.ea-year > header{gap:14px;padding-top:18px}
.ea-ybadge{flex:none;width:58px;height:58px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--yc);color:#fff;font-family:"Prompt",sans-serif;font-size:26px;font-weight:600;line-height:1}
.ea-ybadge small{font-size:10px;font-weight:500;opacity:.85;margin-bottom:2px;font-family:inherit}
.ea-yinfo{display:flex;flex-direction:column;min-width:0}
.ea-yinfo h3{margin:0;font-size:18px;color:var(--yc)}
.ea-yinfo em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ea-yprog{min-width:180px;font-size:12.5px}
.ea-yprog b{font-weight:600}
.ea-yprog .ea-bar span{background:var(--yc)}
.ea-yok{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ok)}
.ea-yok svg{width:16px;height:16px;stroke-width:2.6}
.ea-ypend{border-top:1px solid var(--line-soft)}
.ea-ypend summary{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;font-size:13.5px;font-weight:600;list-style:none}
.ea-ypend summary::-webkit-details-marker{display:none}
.ea-ypend summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.ea-ypend[open] summary::before{transform:rotate(45deg)}
.ea-ypend summary em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-3)}
.ea-ypbar{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}
.ea-ymore{padding:10px 18px}

/* ---------- คลังข้อสอบ: นำเข้าจาก Word / PDF ---------- */
.xi-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;border-radius:16px;border:1px dashed var(--accent);background:var(--accent-soft)}
.xi-bar > div{flex:1 1 320px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-2)}
.xi-bar b{font-size:14.5px;color:var(--ink)}
.xi-miss{display:flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:14px;border-radius:12px;background:var(--gold-soft);color:var(--ink);font-size:13.5px}
.xi-miss svg{width:17px;height:17px;flex:none;color:var(--gold)}
.xi-miss a{color:var(--accent-ink);font-weight:600}
.qedit.qwarn{box-shadow:var(--shadow),inset 4px 0 0 var(--gold);border-color:color-mix(in srgb,var(--gold) 55%,var(--line-soft))}
.qedit{scroll-margin-top:90px}
.xi-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.xi-tile{border-radius:14px;padding:10px 14px;background:var(--surface-2);display:flex;flex-direction:column}
.xi-tile b{font-family:"Prompt",sans-serif;font-size:24px;line-height:1.2}
.xi-tile span{font-size:12.5px;color:var(--ink-3)}
.xi-tile.ok b{color:var(--ok)}
.xi-tile.warn b{color:var(--danger)}
.xi-warnlist{font-size:13px;margin:6px 0 10px;padding:8px 12px;border-radius:10px;background:var(--danger-soft)}
.xi-warnlist a{color:var(--danger);font-weight:600}
.xi-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding-right:4px}
.xi-q{border:1px solid var(--line-soft);border-radius:14px;padding:10px 14px;background:var(--surface);scroll-margin-top:8px}
.xi-q.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line-soft));box-shadow:inset 3px 0 0 var(--danger)}
.xi-qh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xi-q p{margin:4px 0 6px;font-size:13.5px;line-height:1.55}
.xi-ch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:4px 12px;font-size:13px}
.xi-ch li{padding:4px 8px;border-radius:8px;color:var(--ink-2)}
.xi-ch li span{font-weight:600;margin-right:6px;color:var(--ink-3)}
.xi-ch li.on{background:var(--ok-soft);color:var(--ok);font-weight:600}
.xi-ch li.on span{color:var(--ok)}
.xi-w{margin-top:6px;font-size:12.5px;color:var(--danger)}
.xi-ex{margin-top:6px;font-size:12.5px;color:var(--ink-3)}

/* ---- ถ่ายรูป / เลือกจากเครื่อง (ทุกปุ่มแนบรูป — app.js) ---- */
dialog.pick-sheet{width:min(400px,calc(94vw / var(--zoom)));padding:0}
.ps-in{display:flex;flex-direction:column;gap:8px;padding:18px}
.ps-title{font-family:"Prompt",sans-serif;font-size:16px;font-weight:600;margin:0 4px 4px}
.ps-opt{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ps-opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.ps-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.ps-ic svg{width:24px;height:24px}
.ps-opt b{display:block;font-weight:600;font-size:15px}
.ps-opt em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.ps-cancel{margin-top:2px;padding:11px;border-radius:12px;border:0;background:var(--surface-2);color:var(--ink-2);font:inherit;font-weight:500;cursor:pointer}
@media (pointer: coarse){
  /* มือถือ: แผ่นตัวเลือกเลื่อนขึ้นจากด้านล่าง */
  dialog.pick-sheet{margin:auto auto 0;width:100%;max-width:520px;border-radius:22px 22px 0 0;animation:psUp .22s cubic-bezier(.16,1,.3,1)}
  .ps-in{padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
}
@keyframes psUp{from{transform:translateY(40px);opacity:0}}
.cam-dlg[open]{display:flex;flex-direction:column;overflow:hidden}
.cam-dlg .cam-view{position:relative;flex:1 1 auto;min-height:160px;height:min(62vh,540px);background:#000;display:grid;place-items:center;overflow:hidden}
.cam-dlg video,.cam-dlg .cam-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cam-dlg video.mirror{transform:scaleX(-1)}
.cam-msg{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;text-align:center;color:#E6EFEC}
.cam-msg b{font-size:16px}
.cam-msg span{font-size:13.5px;color:#A9B8B4}
.cam-msg .btn{margin-top:8px}
.cam-dlg footer .btn svg{width:17px;height:17px}
.cam-go svg{width:18px;height:18px}

/* สมุดรายชื่อ: โหมดจัดลำดับ */
#ppBody .act-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
#ppBody .act-head .btn svg{width:16px;height:16px}
.pp-ord{cursor:default}
.pp-ord:hover{transform:none}
.pp-no{flex:none;width:24px;text-align:center;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pp-mv{display:flex;flex-direction:column;gap:2px;margin-left:auto;flex:none}
.pp-mv .lt-btn{width:28px;height:24px;margin:0}
.pp-mv .lt-btn svg{width:14px;height:14px}
.pp-group .sar-dh .rp-link{margin-left:auto;font-size:12.5px}
.pp-grid.ordering{grid-template-columns:1fr;gap:6px;max-width:720px}
.pp-grid.ordering .pp-card{padding:8px 10px;border-radius:14px}
.pp-grid.ordering .pp-ava{width:40px;height:40px}
.pp-grid.ordering .pp-mv{flex-direction:row}
.pp-grid.ordering .pp-mv .lt-btn{width:32px;height:32px}
/* สมุดรายชื่อ: ชื่อ-สกุลบรรทัดเดียว (ยาวเกินใส่ … และดูชื่อเต็มได้เมื่อชี้/แตะเปิด) */
.pp-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-ttl{font-size:11.5px;color:var(--ink-3);line-height:1.2}

/* ---- หน้าหลักแบบไอคอน (เหมือนหน้าจอมือถือ) + ปุ่มสลับ ไอคอน/การ์ด ---- */
.hometools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.sechead .hometools .seg,.sectools .hometools .seg.pill{margin-left:0}
.seg.pill.ico button{padding:6px 9px;display:grid;place-items:center}
.seg.pill.ico svg{width:16px;height:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:22px 10px;padding:20px 14px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:22px;box-shadow:var(--shadow)}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:4px 2px;border:0;background:none;
  font:inherit;color:var(--ink);text-align:center;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .tw{position:relative;display:block}
.tile .ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;overflow:hidden;color:#fff;
  background:var(--t2);background:linear-gradient(145deg,var(--t1),var(--t2));box-shadow:0 8px 16px -9px var(--t2);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.tile .ic svg{width:30px;height:30px;stroke-width:1.7}
.tile:hover .ic{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 22px -12px var(--t2)}
.tile:active .ic{transform:scale(.92);transition-duration:.1s}
.tile .nm{font-size:13px;font-weight:500;line-height:1.35;max-width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.tile .st{font-size:11px;color:var(--warn);margin-top:-5px}
.tile.soon .ic{background:var(--surface-2);color:var(--ink-3);box-shadow:none;border:1.5px dashed var(--line)}
.tile.soon .nm{color:var(--ink-3)}
.tile.locked .ic{filter:grayscale(.7);opacity:.7}
.tile .tb{position:absolute;top:-6px;right:-7px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;border:2px solid var(--surface)}
.tile .tb.lock{background:#C8412F;color:#fff}
.tile .tb.ext{background:var(--surface);color:var(--ink-3);border:1px solid var(--line)}
.tile .tb svg{width:11px;height:11px;stroke-width:2.4}
.tile.h0{--t1:#16A08A;--t2:#0B6B5C}.tile.h1{--t1:#4F97D6;--t2:#245F9E}.tile.h2{--t1:#8F80E3;--t2:#5746B0}
.tile.h3{--t1:#EAB04A;--t2:#B87612}.tile.h4{--t1:#E57A92;--t2:#B03E5A}.tile.h5{--t1:#66B25F;--t2:#357A31}
.tile.h6{--t1:#6784DE;--t2:#3350A8}.tile.h7{--t1:#EC9161;--t2:#BF5A26}.tile.h8{--t1:#3DB3CE;--t2:#1B7890}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 4px;padding:16px 6px;border-radius:18px}
  .tile .ic{width:54px;height:54px;border-radius:16px}
  .tile .ic svg{width:26px;height:26px}
  .tile .nm{font-size:12px}
  .sechead .hometools{margin-left:0}
}
@media (max-width:340px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* การแจ้งเตือนแบบแอป (prefs.js) */
#pushPanel .pn-state{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);margin:0 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
#pushPanel .pn-state svg{width:24px;height:24px;flex:0 0 auto;color:var(--accent-ink);stroke-width:1.8}
#pushPanel .pn-state b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
#pushPanel .pn-state.on{background:var(--accent-soft);border-color:var(--accent)}
#pushPanel .pn-state.warn{background:var(--gold-soft)}
#pushPanel .pn-state.warn svg{color:var(--gold)}
#pushPanel .pn-on{width:100%;justify-content:center;gap:10px;margin-bottom:6px}
#pushPanel .pn-on svg{width:20px;height:20px}
#pushPanel .pn-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
#pushPanel .pn-devs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#pushPanel .pn-dev{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
#pushPanel .pn-dev svg{width:22px;height:22px;flex:0 0 auto;color:var(--ink-3);stroke-width:1.8}
#pushPanel .pn-dev b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:2px}
#pushPanel .pn-dev em{font-style:normal;font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:1px 7px;border-radius:99px;margin-left:4px}
#pushPanel .pn-dev.here{border-color:var(--accent)}
#pushPanel .pn-dev.here svg{color:var(--accent-ink)}
@media (max-width:600px){#pushPanel .pn-devs{grid-template-columns:1fr}}

/* มุมมองมือถือบนคอม (กรอบโทรศัพท์ + iframe) */
.mv-wrap{position:fixed;inset:0;z-index:300;background:rgba(11,38,34,.62);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.mv-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.mv-bar .seg{background:var(--surface)}
.mv-phone{box-sizing:border-box;max-width:calc(100vw - 24px);border:10px solid #121614;border-radius:42px;background:#121614;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;transition:width .2s,height .2s}
.mv-phone.tab{border-radius:26px}
.mv-phone iframe{display:block;width:100%;height:100%;border:0;border-radius:32px;background:var(--bg,#fff)}
.mv-phone.tab iframe{border-radius:16px}
body.mv-on{overflow:hidden}
@media (max-width:900px){#mview{display:none}}

/* ---- หัวข้อกลุ่มย่อยในหมวดบริการทั่วไป ---- */
.tiles .grph{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:10px 4px -2px;
  font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.tiles .grph:first-child{margin-top:0}
.tiles .grph::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.grph.plain{display:flex;align-items:center;gap:10px;margin:18px 2px 10px;
  font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.grph.plain:first-child{margin-top:0}
.grph.plain::after{content:'';flex:1;height:1px;background:var(--line-soft)}
@media (max-width:640px){.tiles .grph{margin:8px 2px 0}}