/* ============================================================
   同一片夜空（/skynight、/skynight/verify/<id>、/admin/skynight；2026-10-09 S3 骨架、S4 挑戰頁）
   S4：工具列、工作區（任務書／教學關說明、甘特圖 .sg-*、簡易規劃、試算卡）、排行榜／結果／提交確認彈窗（slots.css 的 .sm-modal）。
   S6 補後台出題表單。顏色一律用 theme.css 的變數與下面的 --sn／--sg 變數（深淺色自動）；揭曉只用卡片局部光暈，不閃全畫面。
   .sn-scope：別頁借用這些元件時掛的容器（模擬器「挑戰」分頁與它的彈窗，2026-10-09 S5），只帶顏色變數、不帶版面。
   ============================================================ */
.sn-page, .sn-modal, .sn-scope { --sn: #8fb4ff; --sn-soft: rgba(143, 180, 255, 0.12); --sn-ok: #5fbf8b; --sn-bad: #e0556a;
    /* 甘特圖（2026-10-09 S4） */
    --sg-track: rgba(255, 255, 255, 0.03); --sg-ok: rgba(95, 191, 139, 0.42); --sg-twi-c: rgba(243, 159, 90, 0.55);
    --sg-twi-n: rgba(176, 112, 170, 0.45); --sg-twi-a: rgba(92, 96, 182, 0.5); --sg-moon: rgba(160, 158, 172, 0.42);
    --sg-low: rgba(84, 92, 128, 0.55); --sg-hatch-bg: rgba(18, 16, 36, 0.92); --sg-hatch: rgba(214, 205, 240, 0.4);
    --sg-alt: #f2f0ff; --sg-clear: #8fb4ff; --sg-clear-band: rgba(143, 180, 255, 0.26); --sg-transp: #c7b4ff;
    --sg-see: #e9c46a; --sg-see-band: rgba(233, 196, 106, 0.22); --sg-act: #ff8a4c; --sg-grid: rgba(255, 255, 255, 0.06);
    --sg-grid-major: rgba(255, 255, 255, 0.13); --sg-transit: rgba(255, 255, 255, 0.6); --sg-text: var(--color-text-muted); }
.sn-page { padding: var(--space-lg) 0 var(--space-3xl, 64px); }
[data-theme="light"] .sn-page, [data-theme="light"] .sn-modal, [data-theme="light"] .sn-scope { --sn: #3b5fb0; --sn-soft: rgba(59, 95, 176, 0.09); --sn-ok: #2f8a5a; --sn-bad: #c43a52;
    --sg-track: rgba(42, 31, 56, 0.04); --sg-ok: rgba(47, 138, 90, 0.38); --sg-twi-c: rgba(230, 140, 60, 0.5); --sg-twi-n: rgba(160, 90, 150, 0.36);
    --sg-twi-a: rgba(70, 80, 170, 0.36); --sg-moon: rgba(120, 116, 132, 0.36); --sg-low: rgba(90, 100, 140, 0.32);
    --sg-hatch-bg: rgba(236, 228, 236, 0.95); --sg-hatch: rgba(102, 37, 73, 0.4); --sg-alt: #2a1f38; --sg-clear: #3b5fb0;
    --sg-clear-band: rgba(59, 95, 176, 0.2); --sg-transp: #7a5bc4; --sg-see: #b07d10; --sg-see-band: rgba(176, 125, 16, 0.18);
    --sg-act: #d4561c; --sg-grid: rgba(42, 31, 56, 0.07); --sg-grid-major: rgba(42, 31, 56, 0.16); --sg-transit: rgba(42, 31, 56, 0.6); }
.sn-page .container { max-width: 1080px; }
.sn-muted { color: var(--color-text-muted); font-size: 0.78rem; }
.sn-hint { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.7; }
/* 句子裡的文字連結（登入、401 的「登入」）：theme.css 的 a 是 inherit＋無底線，看起來像普通字（2026-10-09 審查後加；有 class 的按鈕式連結不動） */
.sn-hint a:not([class]), .sn-plan-msg a:not([class]), .sn-work-msg a:not([class]), .sn-modal p a:not([class]) {
    color: var(--sn); text-decoration: underline; text-underline-offset: 2px; }
.sn-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; word-break: break-all; }

/* ── 標題 ── */
.sn-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.sn-hero-icon { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--sn);
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), transparent 60%), var(--sn-soft); border: 1px solid var(--color-border); }
.sn-hero-icon .ico { width: 40px; height: 40px; }
.sn-eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sn); font-weight: 600; }
.sn-hero h1 { font-size: 1.8rem; line-height: 1.2; }
.sn-hero p { margin-top: 4px; max-width: 760px; font-size: 0.86rem; color: var(--color-text-secondary); line-height: 1.7; }

/* ── 卡片 ── */
.sn-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px;
    display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sn-card h2 { font-size: 1.05rem; }
.sn-card h3 { font-size: 0.92rem; }
.sn-card p { font-size: 0.84rem; line-height: 1.7; color: var(--color-text-secondary); }
.sn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); font-size: 0.74rem;
    background: var(--sn-soft); border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; }
.sn-chip-ok { color: var(--sn-ok); border-color: currentColor; background: transparent; }
.sn-chip-warn { color: var(--color-accent); border-color: currentColor; background: transparent; }
.sn-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-stats div { display: flex; flex-direction: column; min-width: 96px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-surface-elevated);
    border: 1px solid var(--color-border); font-size: 0.7rem; color: var(--color-text-muted); }
.sn-stats b { font-size: 1.05rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.sn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 10px;
    border: 1px solid var(--color-border); background: var(--color-surface-elevated); color: var(--color-text); font: inherit; font-size: 0.84rem;
    font-weight: 500; cursor: pointer; text-decoration: none; }
.sn-btn:hover { border-color: var(--sn); }
.sn-btn-primary { background: var(--sn); border-color: var(--sn); color: #0c0a1a; font-weight: 700; }
[data-theme="light"] .sn-btn-primary { color: #fff; }

/* ── 狀態卡 ── */
.sn-status { margin-bottom: 20px; }
.sn-status-closed { border-style: dashed; }
.sn-status .sn-last { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-border); }

/* ── 教學關清單 ── */
.sn-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; }
.sn-section-head h2 { font-size: 1.1rem; }
.sn-tut-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sn-tut { flex-direction: row; align-items: flex-start; gap: 12px; }
.sn-tut-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
    background: var(--sn-soft); color: var(--sn); border: 1px solid var(--color-border); }
.sn-tut > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* ── 驗證頁 ── */
.sn-verify { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.sn-field { display: flex; flex-direction: column; gap: 4px; }
.sn-field > span { font-size: 0.74rem; color: var(--color-text-muted); }
.sn-pre { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg);
    border: 1px solid var(--color-border); white-space: pre-wrap; }
.sn-result { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: 0.88rem; line-height: 1.6; }
.sn-result > div { display: none; }
.sn-result[data-state="pending"] .sn-r-pending,
.sn-result[data-state="ok"] .sn-r-ok,
.sn-result[data-state="bad"] .sn-r-bad,
.sn-result[data-state="unsupported"] .sn-r-unsupported { display: block; }
.sn-result[data-state="ok"] { border-color: var(--sn-ok); box-shadow: inset 0 0 0 1px var(--sn-ok); }
.sn-result[data-state="bad"] { border-color: var(--sn-bad); box-shadow: inset 0 0 0 1px var(--sn-bad); }
.sn-r-ok b { color: var(--sn-ok); }
.sn-r-bad b { color: var(--sn-bad); }

/* ── 後台（S6 補出題表單）── */
.sn-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sn-admin-problems { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.7; color: var(--color-accent); }
.sn-admin-note { margin: 12px 0; }
.sn-admin-table td.num, .sn-admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   S4：挑戰頁（2026-10-09）
   ============================================================ */
.sn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sn-btn:disabled:hover { border-color: var(--color-border); }
.sn-btn .ico { width: 15px; height: 15px; flex: none; }
.sn-btn-sm { min-height: 30px; padding: 3px 10px; font-size: 0.76rem; border-radius: 8px; }
.sn-btn-primary .ico { color: inherit; }
.sn-link { color: var(--sn); font-size: 0.78rem; white-space: nowrap; }
.sn-sep { margin: 0 6px; color: var(--color-text-faint, var(--color-text-muted)); }
.sn-stats small { display: block; font-size: 0.66rem; color: var(--color-text-muted); }
.sn-countdown { font-variant-numeric: tabular-nums; }
.sn-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.sn-howto { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.84rem; line-height: 1.6; color: var(--color-text-secondary); }
.sn-howto b { color: var(--color-text); margin-right: 6px; }

/* 標籤與 ⓘ */
.sn-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-full); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.02em; border: 1px solid currentColor; white-space: nowrap; color: var(--color-text-secondary); }
.sn-tag-rough { color: var(--sg-see); }
[data-theme="light"] .sn-tag-rough { color: #8a6100; }   /* 淺色：--sg-see 在白底只有 3.6:1，小字標籤要 ≥ 4.5（2026-10-09） */
.sn-tag-rule { color: var(--sn); }
.sn-tag-typ { color: var(--sn-ok); }
.sn-info-btn { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.9rem; line-height: 1;
    color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); cursor: pointer; flex: none; }
.sn-info-btn:hover, .sn-info-btn[aria-expanded="true"] { color: var(--sn); border-color: var(--sn); }
.sn-info-body { padding: 10px 12px; border-radius: var(--radius-md); background: var(--sn-soft); border: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 6px; }
.sn-info-body[hidden] { display: none; }
.sn-info-body p { font-size: 0.78rem; line-height: 1.7; margin: 0; }
.sn-info-body .sn-tag { margin-left: 4px; vertical-align: 1px; }

/* 工作區 */
.sn-work { margin: 4px 0 28px; scroll-margin-top: 80px; }
.sn-work[hidden] { display: none; }
.sn-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sn-work-head h2 { font-size: 1.25rem; line-height: 1.3; }
.sn-work-msg { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--sn-bad); font-size: 0.84rem; }
.sn-work-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sn-work-grid > .sn-brief, .sn-work-grid > .sn-lesson, .sn-work-grid > .sn-forecast { grid-column: 1 / -1; }
.sn-card[hidden] { display: none; }
.sn-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sn-card-head h3 { margin-right: auto; font-size: 0.98rem; }
.sn-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.sn-facts > div { min-width: 0; }
.sn-facts dt { font-size: 0.68rem; color: var(--color-text-muted); }
.sn-facts dd { margin: 1px 0 0; font-size: 0.86rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sn-facts dd small { display: block; font-size: 0.68rem; color: var(--color-text-muted); }
.sn-facts-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sn-brief-text { white-space: pre-line; }
.sn-lesson-task b, .sn-fixed b { margin-right: 8px; color: var(--color-text); }
.sn-formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem !important; padding: 8px 10px;
    border-radius: var(--radius-md); background: var(--sn-soft); overflow-wrap: anywhere; }
.sn-hints { margin: 0; padding-left: 18px; font-size: 0.8rem; line-height: 1.7; color: var(--color-text-secondary); }

/* 甘特圖 */
.sn-gantts { display: flex; flex-direction: column; gap: 10px; }
.sn-gantt { padding: 8px 10px 4px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg); min-width: 0; }
.sn-gantt.is-selected { border-color: var(--sn); box-shadow: inset 0 0 0 1px var(--sn); }
.sn-gantt-head { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 2px; font-size: 0.84rem; }
.sn-gantt-head .sn-muted { flex: 1 1 200px; }
.sg-wrap { width: 100%; min-width: 0; }
.sg-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sg-track { fill: var(--sg-track); }
.sg-tlabel, .sg-tick, .sg-transit-label { font-size: 10px; fill: var(--sg-text); font-family: inherit; }
.sg-transit-label { fill: var(--color-text-secondary); }
.sg-cell { stroke: none; }
.sg-ok { fill: var(--sg-ok); }
.sg-twi-c { fill: var(--sg-twi-c); }
.sg-twi-n { fill: var(--sg-twi-n); }
.sg-twi-a { fill: var(--sg-twi-a); }
.sg-moon { fill: var(--sg-moon); }
.sg-low { fill: var(--sg-low); }
.sg-hatch-bg { fill: var(--sg-hatch-bg); }
.sg-hatch-line { stroke: var(--sg-hatch); stroke-width: 1.6; }
.sg-alt { fill: none; stroke: var(--sg-alt); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.9; }
.sg-band { stroke: none; }
.sg-band-clear { fill: var(--sg-clear-band); }
.sg-band-seeing { fill: var(--sg-see-band); }
.sg-line { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.sg-line-clear { stroke: var(--sg-clear); }
.sg-line-transp { stroke: var(--sg-transp); stroke-dasharray: 3 2; stroke-width: 1.1; opacity: 0.85; }
.sg-line-seeing { stroke: var(--sg-see); }
.sg-line-act { stroke: var(--sg-act); stroke-width: 1.8; }
.sg-grid { stroke: var(--sg-grid); stroke-width: 1; }
.sg-grid-major { stroke: var(--sg-grid-major); }
.sg-transit { stroke: var(--sg-transit); stroke-width: 1.2; stroke-dasharray: 4 3; }
.sg-win-body { fill: var(--sn-soft); stroke: var(--sn); stroke-width: 1; opacity: 0.9; pointer-events: none; }
.sg-handle-line { stroke: var(--sn); stroke-width: 2; pointer-events: none; }
.sg-handle-hit { fill: transparent; }
.sg-win.is-editable .sg-handle { cursor: ew-resize; touch-action: none; outline: none; }
.sg-handle-knob { fill: var(--sn); stroke: var(--color-bg); stroke-width: 1.5; }
.sg-win.is-editable .sg-handle:focus-visible .sg-handle-knob, .sg-handle.is-drag .sg-handle-knob { stroke: var(--color-text); stroke-width: 2; }
.sg-readout { min-height: 2.6em; padding: 2px 0 4px; font-size: 0.72rem; line-height: 1.5; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sg-readout b { color: var(--color-text); }
.sg-sep { margin: 0 5px; color: var(--color-text-muted); }
.sn-legend { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.72rem; color: var(--color-text-secondary); }
.sn-legend li { display: inline-flex; align-items: center; gap: 5px; }
.sg-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.sg-key.sg-ok { background: var(--sg-ok); }
.sg-key.sg-twi { background: linear-gradient(90deg, var(--sg-twi-c), var(--sg-twi-n), var(--sg-twi-a)); }
.sg-key.sg-moon { background: var(--sg-moon); }
.sg-key.sg-low { background: var(--sg-low); }
.sg-key.sg-hor { background: repeating-linear-gradient(45deg, var(--sg-hatch) 0 1.5px, var(--sg-hatch-bg) 1.5px 4px); }
.sg-key-line { height: 0; border-top: 2px solid; border-radius: 0; }
.sg-key-alt { border-color: var(--sg-alt); }
.sg-key-transp { border-top-style: dashed; border-color: var(--sg-transp); }
.sg-key-transit { border-top-style: dashed; border-color: var(--sg-transit); }
.sg-key-band.sg-key-clear { background: var(--sg-clear-band); box-shadow: inset 0 -2px 0 var(--sg-clear); }
.sg-key-band.sg-key-seeing { background: var(--sg-see-band); box-shadow: inset 0 -2px 0 var(--sg-see); }

/* 規劃 */
.sn-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sn-fs[hidden] { display: none; }
.sn-fs legend { padding: 0; margin-bottom: 6px; font-size: 0.74rem; font-weight: 600; color: var(--color-text-secondary); letter-spacing: 0.04em; }
.sn-fs + .sn-fs { padding-top: 10px; border-top: 1px dashed var(--color-border); }
.sn-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sn-site { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-surface-elevated); font-size: 0.72rem; color: var(--color-text-muted); min-width: 0; }
.sn-site b { font-size: 0.84rem; color: var(--color-text); }
.sn-site input { position: absolute; opacity: 0; pointer-events: none; }
.sn-site.is-on { border-color: var(--sn); box-shadow: inset 0 0 0 1px var(--sn); background: var(--sn-soft); }
.sn-site:focus-within { outline: 2px solid var(--sn); outline-offset: 1px; }
.sn-gear-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sn-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sn-field[hidden] { display: none; }
.sn-field > span { font-size: 0.7rem; color: var(--color-text-muted); }
.sn-field select, .sn-field input { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 0.82rem;
    color: var(--color-text); background: var(--color-surface-elevated); border: 1px solid var(--color-border); }
.sn-field select:focus, .sn-field input:focus { outline: none; border-color: var(--sn); }
.sn-field select:disabled { opacity: 0.6; }
.sn-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.sn-field-sm { flex: 1 1 90px; max-width: 160px; }
.sn-times-x { padding-bottom: 9px; color: var(--color-text-muted); }
.sn-dur { flex: 1 1 100%; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.sn-optics { margin: 0; font-size: 0.76rem !important; line-height: 1.6; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sn-optics:empty { display: none; }
.sn-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sn-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--color-text-muted); }
.sn-meter b { color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-bar { height: 8px; border-radius: 99px; background: var(--color-surface-elevated); border: 1px solid var(--color-border); overflow: hidden; }
.sn-bar i { display: block; height: 100%; width: 0; background: var(--sn); border-radius: inherit; transition: width 0.25s ease; }
.sn-meter.is-over .sn-bar i { background: var(--sn-bad); }
.sn-meter.is-over b { color: var(--sn-bad); }
.sn-fixed { margin: 0; font-size: 0.78rem !important; padding: 8px 10px; border-radius: var(--radius-md); background: var(--sn-soft); }
.sn-fixed[hidden] { display: none; }
.sn-plan-actions { padding-top: 4px; }
.sn-plan-msg { margin: 0; min-height: 1.2em; font-size: 0.8rem !important; }
.sn-plan-msg.is-bad { color: var(--sn-bad); }
.sn-plan-msg.is-ok { color: var(--sn-ok); }

/* 試算 */
.sn-trial { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.sn-trial.is-glow, .sn-reveal.is-glow { border-color: var(--sn); animation: sn-glow 2.4s ease-out 1; }
@keyframes sn-glow { 0% { box-shadow: 0 0 0 0 rgba(143, 180, 255, 0.0); } 20% { box-shadow: 0 0 28px 2px var(--sn-soft), inset 0 0 0 1px var(--sn); } 100% { box-shadow: inset 0 0 0 1px var(--sn); } }
@media (prefers-reduced-motion: reduce) { .sn-trial.is-glow, .sn-reveal.is-glow { animation: none; box-shadow: inset 0 0 0 1px var(--sn); } }
.sn-trial-empty { font-size: 0.82rem; }
.sn-trial-body { display: flex; flex-direction: column; gap: 10px; }
.sn-trial-body[hidden] { display: none; }
.sn-score-row { display: flex; align-items: flex-end; gap: 6px 16px; flex-wrap: wrap; }
.sn-score { display: flex; flex-direction: column; }
.sn-score b { font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sn); }
.sn-score span { font-size: 0.72rem; color: var(--color-text-muted); }
.sn-range { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.sn-range small { display: block; font-size: 0.68rem; color: var(--color-text-muted); }
.sn-stale { font-size: 0.72rem; color: var(--color-accent); padding: 2px 8px; border-radius: 99px; border: 1px dashed currentColor; }
.sn-stale[hidden] { display: none; }
.sn-parts { display: flex; flex-direction: column; gap: 6px; }
.sn-part { display: grid; grid-template-columns: 18px 3.6em minmax(0, 1fr) 3.6em 2.8em; align-items: center; gap: 8px; font-size: 0.78rem; }
.sn-part-k { font-weight: 700; color: var(--sn); }
.sn-part-l { color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-part b { text-align: right; font-variant-numeric: tabular-nums; }
.sn-part small { color: var(--color-text-muted); font-size: 0.66rem; white-space: nowrap; }
.sn-checks, .sn-warns { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.sn-checks[hidden], .sn-warns[hidden] { display: none; }
.sn-checks li small { margin-left: 8px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sn-checks .is-ok { color: var(--sn-ok); }
.sn-checks .is-bad { color: var(--sn-bad); }
.sn-checks .sn-pass { font-weight: 700; margin-top: 2px; }
.sn-warns li { color: var(--color-accent); }
.sn-warns li::before { content: '⚠ '; }

/* 教學關清單 */
.sn-tut-sec { scroll-margin-top: 80px; }
.sn-tut-foot { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 2px; }
.sn-tut-foot .sn-muted { margin-right: auto; }
.sn-tut-done { display: inline-flex; align-items: center; gap: 3px; font-size: 0.74rem; color: var(--sn-ok); }
.sn-tut-done[hidden] { display: none; }
.sn-tut-done .ico { width: 14px; height: 14px; }
.sn-tut.is-active { border-color: var(--sn); box-shadow: inset 0 0 0 1px var(--sn); }
.sn-tut.is-done .sn-tut-n { background: transparent; color: var(--sn-ok); border-color: var(--sn-ok); }

/* 彈窗（.sm-modal 來自 slots.css：置中、背景模糊） */
.sn-modal .sm-modal-box { display: flex; flex-direction: column; gap: 10px; }
.sn-modal .sm-modal-box h3 { margin-bottom: 0; padding-right: 36px; }
.sn-modal h4 { font-size: 0.86rem; margin: 6px 0 0; }
.sn-modal p { font-size: 0.84rem; line-height: 1.65; margin: 0; color: var(--color-text-secondary); }
.sn-board-box { width: min(100%, 560px); }
.sn-result-box { width: min(100%, 720px); }
.sn-confirm-box { width: min(100%, 440px); }
.sn-confirm-score { font-variant-numeric: tabular-nums; color: var(--color-text) !important; }
.sn-confirm-actions { justify-content: flex-end; }
.sn-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--color-surface-elevated); border: 1px solid var(--color-border); align-self: flex-start; }
.sn-seg button { padding: 5px 14px; border-radius: 7px; font: inherit; font-size: 0.8rem; color: var(--color-text-secondary); background: transparent; border: 0; cursor: pointer; }
.sn-seg button.is-on { background: var(--sn); color: #0c0a1a; font-weight: 600; }
[data-theme="light"] .sn-seg button.is-on { color: #fff; }
.sn-board-week[hidden] { display: none; }
.sn-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 52vh; overflow-y: auto; }
.sn-brow { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-md);
    background: var(--color-surface-elevated); font-size: 0.84rem; }
.sn-brank { font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-size: 0.8rem; }
.sn-brow.is-top .sn-brank { color: var(--color-accent); }
.sn-bname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sn-bname > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-bname small { display: block; font-size: 0.68rem; color: var(--color-text-muted); }
.sn-bname a { color: inherit; }
.sn-anon { color: var(--color-text-muted); font-style: italic; }   /* 週榜前 10 名沒具名的列（決定 11；2026-10-09） */
.sn-bscore { font-variant-numeric: tabular-nums; font-weight: 600; }
.sn-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.sn-av-txt { display: inline-grid; place-items: center; background: var(--sn-soft); color: var(--sn); font-size: 0.74rem; font-weight: 700; }
.sn-brow.is-me { background: var(--sn-soft); box-shadow: inset 0 0 0 1px var(--sn); }
.sn-brow.is-ghost { background: transparent; border: 1px dashed var(--color-border); color: var(--color-text-secondary); }
.sn-brow.is-void, .sn-brow.is-staff { opacity: 0.6; }
.sn-brow.is-void .sn-bscore { text-decoration: line-through; }
.sn-board-empty { padding: 14px; text-align: center; font-size: 0.84rem; color: var(--color-text-muted); }
.sn-board-me { font-weight: 600; color: var(--color-text) !important; }
.sn-board-me[hidden] { display: none; }
.sn-board-note { font-size: 0.72rem !important; }
.sn-reveal { padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--sn-soft);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.88rem; }
.sn-reveal small { display: block; width: 100%; font-size: 0.74rem; color: var(--color-text-muted); }
.sn-big { font-size: 1.5rem; color: var(--sn); }
.sn-coins { font-weight: 700; color: var(--sn-ok); }
.sn-compare { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sn-compare th, .sn-compare td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--color-border); }
.sn-compare th:first-child { text-align: left; }
.sn-compare thead th { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 600; }
.sn-result-gantt { min-width: 0; }
.sn-plan-line { font-size: 0.78rem !important; line-height: 1.6; }
.sn-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sn-top li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-radius: var(--radius-md); background: var(--color-surface-elevated); font-size: 0.84rem; }
.sn-top li > div { min-width: 0; }
.sn-top li small { color: var(--color-text-muted); }
.sn-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.sn-result-actions { margin-top: 4px; }

/* 紀錄彈窗（history.js；.slots-recent 來自 slots.css） */
.sn-history-box { width: min(100%, 520px); max-width: none; }
.sn-history-note { font-size: 0.74rem; margin-bottom: 8px; }
.sn-history-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
.snh-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snh-what b { margin-right: 4px; font-variant-numeric: tabular-nums; }
.snh-sub { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }
.snh-net { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.slots-recent .is-win .snh-net { color: #3fb37f; }
[data-theme="light"] .slots-recent .is-win .snh-net { color: #2f7d52; }   /* 淺色底 #fdf5f0 上 4.7:1（原色只有 2.45:1；2026-10-09） */
.slots-recent .is-partial .snh-net { color: var(--color-text-secondary); }
.slots-recent .is-loss .snh-net { color: var(--color-text-muted); }

@media (max-width: 900px) {
    .sn-work-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .sn-hero { align-items: flex-start; }
    .sn-hero-icon { width: 48px; height: 48px; border-radius: 14px; }
    .sn-hero-icon .ico { width: 30px; height: 30px; }
    .sn-hero h1 { font-size: 1.4rem; }
    .sn-tut-list { grid-template-columns: 1fr; }
    .sn-stats div { min-width: 0; flex: 1 1 40%; }
    .sn-card { padding: 12px; }
    .sn-gantt { padding: 6px 6px 2px; }
    .sn-gear-grid, .sn-meters { grid-template-columns: minmax(0, 1fr); }
    .sn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sn-part { grid-template-columns: 16px 3em minmax(0, 1fr) 3.4em 2.6em; gap: 6px; }
    .sn-brow { grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px; }
    .sn-history-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .sn-history-list .snh-sub { grid-column: 1; grid-row: 2; }
    .sn-history-list .snh-net { grid-column: 2; grid-row: 1 / span 2; }
    .sn-toolbar .sn-btn { flex: 1 1 auto; }
}

/* ── 後台出題頁（2026-10-09 S6）：表單左、預覽右；手機一欄。確認框是原生 <dialog>，固定置中 ── */
.sn-adm-page .container { max-width: 1280px; }
.sn-adm-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sn-adm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sn-adm-form { gap: 12px; }
.sn-adm-all { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sn-adm-all > .sn-fs + .sn-fs { padding-top: 12px; border-top: 1px dashed var(--color-border); }
.sn-adm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 10px; align-items: end; }
.sn-adm-row[hidden] { display: none; }
.sn-adm-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sn-adm-row-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); }
.sn-adm-row + .sn-adm-row { margin-top: 4px; }
.sn-field textarea { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 8px; font: inherit; font-size: 0.84rem; line-height: 1.6; resize: vertical;
    color: var(--color-text); background: var(--color-surface-elevated); border: 1px solid var(--color-border); }
.sn-field textarea:focus { outline: none; border-color: var(--sn); }
.sn-field input[type="checkbox"], .sn-field input[type="radio"] { width: auto; height: auto; }
.sn-field small { font-size: 0.66rem; }
.sn-adm-btm { justify-content: flex-end; }
.sn-adm-radio, .sn-adm-check { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-secondary); cursor: pointer; }
.sn-adm-radio input, .sn-adm-check input { margin-top: 3px; accent-color: var(--sn); }
.sn-adm-sites { display: flex; flex-direction: column; gap: 8px; }
.sn-adm-site { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px 8px; align-items: end;
    padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg); }
.sn-adm-site-tools { display: flex; gap: 4px; }
.sn-adm-est { grid-column: 1 / -1; margin: 0; min-height: 1em; }
.sn-adm-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; }
.sn-adm-pool { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: var(--radius-md); }
.sn-adm-pool b { font-size: 0.76rem; color: var(--color-text); }
.sn-adm-save { align-items: flex-end; }
.sn-adm-seed { flex: 0 1 200px; }
.sn-adm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-adm-actions [hidden] { display: none; }
.sn-adm-seg { display: inline-flex; gap: 4px; }
.sn-adm-seg .is-on { border-color: var(--sn); color: var(--sn); background: var(--sn-soft); }
.sn-adm-sub { font-size: 0.82rem; margin: 8px 0 4px; }
.sn-adm-bad { color: var(--sn-bad); }
.sn-adm-good { color: var(--sn-ok); font-size: 0.82rem; }
.sn-adm-moon-table tr.is-bad td:first-child { color: var(--sn-bad); }
.sn-adm-moon-table tr.is-on td { background: var(--sn-soft); }
.sn-adm .is-bad { border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--sn-bad); }
.sn-btn-danger { color: var(--sn-bad); border-color: currentColor; }
.sn-btn-primary.sn-btn-danger { background: var(--sn-bad); border-color: var(--sn-bad); color: #fff; }
.sn-btn.is-busy { cursor: progress; opacity: 0.7; }
.sn-adm-dialog { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
    padding: 0; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --sn: #8fb4ff; --sn-soft: rgba(143, 180, 255, 0.12); --sn-ok: #5fbf8b; --sn-bad: #e0556a; }
[data-theme="light"] .sn-adm-dialog { --sn: #3b5fb0; --sn-soft: rgba(59, 95, 176, 0.09); --sn-ok: #2f8a5a; --sn-bad: #c43a52; }
.sn-adm-dialog::backdrop { background: rgba(5, 6, 15, 0.6); }
.sn-adm-dlg { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.sn-adm-dlg h2 { font-size: 1.05rem; }
.sn-adm-dlg-body p { font-size: 0.84rem; line-height: 1.7; margin: 0 0 6px; color: var(--color-text-secondary); }
.sn-adm-dlg-actions { justify-content: flex-end; }
@media (max-width: 960px) {
    .sn-adm-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .sn-adm-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sn-adm-row-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sn-adm-row-4 > :last-child { grid-column: 1 / -1; }
    .sn-adm-site { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sn-adm-site-id, .sn-adm-site > label:nth-child(4) { grid-column: 1 / -1; }
    .sn-adm-site-tools { grid-column: 1 / -1; }
    .sn-adm-seed { flex: 1 1 100%; }
}
.sn-adm-radios { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; }