/* ── Theme tokens : ขาวนวล + เขียวมิ้นเข้ม ── */
:root{
  --cream:#f4faf6; --cream-2:#fdfdf6; --paper:#ffffff;
  --mint-1:#2f9e7d; --mint-2:#1f7a5e; --mint-3:#43b88f; --mint-4:#0f5d46;
  --mint-soft:#e6f6ef; --mint-glow:rgba(47,158,125,.35);
  --ink:#15332a; --ink-2:#1f3b32; --muted:#6b8a7e; --line:#d4e9df; --line-soft:#e8f4ee;
  --gold:#f6c544; --amber:#f59e0b; --rose:#ef4444; --sky:#3b82f6; --violet:#8b5cf6;
  --xp-titlebar:linear-gradient(135deg,#43b88f 0%,#2f9e7d 50%,#1f7a5e 100%);
  --glass:rgba(255,255,255,.78);
  --glass-strong:rgba(255,255,255,.92);
  --shadow-xs:0 1px 3px rgba(31,122,94,.06);
  --shadow-sm:0 4px 14px rgba(31,122,94,.08);
  --shadow:0 12px 32px rgba(31,122,94,.12);
  --shadow-lg:0 24px 56px rgba(15,93,70,.16);
  --shadow-glow:0 8px 28px var(--mint-glow);
  --brand-1:var(--mint-1); --brand-2:var(--mint-2); --brand-3:var(--mint-3);
  --r:16px; --r-lg:22px; --r-xl:28px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --touch:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Sarabun','Kanit',system-ui,sans-serif;font-weight:400;color:var(--ink-2);font-size:15px;line-height:1.55;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(127,224,192,.22) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 95% 5%, rgba(191,244,223,.18) 0%, transparent 45%),
    linear-gradient(180deg,var(--cream) 0%,#eef8f2 50%,#e8f5ee 100%);
  background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.font-display,button,.btn,.nav-title,.sd-stat-value,.hero-title,.cl-title,.learn-lesson-title{font-family:'Kanit',system-ui,sans-serif}
p,td,th,input,textarea,select,.text-sm{font-family:'Sarabun','Kanit',system-ui,sans-serif}
a{color:var(--mint-2);text-decoration:none;transition:color .15s}
a:hover{color:var(--mint-1)}
.tnum{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#9ddfc4,#2f9e7d);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ── XP Window (legacy compat) ── */
.xp-win{background:var(--paper);border-radius:var(--r);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);overflow:hidden}
.xp-title{background:var(--xp-titlebar);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.xp-title .dot{width:10px;height:10px;border-radius:50%}
.xp-title .dot.r{background:#ff6b5e}.xp-title .dot.y{background:#ffce56}.xp-title .dot.g{background:#7fe0a3}
.xp-title .sp{flex:1}.xp-body{padding:16px}

/* ── Boot loader ── */
#boot-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(ellipse at 50% 30%,#1f7a5e,#0a3d2e);color:#eafaf3}
.boot-ring{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.boot-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#7fe0c0;animation:spin 1s linear infinite}
.boot-ring i{font-size:36px;color:#bff4df;filter:drop-shadow(0 0 12px rgba(127,224,192,.6))}
#bl-text{font-size:14px;opacity:.9;max-width:340px;text-align:center;line-height:1.6}
#bl-text .retry{margin-top:14px;padding:10px 20px;background:#7fe0c0;color:#0f5d46;border:0;border-radius:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s}
#bl-text .retry:hover{transform:scale(1.03)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Spinner overlay ── */
.spinner-overlay{position:fixed;inset:0;z-index:8000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:rgba(15,49,42,.45);backdrop-filter:blur(8px)}
.spinner-overlay[hidden]{display:none!important}
.qspin{position:relative;width:96px;height:96px}
.qspin .ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent}
.qspin .ring:nth-child(1){border-top-color:#7fe0c0;animation:spin 1.4s linear infinite}
.qspin .ring:nth-child(2){inset:12px;border-right-color:#bff4df;animation:spin 1.9s linear reverse infinite}
.qspin .ring:nth-child(3){inset:24px;border-bottom-color:#43b88f;animation:spin 1.1s linear infinite}
.qspin .core{position:absolute;inset:34px;border-radius:50%;background:var(--xp-titlebar);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:var(--shadow-glow)}
.spin-msg{color:#eafaf3;font-weight:600;font-size:14px;text-align:center}
.spin-inline{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--touch);padding:0 18px;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--paper);color:var(--ink-2);
  font-weight:600;font-size:14px;cursor:pointer;transition:all .2s var(--ease);
  font-family:inherit;position:relative;overflow:hidden;white-space:nowrap;
  box-shadow:var(--shadow-xs);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--mint-3)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-primary{
  background:var(--xp-titlebar);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{box-shadow:0 12px 32px var(--mint-glow)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--mint-soft);border-color:var(--line-soft);box-shadow:none}
.btn-danger{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(239,68,68,.28)}
.btn-gold{background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#5b3d00;border-color:transparent;box-shadow:0 6px 20px rgba(245,158,11,.28)}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.btn-lg{min-height:52px;padding:0 24px;font-size:15px;border-radius:14px}
.btn-block{width:100%}
.btn-icon{width:var(--touch);height:var(--touch);min-height:var(--touch);padding:0;border-radius:12px}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);pointer-events:none;animation:ripple .55s ease-out}
@keyframes ripple{to{transform:scale(3);opacity:0}}
.btn[data-state="loading"]{pointer-events:none}
.btn[data-state="success"]{background:linear-gradient(135deg,#34d399,#10b981)!important;color:#fff;border-color:transparent}
.btn[data-state="error"]{background:linear-gradient(135deg,#f87171,#ef4444)!important;color:#fff;border-color:transparent}
.st{display:inline-flex;align-items:center;gap:7px}

/* ── Forms ── */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label .req{color:var(--rose)}
.input,.select,.textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);font-family:inherit;font-size:15px;color:var(--ink-2);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:0;border-color:var(--mint-1);background:#fff;
  box-shadow:0 0 0 4px rgba(47,158,125,.12);
}
.textarea{min-height:100px;resize:vertical;line-height:1.55}
.field-hint{font-size:12px;color:var(--muted);margin-top:5px}
.field-error{font-size:12px;color:var(--rose);margin-top:6px;display:flex;gap:5px;align-items:center;font-weight:500}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--rose);background:#fff8f8;box-shadow:0 0 0 4px rgba(239,68,68,.08)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.01em}
.b-pending{background:#fff4d6;color:#9a6b00}.b-approved{background:#dcfce7;color:#166534}
.b-rejected{background:#fee2e2;color:#991b1b}.b-completed{background:#dbeafe;color:#1e40af}
.b-open{background:#dcfce7;color:#166534}.b-closed{background:#f1f5f9;color:#64748b}.b-draft{background:#fef9c3;color:#854d0e}
.role-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700}
.role-chip-admin{background:linear-gradient(135deg,#fde68a,#fbbf24);color:#78350f}
.role-chip-teacher{background:linear-gradient(135deg,#a7f3d0,#34d399);color:#065f46}
.role-chip-student{background:linear-gradient(135deg,#bfdbfe,#60a5fa);color:#1e3a8a}

/* ── Toast ── */
#toast-host{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:9500;display:flex;flex-direction:column;gap:10px;max-width:min(360px,calc(100vw - 32px))}
.toast{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);
  background:var(--glass-strong);backdrop-filter:blur(16px);box-shadow:var(--shadow-lg);
  border:1px solid var(--line-soft);animation:toastIn .35s var(--ease-spring);font-size:14px;
}
.toast::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--mint-1)}
.toast{position:relative;padding-left:20px}
.toast.success::before{background:#10b981}.toast.error::before{background:var(--rose)}.toast.warning::before{background:var(--amber)}.toast.info::before{background:var(--sky)}
.toast i{font-size:20px;margin-top:1px;flex-shrink:0}
.toast.success i{color:#10b981}.toast.error i{color:var(--rose)}.toast.warning i{color:var(--amber)}.toast.info i{color:var(--sky)}
@keyframes toastIn{from{transform:translateX(110%) scale(.95);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(110%);opacity:0}}

/* ── Modal ── */
#modal-host{
  position:fixed;inset:0;z-index:9000;display:none;align-items:flex-end;justify-content:center;
  padding:0;background:rgba(15,49,42,.4);backdrop-filter:blur(6px);
}
#modal-host.is-open{display:flex}
.modal-card{
  width:100%;max-width:560px;max-height:min(92vh,900px);display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .32s var(--ease-spring);
}
.modal-card.lg{max-width:820px}
@keyframes modalIn{from{transform:translateY(100%);opacity:.8}to{transform:none;opacity:1}}
@media(min-width:640px){
  #modal-host{align-items:center;padding:20px}
  .modal-card{border-radius:var(--r-xl);animation:modalInDesk .3s var(--ease-spring)}
  @keyframes modalInDesk{from{transform:translateY(16px) scale(.96);opacity:0}to{transform:none;opacity:1}}
}
.md-header{
  background:var(--xp-titlebar);color:#fff;padding:16px 20px;
  display:flex;align-items:center;gap:12px;
}
.md-title{font-weight:700;font-size:17px;flex:1}
.md-close{
  width:36px;height:36px;border-radius:10px;border:0;
  background:rgba(255,255,255,.18);color:#fff;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.md-close:hover{background:rgba(255,255,255,.3)}
.md-body{padding:20px;overflow:auto;-webkit-overflow-scrolling:touch}
.md-footer{
  padding:14px 20px;border-top:1px solid var(--line-soft);
  display:flex;gap:10px;justify-content:flex-end;background:var(--cream);
  padding-bottom:max(14px,env(safe-area-inset-bottom));
}

/* ── Hero + KPI ── */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:28px 26px;color:#fff;margin-bottom:20px;
  background:var(--xp-titlebar);box-shadow:var(--shadow);
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.2) 0%,transparent 45%),
    radial-gradient(circle at 10% 90%,rgba(127,224,192,.25) 0%,transparent 50%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero>*{position:relative;z-index:1}
.hero-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:99px;
  background:rgba(255,255,255,.16);font-size:12px;font-weight:600;
  backdrop-filter:blur(10px);margin-bottom:12px;border:1px solid rgba(255,255,255,.12);
}
.hero-title{font-size:clamp(22px,4vw,28px);font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.hero-sub{font-size:14px;opacity:.9;margin:0}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:20px}
.kpi{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r);padding:14px 16px;backdrop-filter:blur(10px);
  transition:transform .2s,background .2s;
}
.kpi:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.kpi-val{font-size:clamp(20px,3vw,26px);font-weight:800;line-height:1}
.kpi-lbl{font-size:11px;opacity:.88;margin-top:6px;font-weight:500}

/* ── Stat cards ── */
.sd-grid{display:grid;gap:16px}
.sd-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.sd-stat{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-xs);position:relative;overflow:hidden;min-width:0;
  transition:transform .2s var(--ease),box-shadow .2s;
}
.sd-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.sd-stat-ic{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;margin-bottom:12px;box-shadow:0 6px 16px rgba(31,122,94,.22);
}
.sd-stat-value{font-size:28px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.02em}
.sd-stat-lbl{font-size:13px;color:var(--muted);margin-top:6px;font-weight:500}
.sd-stagger>*{animation:rise .45s var(--ease) backwards}
.sd-stagger>*:nth-child(1){animation-delay:0s}.sd-stagger>*:nth-child(2){animation-delay:.06s}
.sd-stagger>*:nth-child(3){animation-delay:.12s}.sd-stagger>*:nth-child(4){animation-delay:.18s}
.sd-stagger>*:nth-child(5){animation-delay:.24s}.sd-stagger>*:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── Panel ── */
.panel{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);overflow:hidden;margin-bottom:18px;
  transition:box-shadow .2s;
}
.panel:hover{box-shadow:var(--shadow-sm)}
.panel-head{
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink);
  background:linear-gradient(180deg,#f8fcfa,#fff);
}
.panel-head i{color:var(--mint-2);font-size:17px}
.panel-head .sp{flex:1}
.panel-body{padding:18px}

/* ── Table ── */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:12px 14px;background:var(--mint-soft);
  border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap;
}
.tbl th:first-child{border-radius:10px 0 0 0}.tbl th:last-child{border-radius:0 10px 0 0}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-soft);font-size:14px}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover td{background:#f7fcf9}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}

/* ── Empty state ── */
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty i{font-size:52px;color:var(--mint-3);opacity:.45;display:block;margin-bottom:14px}
.empty p{margin:0 0 6px;font-weight:700;font-size:16px;color:var(--ink);font-family:'Kanit',sans-serif}
.empty small{font-size:14px;line-height:1.5}

/* ── Skeleton ── */
.sk{background:linear-gradient(90deg,var(--line-soft) 25%,#f5fbf8 50%,var(--line-soft) 75%);background-size:200% 100%;animation:sk 1.6s ease infinite;border-radius:12px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Nav class edit toggle ── */
.nav-class-tools{display:flex;align-items:center;gap:8px}
.nav-edit-toggle{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.2s;white-space:nowrap;
}
.nav-edit-toggle:hover{border-color:var(--mint-3);color:var(--ink)}
.nav-edit-toggle.is-on{border-color:var(--mint-1);background:var(--mint-soft);color:var(--mint-2);box-shadow:0 0 0 3px rgba(47,158,125,.1)}

/* ── Drag sort ── */
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:var(--muted);cursor:grab;flex-shrink:0;touch-action:none;user-select:none;transition:background .15s}
.drag-handle:active{cursor:grabbing}
.drag-handle:hover{background:var(--mint-soft);color:var(--mint-2)}
.is-dragging{opacity:.5}
.sort-drag-over{outline:2px dashed var(--mint-1);outline-offset:3px;border-radius:14px}
.curr-section{margin-bottom:6px;padding:10px;border-radius:var(--r);transition:background .15s}
.curr-section.is-dragging{background:var(--mint-soft)}

/* ── Progress bar ── */
.prog{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#43b88f,#2f9e7d,#1f7a5e);box-shadow:0 0 10px var(--mint-glow);transition:width .8s var(--ease)}

/* ── Page entrance ── */
.page-wrap > .hero,.page-wrap > .toolbar,.page-wrap > .panel,.page-wrap > .sd-grid,.page-wrap > .class-grid,.page-wrap > .learn-player,.page-wrap > .empty{
  animation:pageIn .4s var(--ease) backwards;
}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}