/* Device themes for the Concept C flow pages (home / settings / login).
   The typing app's saved theme (fcj-typing-theme) is stamped by
   view/frontend/component/theme-boot.php as html[data-theme="…"] plus
   .sfc-dark for dark bases, before first paint. 'light' = default Concept C
   (no attribute, nothing here applies). Accents mirror typing/themes.css.
   Load AFTER student/flow.css and school/login-concept-c.css. */

/* ================================================================ shared dark base
   Text/semantic tokens shared by all dark themes; per-theme blocks below
   set the surfaces and accent. --sfc-navy doubles as "primary text",
   --sfc-text-2 is secondary body text (table cells etc.). */
html.sfc-dark {
    --sfc-navy: #e8eef5;
    --sfc-text-2: #b9c5d0;
    --sfc-muted: #97a6b4;
    --sfc-teal-dark: #5ec6b6;
    --sfc-gold-dark: #e2b45e;
    --sfc-wash: rgba(3, 14, 20, 0.86);
    --login-c-navy: #e8eef5;
    --login-c-muted: #97a6b4;
}

/* ================================================================ dark themes */
html[data-theme="dark"] {
    --sfc-panel-glass: rgba(23, 27, 34, 0.94);
    --sfc-bg: #171b22;
    --sfc-panel: #1d222b;
    --sfc-panel-2: #242a35;
    --sfc-line: #323b48;
    --sfc-line-2: #272e39;
    --sfc-soft: #242a35;
    --sfc-blue: #5d84c1;
    --sfc-blue-dark: #365a92;
    --sfc-blue-hover: #6d92cb;
    --sfc-focus-ring: rgba(93, 132, 193, 0.30);
    --login-c-bg: #171b22;
    --login-c-line: #323b48;
    --login-c-soft: #242a35;
    --login-c-blue: #5d84c1;
    --login-c-blue-dark: #365a92;
}

html[data-theme="ocean"] {
    --sfc-panel-glass: rgba(13, 33, 42, 0.94);
    --sfc-bg: #0b1e26;
    --sfc-panel: #11272f;
    --sfc-panel-2: #17313b;
    --sfc-line: #24434d;
    --sfc-line-2: #1b3540;
    --sfc-soft: #17313b;
    --sfc-blue: #1fb6a6;
    --sfc-blue-dark: #178e82;
    --sfc-blue-hover: #2cc6b5;
    --sfc-focus-ring: rgba(31, 182, 166, 0.30);
    --login-c-bg: #0b1e26;
    --login-c-line: #24434d;
    --login-c-soft: #17313b;
    --login-c-blue: #1fb6a6;
    --login-c-blue-dark: #178e82;
}

html[data-theme="forest"] {
    --sfc-panel-glass: rgba(15, 30, 21, 0.94);
    --sfc-bg: #0e1c13;
    --sfc-panel: #14271b;
    --sfc-panel-2: #1a3224;
    --sfc-line: #294734;
    --sfc-line-2: #1f3829;
    --sfc-soft: #1a3224;
    --sfc-blue: #4caf7d;
    --sfc-blue-dark: #38895f;
    --sfc-blue-hover: #5cbd8c;
    --sfc-focus-ring: rgba(76, 175, 125, 0.30);
    --login-c-bg: #0e1c13;
    --login-c-line: #294734;
    --login-c-soft: #1a3224;
    --login-c-blue: #4caf7d;
    --login-c-blue-dark: #38895f;
}

html[data-theme="midnight"] {
    --sfc-panel-glass: rgba(22, 24, 50, 0.94);
    --sfc-bg: #14162f;
    --sfc-panel: #1b1d38;
    --sfc-panel-2: #232647;
    --sfc-line: #343864;
    --sfc-line-2: #292c50;
    --sfc-soft: #232647;
    --sfc-blue: #7b8cff;
    --sfc-blue-dark: #5a6ad8;
    --sfc-blue-hover: #8c9bff;
    --sfc-focus-ring: rgba(123, 140, 255, 0.30);
    --login-c-bg: #14162f;
    --login-c-line: #343864;
    --login-c-soft: #232647;
    --login-c-blue: #7b8cff;
    --login-c-blue-dark: #5a6ad8;
}

/* ================================================================ light tinted themes
   Panels and text keep the default Concept C look; only the page tint and
   the action accent change (mirrors typing/themes.css light themes). */
html[data-theme="rose"] {
    --sfc-bg: #fff1f5;
    --sfc-line: #e8cfd8;
    --sfc-soft: #fdf4f7;
    --sfc-blue: #d4537e;
    --sfc-blue-dark: #a83b60;
    --sfc-blue-hover: #dd6890;
    --login-c-bg: #fff1f5;
    --login-c-line: #e8cfd8;
    --login-c-soft: #fdf4f7;
    --login-c-blue: #d4537e;
    --login-c-blue-dark: #a83b60;
}

html[data-theme="sunset"] {
    --sfc-bg: #fff4ea;
    --sfc-line: #eed9c3;
    --sfc-soft: #fdf6ee;
    --sfc-blue: #e8703a;
    --sfc-blue-dark: #c15424;
    --sfc-blue-hover: #ef8352;
    --login-c-bg: #fff4ea;
    --login-c-line: #eed9c3;
    --login-c-soft: #fdf6ee;
    --login-c-blue: #e8703a;
    --login-c-blue-dark: #c15424;
}

html[data-theme="lavender"] {
    --sfc-bg: #f4f1ff;
    --sfc-line: #dcd5f0;
    --sfc-soft: #f7f5fd;
    --sfc-blue: #7c5cd4;
    --sfc-blue-dark: #5e43ab;
    --sfc-blue-hover: #8d70dd;
    --login-c-bg: #f4f1ff;
    --login-c-line: #dcd5f0;
    --login-c-soft: #f7f5fd;
    --login-c-blue: #7c5cd4;
    --login-c-blue-dark: #5e43ab;
}

/* ================================================================ accent-aware hovers
   flow.css/login-concept-c.css hardcode the light-blue hover; any themed page
   swaps it for the theme accent's hover shade. */
html[data-theme] .sfc-btn:hover {
    background: var(--sfc-blue-hover);
}

html[data-theme] .login-page-c .login-form .pp-btn:hover {
    background: var(--sfc-blue-hover, #2186b1);
}

/* ================================================================ dark component overrides
   flow.css/login-concept-c.css hardcode white surfaces; repoint them at the
   theme panel tokens when a dark base is active. */

/* --- header pill (flow pages + login) --- */
html.sfc-dark .sfc-page .header-bar-container,
html.sfc-dark .login-page-c .header-bar-container {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

html.sfc-dark #header-bar .header-bar-sub-title {
    color: var(--sfc-muted);
}

html.sfc-dark #header-bar .header-bar-separator {
    color: var(--sfc-line);
}

html.sfc-dark #header-bar .header-bar-icon {
    /* header-bar.css gives icons a white disc; melt it into the dark pill */
    background-color: transparent;
    color: var(--sfc-muted);
}

html.sfc-dark #header-bar .header-bar-icon:hover {
    background-color: var(--sfc-panel-2);
    color: var(--sfc-navy);
}

/* the wordmark image is dark ink; lift it to white on dark pills */
html.sfc-dark .header-bar-logo-text {
    filter: brightness(0) invert(1) opacity(0.88);
}

/* --- home streak strip --- */
html.sfc-dark .sfc-streak {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .sfc-streak-flame {
    background: var(--sfc-panel-2);
    color: var(--sfc-muted);
}

html.sfc-dark .sfc-streak--lit .sfc-streak-flame,
html.sfc-dark .sfc-streak--urgent .sfc-streak-flame {
    background: rgba(217, 155, 51, 0.16);
    color: #f0a94e;
}

/* --- home stage/rail cards (image-led; borders + fallback bg only) --- */
html.sfc-dark .sfc-stage,
html.sfc-dark .sfc-rail-card {
    border-color: var(--sfc-line);
    background: #0a121a;
}

html.sfc-dark .sfc-stage {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html.sfc-dark .sfc-rail-card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

/* --- settings page --- */
html.sfc-dark .set-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

html.sfc-dark .set-info,
html.sfc-dark .set-info-row + .set-info-row {
    border-color: var(--sfc-line-2);
}

html.sfc-dark .set-theme {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

html.sfc-dark .set-theme:hover {
    border-color: var(--sfc-blue);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

html.sfc-dark .set-theme-swatch {
    border-color: rgba(255, 255, 255, 0.16);
}

html.sfc-dark .sfc-btn--secondary {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .sfc-btn--secondary:hover {
    background: var(--sfc-soft);
}

html.sfc-dark .set-preview-note {
    color: var(--sfc-muted);
}

/* --- login page --- */
html.sfc-dark .login-page-c .login-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

html.sfc-dark .login-page-c .login-visual {
    border-color: var(--sfc-line);
}

html.sfc-dark .login-c-step-icon {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .login-c-step-copy small,
html.sfc-dark .login-c-step-copy strong {
    color: var(--sfc-muted);
}

html.sfc-dark .login-c-step.is-active .login-c-step-copy small {
    color: var(--login-c-blue);
}

html.sfc-dark .login-c-step.is-active .login-c-step-copy strong {
    color: var(--login-c-navy);
}

html.sfc-dark .login-c-step.is-done .login-c-step-icon {
    background: rgba(70, 188, 160, 0.16);
    border-color: rgba(70, 188, 160, 0.45);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .login-c-step.is-done .login-c-step-copy small,
html.sfc-dark .login-c-step.is-done .login-c-step-copy strong {
    color: var(--sfc-teal-dark);
}

html.sfc-dark .login-c-step-line {
    background: var(--sfc-line);
}

html.sfc-dark .login-page-c .login-form .pp-label {
    color: var(--sfc-navy);
}

html.sfc-dark .login-page-c .login-form .pp-input {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .login-page-c .login-form .pp-input::placeholder {
    color: var(--sfc-muted);
}

html.sfc-dark .login-page-c .login-form .pp-input:focus {
    background: var(--sfc-panel-2);
    border-color: var(--login-c-blue);
    box-shadow: 0 0 0 4px var(--sfc-focus-ring, rgba(93, 132, 193, 0.3));
}

html.sfc-dark .login-c-hint,
html.sfc-dark .login-c-hint i {
    color: var(--sfc-muted);
}

html.sfc-dark .login-page-c .login-panel .pp-msg {
    background: rgba(190, 70, 70, 0.16);
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0b6b0;
}

html.sfc-dark .login-page-c .login-schoolinfo {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

html.sfc-dark .login-page-c .login-school-icon {
    background: rgba(255, 255, 255, 0.08);
}

html.sfc-dark .login-page-c .login-school-change {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .login-page-c .login-school-change:hover {
    background: var(--sfc-soft);
}

html.sfc-dark .login-page-c .login-form .pp-btn:disabled {
    background: #46566b;
    box-shadow: 0 4px 0 #35414f;
}

/* ================================================================ shared flow components (all sfc pages) */

/* chips — light tint pills become translucent dark tints */
html.sfc-dark .sfc-chip--due,
html.sfc-dark .sfc-chip--assess {
    background: rgba(217, 155, 51, 0.16);
    border-color: rgba(217, 155, 51, 0.45);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .sfc-chip--soon,
html.sfc-dark .sfc-chip--date {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .sfc-chip--done,
html.sfc-dark .sfc-chip--practice {
    background: rgba(70, 188, 160, 0.16);
    border-color: rgba(70, 188, 160, 0.45);
    color: var(--sfc-teal-dark);
}

/* progress tracks */
html.sfc-dark .sfc-track {
    background: rgba(255, 255, 255, 0.14);
}

/* view toggle (segmented control) */
html.sfc-dark .sfc-viewtoggle {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .sfc-viewtoggle button:hover {
    background: var(--sfc-panel-2);
    color: var(--sfc-navy);
}

/* notices + empty states */
html.sfc-dark .sfc-notice {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

html.sfc-dark .sfc-notice--warn {
    background: rgba(217, 155, 51, 0.12);
    border-color: rgba(217, 155, 51, 0.4);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .sfc-notice--error {
    background: rgba(190, 70, 70, 0.14);
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0b6b0;
}

html.sfc-dark .sfc-notice--error i {
    color: #f0b6b0;
}

html.sfc-dark .sfc-empty {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .sfc-empty-icon {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

/* ime icon chip (Menu_*.svg tiles) */
html.sfc-dark .sfc-ime-icon {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--sfc-line);
}

/* ================================================================ 選擇課程 + course cards */
html.sfc-dark .sfc-resume,
html.sfc-dark .sfc-course-card {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

html.sfc-dark .sfc-course-card--disabled .sfc-course-card-body h3 {
    color: var(--sfc-muted);
}

/* ================================================================ course journey */
html.sfc-dark .sfc-hero {
    border-color: var(--sfc-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html.sfc-dark .sfc-path::before {
    background: var(--sfc-line);
}

html.sfc-dark .sfc-stagecard {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html.sfc-dark .sfc-stagecard--current {
    border-color: var(--sfc-blue);
}

html.sfc-dark .sfc-medallion {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .sfc-stagecard--done .sfc-medallion {
    background: rgba(70, 188, 160, 0.16);
    border-color: rgba(70, 188, 160, 0.5);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .sfc-stagecard--current .sfc-medallion {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .sfc-stagebody {
    border-top-color: var(--sfc-line-2);
}

html.sfc-dark .sfc-lesson {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line-2);
}

html.sfc-dark .sfc-lesson:hover {
    border-color: var(--sfc-blue);
}

html.sfc-dark .sfc-lesson--current {
    background: var(--sfc-soft);
    border-color: var(--sfc-blue);
}

html.sfc-dark .sfc-lesson-num {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sfc-navy);
}

html.sfc-dark .sfc-lesson--done .sfc-lesson-num {
    background: rgba(70, 188, 160, 0.16);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .sfc-lesson--current .sfc-lesson-num {
    background: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .sfc-lesson-copy small,
html.sfc-dark .sfc-lockhint {
    color: var(--sfc-muted);
}

/* bottom bar + drawer + toc */
html.sfc-dark .sfc-bottombar {
    background: var(--sfc-panel-glass, rgba(18, 24, 32, 0.94));
    border-color: var(--sfc-line);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

html.sfc-dark .sfc-panel {
    background: var(--sfc-panel);
    border-left-color: var(--sfc-line);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}

html.sfc-dark .sfc-panel-head {
    border-bottom-color: var(--sfc-line-2);
}

html.sfc-dark .sfc-panel-close {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .sfc-panel-close:hover {
    background: var(--sfc-soft);
    color: var(--sfc-navy);
}

html.sfc-dark .sfc-panel-actions {
    border-top-color: var(--sfc-line-2);
}

html.sfc-dark .sfc-keychip {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

html.sfc-dark .sfc-toc-stage {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line-2);
}

html.sfc-dark .sfc-toc-stage:hover {
    background: var(--sfc-soft);
    border-color: var(--sfc-blue);
}

html.sfc-dark .sfc-toc-dot {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .sfc-toc-stage--done .sfc-toc-dot {
    background: rgba(70, 188, 160, 0.16);
    border-color: rgba(70, 188, 160, 0.5);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .sfc-toc-stage--current .sfc-toc-dot {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

/* ================================================================ 校內練習 / 預設練習 cards + rows */
html.sfc-dark .sfc-asg-card,
html.sfc-dark .sfc-asg-row {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .sfc-asg-row:hover,
html.sfc-dark a.sfc-course-card:hover,
html.sfc-dark .sfc-asg-card:hover {
    border-color: var(--sfc-blue);
}

html.sfc-dark .sfc-asg-metaitem,
html.sfc-dark .sfc-asg-metaitem i {
    color: var(--sfc-muted);
}

/* ================================================================ assignment detail (avc-*) */
html.sfc-dark .avc-panel,
html.sfc-dark .avc-hero,
html.sfc-dark .avc-choice {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

html.sfc-dark .avc-choice:hover {
    border-color: var(--sfc-blue);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4);
}

html.sfc-dark .avc-choice--practice .avc-choice-icon {
    background: rgba(70, 188, 160, 0.16);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .avc-choice--assess .avc-choice-icon {
    background: rgba(217, 155, 51, 0.16);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .avc-cta {
    border-left-color: var(--sfc-line);
}

html.sfc-dark .avc-metaitem,
html.sfc-dark .avc-metaitem i {
    color: var(--sfc-muted);
}

html.sfc-dark .avc-score--pos {
    background: rgba(70, 188, 160, 0.16);
    border-color: rgba(70, 188, 160, 0.45);
    color: var(--sfc-teal-dark);
}

html.sfc-dark .avc-score--neg {
    background: rgba(190, 70, 70, 0.14);
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0a9a5;
}

html.sfc-dark .avc-bonus-row + .avc-bonus-row {
    border-top-color: var(--sfc-line-2);
}

html.sfc-dark .avc-history-head + * {
    border-color: var(--sfc-line-2);
}

/* bootstrap surfaces used on avc pages */
html.sfc-dark .av-page .assignment-history-table {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sfc-text-2);
}

html.sfc-dark .av-page .assignment-history-table thead th {
    border-bottom-color: var(--sfc-line);
}

html.sfc-dark .av-page .assignment-history-table td {
    border-bottom-color: var(--sfc-line-2);
    color: var(--sfc-text-2);
}

html.sfc-dark .av-page .btn-outline-primary,
html.sfc-dark .av-page .btn-outline-secondary {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .av-page .btn-outline-primary:hover,
html.sfc-dark .av-page .btn-outline-secondary:hover {
    background: var(--sfc-soft);
    border-color: var(--sfc-blue);
    color: var(--sfc-navy);
}

html.sfc-dark .av-page .btn-outline-danger {
    background: transparent;
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0a9a5;
}

html.sfc-dark .av-page .btn-outline-danger:hover {
    background: rgba(190, 70, 70, 0.14);
    color: #f0b6b0;
}

html.sfc-dark .av-page .alert-warning {
    background: rgba(217, 155, 51, 0.12);
    border-color: rgba(217, 155, 51, 0.4);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .av-page .alert-danger {
    background: rgba(190, 70, 70, 0.14);
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0b6b0;
}

html.sfc-dark .av-page .btn-primary:disabled,
html.sfc-dark .av-page .btn-primary[disabled] {
    background: #46566b;
    box-shadow: 0 4px 0 #35414f;
}

/* ================================================================ 排行榜 (lbd-*) */
html.sfc-dark .lbd-controls,
html.sfc-dark .lbd-table-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .lbd-podium {
    background: linear-gradient(180deg, var(--sfc-panel-2), var(--sfc-panel) 70%);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .lbd-yourrank {
    background: var(--sfc-soft);
    border-color: var(--sfc-blue);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .lbd-row:not(.lbd-row--head) + .lbd-row:not(.lbd-row--head) {
    border-top-color: var(--sfc-line-2);
}

html.sfc-dark .lbd-row--me {
    background: var(--sfc-soft);
    border-color: var(--sfc-line);
}

html.sfc-dark .lbd-podium-value {
    color: var(--sfc-blue);
}

html.sfc-dark .lbd-podium-col--me .lbd-podium-name {
    color: var(--sfc-blue);
}

html.sfc-dark .lbd-arrow--down {
    color: #ef9a92;
}

html.sfc-dark .lbd-arrow--flat {
    color: var(--sfc-muted);
}

html.sfc-dark .lbd-arrow--new {
    background: rgba(217, 155, 51, 0.16);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .lbd-podium-avatar {
    box-shadow: 0 0 0 3px var(--sfc-panel-2), 0 6px 14px rgba(0, 0, 0, 0.4);
}

html.sfc-dark .lbd-podium-col--me .lbd-podium-avatar {
    box-shadow: 0 0 0 3px var(--sfc-blue), 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* assessment leaderboard bootstrap bits */
html.sfc-dark .lbd-assessment .leaderboard-scope-tab {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .lbd-assessment .leaderboard-scope-tab:hover,
html.sfc-dark .lbd-assessment .leaderboard-scope-tab:focus {
    background: var(--sfc-soft);
    border-color: var(--sfc-blue);
    color: var(--sfc-navy);
}

html.sfc-dark .lbd-assessment .leaderboard-scope-tab.active {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .lbd-assessment .assignment-leaderboard-table {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sfc-text-2);
}

html.sfc-dark .lbd-assessment .assignment-leaderboard-table thead th {
    border-bottom-color: var(--sfc-line);
}

html.sfc-dark .lbd-assessment .assignment-leaderboard-table td {
    border-bottom-color: var(--sfc-line-2);
    color: var(--sfc-text-2);
}

html.sfc-dark .lbd-assessment .assignment-leaderboard-table tr.leaderboard-row-you > td {
    background: var(--sfc-soft);
}

html.sfc-dark .lbd-assessment .page-link {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .lbd-assessment .page-link:hover {
    background: var(--sfc-soft);
}

html.sfc-dark .lbd-assessment-intro span {
    color: var(--sfc-navy);
}

/* ================================================================ 個人數據 (mda-*) */
html.sfc-dark .mda-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

html.sfc-dark .mda-level {
    background: rgba(217, 155, 51, 0.14);
    border-color: rgba(217, 155, 51, 0.42);
}

html.sfc-dark .mda-quickstat {
    border-color: var(--sfc-line-2);
}

html.sfc-dark .mda-badge,
html.sfc-dark .mda-spark,
html.sfc-dark .mda-best,
html.sfc-dark .stuana-finger-tile {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line-2);
}

html.sfc-dark .mda-badge--earned {
    background: rgba(217, 155, 51, 0.12);
    border-color: rgba(217, 155, 51, 0.42);
}

html.sfc-dark .mda-badge-icon {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .mda-badge--earned .mda-badge-icon {
    background: rgba(217, 155, 51, 0.16);
    border-color: rgba(217, 155, 51, 0.5);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .mda-badge:not(.mda-badge--earned) .mda-badge-img {
    opacity: 0.3;
}

html.sfc-dark .mda-badge-tier--bronze {
    background: rgba(196, 132, 72, 0.18);
    border-color: rgba(196, 132, 72, 0.5);
    color: #dfa268;
}

html.sfc-dark .mda-badge-tier--silver {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: #c3cdd6;
}

html.sfc-dark .mda-badge-tier--gold {
    background: rgba(217, 155, 51, 0.16);
    border-color: rgba(217, 155, 51, 0.5);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .mda-badge-tier--diamond {
    background: rgba(86, 183, 214, 0.16);
    border-color: rgba(86, 183, 214, 0.5);
    color: #7bcbe4;
}

html.sfc-dark a.mda-best:hover {
    border-color: var(--sfc-blue);
}

html.sfc-dark .mda-ime {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .mda-ime:hover:not(:disabled) {
    border-color: var(--sfc-blue);
    color: var(--sfc-navy);
}

html.sfc-dark .mda-ime.is-active {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .mda-ime-count {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sfc-navy);
}

html.sfc-dark .mda-ime.is-active .mda-ime-count {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

html.sfc-dark .stuana-finger-tile strong {
    color: var(--sfc-navy);
}

html.sfc-dark .stuana-finger-tile--good strong {
    color: var(--sfc-teal-dark);
}

html.sfc-dark .stuana-finger-tile--mid strong {
    color: var(--sfc-gold-dark);
}

html.sfc-dark .stuana-finger-tile--bad strong {
    color: #f0a9a5;
}

/* hands artwork: fixed dark ink outlines vanish on dark panels */
html.sfc-dark .stuana-hand path[stroke="#494E5B"] {
    stroke: #8b96a6;
}

html.sfc-dark .mda-worst-keycap {
    background: rgba(190, 70, 70, 0.16);
    border-color: rgba(224, 122, 122, 0.45);
    color: #f0a9a5;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

html.sfc-dark .mda-chars {
    border-color: var(--sfc-line-2);
}

html.sfc-dark .mda-chars-row {
    border-top-color: var(--sfc-line-2);
    color: var(--sfc-text-2);
}

html.sfc-dark .mda-chars-pct {
    color: #f0a9a5;
}

html.sfc-dark .mda-chars-sample {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

/* --- level frames --- */
html.sfc-dark .sfc-avframe--master {
    --av-ring2: #d8e7ee;
}

html.sfc-dark .set-level {
    background: rgba(217, 155, 51, 0.16);
    border-color: rgba(217, 155, 51, 0.5);
    color: var(--sfc-gold-dark);
}

/* --- weekly goal card --- */
html.sfc-dark .sfc-goal {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .sfc-goal-track {
    stroke: rgba(255, 255, 255, 0.12);
}

/* --- badge modal + dates --- */
html.sfc-dark .mda-bmodal-card {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .mda-bmodal-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

html.sfc-dark .mda-bmodal-close:hover {
    background: var(--sfc-panel-2);
}

html.sfc-dark .mda-bmodal-tiers,
html.sfc-dark .mda-bmodal-tier {
    border-color: var(--sfc-line);
}

/* ================================================================ typing-record detail (trd-*) */
html.sfc-dark .trd-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

html.sfc-dark .trd-page .typing-record-version-panel,
html.sfc-dark .trd-page .typing-record-metrics-panel,
html.sfc-dark .trd-page .typing-record-replay-stats {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

html.sfc-dark .trd-page .typing-record-version-panel--local,
html.sfc-dark .trd-page .typing-record-metrics-panel--local {
    border-color: rgba(94, 198, 182, 0.45);
    box-shadow: inset 3px 0 0 var(--sfc-teal-dark);
}

html.sfc-dark .trd-page .typing-record-version-panel--remote,
html.sfc-dark .trd-page .typing-record-metrics-panel--remote {
    border-color: rgba(93, 132, 193, 0.45);
    box-shadow: inset 3px 0 0 var(--sfc-blue);
}

html.sfc-dark .trd-page .typing-record-detail-eyebrow-chip {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .trd-page .typing-record-marking-preview-card,
html.sfc-dark .trd-page .typing-record-article-preview,
html.sfc-dark .trd-page .typing-record-replay-article-wrap,
html.sfc-dark .trd-page .typing-record-replay-panel {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
}

html.sfc-dark .trd-page .typing-record-article-preview,
html.sfc-dark .trd-page .typing-record-replay-article-wrap {
    color: var(--sfc-navy);
}

html.sfc-dark .trd-page .typing-record-config-clip {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .trd-page .typing-record-config-clip.is-on {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .trd-page .typing-record-config-clip.is-off {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
    color: var(--sfc-muted);
}

html.sfc-dark .trd-page .typing-record-config-clip.is-default {
    background: rgba(93, 132, 193, 0.14);
    border-color: rgba(93, 132, 193, 0.35);
    color: var(--sfc-navy);
}

html.sfc-dark .trd-page .typing-record-replay-controls-inner {
    background: var(--sfc-blue);
}

html.sfc-dark .trd-page .typing-record-replay-control-btn,
html.sfc-dark .trd-page .typing-record-replay-sound-btn {
    background: var(--sfc-panel);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--sfc-navy);
}

html.sfc-dark .trd-page .typing-record-replay-control-btn:hover:enabled,
html.sfc-dark .trd-page .typing-record-replay-sound-btn:hover {
    background: var(--sfc-panel-2);
}

html.sfc-dark .trd-page .btn-outline-primary,
html.sfc-dark .trd-page .btn-outline-secondary {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    color: var(--sfc-navy);
}

html.sfc-dark .trd-page .btn-outline-primary:hover,
html.sfc-dark .trd-page .btn-outline-secondary:hover {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-blue);
    color: var(--sfc-navy);
}

html.sfc-dark .trd-page .btn-primary {
    background: var(--sfc-blue);
    color: #ffffff;
    box-shadow: 0 4px 0 var(--sfc-blue-dark);
}

html.sfc-dark .trd-page .btn-sm.btn-primary {
    box-shadow: none;
}

html.sfc-dark .trd-page .alert-warning {
    background: rgba(217, 155, 51, 0.12);
    border-color: rgba(217, 155, 51, 0.4);
    color: var(--sfc-gold-dark);
}

html.sfc-dark .trd-page .alert-danger {
    background: rgba(190, 70, 70, 0.14);
    border-color: rgba(224, 122, 122, 0.42);
    color: #f0b6b0;
}

html.sfc-dark .trd-page .typing-record-metrics-marking-col {
    border-left-color: var(--sfc-line);
}

/* ================================================================ 幽靈對戰大廳 (ghl-*) */
html.sfc-dark .ghl-loading,
html.sfc-dark .ghl-empty,
html.sfc-dark .ghl-group {
    background: var(--sfc-panel);
    border-color: var(--sfc-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html.sfc-dark .ghl-group-head {
    background: var(--sfc-panel-2);
    border-bottom-color: var(--sfc-line);
}

html.sfc-dark .ghl-ime {
    background: rgba(22, 118, 163, 0.18);
    border-color: rgba(94, 168, 205, 0.38);
    color: #8fc9e6;
}

/* the record to beat keeps its gold identity, on a dark wash */
html.sfc-dark .ghl-best {
    background: linear-gradient(100deg, rgba(226, 180, 94, 0.14) 0%, rgba(226, 180, 94, 0.05) 62%, transparent 100%);
    border-bottom-color: rgba(226, 180, 94, 0.26);
}

html.sfc-dark .ghl-best-meta b {
    color: var(--sfc-text-2);
}

html.sfc-dark .ghl-row {
    background: var(--sfc-panel-2);
    border-color: var(--sfc-line);
}

html.sfc-dark .ghl-rank {
    background: rgba(22, 118, 163, 0.20);
    color: #8fc9e6;
}

html.sfc-dark .ghl-when,
html.sfc-dark .ghl-others-label,
html.sfc-dark .ghl-card-unit {
    color: var(--sfc-muted);
}

html.sfc-dark .ghl-tag {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sfc-text-2);
}

html.sfc-dark .ghl-card-btn {
    background: transparent;
    border-color: var(--sfc-line);
    color: #8fc9e6;
}

html.sfc-dark .ghl-card-btn:hover {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

html.sfc-dark .ghl-clear,
html.sfc-dark .ghl-del {
    color: var(--sfc-muted);
}

html.sfc-dark .ghl-clear:hover,
html.sfc-dark .ghl-del:hover {
    border-color: rgba(224, 122, 122, 0.42);
    background: rgba(190, 70, 70, 0.14);
    color: #f0b6b0;
}

html.sfc-dark .ghl-clear:disabled:hover,
html.sfc-dark .ghl-del:disabled:hover {
    border-color: transparent;
    background: transparent;
    color: var(--sfc-muted);
}

html.sfc-dark .ghl-error {
    border-color: rgba(224, 122, 122, 0.42);
    background: rgba(190, 70, 70, 0.14);
    color: #f0b6b0;
}

html.sfc-dark .ghl-count {
    color: var(--sfc-muted);
}

html.sfc-dark .ghl-more {
    border-color: var(--sfc-line);
    color: #8fc9e6;
}

html.sfc-dark .ghl-more:hover {
    border-color: var(--sfc-blue);
    background: var(--sfc-panel-2);
}