@import url("../fonts/fonts.css");

/* ============================================================
   ระบบจัดการแข่งขันงานศิลปหัตถกรรมนักเรียน — Design System
   ============================================================ */

:root {
  /* สีหลัก */
  --brand-50:#f5f3ff; --brand-100:#ede9fe; --brand-200:#ddd6fe; --brand-300:#c4b5fd;
  --brand-400:#a78bfa; --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#6d28d9;
  --brand-800:#5b21b6; --brand-900:#4c1d95;

  --gold:#d4a017;   --gold-soft:#fef3c7;
  --silver:#94a3b8; --silver-soft:#f1f5f9;
  --bronze:#b45309; --bronze-soft:#fef0e0;

  --ok:#059669; --ok-soft:#d1fae5;
  --warn:#d97706; --warn-soft:#fef3c7;
  --danger:#dc2626; --danger-soft:#fee2e2;
  --info:#0284c7; --info-soft:#e0f2fe;

  /* พื้นผิว */
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#fbfbfe;
  --surface-3:#f2f2f8;
  --line:#e6e6ef;
  --line-strong:#d3d3e0;

  --text:#181828;
  --text-2:#4b4b60;
  --text-3:#7c7c92;
  --text-inv:#ffffff;

  --radius-sm:8px; --radius:14px; --radius-lg:20px; --radius-xl:28px;
  --shadow-xs:0 1px 2px rgba(24,24,40,.06);
  --shadow-sm:0 2px 8px rgba(24,24,40,.06);
  --shadow:0 6px 24px -8px rgba(24,24,40,.16), 0 2px 6px rgba(24,24,40,.04);
  --shadow-lg:0 24px 48px -20px rgba(24,24,40,.30);

  /* ฟอนต์ชุดเดียวกับเว็บต้นแบบ (art73) — Tahoma เป็นหลัก มีสำรองให้เครื่องที่ไม่มี */
  --font: Tahoma, "MS Sans Serif", Verdana, "Sarabun", "IBM Plex Sans Thai",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-alt: var(--font);
  --mono: "Courier New", Consolas, Menlo, monospace;
  --header-h: 66px;
}

:root[data-theme="dark"] {
  --bg:#0d0d14;
  --surface:#16161f;
  --surface-2:#1c1c27;
  --surface-3:#23232f;
  --line:#2b2b38;
  --line-strong:#3a3a4a;
  --text:#ececf5;
  --text-2:#b6b6c8;
  --text-3:#8a8aa0;
  --brand-50:#1e1b33; --brand-100:#2a2247;
  --gold-soft:#3a2f10; --silver-soft:#252530; --bronze-soft:#3a2412;
  --ok-soft:#0d3327; --warn-soft:#3a2b0d; --danger-soft:#3d1717; --info-soft:#0c2b3e;
  --shadow:0 6px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 24px 48px -20px rgba(0,0,0,.8);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg { max-width:100%; height:auto; vertical-align:middle; }
a { color:var(--brand-700); text-decoration:none; }
a:hover { color:var(--brand-600); text-decoration:underline; text-underline-offset:3px; }
:root[data-theme="dark"] a { color:var(--brand-300); }
h1,h2,h3,h4,h5 { margin:0 0 .5em; font-weight:700; line-height:1.35; letter-spacing:-.01em; }
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)} h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem)}
h3{font-size:1.22rem} h4{font-size:1.06rem} p{margin:0 0 1rem;}
hr { border:0; border-top:1px solid var(--line); margin:1.5rem 0; }
small { font-size:.86em; }

/* ---------- Layout ---------- */
.container { width:min(1240px, 100% - 2rem); margin-inline:auto; }
.container-wide { width:min(1600px, 100% - 2rem); margin-inline:auto; }
.container-narrow { width:min(820px, 100% - 2rem); margin-inline:auto; }
.stack > * + * { margin-top:var(--gap,1rem); }
.row { display:flex; flex-wrap:wrap; gap:1rem; }
.row > .col { flex:1 1 0; min-width:0; }
.grid { display:grid; gap:1.1rem; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); }
.grid-fill { grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }
.split { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.6rem; align-items:start; }
@media (max-width:980px){ .split { grid-template-columns:1fr; } }
.section { padding-block:2.2rem; }
.flex { display:flex; gap:.6rem; align-items:center; }
.flex-between { display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.flex-wrap { flex-wrap:wrap; }
.ml-auto { margin-left:auto; }
.text-center{text-align:center} .text-end{text-align:right} .text-muted{color:var(--text-3)}
.text-2{color:var(--text-2)} .nowrap{white-space:nowrap} .mono{font-variant-numeric:tabular-nums}
.mt-0{margin-top:0} .mb-0{margin-bottom:0} .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.6rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:1.6rem}
.w-100{width:100%} .hidden{display:none !important}

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .bar { display:flex; align-items:center; gap:1rem; height:var(--header-h); }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:700; color:var(--text); text-decoration:none; }
.brand:hover { text-decoration:none; color:var(--text); }
.brand-mark {
  width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-800));
  color:#fff; font-weight:700; font-size:.95rem; box-shadow:var(--shadow-sm);
}
.brand-text { display:flex; flex-direction:column; line-height:1.2; }
.brand-text b { font-size:.98rem; }
.brand-text span { font-size:.74rem; color:var(--text-3); font-weight:500; }
.nav { display:flex; gap:.15rem; align-items:center; margin-left:auto; }
.nav a {
  padding:.5rem .8rem; border-radius:10px; color:var(--text-2); font-size:.94rem;
  font-weight:500; text-decoration:none; white-space:nowrap;
}
.nav a:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.nav a.active { background:var(--brand-600); color:#fff; }
.nav-toggle { display:none; }
@media (max-width:1080px){
  .nav-toggle { display:inline-flex; margin-left:auto; }
  .nav {
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem;
    box-shadow:var(--shadow); max-height:calc(100vh - var(--header-h)); overflow:auto; margin:0;
  }
  .nav:not(.open) { display:none; }
}

/* ---------- Hero ---------- */
.hero {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,var(--brand-800) 0%,var(--brand-600) 45%,#9333ea 100%);
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(700px 340px at 88% 110%, rgba(255,215,120,.28), transparent 60%);
}
.hero-inner { position:relative; z-index:1; padding-block:2.6rem 2.9rem; }
.hero h1 { color:#fff; margin-bottom:.35rem; text-shadow:0 2px 20px rgba(0,0,0,.16); }
.hero .lead { color:rgba(255,255,255,.92); font-size:1.06rem; margin:0; }
.hero .eyebrow {
  display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  padding:.3rem .8rem; border-radius:999px; margin-bottom:.9rem; backdrop-filter:blur(6px);
}
.hero-meta { display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1.1rem; font-size:.94rem; color:rgba(255,255,255,.92); }
.hero-meta span { display:inline-flex; align-items:center; gap:.4rem; }

/* ---------- Card ---------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-xs); overflow:hidden;
}
.card-pad { padding:1.15rem 1.25rem; }
.card-head {
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1.25rem;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.card-head h3, .card-head h2 { margin:0; font-size:1.02rem; }
.card-head .ml-auto { font-size:.88rem; }
.card-hover { transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-hover:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-300); }

/* ---------- Stat ---------- */
.stat { padding:1.05rem 1.15rem; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.stat .label { font-size:.85rem; color:var(--text-3); font-weight:500; }
.stat .value { font-size:1.85rem; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stat .sub { font-size:.8rem; color:var(--text-3); }
.stat-accent { background:linear-gradient(140deg,var(--brand-600),var(--brand-800)); border-color:transparent; color:#fff; }
.stat-accent .label,.stat-accent .sub { color:rgba(255,255,255,.85); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.56rem 1.05rem; border-radius:11px; border:1px solid transparent;
  font-family:inherit; font-size:.95rem; font-weight:600; line-height:1.4;
  cursor:pointer; text-decoration:none; transition:all .15s ease; white-space:nowrap;
  background:var(--brand-600); color:#fff;
}
.btn:hover { background:var(--brand-700); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active { transform:none; }
.btn-outline { background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-outline:hover { background:var(--surface-3); color:var(--text); border-color:var(--brand-400); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text); }
.btn-light { background:var(--surface); color:var(--brand-700); border-color:var(--line); }
.btn-light:hover { background:#fff; color:var(--brand-800); }
.btn-danger { background:var(--danger); } .btn-danger:hover { background:#b91c1c; }
.btn-ok { background:var(--ok); } .btn-ok:hover { background:#047857; }
.btn-sm { padding:.32rem .7rem; font-size:.86rem; border-radius:9px; }
.btn-lg { padding:.75rem 1.5rem; font-size:1.04rem; border-radius:13px; }
.btn-block { width:100%; }
.btn-icon { padding:.45rem; width:36px; height:36px; }
.btn[disabled],.btn.disabled { opacity:.5; pointer-events:none; }

/* ---------- Badge / chip ---------- */
.badge {
  display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem;
  border-radius:999px; font-size:.8rem; font-weight:600; line-height:1.5;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--line);
}
.badge-brand { background:var(--brand-100); color:var(--brand-800); border-color:transparent; }
.badge-ok { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.badge-warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.badge-danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.badge-info { background:var(--info-soft); color:var(--info); border-color:transparent; }
.medal-gold { background:var(--gold-soft); color:#8a6508; border-color:transparent; }
.medal-silver { background:var(--silver-soft); color:#475569; border-color:transparent; }
.medal-bronze { background:var(--bronze-soft); color:#8a3d06; border-color:transparent; }
.medal-join { background:var(--surface-3); color:var(--text-3); border-color:transparent; }
.medal-none { background:transparent; color:var(--text-3); }
:root[data-theme="dark"] .medal-gold{color:#fbbf24} :root[data-theme="dark"] .medal-silver{color:#cbd5e1}
:root[data-theme="dark"] .medal-bronze{color:#fb923c} :root[data-theme="dark"] .badge-brand{color:var(--brand-300)}

.code-chip {
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.78rem; letter-spacing:.02em;
  background:var(--brand-100); color:var(--brand-800); padding:.12rem .45rem; border-radius:6px;
}
:root[data-theme="dark"] .code-chip { color:var(--brand-300); }

/* ---------- Table ---------- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem; }
table.tbl th, table.tbl td { padding:.62rem .8rem; text-align:left; vertical-align:top; }
table.tbl thead th {
  position:sticky; top:0; z-index:2; background:var(--surface-2); color:var(--text-2);
  font-size:.83rem; font-weight:600; letter-spacing:.01em; text-transform:none;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl tbody tr { border-bottom:1px solid var(--line); }
table.tbl tbody tr:last-child { border-bottom:0; }
table.tbl tbody tr:hover { background:var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.tbl td.ctr, table.tbl th.ctr { text-align:center; }
table.tbl.compact th, table.tbl.compact td { padding:.42rem .6rem; font-size:.9rem; }
table.tbl .rank-1 { background:linear-gradient(90deg,var(--gold-soft),transparent 55%); }

/* ---------- Form ---------- */
label { display:block; font-size:.9rem; font-weight:600; color:var(--text-2); margin-bottom:.3rem; }
.input, input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=email],input[type=search],input[type=url],select,textarea {
  width:100%; padding:.55rem .75rem; font-family:inherit; font-size:.96rem; color:var(--text);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237c7c92'><path d='M4 6l4 4 4-4z'/></svg>"); background-repeat:no-repeat; background-position:right .6rem center; padding-right:2rem; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent); }
textarea { min-height:110px; resize:vertical; }
.field { margin-bottom:1rem; }
.field-row { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.help { font-size:.82rem; color:var(--text-3); margin-top:.25rem; }
.check { display:inline-flex; align-items:center; gap:.5rem; font-weight:500; color:var(--text); }
.check input { width:auto; }

/* ---------- Alert ---------- */
.alert { padding:.8rem 1rem; border-radius:12px; border:1px solid transparent; margin-bottom:1rem; font-size:.94rem; }
.alert-success { background:var(--ok-soft); color:var(--ok); }
.alert-danger { background:var(--danger-soft); color:var(--danger); }
.alert-warning { background:var(--warn-soft); color:var(--warn); }
.alert-info { background:var(--info-soft); color:var(--info); }

/* ---------- Misc ---------- */
.divider-label { display:flex; align-items:center; gap:.8rem; color:var(--text-3); font-size:.85rem; margin:1.4rem 0 .8rem; }
.divider-label::before,.divider-label::after { content:""; height:1px; background:var(--line); flex:1; }
.empty { text-align:center; padding:3rem 1rem; color:var(--text-3); }
.empty .icon { font-size:2.6rem; opacity:.35; display:block; margin-bottom:.6rem; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.87rem; color:var(--text-3); margin-bottom:.9rem; }
.breadcrumb a { color:var(--text-3); } .breadcrumb a:hover { color:var(--brand-600); }
.tabs { display:flex; gap:.25rem; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:1.2rem; }
.tabs a { padding:.55rem .9rem; font-size:.94rem; font-weight:600; color:var(--text-3); border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.tabs a:hover { color:var(--text); text-decoration:none; }
.tabs a.active { color:var(--brand-700); border-bottom-color:var(--brand-600); }
:root[data-theme="dark"] .tabs a.active { color:var(--brand-300); }
.chip-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.progress { height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; }
.progress > div { height:100%; background:linear-gradient(90deg,var(--brand-500),var(--brand-700)); border-radius:999px; }

/* ---------- Footer ---------- */
.site-footer { margin-top:3rem; padding:2rem 0 2.5rem; border-top:1px solid var(--line); background:var(--surface); color:var(--text-3); font-size:.9rem; }
.site-footer a { color:var(--text-2); }

/* ---------- Admin shell ---------- */
.admin-shell { display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh; }
.admin-side { background:var(--surface); border-right:1px solid var(--line); padding:1rem .8rem 2rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.admin-main { padding:1.4rem 1.6rem 3rem; min-width:0; background:var(--bg); }
.side-group { margin-top:1.2rem; }
.side-group > .t { font-size:.74rem; font-weight:700; letter-spacing:.06em; color:var(--text-3); padding:0 .7rem; margin-bottom:.35rem; text-transform:uppercase; }
.side-link { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:10px; color:var(--text-2); font-size:.93rem; font-weight:500; text-decoration:none; }
.side-link:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.side-link.active { background:var(--brand-600); color:#fff; }
/* เมนูที่ระบบยังปิดอยู่ — จางลงและกดไม่ได้ */
.side-link.is-off { opacity:.42; cursor:not-allowed; }
.side-link.is-off:hover { background:none; color:var(--text-2); }
.side-link .n { margin-left:auto; font-size:.78rem; opacity:.75; font-variant-numeric:tabular-nums; }
@media (max-width:900px){
  .admin-shell { grid-template-columns:1fr; }
  .admin-main { padding:1rem .9rem 3rem; }
}

/* ---------- จอนำเสนอ ---------- */
.board { background:#08080f; color:#fff; min-height:100vh; font-size:calc(1.05rem * var(--bfs,1)); padding-bottom:3rem; }
.board .board-wrap { margin:0 auto; padding:1.1rem 1.4rem; }
.board-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  border-bottom:2px solid rgba(255,255,255,.16); padding-bottom:.7rem; margin-bottom:.7rem; }
.board .bh-title { font-size:1.75em; font-weight:700; line-height:1.2; }
.board .bh-sub { opacity:.72; font-size:.82em; margin-top:.15rem; }
.board .bh-right { text-align:right; opacity:.8; font-size:.78em; line-height:1.5; }
.board .bh-clock { font-variant-numeric:tabular-nums; font-size:1.5em; opacity:.95; margin-top:.2rem; }
.board table.btbl { width:100%; border-collapse:collapse; }
.board table.btbl th { text-align:left; font-size:.72em; font-weight:600; color:rgba(255,255,255,.55);
  padding:.35rem .5rem; border-bottom:1px solid rgba(255,255,255,.14); }
.board table.btbl td { padding:.34rem .5rem; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top; }
.board table.btbl td.ctr, .board table.btbl th.ctr { text-align:center; }
.board table.btbl .b { font-weight:700; font-size:1.1em; }
.board .sm { font-size:.72em; opacity:.6; }
.board .gold { color:#fbbf24; font-weight:700; }
.board .silver { color:#cbd5e1; font-weight:700; }
.board .bronze { color:#fb923c; font-weight:700; }
.board tr.top1 { background:linear-gradient(90deg, rgba(251,191,36,.18), transparent 60%); }
.board .bsec { font-size:1.05em; font-weight:700; margin:.5rem 0 .3rem; color:#c4b5fd; }
.board .bsplit { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start; }
.board .btext p { margin:.35rem 0; line-height:1.7; font-size:.98em; }
.board .bempty { text-align:center; opacity:.6; padding:4rem 1rem; }
.board-bar { position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:space-between;
  padding:.4rem 1rem; background:rgba(0,0,0,.6); font-size:.78rem; backdrop-filter:blur(6px); }
.board-bar a { color:#c4b5fd; text-decoration:none; }
.board.no-scroll { }
@media (max-width:820px){ .board .bsplit { grid-template-columns:1fr; } }

/* ---------- Print ---------- */
@page { size:A4; margin:14mm 12mm; }
@media print {
  body { background:#fff; color:#000; font-size:12pt; }
  .site-header,.site-footer,.no-print,.admin-side,.tabs { display:none !important; }
  .admin-shell { display:block; } .admin-main { padding:0; }
  .card { border:0; box-shadow:none; }
  table.tbl thead th { position:static; background:#eee !important; color:#000; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  a { color:#000; text-decoration:none; }
  .page-break { break-after:page; }
}
.print-only { display:none; }
@media print { .print-only { display:block; } }

/* ============================================================
   หน้าหลัก — โครงสร้าง 3 คอลัมน์ (เมนูหลัก / เนื้อหา / ตารางแข่ง)
   ============================================================ */
.hero-compact .hero-inner { padding-block:1.6rem 1.8rem; }
.hero-compact h1 { font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem); margin-bottom:.25rem; }
.hero-compact .lead { font-size:.98rem; }
.hero-row { display:flex; gap:1.6rem; align-items:flex-end; flex-wrap:wrap; }
.hero-main { flex:1 1 380px; min-width:0; }
.hero-stats { display:flex; gap:.5rem; flex-wrap:wrap; }
.hero-stat {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.24);
  border-radius:12px; padding:.5rem .85rem; min-width:92px; backdrop-filter:blur(6px);
}
.hero-stat b { display:block; font-size:1.35rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.hero-stat span { font-size:.76rem; opacity:.9; }

.home-grid {
  display:grid; gap:1.3rem;
  grid-template-columns:255px minmax(0,1fr) 285px;
  align-items:start;
}
@media (max-width:1180px){ .home-grid { grid-template-columns:240px minmax(0,1fr); } .home-right { grid-column:1 / -1; } }
@media (max-width:820px){ .home-grid { grid-template-columns:minmax(0,1fr); } }
/* ลูกของกริดต้องยุบได้ ไม่งั้นเนื้อหายาว ๆ จะดันหน้าเว็บกว้างเกินจอ */
.home-grid > * { min-width:0; }
.home-left { position:sticky; top:calc(var(--header-h) + 1rem); }
@media (max-width:820px){ .home-left { position:static; } }

/* เมนูหลัก */
.mainmenu-list { padding:.35rem; display:flex; flex-direction:column; }
.mainmenu-list a {
  display:flex; align-items:center; gap:.55rem; padding:.44rem .6rem; border-radius:9px;
  font-size:.9rem; color:var(--text-2); text-decoration:none; line-height:1.4;
}
.mainmenu-list a:hover { background:var(--brand-100); color:var(--brand-800); text-decoration:none; }
:root[data-theme="dark"] .mainmenu-list a:hover { color:var(--brand-300); }
.mm-ico { width:1.2em; text-align:center; opacity:.65; flex:none; font-size:.95em; }

/* รายการเลื่อนได้ (หมวดหมู่ / งานอื่น) */
.scroll-list { max-height:330px; overflow-y:auto; padding:.35rem; }
.scroll-list a {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border-radius:9px;
  font-size:.88rem; color:var(--text-2); text-decoration:none;
}
.scroll-list a:hover { background:var(--surface-3); color:var(--text); text-decoration:none; }
.scroll-list .sl-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scroll-list .sl-n { font-size:.78rem; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ข่าว */
.news-list { display:flex; flex-direction:column; }
.news-list a {
  display:flex; gap:.85rem; padding:.7rem 1rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.news-list a:last-child { border-bottom:0; }
.news-list a:hover { background:var(--surface-2); text-decoration:none; }
.news-date { flex:none; width:74px; font-size:.78rem; color:var(--text-3); padding-top:.15rem; }
.news-body { min-width:0; }
.news-body b { display:block; font-size:.94rem; font-weight:600; color:var(--text); margin-bottom:.1rem; }
.news-body span { font-size:.84rem; color:var(--text-3); display:block;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* คู่คีย์-ค่า */
.kv-list { padding:.3rem .35rem; }
.kv-list > div {
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.36rem .65rem; font-size:.88rem; border-radius:8px;
}
.kv-list > div:nth-child(odd) { background:var(--surface-2); }
.kv-list span { color:var(--text-3); }
.kv-list b { font-variant-numeric:tabular-nums; }

/* ============================================================
   แม่แบบเกียรติบัตร / บัตรประจำตัว
   ============================================================ */
.tpl-sheet {
  position:relative; overflow:hidden; box-sizing:border-box; margin:0 auto 6mm;
  background-color:#fff; break-inside:avoid; box-shadow:0 2px 12px rgba(0,0,0,.08);
  /* ฟอนต์เดียวกับเอกสารต้นแบบของเว็บเดิม (Angsana New) มีสำรองให้เครื่องที่ไม่มีฟอนต์นี้ */
  font-family:"Angsana New","AngsanaUPC","TH Sarabun New","Sarabun","Norasi",serif;
  color:#000;
}
.tpl-field { position:absolute; line-height:1; white-space:pre-line; }
/* บรรทัดเดียว: ไม่ตัดคำ แล้วย่อให้พอดีกรอบด้วยสคริปต์ (กันข้อความทับบรรทัดถัดไป) */
.tpl-field.one-line { white-space:nowrap; }
.tpl-photo { position:absolute; aspect-ratio:3/4; object-fit:cover; border:1px solid #bbb; border-radius:3px; }
@media print {
  .tpl-sheet { box-shadow:none; margin:0 auto; break-after:page; }
  .tpl-sheet:last-child { break-after:auto; }
}

/* ตัวออกแบบแม่แบบ */
.tpl-editor { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.2rem; align-items:start; }
@media (max-width:1100px){ .tpl-editor { grid-template-columns:1fr; } }
.tpl-canvas-wrap { background:var(--surface-3); border-radius:var(--radius); padding:1.2rem; overflow:auto; }
.tpl-canvas { position:relative; margin:0 auto; }
.tpl-canvas .tpl-field { outline:1px dashed rgba(124,58,237,.45); cursor:move; }
.tpl-canvas .tpl-field.sel { outline:2px solid var(--brand-600); background:rgba(124,58,237,.08); }
.tpl-field-row { display:flex; align-items:center; gap:.4rem; padding:.35rem .5rem; border-radius:8px; font-size:.86rem; }
.tpl-field-row:hover { background:var(--surface-3); }
.tpl-field-row.sel { background:var(--brand-100); }
.var-chip {
  display:inline-block; font-size:.78rem; padding:.12rem .45rem; margin:.12rem;
  background:var(--surface-3); border:1px solid var(--line); border-radius:6px; cursor:pointer;
}
.var-chip:hover { background:var(--brand-100); border-color:var(--brand-300); }

/* โลโก้งานที่ผู้ดูแลอัปโหลด */
.brand-logo {
  width:40px; height:40px; flex:none; border-radius:10px; object-fit:contain;
  background:var(--surface); box-shadow:var(--shadow-xs);
}

/* แถบแบนเนอร์หน้าแรก */
.banner-strip { display:flex; gap:.8rem; overflow-x:auto; padding-bottom:.3rem; scroll-snap-type:x mandatory; }
.banner-strip img {
  height:190px; width:auto; max-width:none; border-radius:var(--radius);
  object-fit:cover; box-shadow:var(--shadow-sm); scroll-snap-align:start;
}
@media (max-width:700px){ .banner-strip img { height:130px; } }

/* ---------- แถบบัญชีผู้ใช้ ---------- */
.user-chip {
  display:flex; align-items:center; gap:.6rem; margin:0 .3rem .4rem;
  padding:.6rem .7rem; border-radius:12px; background:var(--surface-2); border:1px solid var(--line);
}
.user-avatar {
  width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-800)); color:#fff;
  font-weight:700; font-size:1rem;
}
.user-avatar.sm { width:28px; height:28px; font-size:.85rem; }
.user-meta { min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.user-meta b { font-size:.9rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-meta .mono { font-size:.76rem; color:var(--text-3); }
.user-meta .badge { align-self:flex-start; font-size:.72rem; margin-top:.1rem; }

.header-user {
  display:flex; align-items:center; gap:.5rem; padding:.28rem .6rem .28rem .3rem;
  border-radius:999px; background:var(--surface-3); border:1px solid var(--line);
  color:var(--text); text-decoration:none;
}
.header-user:hover { background:var(--brand-100); border-color:var(--brand-300); text-decoration:none; color:var(--text); }
.header-user-meta { display:flex; flex-direction:column; line-height:1.25; }
.header-user-meta b { font-size:.83rem; }
.header-user-meta span { font-size:.71rem; color:var(--text-3); }
@media (max-width:1080px){ .header-user-meta { display:flex; } }

/* แถบเตือนระหว่างสวมสิทธิ์ */
.imp-bar {
  position:sticky; top:0; z-index:80; padding:.5rem 0; font-size:.88rem;
  background:linear-gradient(90deg,#b45309,#d97706); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.imp-bar a.btn-light { background:rgba(255,255,255,.95); color:#92400e; border-color:transparent; }
.imp-tag { font-weight:700; background:rgba(0,0,0,.18); padding:.15rem .55rem; border-radius:999px; }

/* ---------- หน้ายกเลิกประกาศผล : รายหมวด 2 คอลัมน์ ---------- */
.unpub-bar { position:sticky; top:0; z-index:20; }
.unpub-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media (max-width:900px){ .unpub-grid { grid-template-columns:1fr; } }
.unpub-item {
  display:flex; align-items:center; gap:.5rem; padding:.42rem .85rem; font-size:.9rem;
  border-bottom:1px solid var(--line); min-width:0;
}
.unpub-grid > .unpub-item:nth-child(odd) { border-right:1px solid var(--line); }
@media (max-width:900px){ .unpub-grid > .unpub-item:nth-child(odd) { border-right:0; } }
.unpub-item:hover { background:var(--surface-2); }
.unpub-item.is-pub { background:color-mix(in srgb, var(--ok-soft) 45%, transparent); }
.unpub-item.is-pub:hover { background:var(--ok-soft); }
.unpub-item.is-none { color:var(--text-3); cursor:default; }
.unpub-item .no { width:1.9em; text-align:right; color:var(--text-3); font-variant-numeric:tabular-nums; flex:none; }
.unpub-item .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.unpub-item .none-tag { font-style:normal; color:var(--text-3); font-size:.86em; margin-left:.3rem; }
.unpub-item .act { flex:none; margin-left:auto; }
.unpub-item .act .btn { padding:.2rem .55rem; font-size:.78rem; }
.unpub-item .nm a { color:inherit; }
.unpub-item .nm a:hover { color:var(--brand-700); }
:root[data-theme="dark"] .unpub-item .nm a:hover { color:var(--brand-300); }

/* ---------- ช่องอัปโหลดรูปในหน้าการติดตั้งระบบ ---------- */
.img-slot { padding:.7rem 0; border-bottom:1px dashed var(--line); }
.img-slot:last-child { border-bottom:0; padding-bottom:.2rem; }
.px-tag {
  display:inline-block; font-size:.75rem; font-variant-numeric:tabular-nums;
  background:var(--brand-100); color:var(--brand-800); padding:.08rem .45rem;
  border-radius:6px; margin-top:.15rem;
}
:root[data-theme="dark"] .px-tag { color:var(--brand-300); }
.img-preview {
  width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--surface-3); display:grid; place-items:center;
}
.img-preview img { width:100%; height:100%; object-fit:contain; display:block; }

/* ตัวอย่างจำลอง */
.sample { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:.25rem; padding:6%; box-sizing:border-box;
  background:linear-gradient(135deg,var(--surface),var(--surface-3)); }
.sample .s-head { font-size:.72rem; font-weight:700; color:var(--text-2); text-align:center; line-height:1.3; }
.sample .s-sub  { font-size:.62rem; color:var(--text-3); text-align:center; }
.sample .l { display:block; height:5px; border-radius:3px; background:var(--line-strong); opacity:.7; }
.sample .l.mid { margin:.18rem auto; }
.w80{width:80%} .w70{width:70%} .w60{width:60%} .w55{width:55%} .w40{width:40%}
.sample-card { align-items:stretch; }
.sample-card .s-body { display:flex; gap:6%; align-items:center; flex:1; }
.sample-card .s-photo { width:26%; aspect-ratio:3/4; background:repeating-linear-gradient(45deg,
  var(--surface-3),var(--surface-3) 5px,var(--line) 5px,var(--line) 10px); border-radius:3px; }
.sample-card .s-lines { flex:1; display:flex; flex-direction:column; gap:5px; }
.sample-card .s-foot { height:4px; background:var(--brand-300); border-radius:2px; opacity:.6; }
.sample-cert { padding:4%; }
.sample-cert .s-border { width:100%; height:100%; border:3px double var(--brand-400);
  border-radius:4px; display:flex; flex-direction:column; justify-content:center; padding:5%; box-sizing:border-box; }
.sample-cert .s-sign { display:flex; gap:8%; justify-content:center; margin-top:auto; padding-top:5%; }
.sample-cert .s-sign .l { width:34%; }
.sample-header { background:linear-gradient(135deg,var(--brand-600),var(--brand-800)); }
.sample-header .s-head { color:#fff; font-size:.9rem; }
.sample-header .s-sub  { color:rgba(255,255,255,.85); }
.sample-logo .s-circle { width:46%; aspect-ratio:1; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-800)); color:#fff; font-weight:700; font-size:1rem; }

/* ---------- ตัวเลือกงานแข่งขัน (หน้ายกเลิกประกาศผล) ---------- */
.ev-group-label { font-size:.8rem; font-weight:700; color:var(--text-3); margin:.2rem .2rem .4rem; }
.ev-pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.45rem; }
.ev-chip {
  display:flex; flex-direction:column; gap:.1rem; padding:.5rem .7rem; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2); text-decoration:none; color:inherit;
}
.ev-chip:hover { border-color:var(--brand-400); background:var(--brand-100); text-decoration:none; color:inherit; }
.ev-chip.sel { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.ev-chip b { font-size:.87rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-chip span { font-size:.76rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.ev-chip.sel span { color:rgba(255,255,255,.85); }

/* ---------- รายชื่อกรรมการตัดสิน (หน้าเว็บ) ---------- */
.ref-body { padding:.3rem .4rem .6rem; }
.ref-act { padding:.6rem .75rem; border-bottom:1px solid var(--line); }
.ref-act:last-child { border-bottom:0; }
.ref-act-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; flex-wrap:wrap; }
.ref-act-head a { font-weight:600; color:var(--brand-700); font-size:.96rem; }
:root[data-theme="dark"] .ref-act-head a { color:var(--brand-300); }
.ref-act-head .ref-n { margin-left:auto; font-size:.76rem; color:var(--text-3);
  background:var(--surface-3); padding:.1rem .45rem; border-radius:999px; }
.ref-list { margin:0; padding-left:1.6rem; }
.ref-list li { padding:.2rem 0; font-size:.9rem; line-height:1.5;
  display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,1.9fr) 155px; gap:.3rem .8rem; align-items:baseline; }
.ref-list li::marker { color:var(--text-3); font-size:.85em; }
.rf-name { font-weight:600; }
.rf-pos { color:var(--text-3); font-size:.87em; }
.rf-duty { color:var(--text-2); font-size:.85em; text-align:right; white-space:nowrap; }
.rf-duty.is-head { color:#c2410c; font-weight:700; }
.rf-duty.is-sec  { color:var(--brand-700); font-weight:600; }
:root[data-theme="dark"] .rf-duty.is-head { color:#fb923c; }
:root[data-theme="dark"] .rf-duty.is-sec  { color:var(--brand-300); }
@media (max-width:760px){
  .ref-list li { grid-template-columns:1fr; gap:0; padding:.35rem 0; }
  .rf-duty { text-align:left; }
}
@media print {
  .ref-act { break-inside:avoid; }
  .ref-list li { grid-template-columns:minmax(140px,1fr) minmax(0,1.6fr) 140px; font-size:10pt; }
}

/* ---------- ตารางพิมพ์เอกสารการแข่งขัน ---------- */
table.docprint thead th { vertical-align:middle; }
.dp {
  display:inline-block; min-width:2.2rem; padding:.14rem .5rem; border-radius:7px;
  font-size:.78rem; font-weight:600; text-decoration:none;
  background:var(--brand-100); color:var(--brand-800); border:1px solid transparent;
}
.dp:hover { background:var(--brand-600); color:#fff; text-decoration:none; }
.dp.alt { background:var(--surface-3); color:var(--text-2); }
.dp.alt:hover { background:var(--text-3); color:#fff; }
:root[data-theme="dark"] .dp { color:var(--brand-300); }
.slot-note { font-size:.76rem; color:var(--warn); background:var(--warn-soft);
  padding:.25rem .5rem; border-radius:6px; margin-top:.4rem; }

/* ---------- สวิตช์สถานะระบบบนแดชบอร์ด ---------- */
.lock-list { padding:.25rem .3rem; }
.lock-row { display:flex; align-items:center; gap:.6rem; padding:.42rem .6rem; border-radius:9px; }
.lock-row:hover { background:var(--surface-2); }
.lock-txt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.lock-txt b { font-size:.9rem; font-weight:600; }
.lock-txt span { font-size:.76rem; color:var(--text-3); }
.lock-sw {
  flex:none; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-3); color:var(--text-3);
  border-radius:999px; padding:.18rem .6rem .18rem .2rem; font:inherit; font-size:.78rem;
  transition:all .15s ease;
}
.lock-sw .knob { width:15px; height:15px; border-radius:50%; background:var(--text-3); transition:all .15s ease; }
.lock-sw em { font-style:normal; font-weight:600; min-width:1.6rem; text-align:center; }
.lock-sw.on { background:var(--ok-soft); border-color:transparent; color:var(--ok); }
.lock-sw.on .knob { background:var(--ok); }
.lock-sw:hover { border-color:var(--brand-400); }

/* ---------- ป้ายระดับการแข่งขันบนหัวหน้าจอจัดการ ---------- */
.lvl-line{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;margin-bottom:.4rem}
.lvl-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .7rem;border-radius:999px;
  font-size:.82rem;font-weight:700;letter-spacing:.01em}
.lvl-area{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}
.lvl-group{background:#dcfce7;color:#166534;border:1px solid #86efac}
.lvl-sub{font-size:.82rem;color:var(--ink-2);font-weight:600}
.lvl-year{font-size:.78rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;padding:.15rem .55rem}

/* ---------- สวิตช์เปิด/ปิดระบบ ---------- */
.lock-list{display:flex;flex-direction:column}
.lock-row{display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;border-top:1px solid var(--line);margin:0}
.lock-row:first-child{border-top:0}
.lock-row:hover{background:var(--surface-2)}
.lock-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.lock-txt b{font-size:.95rem}
.lock-txt span{font-size:.79rem;color:var(--muted)}
.lock-sw{display:inline-flex;align-items:center;gap:.5rem;border:0;background:none;cursor:pointer;padding:0}
.lock-sw .knob{position:relative;width:52px;height:28px;border-radius:999px;background:#cbd5e1;
  transition:background .18s;flex:none;display:block}
.lock-sw .knob::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s}
.lock-sw em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--muted);min-width:2.1rem}
.lock-sw.on .knob{background:#16a34a}
.lock-sw.on .knob::after{transform:translateX(24px)}
.lock-sw.on em{color:#15803d}

/* ---------- ขั้นตอนการส่ง/รับโอนตัวแทน ---------- */
.flow-steps{display:flex;align-items:stretch;gap:.4rem;flex-wrap:wrap}
.flow-step{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .5rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-align:center}
.flow-step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#e2e8f0;color:var(--muted);font-size:.85rem}
.flow-step span{font-size:.8rem;color:var(--muted);line-height:1.35}
.flow-step.done{background:#f0fdf4;border-color:#86efac}
.flow-step.done b{background:#16a34a;color:#fff}
.flow-step.done span{color:#166534;font-weight:600}
.flow-step.now{background:#fffbeb;border-color:#fcd34d;box-shadow:0 0 0 3px #fef3c7}
.flow-step.now b{background:#d97706;color:#fff}
.flow-step.now span{color:#92400e;font-weight:700}
.flow-arrow{display:grid;place-items:center;color:var(--muted);font-size:1.1rem}
@media (max-width:720px){.flow-arrow{display:none}}
.stat-warn{border-color:#fcd34d;background:#fffbeb}
.stat-warn .value{color:#b45309}
.btn-warn{background:#d97706;border-color:#d97706;color:#fff}

/* ---------- การ์ดหมวดหมู่เกณฑ์การให้คะแนน ---------- */
.unpub-cat{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-top:1px solid var(--line);
  text-decoration:none;color:inherit}
.unpub-grid > .unpub-cat:nth-child(odd){border-right:1px solid var(--line)}
.unpub-cat:hover{background:var(--surface-2)}
.unpub-cat .uc-code{font-family:var(--mono);font-size:.8rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.2rem .45rem;flex:none}
.unpub-cat .uc-body{flex:1;min-width:0}
.unpub-cat .uc-body b{display:block;font-size:.93rem;line-height:1.3}
.unpub-cat .uc-meta{font-size:.78rem;color:var(--muted);margin-top:.1rem}

/* ---------- แจ้งเตือนเกณฑ์การให้คะแนนที่ยังไม่เรียบร้อย ---------- */
.crit-alert{border:1px solid #fcd34d;background:#fffbeb;border-radius:12px;overflow:hidden;margin-bottom:1.1rem}
.crit-alert .ca-head{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid #fde68a}
.crit-alert .ca-icon{font-size:1.3rem;color:#b45309;flex:none}
.crit-alert .ca-head b{color:#92400e;font-size:.98rem}
.crit-alert .ca-sub{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.25rem}
.crit-alert table.tbl{background:var(--surface)}
tr.row-bad td{background:#fffbeb}
tr.row-bad:hover td{background:#fef3c7}

/* ---------- แถบ "กลับเป็นผู้ดูแลระบบ" ในเมนูข้าง ---------- */
.side-imp{background:#fff7ed;border:1px solid #fdba74;border-radius:10px;padding:.5rem .4rem .55rem;margin-bottom:.7rem}
.side-imp .t{color:#c2410c}
.side-link.side-back{background:#ea580c;color:#fff;font-weight:700;border-radius:8px}
.side-link.side-back:hover{background:#c2410c;color:#fff}
.side-imp-note{font-size:.74rem;color:#9a3412;padding:.3rem .55rem 0}
.imp-bar{position:sticky;top:0;z-index:60}
.imp-card{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:#fff7ed;border:1px solid #fdba74;border-radius:12px;padding:.85rem 1.1rem;margin-bottom:1.1rem}
.imp-card .ic-icon{font-size:1.4rem;color:#c2410c;flex:none}
.imp-card .ic-body{flex:1;min-width:200px;display:flex;flex-direction:column}
.imp-card .ic-body b{color:#9a3412}
.imp-card .ic-body span{font-size:.83rem;color:#b45309}

/* ---------- มอบหมายงานเจ้าหน้าที่ ---------- */
.perm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;padding:1rem 1.1rem}
.perm-chip{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--surface);transition:.15s}
.perm-chip:hover{border-color:var(--brand)}
.perm-chip input{margin:0;flex:none}
.perm-chip .pc-icon{font-size:1.1rem;opacity:.6}
.perm-chip .pc-txt{font-size:.9rem;font-weight:600}
.perm-chip.on{border-color:var(--brand);background:var(--brand-soft)}
.perm-chip.on .pc-icon{opacity:1;color:var(--brand)}

.asg-list{display:flex;flex-direction:column}
.asg-cat{border-top:1px solid var(--line)}
.asg-cat .ac-head{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem}
.asg-cat.whole .ac-head{background:var(--brand-soft)}
.asg-cat.partial .ac-head{background:#fffbeb}
.ac-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;cursor:pointer;margin:0}
.ac-toggle input{margin:0;flex:none;width:17px;height:17px}
.ac-code{font-family:var(--mono);font-size:.76rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:.1rem .4rem;flex:none}
.ac-name{font-weight:600;font-size:.93rem}
.ac-count{font-size:.78rem;color:var(--muted);white-space:nowrap}
.ac-more{border:1px solid var(--line);background:var(--surface);border-radius:6px;width:28px;height:26px;
  cursor:pointer;color:var(--muted);flex:none;line-height:1}
.ac-more:hover{border-color:var(--brand);color:var(--brand)}
.ac-more.open{transform:rotate(180deg)}
.ac-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.1rem .8rem;
  padding:.3rem 1.1rem .8rem 2.6rem;background:var(--surface-2)}
.ac-act{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;padding:.22rem 0;cursor:pointer;margin:0}
.ac-act input{margin:.18rem 0 0;flex:none}
.ac-act .mono{color:var(--muted);font-size:.78rem;flex:none;min-width:2.6rem}
.ac-act em{font-style:normal;font-size:.78rem}

/* ---------- ปุ่มเลือกหมวดหมู่การแข่งขัน (เห็นครบทุกหมวดในหน้าเดียว) ---------- */
.cat-pick-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem}
.cat-pick-head h2{margin:0;font-size:1.12rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem;margin-bottom:1.6rem}
.cat-btn{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;transition:.15s;position:relative}
.cat-btn:hover{border-color:var(--brand-400);background:var(--brand-50,var(--surface-2));
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.07);text-decoration:none}
.cat-btn .cb-code{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.cat-btn .cb-name{font-weight:700;font-size:.97rem;line-height:1.3}
.cat-btn .cb-meta{font-size:.79rem;color:var(--muted)}

.cat-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.cat-bar-now{font-size:1.05rem}
.cat-more{margin-bottom:1.2rem}
.cat-more summary{cursor:pointer;font-size:.87rem;color:var(--brand-700);width:max-content;
  list-style:none;padding:.15rem 0}
.cat-more summary::-webkit-details-marker{display:none}
.cat-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem 0 .2rem}
.cat-chip{padding:.3rem .7rem;border-radius:999px;font-size:.85rem;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)}
.cat-chip:hover{border-color:var(--brand-400);color:var(--text);text-decoration:none}
.cat-chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}

/* ---------- ผลการแข่งขันรายกิจกรรม (แบบ view_all ของเว็บเดิม) ---------- */
.va-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.va-stats{display:flex;gap:.5rem;flex-wrap:wrap}
.va-stat{font-size:.86rem;color:var(--text-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.25rem .8rem}
.va-stat b{color:var(--text)}
.va-stat.ok{background:#f0fdf4;border-color:#86efac;color:#166534}
.va-stat.ok b{color:#15803d}
.va-stat.muted{color:var(--muted)}
.va-search{display:flex;gap:.4rem;margin-left:auto;flex-wrap:wrap}
.va-search input{min-width:240px}

.va-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 3px 0 rgba(15,23,42,.06);margin-bottom:1.4rem;overflow:hidden}
.va-box-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.va-box-head a{font-size:1.02rem;font-weight:700;color:var(--text);text-decoration:none}
.va-box-head a:hover{color:var(--brand-700)}
.va-cat-code{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.va-box-meta{margin-left:auto;font-size:.82rem;color:var(--muted)}
.va-pub-n{color:#15803d}

.va-list{list-style:none;margin:0;padding:.35rem 0;
  display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:820px){ .va-list{grid-template-columns:1fr} }
.va-item{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;
  padding:.42rem 1.1rem;font-size:.94rem;line-height:1.45}
.va-item:hover{background:var(--surface-2)}
.va-list > .va-item:nth-child(odd){border-right:1px solid var(--line)}
@media (max-width:820px){ .va-list > .va-item:nth-child(odd){border-right:0} }
.va-no{color:var(--muted);font-size:.82rem;min-width:1.7rem;text-align:right;flex:none}
.va-code{font-family:var(--mono);font-size:.82rem;color:var(--muted);flex:none}
.va-name{color:var(--text)}
a.va-name{color:var(--brand-700);font-weight:600;text-decoration:none}
a.va-name:hover{text-decoration:underline}
.va-note{font-size:.82rem;color:var(--muted)}
.va-item.none .va-name{color:var(--muted)}

/* ป้าย "ประกาศผลแล้ว" — ไฟกระพริบให้สะดุดตา */
.va-flag{flex:none;display:inline-flex;align-items:center;gap:.3rem;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;
  background:#16a34a;color:#fff;border-radius:999px;padding:.1rem .5rem .1rem .4rem;
  box-shadow:0 1px 3px rgba(22,163,74,.4)}
/* วงกระเพื่อมเฉพาะตอนชี้ — หน้าหนึ่งมีป้ายเป็นร้อย ถ้าเรืองแสงตลอดจะกินแรงเครื่องและลายตา */
.va-item:hover .va-flag{animation:va-glow 1.6s ease-in-out infinite}
/* ดวงไฟกระพริบหน้าข้อความ */
.va-flag::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:#fef08a;box-shadow:0 0 5px 1px #fde047;
  animation:va-blink 1.1s steps(1,end) infinite}
@keyframes va-blink{
  0%,49%  { opacity:1; }
  50%,100%{ opacity:.2; }
}
@keyframes va-glow{
  0%,100% { box-shadow:0 1px 3px rgba(22,163,74,.4); }
  50%     { box-shadow:0 1px 3px rgba(22,163,74,.4), 0 0 0 4px rgba(34,197,94,.22); }
}
.va-item.pub{background:linear-gradient(90deg,rgba(22,163,74,.07),transparent 60%)}
.va-item.pub:hover{background:linear-gradient(90deg,rgba(22,163,74,.13),var(--surface-2) 60%)}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว หรือเวลาพิมพ์ — ไม่ต้องกระพริบ */
@media (prefers-reduced-motion:reduce){
  .va-flag, .va-flag::before{animation:none}
  .va-flag::before{opacity:1;background:#fef08a;box-shadow:0 0 5px 1px #fde047}
}
@media print{
  .va-flag, .va-flag::before{animation:none}
  .va-flag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- ช่องลงลายมือชื่อคณะกรรมการ (แบบบันทึกคะแนน) ---------- */
.sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm 5mm;margin-top:6mm;text-align:center}
.sign-slot{font-size:9.5pt;line-height:1.45;break-inside:avoid;page-break-inside:avoid}
/* กรรมการหลายคน จัดสี่คอลัมน์ให้ประหยัดพื้นที่ */
.sign-grid.many{grid-template-columns:repeat(4,1fr);gap:5mm 4mm;font-size:9pt}
.sign-slot .sign-name{white-space:nowrap}
.sign-slot .sign-duty{color:#333}
.sign-note{font-size:8.5pt;color:#555;text-align:center;margin:3mm 0 0}
@media (max-width:700px){ .sign-grid{grid-template-columns:repeat(2,1fr)} }
@media print{ .sign-grid{grid-template-columns:repeat(3,1fr)} }

/* แถวเจ้าหน้าที่ที่ถูกล็อค */
tr.row-locked td{background:#fef2f2;color:var(--muted)}
tr.row-locked td b{color:var(--muted)}

/* ---------- จอนำเสนอ: หัวคงที่ · ตารางเลื่อนเอง · สลับสว่าง/มืด ---------- */
.board{ --bg:#08080f; --fg:#fff; --line-b:rgba(255,255,255,.14); --dim:rgba(255,255,255,.6);
        --row:rgba(255,255,255,.07); --head:rgba(255,255,255,.55);
        background:var(--bg); color:var(--fg);
        height:100vh; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0 }
.board.light{ --bg:#f6f8fc; --fg:#0f172a; --line-b:rgba(15,23,42,.16); --dim:rgba(15,23,42,.6);
              --row:rgba(15,23,42,.07); --head:rgba(15,23,42,.55) }
.board .board-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; width:100%; }
.board .board-head{ flex:none; align-items:center; border-bottom-color:var(--line-b) }
.board .bh-logo{ height:2.9em; width:auto; object-fit:contain; flex:none; margin-right:.2rem }
.board .bh-main{ flex:1; min-width:0 }
.board .bh-sub, .board .bh-right{ color:var(--dim); opacity:1 }
.board .bh-theme{ flex:none; border:1px solid var(--line-b); background:transparent; color:var(--fg);
  border-radius:8px; width:2em; height:2em; font-size:1em; cursor:pointer; line-height:1 }
.board .bh-theme:hover{ border-color:var(--fg) }

/* กรอบที่เลื่อน — หัวตารางติดบนสุดของกรอบ */
.board .board-scroll{ flex:1; min-height:0; overflow:hidden; position:relative }
.board.no-scroll .board-scroll{ overflow-y:auto }
.board table.btbl th{ color:var(--head); border-bottom-color:var(--line-b);
  position:sticky; top:0; background:var(--bg); z-index:2 }
/* สำเนาที่ใช้ต่อท้ายให้เลื่อนวนไม่สะดุด — หัวตารางไม่ต้องหนึบซ้ำ */
.board .board-scroll > [aria-hidden="true"] table.btbl th{ position:static }
.board table.btbl td{ border-bottom-color:var(--row) }
.board .bsec{ background:var(--bg) }

/* จอนำเสนอ: ผลการแข่งขันทุกกิจกรรม (แบบ show_skill_random) */
.board .bact{ margin-bottom:1.1em; break-inside:avoid }
.board .bact-head{ display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap;
  padding:.3em .5em; border-left:3px solid var(--bg-accent,#7c3aed); background:var(--row); border-radius:4px }
.board .bact-head b{ font-size:1.02em }
.board .bact-cat{ font-size:.75em; color:var(--dim) }
.board .bact-code{ margin-left:auto; font-size:.75em; color:var(--dim); font-family:var(--mono) }
.board table.bact-tbl{ margin-top:.15em }
.board table.bact-tbl th{ position:static; font-size:.68em; padding:.2em .5em }
.board table.bact-tbl td{ padding:.24em .5em; font-size:.92em }
.board .m-gold{ color:#fbbf24 } .board .m-silver{ color:#cbd5e1 }
.board .m-bronze{ color:#d97706 } .board .m-join, .board .m-none{ color:var(--dim) }
.board.light .m-gold{ color:#b45309 } .board.light .m-silver{ color:#64748b }
.board.light .m-bronze{ color:#92400e }
/* โหมดสรุปเหรียญ + ผลการแข่งขัน: สองฝั่งเลื่อนแยกกัน (เหมือนสองเฟรมของเว็บเดิม) */
.board .board-scroll.is-split{ overflow:hidden; display:flex }
.board .board-scroll.is-split .bsplit{ flex:1; min-height:0; display:grid;
  grid-template-columns:1fr 1fr; gap:0 1.2em; align-items:stretch }
.board .bpane{ min-height:0; display:flex; flex-direction:column }
.board .bpane .bsec{ flex:none }
.board .bpane-body{ flex:1; min-height:0; overflow:hidden }

/* ปุ่มกลับหน้าผู้ดูแลระบบ — วางไว้เด่นด้านบนเมนูข้าง จะได้ไม่ต้องเลื่อนหา */
.side-admin-home{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  margin-bottom:.8rem;font-weight:600}
.side-admin-home:hover{border-color:var(--brand-400)}

/* ---------- ตัวเลือกสลับปีการศึกษาในเมนูข้าง ---------- */
.side-year{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:.5rem .55rem .6rem;margin-bottom:.8rem}
.side-year .t{font-size:.7rem;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;margin-bottom:.35rem;padding-left:.15rem}
.side-year-row{display:flex;flex-wrap:wrap;gap:.3rem}
.year-chip{flex:1;min-width:3.4rem;text-align:center;padding:.3rem .5rem;border-radius:7px;
  font-size:.86rem;font-weight:600;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);color:var(--text-2)}
.year-chip:hover{border-color:var(--brand-400);color:var(--text);text-decoration:none}
.year-chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}

/* ตัวสลับปีการศึกษาบนหัวหน้าจอจัดการ */
.lvl-switch{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .3rem .12rem .55rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px}
.lvl-switch .ls-label{font-size:.75rem;color:var(--muted)}
.lvl-switch .ls-chip{font-size:.8rem;font-weight:700;text-decoration:none;
  padding:.12rem .55rem;border-radius:999px;color:var(--text-2);background:var(--surface);
  border:1px solid var(--line)}
.lvl-switch .ls-chip:hover{border-color:var(--brand-400);color:var(--text);text-decoration:none}
.lvl-switch .ls-chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
/* ลายมือชื่อเจ้าหน้าที่ประมวลผลท้าย DOC.7 / DOC.8 */
.d78-officer{display:flex;justify-content:flex-end;margin-top:6mm}
.d78-officer .sign-slot{text-align:center;min-width:70mm}

/* ---- ทะเบียนบัญชีผู้ใช้: ชื่อผู้ใช้/รหัสผ่าน คลิกคัดลอกได้ ---- */
.cred, .cred > span { cursor:pointer; letter-spacing:.02em; }
.cred:hover, .cred > span:hover { text-decoration:underline dotted; }
.cred.copied, .cred > span.copied { background:var(--ok); color:#fff; border-radius:4px; padding:0 .2rem; }
.note-warn { border-left:4px solid var(--warn, #d97706); background:var(--surface-2); }
hr.sep { border:0; border-top:1px solid var(--line); margin:1rem 0 .8rem; }
@media print {
  .no-print, .tabs, form.card, .btn, details { display:none !important; }
  .split { display:block !important; }
  #usersTable { font-size:11px; }
}

/* ---- ปุ่มกรองกลุ่มเครือข่าย (ทะเบียนบัญชีผู้ใช้) ---- */
.chip-wrap { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip-wrap .chip {
  display:inline-flex; align-items:center; gap:.34rem;
  padding:.34rem .6rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--text); text-decoration:none;
  font-size:.82rem; line-height:1.2; white-space:nowrap; transition:.12s;
}
.chip-wrap .chip:hover { border-color:var(--brand-600); background:var(--surface-2); }
.chip-wrap .chip.on { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.chip-wrap .chip-no {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.25rem; height:1.25rem; border-radius:999px;
  background:var(--surface-2); color:var(--text-3); font-size:.72rem; font-weight:700;
}
.chip-wrap .chip.on .chip-no { background:rgba(255,255,255,.28); color:#fff; }
.chip-wrap .chip-n { color:var(--text-3); font-size:.74rem; font-variant-numeric:tabular-nums; }
.chip-wrap .chip.on .chip-n { color:rgba(255,255,255,.85); }
.note-danger { border-left:4px solid var(--danger); background:var(--danger-soft); }

/* ---- แผงข้อมูลโรงเรียน (ถอดจากหน้าหลัก school_manager ของระบบเดิม) ---- */
.sch-id-grid { display:grid; grid-template-columns:1fr auto; gap:1.2rem; align-items:start; }
.sch-name { font-size:1.06rem; font-weight:700; }
.sch-meta { display:grid; grid-template-columns:auto 1fr; gap:.18rem .7rem; margin:.6rem 0 0; font-size:.86rem; }
.sch-meta dt { color:var(--text-3); }
.sch-meta dd { margin:0; color:var(--text-2); }
.sch-cred { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
            padding:.7rem .95rem; min-width:13rem; }
.sch-cred .lbl { font-size:.74rem; color:var(--text-3); }
.sch-cred .val { font-size:1rem; font-weight:700; color:var(--brand-700); letter-spacing:.02em; }
tr.row-warn td { background:var(--warn-soft); }
.stat-danger .value { color:var(--danger); }
@media (max-width:760px) { .sch-id-grid { grid-template-columns:1fr; } }

/* ---- แถบสถานะการดำเนินการของโรงเรียน (เปิด/ปิด 4 อย่าง) ---- */
.sw-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.sw-item { border:1px solid var(--line); border-radius:var(--radius-sm); padding:.55rem .7rem;
           background:var(--surface-2); }
.sw-item.is-open { border-color:#a7f3d0; background:var(--ok-soft); }
.sw-item.is-shut { border-color:#fecaca; background:var(--danger-soft); }
.sw-top { display:flex; align-items:center; gap:.4rem; }
.sw-dot { width:.6rem; height:.6rem; border-radius:50%; flex:none; }
.sw-item.is-open .sw-dot { background:var(--ok); box-shadow:0 0 0 3px rgba(5,150,105,.16); }
.sw-item.is-shut .sw-dot { background:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.14); }
.sw-name { font-size:.85rem; font-weight:600; }
.sw-badge { margin-left:auto; font-size:.72rem; font-weight:700; padding:.08rem .42rem;
            border-radius:999px; color:#fff; }
.sw-item.is-open .sw-badge { background:var(--ok); }
.sw-item.is-shut .sw-badge { background:var(--danger); }
.sw-note { font-size:.75rem; color:var(--text-3); margin-top:.24rem; line-height:1.45; }
/* หัวแถบ — บอกระดับการแข่งขันที่กำลังดู และสลับไปอีกระดับได้ */
.sw-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
           padding-bottom:.6rem; margin-bottom:.6rem; border-bottom:1px solid var(--line); }
.sw-hint { margin-top:.6rem; padding:.5rem .7rem; border-radius:var(--radius-sm);
           background:var(--surface-2); border:1px solid var(--line);
           font-size:.79rem; color:var(--text-2); line-height:1.6; }
.sw-hint .hint-row { display:flex; align-items:flex-start; gap:.4rem; }
.sw-hint .hint-row + .hint-row { margin-top:.25rem; }
.sw-hint .hint-yes { color:var(--ok); font-weight:700; flex:none; }
.sw-hint .hint-no  { color:var(--danger); font-weight:700; flex:none; }
/* จำนวนรายชื่อที่ยังไม่ครบตามเกณฑ์ ในหน้าลงทะเบียนแข่งขัน */
.text-danger { color:var(--danger); font-weight:700; }
.tbl input.pick { width:1.05rem; height:1.05rem; cursor:pointer; accent-color:var(--brand-600); }
@media (max-width:980px) { .sw-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .sw-grid { grid-template-columns:1fr; }
  .sw-head .lvl-switch { margin-left:0; width:100%; } }
.chip-wrap .chip-ok { color:var(--ok); font-weight:700; }
.chip-wrap .chip.on .chip-ok { color:#fff; }
.quota-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.35rem; }
.quota-pill { background:var(--surface); border:1px solid var(--line); border-radius:999px;
              padding:.2rem .65rem; font-size:.84rem; }
.quota-pill b { color:var(--brand-700); }

/* ---- ลงทะเบียนแข่งขันของโรงเรียน (ถอดจาก category_view ของระบบเดิม) ---- */
.reg-split { display:grid; grid-template-columns:minmax(280px,26rem) 1fr; gap:1rem; align-items:start; }
.cat-tbl a { text-decoration:none; color:var(--text); }
.cat-tbl a:hover { text-decoration:underline; color:var(--brand-700); }
.cat-tbl tr.cat-on td { background:var(--brand-50, #f3eeff); box-shadow:inset 3px 0 0 var(--brand-600); }
tr.row-mine td { background:var(--ok-soft); }
@media (max-width:900px) { .reg-split { grid-template-columns:1fr; } }

/* ---- หน้ากรอกรายชื่อผู้เข้าแข่งขัน (ถอดจาก form_team) ---- */
.quota-list { margin:.2rem 0 1rem 1.1rem; padding:0; font-size:.92rem; color:var(--text-2); }
.quota-list li { margin:.12rem 0; }
.quota-list b { color:var(--brand-700); }
.roster-split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.pr-row { display:flex; align-items:flex-end; gap:.45rem; flex-wrap:nowrap;
          border-bottom:1px dashed var(--line); padding-bottom:.6rem; margin-bottom:.6rem; }
.pr-row:last-of-type { border-bottom:0; margin-bottom:0; }
.pr-row .field { margin:0; min-width:0; }
.pr-seq { flex:0 0 1.5rem; }
.pr-seq .mono { padding:.55rem 0; color:var(--text-3); }
.pr-title { flex:0 0 5.2rem; }
.pr-grade { flex:0 0 5.8rem; }
.pr-pos   { flex:0 0 6rem; }
.pr-name  { flex:1 1 0; }
.pr-del   { flex:0 0 2rem; }
.pr-row input { width:100%; }
.pr-row label { font-size:.72rem; }
/* ค่าที่ระบบกำหนดให้ตามเกณฑ์ — แก้ไขไม่ได้ แสดงให้อ่านอย่างเดียว */
.pr-fixed { padding:.5rem .55rem; border:1px dashed var(--line); border-radius:var(--radius-sm);
            background:var(--surface-2); color:var(--text-2); font-size:.86rem;
            text-align:center; white-space:nowrap; }
@media (max-width:1100px) { .roster-split { grid-template-columns:1fr; } }

/* ---- ทะเบียนบัญชีโรงเรียน: หัวข้อคั่นกลุ่มเครือข่าย ---- */
tr.grp-head td { background:var(--brand-50); font-weight:700; font-size:.86rem;
                 color:var(--brand-800); border-top:2px solid var(--brand-200);
                 padding-top:.5rem; padding-bottom:.4rem; }
tr.grp-head .grp-n { font-weight:400; color:var(--text-3); font-size:.78rem; margin-left:.5rem; }
@media print {
  tr.grp-head td { background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  tr.grp-head { break-before:auto; page-break-inside:avoid; }
}
.chip-wrap .chip-warn { border-color:#fecaca; background:var(--danger-soft); }
.chip-wrap .chip-warn.on { background:var(--danger); border-color:var(--danger); color:#fff; }
tr.grp-head .grp-pick { display:flex; align-items:center; gap:.45rem; cursor:pointer; margin:0; }
tr.grp-head .grp-pick input { margin:0; }

/* ---- แนวทางการดำเนินงานของโรงเรียน ---- */
.sch-guide { border-left:4px solid var(--brand-400); background:var(--surface-2); }
.sch-guide p { margin:.25rem 0 0; font-size:.88rem; color:var(--text-2);
               line-height:1.7; text-indent:2em; }
.pr-need { display:inline-block; width:1rem; text-align:center; color:var(--danger);
           font-weight:700; line-height:2.2; }
.pr-need.on { color:var(--danger); }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.lg-page{min-height:100vh;display:flex;align-items:center;justify-content:center;
         padding:2.5rem 1.25rem;background:var(--bg)}
.lg-card{width:min(24rem,100%);text-align:center}

.lg-head{margin-bottom:1.9rem}
.lg-logo{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 1.1rem}
.lg-head h1{font-size:1.5rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;
            margin:0 0 .45rem;text-wrap:balance}
.lg-sub{margin:0;font-size:.89rem;line-height:1.8;color:var(--text-3)}

.lg-form{text-align:left}
.lg-form .field{margin-bottom:.9rem}

.lg-foot{margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--line);
         display:flex;flex-direction:column;align-items:center;gap:.45rem;
         font-size:.84rem;color:var(--text-3)}
.lg-foot a{color:var(--brand-700);text-decoration:none}
.lg-foot a:hover{text-decoration:underline}

@media (max-width:420px){ .lg-logo{width:86px;height:86px} .lg-head h1{font-size:1.32rem} }

/* ---------- แถบบน + เมนูลิ้นชัก สำหรับจอเล็ก ---------- */
.mtop{display:none}
.side-veil{display:none}
.side-x{display:none}

@media (max-width:900px){
  .mtop{
    display:flex;align-items:center;gap:.5rem;
    position:sticky;top:0;z-index:60;
    padding:.5rem .6rem;background:var(--surface);
    border-bottom:1px solid var(--line);
  }
  .mtop-title{
    flex:1;min-width:0;font-weight:600;font-size:.98rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .mtop-btn{
    flex:none;width:2.6rem;height:2.6rem;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:10px;background:var(--surface);
    color:var(--text);font-size:1.05rem;cursor:pointer;
  }
  .mtop-btn:active{background:var(--surface-2)}
  .mtop-bars{display:grid;gap:4px}
  .mtop-bars i{display:block;width:17px;height:2px;border-radius:2px;background:currentColor}

  /* เมนูเลื่อนเข้าจากซ้าย ไม่ดันเนื้อหาลงไปข้างล่างอีกต่อไป */
  .admin-side{
    position:fixed;inset:0 auto 0 0;z-index:70;width:min(19rem,86vw);height:100dvh;
    border-right:1px solid var(--line);overflow-y:auto;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  body.side-on .admin-side{transform:none}
  .side-veil{
    display:block;position:fixed;inset:0;z-index:65;
    background:rgba(10,10,20,.45);backdrop-filter:blur(2px);
  }
  .side-x{
    display:grid;place-items:center;position:absolute;top:.6rem;right:.6rem;
    width:2.1rem;height:2.1rem;border:0;border-radius:9px;
    background:var(--surface-2);color:var(--text-2);font-size:.95rem;cursor:pointer;
  }
  body.side-on{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){ .admin-side{transition:none} }

/* ---------- ปรับความหนาแน่นและขนาดปุ่มบนจอเล็ก ---------- */
@media (max-width:640px){
  /* การ์ดสถิติเรียง 2 ต่อแถว แทนที่จะเป็นแถวละใบ */
  .grid-4, .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .stat { padding:.7rem .8rem; }
  .stat .value { font-size:1.45rem; }
  .stat .label { font-size:.76rem; }

  h1 { font-size:1.35rem; }
  .card-pad { padding:.9rem 1rem; }
  .card-head { padding:.7rem .9rem; flex-wrap:wrap; gap:.4rem; }

  /* ปุ่มและช่องกรอกต้องแตะง่าย และไม่ให้ iOS ซูมเองเวลาโฟกัส */
  .btn { min-height:2.6rem; }
  .btn-sm { min-height:2.2rem; }
  input, select, textarea { font-size:16px; min-height:2.7rem; }
  .field-row { flex-wrap:wrap; }
  .field-row > * { min-width:0; }

  /* แถวปุ่มจัดการในตาราง ให้ตัดบรรทัดได้ ไม่ดันตารางกว้าง */
  .tbl td.nowrap { white-space:normal; }
  .tbl td.nowrap .btn { margin:.1rem .1rem 0 0; }

  /* หน้าเข้าสู่ระบบ */
  .lg-page { padding:1.75rem 1rem; }
}

/* ตารางกว้างเลื่อนในกรอบของตัวเอง หน้าเว็บไม่เลื่อนออกข้าง */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
body { overflow-x:hidden; }

/* แถบแท็บและแถบชิป เลื่อนแนวนอนได้บนจอเล็ก ไม่ถูกตัดหาย */
@media (max-width:640px){
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
        scrollbar-width:none;padding-bottom:.15rem}
  .tabs::-webkit-scrollbar{display:none}
  .tabs > a{white-space:nowrap;flex:none}
  .chip-wrap{max-height:11.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .breadcrumb{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .breadcrumb::-webkit-scrollbar{display:none}
}