:root{
  --bg:#f4f7fb; --card:#fff; --ink:#1f2a37;
  --muted:#6b7280; --line:#e5e9f0;
  --brand:#0f766e; --brand-d:#0b5b54; --brand-l:#e6f4f2;
  --buy:#2563eb; --buy-l:#e8f0ff;
  --pick:#7c3aed; --pick-l:#f1eaff;
  --rank:#d97706; --rank-l:#fff3e0;
  --warn:#b45309; --danger:#dc2626;
  --loilo:#db2777; --loilo-l:#fde7f1;
  --radius:16px; --shadow:0 2px 10px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
b{font-weight:700}

/* hero */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,#0e7490 55%,#1d4ed8 100%);
  color:#fff; padding:38px 16px 30px; text-align:center;
}
.hero__inner{max-width:760px;margin:0 auto}
.hero__school{margin:0 0 10px;font-size:14px;opacity:.92;letter-spacing:.5px}
.hero__title{margin:0;font-size:30px;font-weight:800;line-height:1.3}
.hero__sub{margin:12px 0 0;font-size:15px;opacity:.95}
.hero__meta{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  color:#fff;padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:600}
.pill--warn{background:#fff;color:var(--warn)}

/* layout */
.wrap{max-width:840px;margin:0 auto;padding:22px 16px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 18px}
.block{margin-top:30px}
.block__head{margin-bottom:14px}
.block__tag{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 11px;
  border-radius:999px;margin-bottom:8px}
.block__tag--buy{background:var(--buy-l);color:var(--buy)}
.block__tag--pick{background:var(--pick-l);color:var(--pick)}
.block__tag--rank{background:var(--rank-l);color:var(--rank)}
.block__title{margin:0;font-size:21px;font-weight:800}
.block__desc{margin:6px 0 0;font-size:14px;color:var(--muted)}

/* note */
.note__h{margin:0 0 8px;font-size:17px}
.note__steps{margin:0;padding-left:22px}
.note__steps li{margin:4px 0}
.note__tip{margin:12px 0 0;font-size:13.5px;color:var(--warn);background:#fffbeb;
  border:1px solid #fde68a;border-radius:10px;padding:9px 12px}

/* name bar */
.namebar{margin-top:18px;position:sticky;top:0;z-index:30;border-color:var(--brand)}
.namebar__label{display:block;font-weight:700;margin-bottom:6px}
.namebar__input{width:100%;padding:12px 14px;font-size:17px;border:2px solid var(--brand);
  border-radius:12px;outline:none}
.namebar__input:focus{box-shadow:0 0 0 3px var(--brand-l)}
.namebar__extra{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.namebar__small{flex:1;min-width:180px;padding:9px 12px;font-size:14px;
  border:1px solid var(--line);border-radius:10px}
.namebar__hint{margin:8px 0 0;font-size:13px;color:var(--brand-d);min-height:1em}
.namebar__why{margin:12px 0 0;font-size:12.5px;color:var(--brand-d);background:var(--brand-l);
  border-radius:10px;padding:9px 12px;line-height:1.5}

/* 職稱 */
.role-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.role-row__label{font-weight:700;font-size:14px}
.role-opts{display:flex;gap:8px;flex-wrap:wrap}
.role-btn{padding:8px 16px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;transition:.12s}
.role-btn:hover{border-color:var(--brand)}
.role-btn--on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* 班級選擇 */
.classpicker{margin-top:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px}
.classpicker__hint{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:600}
.cp__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.cp__row:last-child{margin-bottom:0}
.cp__grade{font-size:13px;font-weight:700;color:var(--brand-d);width:54px;flex-shrink:0}
.cp__chip{min-width:38px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;cursor:pointer;transition:.1s}
.cp__chip:hover{border-color:var(--brand)}
.cp__chip--on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
.buy__check small{font-weight:400;opacity:.85}

/* buttons */
.btn{cursor:pointer;font-family:inherit;font-weight:700;border:none;border-radius:12px;
  transition:transform .08s,filter .15s,background .15s}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:var(--brand-l);color:var(--brand-d);padding:9px 14px;font-size:13.5px}
.btn--ghost:hover{filter:brightness(.97)}
.btn--more{display:block;margin:14px auto 0;background:#fff;border:1px solid var(--line);
  color:var(--brand-d);padding:11px 26px;font-size:14.5px}
.btn--submit{display:block;width:100%;margin-top:14px;background:var(--brand);color:#fff;
  padding:16px;font-size:18px}
.btn--submit:hover{background:var(--brand-d)}
.btn--submit:disabled{background:#9ca3af;cursor:not-allowed}

/* 統購 cards */
.grid-buy{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:680px){.grid-buy{grid-template-columns:1fr 1fr 1fr}}
.buy{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--buy);
  border-radius:14px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.buy__name{font-weight:800;font-size:16px;margin:0 0 4px}
.buy__brand{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.buy__desc{font-size:13px;color:var(--muted);margin:0 0 12px;flex:1}
.buy__unit{font-size:12.5px;font-weight:700;color:var(--buy);margin-bottom:6px}
.buy__num{display:flex;align-items:center;gap:8px}
.buy__num input{width:90px;padding:9px;font-size:16px;text-align:center;
  border:1px solid var(--line);border-radius:10px}
.stepper{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:#f8fafc;font-size:20px;font-weight:700;color:var(--buy);cursor:pointer}
.buy__check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  background:var(--buy-l);border:1px solid var(--buy);border-radius:10px;padding:10px 12px;
  font-size:14px;font-weight:700;color:var(--buy)}
.buy__check input{width:20px;height:20px;accent-color:var(--buy);cursor:pointer}
.numbox--note{justify-content:center;align-self:flex-end;color:var(--muted);font-size:11px;
  background:#f8fafc;border:1px dashed var(--line);border-radius:8px;padding:6px 8px}

/* LoiLoNote 主打 */
.loilo{background:linear-gradient(135deg,var(--loilo-l),#fff);border:2px solid var(--loilo);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.loilo__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.loilo__badge{background:var(--loilo);color:#fff;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:999px}
.loilo__name{font-size:19px;font-weight:800;margin:0}
.loilo__desc{font-size:14px;color:#7a3b56;margin:8px 0 12px}
.loilo__desc b{color:var(--loilo)}

/* toolbar */
.toolbar{padding:14px}
.toolbar__row{display:flex;gap:8px;flex-wrap:wrap}
.toolbar__search{flex:1;min-width:200px;padding:11px 14px;font-size:15px;
  border:1px solid var(--line);border-radius:11px}
.toolbar__select{padding:11px 12px;font-size:14px;border:1px solid var(--line);
  border-radius:11px;background:#fff}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:#fff;cursor:pointer;color:var(--ink);transition:.12s}
.chip:hover{border-color:var(--pick)}
.chip--on{background:var(--pick);color:#fff;border-color:var(--pick)}
.toolbar__foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;flex-wrap:wrap;gap:8px}
.switch{font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.toolbar__count{font-size:13px;color:var(--muted);font-weight:600}

/* results */
.results-hint{text-align:center;color:var(--muted);padding:24px 12px;font-size:14.5px}
.results{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.item{display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.item--on{border-color:var(--pick);box-shadow:0 0 0 2px var(--pick-l)}
.item--excluded{opacity:.7;background:#fafafa}
.item__check{width:22px;height:22px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--pick)}
.item__body{flex:1;min-width:0}
.item__name{font-weight:700;font-size:15px;margin:0}
.item__meta{font-size:12.5px;color:var(--muted);margin:3px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tagmini{background:var(--brand-l);color:var(--brand-d);font-size:11px;padding:1px 7px;border-radius:6px}
.gtag{font-size:11px;padding:1px 7px;border-radius:6px}
.gtag-1{background:#eef2ff;color:#4338ca}
.gtag-2{background:#ecfdf5;color:#047857}
.gtag-3{background:#fef2f2;color:#b91c1c}
.badge-ex{background:#fee2e2;color:var(--danger);font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:6px}
.item__nums{display:none;gap:8px;margin-top:10px;flex-wrap:wrap}
.item--on .item__nums{display:flex}
.numbox{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted)}
.numbox input{width:74px;padding:6px;font-size:14px;text-align:center;
  border:1px solid var(--line);border-radius:8px;margin-top:2px}

/* summary */
.summary__empty{color:var(--muted);text-align:center;padding:10px}
.sumrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--line);font-size:14px}
.sumrow:last-child{border-bottom:none}
.sumrow__rm{background:none;border:none;color:var(--danger);cursor:pointer;font-size:13px}
.sumhead{font-weight:800;font-size:13px;color:var(--muted);margin:12px 0 2px}

.submit-msg{text-align:center;font-size:14.5px;margin-top:10px;min-height:1.2em;font-weight:700}
.submit-msg.ok{color:var(--brand-d)}
.submit-msg.err{color:var(--danger)}

/* rank */
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank__row{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.rank__no{min-width:34px;width:auto;height:34px;padding:0 8px;flex-shrink:0;border-radius:17px;display:inline-flex;align-items:center;justify-content:center;gap:2px;
  font-weight:800;background:var(--rank-l);color:var(--rank)}
.rank__row:nth-child(1) .rank__no{background:#fde68a;color:#92400e}
.rank__row:nth-child(2) .rank__no{background:#e5e7eb;color:#374151}
.rank__row:nth-child(3) .rank__no{background:#fed7aa;color:#9a3412}
.rank__name{flex:1;font-weight:700;font-size:14.5px}
.rank__cnt{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}
.rank__loilo{border-color:var(--loilo);box-shadow:0 0 0 2px var(--loilo-l)}
.rank__empty{color:var(--muted);text-align:center;padding:18px}
.rank__mode{text-align:center;font-size:12px;color:var(--muted);margin-top:6px}

/* admin: gate */
.gate{position:fixed;inset:0;background:rgba(15,30,45,.55);display:grid;place-items:center;z-index:100;padding:16px}
.gate__box{max-width:360px;width:100%;text-align:center}
.gate__h{margin:0 0 14px;font-size:18px}
.gate__note{font-size:12px;color:var(--muted);margin-top:10px}

/* admin: stat grid */
.stat-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat__v{font-size:30px;font-weight:800;color:var(--brand)}
.stat__v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px}
.stat__l{font-size:13px;color:var(--muted);margin-top:2px}

/* admin: rank details */
.adm-rank{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden}
.adm-rank--top{border-color:var(--rank);box-shadow:0 0 0 1px var(--rank-l)}
.adm-rank summary{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;list-style:none}
.adm-rank summary::-webkit-details-marker{display:none}
.adm-rank__body{padding:0 14px 12px;font-size:13px;color:var(--muted)}

/* admin: charts */
.chart-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.chart-grid{grid-template-columns:1fr 1fr}}
.chart__t{margin:0 0 12px;font-size:15px;font-weight:800}
.bar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13.5px}
.bar__l{width:88px;flex-shrink:0;text-align:right;color:var(--ink)}
.bar__track{flex:1;background:#f1f5f9;border-radius:6px;height:18px;overflow:hidden}
.bar__fill{display:block;height:100%;border-radius:6px;min-width:2px;transition:width .3s}
.bar__v{width:38px;text-align:right;font-weight:700;color:var(--muted)}
.pie{width:150px;height:150px;border-radius:50%;margin:4px auto 12px}
.pie__legend{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.pie__legend i{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* admin: teacher cards */
.adm-teacher{padding:12px 14px;margin-bottom:8px}
.adm-teacher__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.adm-teacher__line{font-size:13.5px;margin:4px 0;line-height:1.6}

/* footer */
.site-credit{text-align:center;padding:30px 16px 40px;font-size:13px;color:rgba(0,0,0,.55);
  border-top:1px solid var(--line);margin-top:36px;background:#fff}
.site-credit p{margin:3px 0}
.site-credit__org{font-weight:700;color:var(--ink)}
.site-credit__doc{font-size:12px}
.site-credit__heart{display:inline-block;margin:0 2px;filter:saturate(1.1)}
.site-credit__author{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;
  padding-bottom:1px;transition:color .2s,border-color .2s}
.site-credit__author:hover{color:#c63;border-bottom-color:#c63}

/* ============================================================
   滿版佈局 + 字體放大 + RWD 強化（讓年長老師看得清楚）
   ============================================================ */
body{ font-size:17px; }

/* 容器滿版：桌機幾乎填滿，只留極小邊距 */
.wrap{ max-width:1860px; padding:26px clamp(14px,2.2vw,44px) 60px; }
.hero{ padding:46px 16px 38px; }
.hero__inner{ max-width:1180px; }
.hero__title{ font-size:34px; }
.hero__sub{ font-size:16.5px; }
.pill{ font-size:15px; padding:8px 16px; }

/* 區塊標題與說明 */
.block__title{ font-size:25px; }
.block__desc{ font-size:16px; }
.block__tag{ font-size:13.5px; }
.note__h{ font-size:20px; }
.note__steps{ font-size:16.5px; }
.note__steps li{ margin:6px 0; }
.note__tip{ font-size:15px; }

/* 老師資料 */
.namebar__label{ font-size:16px; }
.namebar__input{ font-size:19px; padding:14px 16px; }
.role-row__label{ font-size:16px; }
.role-btn{ font-size:16px; padding:10px 20px; }
.classpicker__hint{ font-size:15px; }
.cp__grade{ font-size:15.5px; width:62px; }
.cp__chip{ font-size:16px; min-width:46px; padding:9px 14px; }
.namebar__why{ font-size:14px; }

/* 統購卡 */
.buy__name{ font-size:19px; }
.buy__brand{ font-size:13.5px; }
.buy__desc{ font-size:15.5px; }
.buy__check{ font-size:16.5px; padding:13px 14px; }

/* 自主清單工具列 + 項目 */
.toolbar__search{ font-size:17px; padding:13px 16px; }
.toolbar__select{ font-size:16px; }
.chip{ font-size:15px; padding:7px 14px; }
.item{ padding:15px 16px; }
.item__name{ font-size:18px; }
.item__meta{ font-size:14px; }
.item__check{ width:24px; height:24px; }

/* 摘要 / 排行 / loilo */
.sumrow{ font-size:16px; }
.rank__name{ font-size:17px; }
.rank__cnt{ font-size:15px; }
.loilo__name{ font-size:21px; }
.loilo__desc{ font-size:15.5px; }
.btn--submit{ font-size:19px; padding:17px; }

/* 桌機（≥1024px）：自主清單兩欄、字再放大 */
@media(min-width:1024px){
  body{ font-size:18px; }
  .hero__title{ font-size:42px; }
  .hero__sub{ font-size:18px; }
  .block__title{ font-size:28px; }
  .block__desc{ font-size:17px; }
  .note__steps{ font-size:18px; }
  .item__name{ font-size:19px; }
  .item__meta{ font-size:15px; }
  .buy__name{ font-size:21px; }
  .buy__desc{ font-size:16.5px; }
  .buy__check{ font-size:18px; }
  .cp__chip{ font-size:17px; min-width:50px; }
  .results{ grid-template-columns:1fr 1fr; gap:12px; }
}

/* 大桌機（≥1500px）：自主清單三欄，充分利用寬度 */
@media(min-width:1500px){
  .results{ grid-template-columns:1fr 1fr 1fr; }
}

/* ============================================================
   再放大：統購卡 / 班級鈕 / 軟體資訊文字 + 行動端易讀易點
   ============================================================ */
/* 統購卡 */
.buy{ padding:20px; }
.buy__name{ font-size:22px; }
.buy__brand{ font-size:15px; }
.buy__desc{ font-size:17px; line-height:1.6; }
.buy__unit{ font-size:14.5px; }
.buy__check{ font-size:19px; padding:15px 16px; gap:12px; }
.buy__check input{ width:26px; height:26px; }
.buy__check small{ font-size:14px; }

/* 職稱鈕 + 班級鈕（加大、好點）*/
.role-btn{ font-size:18px; padding:13px 24px; min-height:48px; }
.classpicker{ padding:14px; }
.classpicker__hint{ font-size:16px; }
.cp__row{ gap:8px; margin-bottom:9px; }
.cp__grade{ font-size:17px; width:64px; }
.cp__chip{ font-size:18px; min-width:56px; min-height:48px; padding:12px 16px; }

/* 軟體資訊（自主清單項目）*/
.item{ padding:16px 18px; gap:14px; }
.item__check{ width:26px; height:26px; margin-top:3px; }
.item__name{ font-size:20px; line-height:1.4; }
.item__meta{ font-size:15.5px; gap:10px; margin-top:5px; }
.tagmini,.gtag,.badge-ex{ font-size:13px; padding:2px 9px; }
.results-hint{ font-size:16px; }

/* 搜尋 / 篩選 / 領域標籤 */
.toolbar__search{ font-size:18px; padding:14px 16px; }
.toolbar__select{ font-size:17px; padding:12px 14px; }
.chip{ font-size:16px; padding:9px 16px; min-height:42px; }
.switch{ font-size:14.5px; }
.toolbar__count{ font-size:14.5px; }

/* LoiLoNote 主打 */
.loilo__name{ font-size:23px; }
.loilo__desc{ font-size:16.5px; }

/* 桌機再放大一級 */
@media(min-width:1024px){
  .buy__name{ font-size:25px; }
  .buy__desc{ font-size:18px; }
  .buy__check{ font-size:20px; }
  .item__name{ font-size:22px; }
  .item__meta{ font-size:16.5px; }
  .cp__chip{ font-size:19px; min-width:62px; }
  .role-btn{ font-size:19px; }
  .loilo__name{ font-size:26px; }
}

/* 行動端（≤640px）：好讀好點、班級鈕排滿、不溢出 */
@media(max-width:640px){
  .wrap{ padding:18px 12px 48px; }
  .hero__title{ font-size:27px; }
  .hero__sub{ font-size:15px; }
  .block__title{ font-size:22px; }
  .block__desc{ font-size:15.5px; }
  .buy__name{ font-size:21px; }
  .buy__desc{ font-size:16px; }
  .item__name{ font-size:19px; }
  .item__meta{ font-size:14.5px; }
  /* 班級選擇：年級標籤獨立一行，班級鈕排滿整列、好按 */
  .cp__grade{ width:100%; margin-bottom:3px; color:var(--brand-d); }
  .cp__chip{ flex:1 1 28%; font-size:18px; min-height:50px; }
  /* 職稱鈕填滿一列 */
  .role-row{ align-items:flex-start; }
  .role-opts{ width:100%; }
  .role-btn{ flex:1 1 auto; min-height:50px; }
  /* 統購卡單欄、留白縮一點 */
  .buy{ padding:18px; }
}

/* ============================================================
   A 統計正確性 + B 年長友善：字級切換 / 狀態 / 高亮 / 查資料
   ============================================================ */
/* 字級切換（hero 內）*/
.fontscale{ margin-top:16px; display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap; }
.fontscale__label{ color:#fff; font-size:14px; font-weight:700; opacity:.95; }
.fontscale__btn{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  color:#fff; border-radius:999px; padding:7px 16px; font-size:14.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:.12s; }
.fontscale__btn:hover{ background:rgba(255,255,255,.28); }
.fontscale__btn--on{ background:#fff; color:var(--brand-d); border-color:#fff; }

/* 填報狀態徽章 */
.status-badge{ font-size:14px; font-weight:700; padding:7px 14px; border-radius:999px;
  background:#eef2f7; color:var(--muted); }
.status-badge--picked{ background:var(--pick-l); color:var(--pick); }
.status-badge--done{ background:#dcfce7; color:#15803d; }
.status-badge--edited{ background:#fef9c3; color:#a16207; }

/* 送出檢查：缺漏處高亮 + 抖動 */
.needs-attention{ outline:3px solid var(--danger) !important; outline-offset:3px;
  border-radius:14px; animation:shakeX .4s; }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)} }

/* 軟體「了解」查資料連結 */
.item__link, .info-link{ color:var(--brand-d); font-size:13.5px; font-weight:700;
  text-decoration:none; white-space:nowrap; border-bottom:1px dotted currentColor; }
.item__link:hover, .info-link:hover{ color:var(--brand); }
.item__foot{ margin-top:7px; }
.loilo__link{ display:inline-block; margin-top:8px; color:var(--loilo); font-weight:700;
  font-size:14px; text-decoration:none; border-bottom:1px dotted currentColor; }
.buy__link{ display:inline-block; margin-top:8px; color:var(--buy); font-weight:700;
  font-size:13.5px; text-decoration:none; border-bottom:1px dotted currentColor; }

/* 領域標籤數量 */
.chip__n{ opacity:.6; font-weight:400; margin-left:3px; }
.chip--on .chip__n{ opacity:.85; }

/* 免填說明 */
.excluded-note{ font-size:13px; color:var(--warn); background:#fffbeb;
  border:1px solid #fde68a; border-radius:8px; padding:8px 11px; margin-top:10px; }

/* 置頂老師資料列：捲動時收合成一行（只留姓名＋狀態），不占畫面 */
.namebar{ transition:padding .15s; }
.namebar--compact{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap; padding:8px 14px !important; }
.namebar--compact .namebar__label,
.namebar--compact .namebar__why,
.namebar--compact .namebar__hint,
.namebar--compact #loadMineBtn{ display:none !important; }
/* 收合時仍顯示「任教班級」回饋，整行排在第二列 */
.namebar--compact #myClassesLine{ flex-basis:100%; margin:2px 0 0; font-size:13.5px; order:9; }
.namebar--compact .namebar__input{ flex:1 1 200px; max-width:460px; margin:0; font-size:16px; padding:9px 12px; }
.namebar--compact .role-row{ margin:0; gap:6px; }
.namebar--compact .role-row__label{ display:none; }   /* 收合時省空間，只留職稱鈕 */
.namebar--compact .role-btn{ padding:8px 14px; font-size:14.5px; min-height:0; }
.namebar--compact .namebar__extra{ margin:0 0 0 auto; flex-shrink:0; }   /* 狀態靠右 */
.namebar--compact::before{ content:"✏️"; font-size:18px; flex-shrink:0; }

/* namebar 已選班級列 */
.myclasses{ margin-top:12px; font-size:15px; color:var(--ink); line-height:1.7; }
.myclasses b{ color:var(--brand-d); }
.link-btn{ background:none; border:none; color:var(--brand); font-weight:700; font-size:14px;
  cursor:pointer; text-decoration:underline; font-family:inherit; padding:2px 4px; }
.link-btn--warn{ color:var(--danger); }

/* 選班級彈窗 */
.modal{ position:fixed; inset:0; background:rgba(15,30,45,.5); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:16px; }
.modal[hidden]{ display:none; }   /* 修正：class 的 display 會蓋過 hidden 屬性 */

/* 送出成功 · 心願達成 */
.success__box{ background:#fff; border-radius:22px; padding:34px 28px 26px; max-width:440px; width:100%;
  text-align:center; position:relative; z-index:2; box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:popin .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes popin{ from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.success__check{ width:96px; height:96px; margin:0 auto 14px; }
.success__check svg{ width:96px; height:96px; }
.sc-ring{ fill:none; stroke:var(--brand); stroke-width:5; opacity:.22; }
.sc-tick{ fill:none; stroke:var(--brand); stroke-width:7; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:64; stroke-dashoffset:64; animation:scdraw .5s .18s forwards ease-out; }
@keyframes scdraw{ to{ stroke-dashoffset:0 } }
.success__title{ margin:0 0 8px; font-size:24px; font-weight:800; color:var(--brand-d); }
.success__msg{ margin:0 0 6px; font-size:17px; font-weight:700; color:var(--ink); }
.success__sub{ margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.6; }
.success__btns{ display:flex; gap:10px; flex-direction:column; }
.success__confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.confetti-piece{ position:absolute; top:-20px; border-radius:2px; animation:cfall linear forwards; }
@keyframes cfall{ to{ transform:translateY(105vh) rotate(var(--r)); opacity:.15 } }

/* 操作回饋 toast */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--brand-d); color:#fff; padding:13px 24px; border-radius:999px;
  font-weight:700; font-size:15.5px; box-shadow:0 6px 20px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transition:.25s; z-index:300; max-width:90vw; text-align:center; }
.toast--show{ opacity:1; transform:translateX(-50%) translateY(0); }
.modal__box{ max-width:560px; width:100%; max-height:86vh; overflow:auto; }
.modal__t{ margin:0 0 4px; font-size:20px; font-weight:800; }
.modal__hint{ margin:0 0 14px; font-size:14px; color:var(--muted); }
.modal .classpicker__grid{ margin-bottom:16px; }
.modal .cp__chip{ min-width:52px; min-height:48px; font-size:17px; }

/* 領域大卡入口 */
.domain-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 12px; flex-wrap:wrap; }
.domain-head__t{ margin:0; font-size:18px; font-weight:800; }
.domain-grid{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-bottom:16px; }
@media(min-width:560px){ .domain-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .domain-grid{ grid-template-columns:repeat(6,1fr); } }
.domain-card{ display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 8px; cursor:pointer; font-family:inherit; transition:.12s; box-shadow:var(--shadow); }
.domain-card:hover{ border-color:var(--pick); transform:translateY(-2px); }
.domain-card--on{ background:var(--pick); border-color:var(--pick); color:#fff; }
.domain-card__ic{ font-size:30px; line-height:1; }
.domain-card__name{ font-size:15px; font-weight:700; }
.domain-card__n{ font-size:12.5px; opacity:.7; }
.domain-card--on .domain-card__n{ opacity:.9; }
@media(min-width:1024px){ .domain-card__ic{ font-size:34px; } .domain-card__name{ font-size:16.5px; } }

/* ============================================================
   管理後台 UI/UX 與 RWD 專用樣式
   ============================================================ */
.admin-panel {
  max-width: 1200px !important;
  margin: 0 auto;
}

/* 密碼閘美化：磨砂毛玻璃效果 */
.gate {
  background: rgba(15, 30, 45, 0.7) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gate__box {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18) !important;
  border-radius: 20px !important;
  padding: 32px 24px !important;
  max-width: 400px !important;
}

/* 全域按鈕增強 */
.btn {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  transition: transform 0.1s ease, filter 0.15s, background 0.15s, box-shadow 0.15s !important;
}
.btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.btn:active {
  transform: translateY(0.5px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* 主要按鈕 (品牌色) */
.btn--primary {
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  font-size: 15px;
}
.btn--primary:hover {
  background: var(--brand-d);
}

/* 危險按鈕 (紅色) */
.btn--danger {
  background: var(--danger);
  color: #fff;
  padding: 10px 18px;
  font-size: 15px;
}
.btn--danger:hover {
  filter: brightness(0.9);
}

/* 後台工具列排版 */
.admin-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  align-items: center !important;
  text-align: center !important;
}
.admin-toolbar__info {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-d);
  background: var(--brand-l);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(15, 118, 110, 0.15);
}
.admin-toolbar__btns {
  display: flex !important;
  gap: 10px 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: 100% !important;
}

/* 響應式調整 */
@media (max-width: 640px) {
  .admin-toolbar {
    padding: 16px 14px !important;
  }
  .admin-toolbar__btns {
    justify-content: center !important;
  }
  .admin-toolbar__btns .btn {
    flex: 1 1 45%; /* 行動端按鈕對稱排版 */
    font-size: 14px;
    padding: 10px 12px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  /* 排行榜 checkboxes 排版修正 */
  .adm-rank summary {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* 回到頂部按鈕 */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50% !important;
  background: var(--brand) !important;
  color: #fff !important;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 90;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.2s ease, background 0.15s !important;
  opacity: 0;
  pointer-events: none;
}
.scroll-top-btn--show {
  opacity: 0.9;
  pointer-events: auto;
}
.scroll-top-btn:hover {
  opacity: 1;
  background: var(--brand-d) !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}
.scroll-top-btn:active {
  transform: translateY(-1px) scale(0.98);
}
@media (max-width: 640px) {
  .scroll-top-btn {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}