/* Concept C student learning flow: home chooser, course select, course journey.
   Tokens shared with school/login-concept-c.css. Radius rule: panels/cards/buttons
   8px, small chips and progress tracks pill. Accent roles: blue = primary action,
   teal = completed/progress, gold = highlight badges. */
:root {
    --sfc-navy: #123d50;
    --sfc-blue: #1676a3;
    --sfc-blue-dark: #0f5f85;
    --sfc-teal: #289f91;
    --sfc-teal-dark: #1d7d72;
    --sfc-gold: #d99b33;
    --sfc-gold-dark: #a8741e;
    /* rose = 評核. Added because blue is already "primary action", teal is
       "completed/progress" and gold is "highlight/urgency" — 評核 needed a role
       of its own rather than borrowing one that already means something else. */
    --sfc-rose: #b3535c;
    --sfc-rose-dark: #9d454e;
    --sfc-muted: #68818c;
    --sfc-line: #ccdde3;
    --sfc-soft: #f3f8f9;
    --sfc-bg: #eaf3f5;
    --sfc-wash: rgba(8, 48, 64, 0.82);
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--sfc-bg);
}

.sfc-page {
    /* border-box so the 104+48px padding sits INSIDE 100svh. These pages do not
       load Bootstrap, so nothing else supplies the reset and an empty page would
       otherwise be 100svh + 152px and always scroll. */
    box-sizing: border-box;
    min-height: 100svh;
    padding: 104px 0 48px;
    background: var(--sfc-bg);
    color: var(--sfc-navy);
    font-family: "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
}

.sfc-wrap {
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto;
}

.sfc-mono {
    font-family: "Roboto Mono", "SFMono-Regular", Menlo, monospace;
}

/* ---------------------------------------------------------------- header */
/* Same floating pill treatment as the other Concept C pages. */
.sfc-page {
    position: relative;
}

.sfc-page #header-bar {
    position: absolute;
    z-index: 40;
    top: 24px;
    left: 50%;
    width: min(1320px, calc(100% - 56px));
    margin: 0;
    transform: translateX(-50%);
    /* Neutralize Bootstrap reboot body line-height on header text */
    line-height: normal;
}

.sfc-page .header-bar-container {
    /* Keep 1px border outside padding like pages without Bootstrap */
    box-sizing: content-box;
    border: 1px solid #d5e3e7;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(31, 85, 105, 0.10);
}

/* no underline on header chrome links (back arrow, right icons); brand/title links may underline on hover */
.sfc-page #header-bar a:not(.header-bar-logo-link):not(.header-bar-sub-title),
.sfc-page #header-bar a:not(.header-bar-logo-link):not(.header-bar-sub-title):hover {
    text-decoration: none;
}

.sfc-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sfc-navy);
    font-size: 14px;
    font-weight: 600;
    margin-right: 4px;
}

@media (max-width: 834px) {
    .sfc-user {
        max-width: 7em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.sfc-user-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--av-ring, rgba(22, 118, 163, 0.18)), 0 0 0 4px var(--av-ring2, transparent);
}

/* ---------------------------------------------------------------- shared bits */
.sfc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 28px;
    margin: 6px 0 22px;
}

.sfc-head-copy small {
    display: block;
    margin-bottom: 6px;
    color: var(--sfc-teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.sfc-head-copy h1 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}

.sfc-head-copy p {
    margin: 8px 0 0;
    color: var(--sfc-muted);
    font-size: 15px;
    line-height: 1.6;
}

.sfc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--sfc-blue);
    color: #ffffff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--sfc-blue-dark);
    transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.sfc-btn:hover {
    background: #2186b1;
}

.sfc-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--sfc-blue-dark);
}

.sfc-btn i {
    font-size: 13px;
}

.sfc-btn--ghost {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
    backdrop-filter: blur(2px);
}

.sfc-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.24);
}

.sfc-btn--ghost:active {
    transform: translateY(1px);
    box-shadow: none;
}

.sfc-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(22, 118, 163, 0.28);
    outline-offset: 2px;
}

.sfc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.sfc-chip--soon {
    background: #eef2f4;
    border: 1px solid #d8e2e6;
    color: #7f939c;
}

.sfc-chip--done {
    background: #dcf1ed;
    border: 1px solid #a8d7cf;
    color: var(--sfc-teal-dark);
}

/* progress track (pill) */
.sfc-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #d9e6ea;
    overflow: hidden;
}

.sfc-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sfc-teal), #45b7a8);
}

/* ================================================================ PAGE 1: HOME */

/* streak strip — the daily-return hook in the head row */
.sfc-streak {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px 11px 13px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08);
}

.sfc-streak-flame {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f4;
    color: #a9bcc5;
    font-size: 19px;
}

.sfc-streak--lit .sfc-streak-flame {
    background: #fdf3dd;
    color: #e8862c;
}

.sfc-streak--urgent .sfc-streak-flame {
    background: #fdf3dd;
    color: var(--sfc-gold);
    animation: sfcFlamePulse 1.6s ease-in-out infinite;
}

@keyframes sfcFlamePulse {
    50% { transform: scale(1.16); }
}

.sfc-streak-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.sfc-streak-copy strong {
    color: var(--sfc-navy);
    font-size: 15px;
    font-weight: 800;
}

.sfc-streak--urgent .sfc-streak-copy strong {
    color: var(--sfc-gold-dark);
}

.sfc-streak-copy small {
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 600;
}

.sfc-streak-cta {
    height: 40px;
    padding: 0 14px;
    margin-left: 6px;
    font-size: 13.5px;
    flex: 0 0 auto;
}

/* streak + weekly-goal pair in the page head */
.sfc-pulse {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sfc-goal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 13px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08);
    cursor: help;
}

.sfc-goal-ring {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.sfc-goal-ring svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.sfc-goal-track,
.sfc-goal-bar {
    fill: none;
    stroke-width: 4;
}

.sfc-goal-track {
    stroke: #e3edf1;
}

.sfc-goal-bar {
    stroke: var(--sfc-teal);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}

.sfc-goal-ring b {
    color: var(--sfc-teal-dark);
    font-size: 12px;
    font-weight: 800;
}

.sfc-goal-ring i {
    color: var(--sfc-gold-dark);
    font-size: 15px;
}

.sfc-goal--done .sfc-goal-bar {
    stroke: var(--sfc-gold);
}

.sfc-goal-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sfc-goal-copy strong {
    color: var(--sfc-navy);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.25;
}

.sfc-goal--done .sfc-goal-copy strong {
    color: var(--sfc-gold-dark);
}

.sfc-goal-copy small {
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 620px) {
    .sfc-pulse,
    .sfc-streak,
    .sfc-goal {
        width: 100%;
    }

    .sfc-streak-copy {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-streak--urgent .sfc-streak-flame {
        animation: none;
    }
}

/* two primary stages on top, three compact cards below */
.sfc-home-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.sfc-home-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sfc-home-top .sfc-stage {
    min-height: 340px;
}

.sfc-home-top .sfc-stage-copy h2 {
    font-size: clamp(26px, 2.6vw, 34px);
}

.sfc-home-bottom .sfc-rail-card {
    min-height: 200px;
}

.sfc-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 460px;
    overflow: hidden;
    border: 1px solid #b9d1d9;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(27, 78, 96, 0.16);
    background: var(--sfc-navy);
    text-decoration: none;
    color: #ffffff;
}

.sfc-stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 6s ease;
}

.sfc-stage:hover .sfc-stage-img {
    transform: scale(1.03);
}

.sfc-stage-video,
.sfc-rail-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.sfc-stage:hover .sfc-stage-video,
.sfc-stage:focus-visible .sfc-stage-video,
.sfc-rail-card:hover .sfc-rail-video,
.sfc-rail-card:focus-visible .sfc-rail-video {
    opacity: 1;
}

.sfc-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(185deg, rgba(8, 48, 64, 0.04) 34%, var(--sfc-wash) 88%);
}

.sfc-stage-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 30px 32px 30px;
    color: #ffffff;
}

.sfc-stage-copy small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cdece7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sfc-stage-copy h2 {
    margin: 10px 0 0;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.18;
    text-shadow: 0 3px 20px rgba(6, 35, 48, 0.35);
}

.sfc-stage-copy p {
    margin: 10px 0 20px;
    max-width: 34em;
    color: rgba(242, 250, 249, 0.86);
    font-size: 15px;
    line-height: 1.65;
}

.sfc-stage-copy .sfc-btn {
    min-width: 168px;
}

.sfc-rail-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border: 1px solid #c3d8de;
    border-radius: 8px;
    background: var(--sfc-navy);
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.12);
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sfc-rail-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(27, 78, 96, 0.18);
}

.sfc-rail-card:active {
    transform: translateY(-1px);
}

.sfc-rail-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfc-rail-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(185deg, rgba(8, 48, 64, 0.10) 30%, rgba(8, 48, 64, 0.84) 92%);
}

.sfc-rail-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px 20px;
}

.sfc-rail-copy small {
    color: #cdece7;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sfc-rail-copy strong {
    display: block;
    margin-top: 4px;
    font-size: 21px;
    font-weight: 800;
}

.sfc-rail-copy span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #bfe4de;
    font-size: 13px;
    font-weight: 700;
}

/* 打字小教室 — five one-minute lesson videos below the chooser. Each card is a
   click-to-load facade (thumbnail <button>) that home.php swaps for a
   youtube-nocookie iframe on press. 5 across → 3 → 2 → swipe row on phones. */
.sfc-clips {
    margin-top: 36px;
}

.sfc-clips-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.sfc-clips-copy {
    min-width: 0;
    max-width: 46em;
}

.sfc-clips-copy small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--sfc-teal-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.sfc-clips-copy h2 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 800;
    line-height: 1.25;
}

.sfc-clips-copy p {
    margin: 6px 0 0;
    color: var(--sfc-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.sfc-clips-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-blue);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sfc-clips-all:hover {
    border-color: var(--sfc-blue);
    background: var(--sfc-soft);
}

.sfc-clips-all i {
    font-size: 12px;
}

.sfc-clips-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sfc-clip {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08);
}

.sfc-clip-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--sfc-navy);
}

.sfc-clip-play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.sfc-clip-play img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sfc-clip-play:hover img {
    transform: scale(1.04);
}

/* the card clips its corners, so draw the focus ring inside the thumbnail */
.sfc-clip-play:focus-visible {
    outline: 3px solid var(--sfc-gold);
    outline-offset: -3px;
}

.sfc-clip-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--sfc-blue);
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(6, 35, 48, 0.35);
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* nudge the triangle right so it reads optically centred in the disc */
.sfc-clip-icon i {
    margin-left: 3px;
}

.sfc-clip-play:hover .sfc-clip-icon,
.sfc-clip-play:focus-visible .sfc-clip-icon {
    background: var(--sfc-blue);
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.08);
}

.sfc-clip-time {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(8, 32, 44, 0.78);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

/* 打字小教室 teaser in the head row, beside 本週目標: a small thumbnail that plays
   in the lightbox, plus a button that scrolls down to the lessons. Sized to
   match the streak and goal cards (~64px tall). */
.sfc-teaser {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 12px 7px 7px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08);
}

.sfc-teaser-frame {
    flex: 0 0 auto;
    width: 88px;
    overflow: hidden;
    border-radius: 6px;
}

.sfc-teaser-frame .sfc-clip-icon {
    width: 28px;
    height: 28px;
    font-size: 10px;
    box-shadow: 0 3px 10px rgba(6, 35, 48, 0.35);
}

.sfc-teaser-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}

.sfc-teaser-copy strong {
    color: var(--sfc-navy);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.sfc-teaser-copy small {
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sfc-teaser-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--sfc-blue);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 0 var(--sfc-blue-dark);
    transition: background-color 0.15s ease;
}

.sfc-teaser-btn:hover {
    background: #2186b1;
}

.sfc-teaser-btn:focus-visible {
    outline: 3px solid var(--sfc-gold);
    outline-offset: 2px;
}

.sfc-teaser-btn i {
    font-size: 11px;
}

/* landing marker after 睇短片 scrolls: a ring pulses once around each card */
.sfc-clips:focus {
    outline: none;
}

.sfc-clips.is-flash .sfc-clip {
    animation: sfcClipsFlash 1.6s ease-out;
}

@keyframes sfcClipsFlash {
    0% { box-shadow: 0 0 0 0 rgba(40, 159, 145, 0.75); }
    60% { box-shadow: 0 0 0 7px rgba(40, 159, 145, 0); }
    100% { box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08); }
}

@media (max-width: 620px) {
    .sfc-teaser {
        width: 100%;
        box-sizing: border-box;
    }

    .sfc-teaser-btn {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-clips.is-flash .sfc-clip {
        animation: none;
    }
}

/* 打字小教室 lightbox: the video at up to 960px wide over a dimmed page. */
.sfc-clip-lightbox {
    width: min(960px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #0b1a24;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.sfc-clip-lightbox::backdrop {
    background: rgba(5, 15, 22, 0.78);
}

.sfc-clip-lightbox[open] {
    animation: sfc-clip-lightbox-in 0.18s ease-out;
}

@keyframes sfc-clip-lightbox-in {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: none; }
}

.sfc-clip-lightbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
}

.sfc-clip-lightbox-head small {
    display: block;
    color: #8fd3c7;
    font-size: 12px;
    font-weight: 700;
}

.sfc-clip-lightbox-head strong {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}

.sfc-clip-lightbox-close {
    flex: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

.sfc-clip-lightbox-close:hover,
.sfc-clip-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.24);
}

.sfc-clip-lightbox-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.sfc-clip-lightbox-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sfc-clip-lightbox[open] {
        animation: none;
    }
}

.sfc-clip-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 14px;
}

.sfc-clip-copy small {
    color: var(--sfc-teal-dark);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sfc-clip-copy strong {
    color: var(--sfc-navy);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
}

.sfc-clip-copy span {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    color: var(--sfc-muted);
    font-size: 12.5px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

@media (max-width: 1180px) {
    .sfc-clips-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .sfc-clips-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* phones: one swipeable row that bleeds to the screen edge (.sfc-wrap leaves
   a 14px gutter at this width) with the next card peeking in */
@media (max-width: 620px) {
    .sfc-clips {
        margin-top: 28px;
    }

    .sfc-clips-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 76%;
        gap: 12px;
        margin: 0 -14px;
        padding: 2px 14px 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 14px;
        scrollbar-width: none;
    }

    .sfc-clips-list::-webkit-scrollbar {
        display: none;
    }

    .sfc-clip {
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-clip-play img,
    .sfc-clip-icon,
    .sfc-clips-all {
        transition: none;
    }

    .sfc-clip-play:hover img {
        transform: none;
    }
}

/* ================================================================ PAGE 2: COURSE SELECT */

.sfc-resume {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.08);
}

.sfc-resume i {
    color: var(--sfc-blue);
    font-size: 16px;
}

.sfc-resume-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.sfc-resume-copy small {
    color: var(--sfc-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sfc-resume-copy strong {
    color: var(--sfc-navy);
    font-size: 14px;
    font-weight: 700;
}

.sfc-resume .sfc-btn {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

/* featured course (in progress) */
.sfc-course-titlerow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sfc-ime-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: var(--sfc-soft);
}

.sfc-ime-icon img {
    width: 28px;
    height: 28px;
}

.sfc-progressline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sfc-progressline-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--sfc-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.sfc-progressline-label strong {
    color: var(--sfc-teal-dark);
    font-size: 14px;
}

/* course cards — equal tiles, 2×2 on desktop */
.sfc-courses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sfc-course-card-body .sfc-progressline {
    gap: 6px;
    margin-top: 2px;
}

.sfc-course-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.10);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.sfc-course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(27, 78, 96, 0.16);
}

.sfc-course-card-media {
    position: relative;
    aspect-ratio: 16 / 8.5;
    background: var(--sfc-soft);
}

.sfc-course-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfc-course-card--disabled .sfc-course-card-media img {
    filter: grayscale(0.9) opacity(0.75);
}

.sfc-course-card-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 20px 20px;
}

.sfc-course-card-body .sfc-course-titlerow h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--sfc-navy);
}

.sfc-course-card-body p {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.sfc-course-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--sfc-blue);
    font-size: 14px;
    font-weight: 700;
}

.sfc-course-card-cta i {
    font-size: 12px;
    transition: transform 0.15s ease;
}

a.sfc-course-card:hover .sfc-course-card-cta i {
    transform: translateX(4px);
}

.sfc-course-card--disabled {
    cursor: not-allowed;
}

.sfc-course-card--disabled .sfc-course-card-body h3 {
    color: #6f8791;
}

/* ================================================================ PAGE 3: COURSE JOURNEY */

.sfc-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #b9d1d9;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(27, 78, 96, 0.16);
    background: var(--sfc-navy);
    margin-bottom: 26px;
}

.sfc-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.sfc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(92deg, rgba(8, 48, 64, 0.90) 22%, rgba(8, 48, 64, 0.55) 55%, rgba(8, 48, 64, 0.12) 100%);
}

.sfc-hero-copy {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    padding: 44px 46px 40px;
    color: #ffffff;
}

.sfc-hero-copy .sfc-chip--course {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #d8efeb;
}

.sfc-hero-copy h1 {
    margin: 14px 0 0;
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.18;
    text-shadow: 0 3px 20px rgba(6, 35, 48, 0.35);
}

.sfc-hero-copy > p {
    margin: 10px 0 0;
    color: rgba(242, 250, 249, 0.85);
    font-size: 15px;
    line-height: 1.65;
}

.sfc-hero-progress {
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 420px;
}

.sfc-hero-progress .sfc-track {
    background: rgba(255, 255, 255, 0.22);
}

.sfc-hero-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: rgba(242, 250, 249, 0.85);
    font-size: 13px;
    font-weight: 700;
}

.sfc-hero-progress-label strong {
    color: #ffffff;
    font-size: 16px;
}

.sfc-hero-meta {
    margin: 12px 0 0;
    color: rgba(216, 239, 235, 0.9);
    font-size: 13px;
    font-weight: 700;
}

.sfc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

/* --- journey spine --- */
.sfc-path {
    position: relative;
    padding-left: 54px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sfc-path::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: #c7dbe1;
}

.sfc-stagecard {
    position: relative;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(27, 78, 96, 0.08);
}

.sfc-stagecard--current {
    border-color: var(--sfc-blue);
    box-shadow: 0 18px 44px rgba(22, 118, 163, 0.18);
}

/* medallion on the spine */
.sfc-medallion {
    position: absolute;
    left: -54px;
    top: 18px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 2px solid #c7dbe1;
    border-radius: 50%;
    background: #ffffff;
    color: #8aa2ac;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 6px 14px rgba(27, 78, 96, 0.10);
}

.sfc-stagecard--done .sfc-medallion {
    border-color: var(--sfc-teal);
    background: #dcf1ed;
    color: var(--sfc-teal-dark);
}

.sfc-stagecard--current .sfc-medallion {
    border-color: var(--sfc-blue);
    background: var(--sfc-blue);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(22, 118, 163, 0.35);
}

.sfc-stagehead {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sfc-stagehead-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.sfc-stagehead-copy h2 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.sfc-stagehead-copy p {
    margin: 3px 0 0;
    color: var(--sfc-muted);
    font-size: 13px;
    line-height: 1.5;
}

.sfc-stagehead-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.sfc-stagecount {
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 700;
}

.sfc-stagecount strong {
    color: var(--sfc-teal-dark);
}

.sfc-stagecard--current .sfc-stagecount strong {
    color: var(--sfc-blue);
}

.sfc-stagehead-caret {
    color: #9db3bc;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.sfc-stagecard.is-open .sfc-stagehead-caret {
    transform: rotate(90deg);
}

.sfc-stagebody {
    display: none;
    padding: 4px 20px 20px;
    border-top: 1px solid #e4edf0;
    margin-top: 2px;
}

.sfc-stagecard.is-open .sfc-stagebody {
    display: block;
}

.sfc-stage-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 12px;
}

.sfc-stage-mini .sfc-track {
    flex: 1 1 auto;
    height: 6px;
}

.sfc-stage-mini span {
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sfc-lessongrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.sfc-lesson {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid #dde8ec;
    border-radius: 8px;
    background: #fbfdfd;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.sfc-lesson:hover {
    border-color: var(--sfc-blue);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(22, 118, 163, 0.10);
}

.sfc-lesson:active {
    transform: translateY(0);
}

.sfc-lesson-num {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #e7f1f4;
    color: var(--sfc-blue-dark);
    font-size: 13px;
    font-weight: 800;
}

.sfc-lesson--done .sfc-lesson-num {
    background: #dcf1ed;
    color: var(--sfc-teal-dark);
}

.sfc-lesson--current {
    border-color: var(--sfc-blue);
    background: #eef6fa;
}

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

.sfc-lesson-copy {
    min-width: 0;
}

.sfc-lesson-copy strong {
    display: block;
    color: var(--sfc-navy);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}

.sfc-lesson-copy small {
    display: block;
    margin-top: 1px;
    color: #8ba1aa;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-lesson-state {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--sfc-teal-dark);
    font-size: 13px;
}

.sfc-lesson-stars {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 1px;
    margin-left: auto;
    color: var(--sfc-gold);
    font-size: 10.5px;
}

.sfc-lesson-stars .is-off {
    color: #d7e1e5;
}

.sfc-lesson--current .sfc-lesson-state {
    color: var(--sfc-blue);
}

.sfc-lockhint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 0 2px;
    color: #7f939c;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------------------------------------------------------------- bottom bar */
.sfc-bottombar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(880px, calc(100% - 40px));
    padding: 12px 14px 12px 20px;
    border: 1px solid #cfe0e5;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 44px rgba(27, 78, 96, 0.22);
}

.sfc-bottombar-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.sfc-bottombar-progress .sfc-track {
    width: 110px;
    height: 6px;
}

.sfc-bottombar-progress span {
    color: var(--sfc-navy);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.sfc-bottombar-last {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-bottombar-last strong {
    color: var(--sfc-navy);
}

.sfc-bottombar .sfc-btn {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

/* ---------------------------------------------------------------- drawer + toc */
.sfc-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(10, 42, 56, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.sfc-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sfc-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    width: min(430px, 94vw);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid var(--sfc-line);
    box-shadow: -24px 0 60px rgba(10, 42, 56, 0.25);
    transform: translateX(105%);
    transition: transform 0.26s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.sfc-panel.is-open {
    transform: translateX(0);
}

.sfc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid #e4edf0;
}

.sfc-panel-head-copy small {
    display: block;
    color: var(--sfc-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
}

.sfc-panel-head-copy strong {
    display: block;
    margin-top: 3px;
    color: var(--sfc-navy);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
}

.sfc-panel-close {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--sfc-muted);
    font-size: 15px;
    cursor: pointer;
}

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

.sfc-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 22px;
}

.sfc-meta {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px 14px;
    margin: 0 0 18px;
}

.sfc-meta dt {
    color: var(--sfc-gold-dark);
    font-size: 13px;
    font-weight: 800;
}

.sfc-meta dd {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 13.5px;
    line-height: 1.55;
}

.sfc-keychips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sfc-keychip {
    display: inline-flex;
    min-width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #c9dbe1;
    border-radius: 6px;
    background: var(--sfc-soft);
    color: var(--sfc-navy);
    font-family: "Roboto Mono", monospace;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 2px 0 #d5e3e8;
}

.sfc-panel-actions {
    display: flex;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #e4edf0;
}

.sfc-panel-actions .sfc-btn {
    flex: 1 1 auto;
}

.sfc-btn--secondary {
    background: #ffffff;
    border: 1px solid var(--sfc-line);
    color: var(--sfc-blue-dark);
    box-shadow: none;
}

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

.sfc-btn--secondary:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 評核 action. Paired with the default blue 練習 button both buttons stay solid:
   the old solid-vs-outline pair looked like the second one was disabled. Rose
   matches .sfc-chip--assess so 評核 reads the same everywhere on the page. */
.sfc-btn--assess {
    background: var(--sfc-rose);
    border: 0;
    color: #ffffff;
}

.sfc-btn--assess:hover {
    background: var(--sfc-rose-dark);
}

/* toc list */
.sfc-toc-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #e0eaee;
    border-radius: 8px;
    background: #ffffff;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.sfc-toc-stage:hover {
    border-color: var(--sfc-blue);
    background: #f6fafc;
}

.sfc-toc-dot {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    border: 1.5px solid #c7dbe1;
    background: #f2f7f8;
    color: #8aa2ac;
}

.sfc-toc-stage--done .sfc-toc-dot {
    border-color: var(--sfc-teal);
    background: #dcf1ed;
    color: var(--sfc-teal-dark);
}

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

.sfc-toc-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.sfc-toc-copy strong {
    display: block;
    color: var(--sfc-navy);
    font-size: 14px;
    font-weight: 700;
}

.sfc-toc-copy small {
    color: var(--sfc-muted);
    font-size: 12px;
}

.sfc-toc-count {
    flex: 0 0 auto;
    color: var(--sfc-muted);
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
    .sfc-home-top {
        grid-template-columns: 1fr;
    }

    .sfc-home-top .sfc-stage {
        min-height: 300px;
    }

    .sfc-home-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sfc-home-bottom .sfc-rail-card:last-child {
        grid-column: 1 / -1;
    }

    .sfc-rail-card {
        min-height: 170px;
    }

    .sfc-courses {
        grid-template-columns: 1fr;
    }

    .sfc-hero-copy {
        padding: 32px 26px;
    }

    .sfc-path {
        padding-left: 44px;
    }

    .sfc-path::before {
        left: 16px;
    }

    .sfc-medallion {
        left: -44px;
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .sfc-bottombar {
        gap: 12px;
        padding: 10px 12px;
    }

    .sfc-bottombar-last {
        display: none;
    }
}

@media (max-width: 620px) {
    .sfc-page {
        padding-top: 92px;
    }

    .sfc-page #header-bar {
        width: calc(100% - 28px);
    }

    .sfc-wrap {
        width: calc(100% - 28px);
    }

    .sfc-home-bottom {
        grid-template-columns: 1fr;
    }

    .sfc-home-bottom .sfc-rail-card:last-child {
        grid-column: auto;
    }

    .sfc-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .sfc-resume {
        width: 100%;
    }

    .sfc-stagehead-side .sfc-stagecount {
        display: none;
    }

    .sfc-hero-actions .sfc-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-stage-img,
    .sfc-rail-card,
    a.sfc-course-card,
    .sfc-lesson,
    .sfc-panel,
    .sfc-scrim,
    .sfc-btn,
    .sfc-stagehead-caret,
    .sfc-course-card-cta i {
        transition: none;
    }

    .sfc-stage:hover .sfc-stage-img {
        transform: none;
    }

    /* keep the hover video, drop the crossfade — it swaps instantly instead */
    .sfc-stage-video,
    .sfc-rail-video {
        transition: none;
    }
}

/* ---------------------------------------------------------------- battle chooser */
.sfc-battles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sfc-battles .sfc-course-card-media {
    aspect-ratio: 16 / 9;
}

.sfc-battles .sfc-course-card-body h3 {
    font-size: 23px;
}

.sfc-battle-icon i {
    font-size: 19px;
    color: var(--sfc-blue);
}

/* 校際比賽 hero — only for students on a roster. A fixed navy brand panel: it
   reads the same in every theme, so it needs no dark override. The whole
   panel is the link; the gold 進入比賽 is its label. */
.sfc-comp-hero {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 16px;
    background: #123d50;
    box-shadow: 0 18px 40px rgba(18, 61, 80, 0.22);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sfc-comp-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(18, 61, 80, 0.28);
}

.sfc-comp-hero-art {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.sfc-comp-hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
    padding: 32px 40px;
}

.sfc-comp-hero-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fbecc9;
    color: #7a4f0a;
    font-size: 14px;
    font-weight: 800;
}

/* The round open now (熱身, 初賽…), so the event dates beside it are not
   read as this round's. */
.sfc-comp-hero-phase {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border: 1px solid rgba(143, 227, 215, 0.4);
    border-radius: 999px;
    background: rgba(40, 159, 145, 0.22);
    color: #9be6dc;
    font-size: 14px;
    font-weight: 800;
}

.sfc-comp-hero-phase::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #4fd1bf;
}

.sfc-comp-hero-body h2 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.25;
}

.sfc-comp-hero-dates {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a9c6d3;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.sfc-comp-hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.sfc-comp-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e2f3f0;
    color: #155f56;
    font-size: 15px;
    font-weight: 800;
}

.sfc-comp-hero-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #289f91;
}

.sfc-comp-hero-status.is-blocked {
    background: #eef2f4;
    color: #4f6873;
}

.sfc-comp-hero-status.is-blocked::before {
    background: #8aa0aa;
}

/* Gold on the navy hero. Its hover is pinned in flow-themes.css too, or the
   themed .sfc-btn hover would turn it the theme accent. */
.sfc-btn--gold {
    margin-left: auto;
    background: #f2b94f;
    box-shadow: 0 4px 0 #c28a2a;
    color: #123d50;
    font-weight: 900;
}

.sfc-btn--gold:hover,
.sfc-comp-hero:hover .sfc-btn--gold {
    background: #f5c76c;
}

/* 幽靈對戰 and 線上對戰 — two tiles; the count and the button share a row. */
.sfc-battle-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.sfc-battle-foot .sfc-btn {
    margin-left: auto;
}

a.sfc-course-card:hover .sfc-battle-foot .sfc-btn {
    background: #2186b1;
}

/* The lobby's own count, so the tile says whether there is anything to race. */
.sfc-battle-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #e2f3f0;
    color: #155f56;
    font-size: 14px;
    font-weight: 800;
}

.sfc-battle-count--empty {
    background: #eef2f4;
    color: #4f6873;
    font-weight: 600;
}

/* 線上對戰 while unavailable: greyed art with a corner ribbon. */
.sfc-course-card--disabled {
    box-shadow: 0 10px 26px rgba(27, 78, 96, 0.06);
}

.sfc-ribbon {
    position: absolute;
    top: 26px;
    right: -46px;
    width: 190px;
    padding: 8px 0;
    transform: rotate(45deg);
    background: #123d50;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
}

.sfc-battles .sfc-course-card-media {
    overflow: hidden;
}

@media (max-width: 980px) {
    .sfc-battles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .sfc-comp-hero {
        grid-template-columns: 1fr;
    }

    .sfc-comp-hero-art {
        height: 170px;
        min-height: 0;
    }

    .sfc-comp-hero-body {
        padding: 22px 22px 24px;
    }

    .sfc-comp-hero-body h2 {
        font-size: 24px;
    }

    .sfc-btn--gold,
    .sfc-battle-foot .sfc-btn {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-comp-hero {
        transition: none;
    }

    .sfc-comp-hero:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------- 比賽評核 (direction B) */

/* The 打字挑戰 hero, as information rather than a link: a narrower banner and
   the student's progress where the button was. */
.sfc-comp-hero--info {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

.sfc-comp-hero--info:hover {
    transform: none;
    box-shadow: 0 18px 40px rgba(18, 61, 80, 0.22);
}

.sfc-comp-hero--info .sfc-comp-hero-art {
    min-height: 200px;
}

.sfc-comp-hero--info .sfc-comp-hero-body {
    gap: 10px;
    padding: 24px 40px;
}

.sfc-comp-hero--info .sfc-comp-hero-body h2 {
    font-size: 26px;
}

.sfc-comp-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.sfc-comp-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.sfc-comp-progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #a9c6d3;
    font-size: 14px;
    font-weight: 700;
}

.sfc-comp-progress-row strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.sfc-comp-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.sfc-comp-progress-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #f2b94f;
}

.sfc-comp-round {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.sfc-comp-round-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.sfc-comp-round-head h2 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 22px;
    font-weight: 900;
}

.sfc-comp-round-head span {
    color: var(--sfc-muted);
    font-size: 14px;
}

.sfc-comp-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sfc-comp-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    border: 1px solid var(--sfc-line);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.10);
}

.sfc-comp-card.is-locked {
    background: #f4f7f9;
    box-shadow: none;
}

.sfc-comp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sfc-comp-card-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--sfc-line);
    border-radius: 999px;
    color: var(--sfc-blue);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sfc-comp-card-rank:hover {
    border-color: var(--sfc-blue);
    background: #eef4f7;
}

.sfc-comp-card h3 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 21px;
    font-weight: 900;
}

.sfc-comp-card.is-locked h3 {
    color: var(--sfc-muted);
}

.sfc-comp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.sfc-comp-badge--ready {
    background: #fbe6e8;
    color: #8f3a43;
}

.sfc-comp-badge--done {
    background: #e2f3f0;
    color: #155f56;
}

.sfc-comp-badge--locked {
    background: #e3e9ec;
    color: #4f6873;
}

.sfc-comp-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sfc-comp-rule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4f7;
    color: #35535f;
    font-size: 13px;
    font-weight: 700;
}

.sfc-comp-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--sfc-line);
}

.sfc-comp-card-note {
    align-self: center;
    color: var(--sfc-muted);
    font-size: 14px;
}

.sfc-comp-score {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sfc-comp-score small {
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 700;
}

.sfc-comp-score strong {
    color: #155f56;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sfc-comp-score span {
    color: var(--sfc-muted);
    font-size: 13px;
}

/* 再挑戰: an outline, so a finished card does not shout like one still to do. */
.sfc-btn--again {
    height: 44px;
}

@media (max-width: 760px) {
    /* The --info column rule above comes later than the 打字挑戰 phone rule at
       the same specificity, so it has to be stacked again here. */
    .sfc-comp-hero--info {
        grid-template-columns: 1fr;
    }

    .sfc-comp-hero--info .sfc-comp-hero-art {
        height: 150px;
        min-height: 0;
    }

    .sfc-comp-hero--info .sfc-comp-hero-body {
        padding: 20px 20px 22px;
    }

    .sfc-comp-hero--info .sfc-comp-hero-body h2 {
        font-size: 22px;
    }

    .sfc-comp-cards {
        grid-template-columns: 1fr;
    }

    .sfc-comp-card-foot .sfc-btn--assess {
        width: 100%;
    }
}

/* ================================================================ PAGE: 比賽評核詳情 (before each attempt) */
.sfc-cd {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 48px;
}

.sfc-cd > .sfc-lb-crumb {
    margin-top: 6px;
}

/* navy start area */
.sfc-cd-hero {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #123d50;
    box-shadow: 0 18px 40px rgba(18, 61, 80, 0.22);
}

.sfc-cd-hero-art {
    position: relative;
    height: 110px;
}

.sfc-cd-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    /* A texture behind the title, not a picture: at this height the artwork
       crops to a few giant letters. */
    opacity: 0.4;
    filter: saturate(0.8);
}

.sfc-cd-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 61, 80, 0) 0%, #123d50 100%);
}

.sfc-cd-hero-body {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 0 34px 30px;
}

.sfc-cd-hero-copy {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    min-width: 0;
}

.sfc-cd-event {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #f6d38a;
    font-size: 12px;
    font-weight: 800;
}

.sfc-cd-hero h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.2;
}

.sfc-cd-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sfc-cd-rules span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #d8e7ee;
    font-size: 13px;
    font-weight: 700;
}

.sfc-cd-start {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.sfc-cd-start > span {
    color: #a9c6d3;
    font-size: 13px;
    text-align: right;
}

.sfc-cd-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 30px;
    border-radius: 14px;
    background: var(--sfc-rose);
    box-shadow: 0 5px 0 var(--sfc-rose-dark);
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sfc-cd-start-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

.sfc-cd-start-btn:active {
    box-shadow: 0 2px 0 var(--sfc-rose-dark);
    transform: translateY(3px);
}

.sfc-cd-start-btn.is-disabled {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    color: #c2d8e1;
    font-size: 16px;
    cursor: not-allowed;
    transform: none;
}

/* best and rank */
.sfc-cd-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sfc-cd-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(18, 61, 80, 0.07);
    min-width: 0;
}

.sfc-cd-stat > span {
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 800;
}

.sfc-cd-stat strong {
    color: var(--sfc-navy);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sfc-cd-stat small {
    color: var(--sfc-muted);
    font-size: 13px;
}

.sfc-cd-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--sfc-blue);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.sfc-cd-link .fa-chevron-right {
    font-size: 11px;
}

/* sections */
.sfc-cd-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sfc-cd-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}

.sfc-cd-section-head h2 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 18px;
    font-weight: 900;
}

.sfc-cd-section-head span {
    color: var(--sfc-muted);
    font-size: 13px;
}

.sfc-cd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    border: 1px dashed var(--sfc-line);
    border-radius: 14px;
    background: #f7fbfc;
    text-align: center;
}

.sfc-cd-empty strong {
    color: var(--sfc-navy);
    font-size: 16px;
}

.sfc-cd-empty span {
    color: var(--sfc-muted);
    font-size: 13px;
}

.sfc-cd-runs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sfc-cd-run {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 110px 90px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(18, 61, 80, 0.06);
    color: #35535f;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

a.sfc-cd-run {
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.sfc-cd-run:hover {
    box-shadow: inset 0 0 0 2px var(--sfc-blue), 0 4px 14px rgba(18, 61, 80, 0.06);
    color: #35535f;
}

a.sfc-cd-run.is-best:hover {
    box-shadow: inset 0 0 0 2px var(--sfc-blue);
}

.sfc-cd-run > span:last-child {
    text-align: right;
}

.sfc-cd-run--head {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 800;
}

.sfc-cd-run.is-best {
    background: #fffaf0;
    box-shadow: inset 0 0 0 2px #f1d59b;
}

.sfc-cd-run-when {
    color: var(--sfc-muted);
}

.sfc-cd-run-score {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sfc-navy);
    font-size: 18px;
    font-weight: 900;
}

.sfc-cd-run-score em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fbecc9;
    color: #7a4f0a;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

/* 怎樣計分: two scales */
.sfc-cd-scoring {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(18, 61, 80, 0.07);
}

.sfc-cd-base {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sfc-cd-pill {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.sfc-cd-pill--plus {
    background: #e2f3f0;
    color: #155f56;
}

.sfc-cd-pill--minus {
    background: #fbe6e8;
    color: #8f3a43;
}

.sfc-cd-scales {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
}

.sfc-cd-scale {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sfc-cd-scale-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.sfc-cd-scale-head strong {
    color: var(--sfc-navy);
    font-size: 14px;
    font-weight: 800;
}

.sfc-cd-scale-head span {
    color: #9a7434;
    font-size: 12px;
    font-weight: 800;
}

/* Ticks carry the bonus above and the level below; markers sit on the rail. */
.sfc-cd-track {
    position: relative;
    height: 62px;
    margin: 0 18px;
}

.sfc-cd-rail {
    position: absolute;
    top: 27px;
    right: 0;
    left: 0;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f1e2c2, #d99b33);
}

.sfc-cd-tick {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translateX(-50%);
}

.sfc-cd-tick b {
    color: #9a7434;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sfc-cd-short {
    display: none;
}

.sfc-cd-tick i {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #d99b33;
}

.sfc-cd-tick small {
    color: var(--sfc-muted);
    font-size: 11px;
    white-space: nowrap;
}

.sfc-cd-mark {
    position: absolute;
    top: 23px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    transform: translateX(-50%);
}

.sfc-cd-mark--best {
    z-index: 2;
    background: var(--sfc-blue);
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--sfc-blue);
}

.sfc-cd-mark--latest {
    z-index: 1;
    border: 3px solid rgba(22, 118, 163, 0.55);
    background: #ffffff;
}

/* Past the top tier the bonus is full: the rail runs on, flat and gold. */
.sfc-cd-maxzone {
    position: absolute;
    top: 25px;
    right: 0;
    height: 12px;
    border-radius: 0 999px 999px 0;
    background: repeating-linear-gradient(135deg, #d99b33 0 6px, #e8b457 6px 12px);
}

.sfc-cd-maxzone span {
    position: absolute;
    right: 4px;
    bottom: 16px;
    color: #9a7434;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

/* Labels under the dots: the record (最準 / 最快) first, 上次 on a second row. */
.sfc-cd-track--rows-1 {
    height: 90px;
}

.sfc-cd-track--rows-2 {
    height: 118px;
}

.sfc-cd-pin {
    position: absolute;
    top: 64px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}

.sfc-cd-pin::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: inherit;
    transform: translateX(-50%);
}

.sfc-cd-pin.is-start {
    transform: translateX(-14px);
}

.sfc-cd-pin.is-start::before {
    left: 14px;
}

.sfc-cd-pin.is-end {
    transform: translateX(calc(-100% + 14px));
}

.sfc-cd-pin.is-end::before {
    left: calc(100% - 14px);
}

.sfc-cd-pin em {
    font-size: 11px;
    font-style: normal;
    opacity: 0.85;
}

.sfc-cd-pin--best {
    border-color: var(--sfc-blue);
    background: var(--sfc-blue);
    color: #ffffff;
}

.sfc-cd-pin--best::before {
    border-bottom-color: var(--sfc-blue);
}

.sfc-cd-pin--latest {
    top: 92px;
    border: 1.5px solid rgba(22, 118, 163, 0.55);
    background: #ffffff;
    color: #35535f;
}

.sfc-cd-pin--latest::before {
    top: -6px;
    border-bottom-color: rgba(22, 118, 163, 0.55);
}

.sfc-cd-pin--latest em {
    color: #9a7434;
    opacity: 1;
}

@media (max-width: 760px) {
    .sfc-cd-hero-art {
        height: 90px;
    }

    .sfc-cd-hero-body {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 4px 20px 22px;
    }

    .sfc-cd-start {
        align-items: stretch;
    }

    .sfc-cd-start > span {
        text-align: center;
    }

    .sfc-cd-stats,
    .sfc-cd-scales {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfc-cd-scales {
        gap: 22px;
    }

    .sfc-cd-full {
        display: none;
    }

    .sfc-cd-short {
        display: inline;
    }

    .sfc-cd-run {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
    }

    .sfc-cd-run--head {
        display: none;
    }

    .sfc-cd-run-when {
        grid-row: 1;
        grid-column: 1;
    }

    .sfc-cd-run-score {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .sfc-cd-run > span:nth-child(3),
    .sfc-cd-run > span:nth-child(4) {
        grid-column: 1;
        font-size: 13px;
        text-align: left;
    }

    .sfc-cd-run > span:nth-child(3) {
        grid-row: 2;
    }

    .sfc-cd-run > span:nth-child(4) {
        display: none;
    }
}

/* ================================================================ PAGE: 評核排行榜 (competition) */
.sfc-lb {
    padding-bottom: 48px;
}

.sfc-lb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 28px;
    margin: 6px 0 24px;
}

.sfc-lb-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sfc-lb-crumb {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    color: var(--sfc-muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sfc-lb-crumb:hover {
    color: var(--sfc-blue);
}

.sfc-lb-title h1 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 900;
    line-height: 1.2;
}

.sfc-lb-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #dfeaef;
}

.sfc-lb-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 40px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--sfc-muted);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.sfc-lb-tab:hover {
    color: var(--sfc-navy);
}

.sfc-lb-tab.is-active {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(18, 61, 80, 0.12);
    color: var(--sfc-navy);
}

.sfc-lb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}

.sfc-lb-main {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.sfc-lb-rail {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 20px;
}

/* champion band */
.sfc-lb-champ {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 230px;
    border-radius: 20px;
    overflow: hidden;
    background: #fbf1dc;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.10);
}

.sfc-lb-champ-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.sfc-lb-champ-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(251, 241, 220, 0.95) 0%, rgba(251, 241, 220, 0.8) 45%, rgba(251, 241, 220, 0) 70%);
}

.sfc-lb-champ-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 36px;
}

.sfc-lb-champ-avatar {
    position: relative;
    flex-shrink: 0;
}

.sfc-lb-champ-avatar img {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 999px;
    object-fit: cover;
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #f2c14e;
}

.sfc-lb-champ-avatar i {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--sfc-gold);
    font-size: 30px;
}

.sfc-lb-champ-school {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #f2c14e;
    color: var(--sfc-gold-dark);
    font-size: 40px;
}

.sfc-lb-champ-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sfc-lb-champ-copy small {
    color: #9a6a12;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sfc-lb-champ-copy strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #123d50;
    font-size: 28px;
    font-weight: 900;
}

.sfc-lb-champ-copy em {
    color: #7d6437;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.sfc-lb-champ-copy b {
    color: #7a4f0a;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-champ-copy > span {
    color: #7d6437;
    font-size: 13px;
}

/* #2 and #3 */
.sfc-lb-runners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sfc-lb-runner {
    --medal: #9fb2bd;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 4px solid var(--medal);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(27, 78, 96, 0.08);
    min-width: 0;
}

.sfc-lb-runner--3 {
    --medal: #c98a5a;
}

.sfc-lb-runner.is-me {
    box-shadow: inset 0 0 0 2px var(--sfc-blue), 0 8px 22px rgba(27, 78, 96, 0.08);
}

.sfc-lb-medal {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--medal);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
}

.sfc-lb-runner > img {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4f7;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--medal);
}

.sfc-lb-runner b {
    color: var(--sfc-navy);
    font-size: 19px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* list */
.sfc-lb-subhead {
    margin: 8px 0 0;
    color: var(--sfc-navy);
    font-size: 18px;
    font-weight: 900;
}

.sfc-lb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sfc-lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(27, 78, 96, 0.06);
}

.sfc-lb-row.is-me {
    background: #eaf4fa;
    box-shadow: inset 0 0 0 2px var(--sfc-blue);
}

.sfc-lb-rank {
    flex-shrink: 0;
    width: 40px;
    color: var(--sfc-navy);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-row.is-me .sfc-lb-rank {
    color: var(--sfc-blue);
}

.sfc-lb-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4f7;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d7e6ec;
}

.sfc-lb-who {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sfc-lb-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--sfc-navy);
    font-size: 16px;
    font-weight: 800;
}

.sfc-lb-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-lb-sub {
    overflow: hidden;
    color: var(--sfc-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-lb-score {
    flex-shrink: 0;
    color: var(--sfc-navy);
    font-size: 19px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
}

.sfc-lb-tag--me {
    background: var(--sfc-blue);
    color: #ffffff;
}

.sfc-lb-tag--own {
    background: #e2f3f0;
    color: #155f56;
}

.sfc-lb-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--sfc-muted);
    font-size: 13px;
    line-height: 1.6;
}

.sfc-lb-note i {
    margin-top: 4px;
}

/* rail: 我的排名, one navy block with the ladder, as in the 「我的位置」 design */
.sfc-lb-me {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border-radius: 20px;
    background: #123d50;
    box-shadow: 0 18px 40px rgba(18, 61, 80, 0.22);
    color: #ffffff;
}

.sfc-lb-kick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a9c6d3;
    font-size: 13px;
    font-weight: 800;
}

.sfc-lb-me-rank {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.sfc-lb-me-rank strong {
    color: #ffffff;
    font-size: 52px;
    font-weight: 900;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-me-rank span {
    padding-bottom: 4px;
    color: #a9c6d3;
    font-size: 16px;
    font-weight: 700;
}

.sfc-lb-stand {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #d8e7ee;
    font-size: 13px;
    font-weight: 800;
}

.sfc-lb-stand.is-top {
    background: rgba(40, 159, 145, 0.30);
    color: #9be6dc;
}

.sfc-lb-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sfc-lb-stats dt {
    color: #a9c6d3;
    font-size: 12px;
    font-weight: 500;
}

.sfc-lb-stats dd {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-next {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(242, 185, 79, 0.14);
    color: #f6d38a;
    font-size: 14px;
    font-weight: 700;
}

.sfc-lb-next strong {
    font-weight: 900;
}

/* On the navy card the rows around the student are faint and the
   student's own row is the bright one. */
.sfc-lb-ladder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sfc-lb-ladder-title {
    color: #a9c6d3;
    font-size: 12px;
    font-weight: 800;
}

.sfc-lb-ladder ol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sfc-lb-ladder li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-size: 14px;
}

.sfc-lb-ladder li.is-me {
    background: #ffffff;
    color: #123d50;
}

.sfc-lb-ladder .sfc-lb-delta {
    color: #a9c6d3;
}

.sfc-lb-ladder-rank {
    width: 30px;
    font-weight: 900;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-ladder img {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    object-fit: cover;
    background: #eef4f7;
}

.sfc-lb-ladder-name {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-lb-ladder-score {
    width: 70px;
    font-weight: 900;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-delta {
    color: var(--sfc-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sfc-lb-me-empty {
    margin: 0;
    color: #d8e7ee;
    font-size: 14px;
    line-height: 1.6;
}

/* phone: the rail moves above the list; a bar keeps 「第 N 名」 in view */
.sfc-lb-dock {
    display: none;
}

@media (max-width: 960px) {
    .sfc-lb-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sfc-lb-rail {
        position: static;
        grid-row: 1;
        grid-column: 1;
    }

    .sfc-lb-main {
        grid-row: 2;
    }
}

@media (max-width: 760px) {
    .sfc-lb-tabs {
        display: flex;
        width: 100%;
    }

    .sfc-lb-tab {
        flex: 1 1 0;
    }

    .sfc-lb-champ {
        min-height: 170px;
    }

    .sfc-lb-champ-art {
        object-position: 70% center;
    }

    .sfc-lb-champ-scrim {
        background: linear-gradient(90deg, rgba(251, 241, 220, 0.96) 0%, rgba(251, 241, 220, 0.86) 60%, rgba(251, 241, 220, 0.2) 100%);
    }

    .sfc-lb-champ-inner {
        gap: 16px;
        padding: 26px 18px 18px;
    }

    .sfc-lb-champ-avatar img,
    .sfc-lb-champ-school {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .sfc-lb-champ-avatar i {
        top: -22px;
        font-size: 24px;
    }

    .sfc-lb-champ-copy strong {
        font-size: 22px;
    }

    .sfc-lb-champ-copy b {
        font-size: 30px;
    }

    .sfc-lb-runners {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sfc-lb-runner {
        padding: 14px;
    }

    .sfc-lb-row {
        gap: 10px;
        padding: 10px 12px;
    }

    .sfc-lb-rank {
        width: 28px;
        font-size: 16px;
    }

    .sfc-lb-avatar {
        width: 38px;
        height: 38px;
    }

    .sfc-lb-name {
        font-size: 15px;
    }

    .sfc-lb-score {
        font-size: 17px;
    }

    .sfc-lb-page.has-dock {
        padding-bottom: 76px;
    }

    .sfc-lb-dock {
        position: fixed;
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        border-radius: 16px;
        background: #123d50;
        box-shadow: 0 14px 34px rgba(18, 61, 80, 0.35);
        color: #ffffff;
    }

    .sfc-lb-dock span {
        color: #a9c6d3;
        font-size: 12px;
        font-weight: 800;
    }

    .sfc-lb-dock strong {
        flex-grow: 1;
        font-size: 20px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
    }

    .sfc-lb-dock b {
        font-size: 16px;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
    }
}

/* ================================================================ PAGE: 校內練習 (school assignments) */

/* keep the hidden attribute authoritative over display:flex components */
.sfc-page [hidden] {
    display: none !important;
}

/* view toggle: segmented control in the page head */
.sfc-viewtoggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 85, 105, 0.08);
}

.sfc-viewtoggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sfc-muted);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sfc-viewtoggle button:hover {
    color: var(--sfc-blue-dark);
    background: var(--sfc-soft);
}

.sfc-viewtoggle button.is-active {
    background: var(--sfc-blue);
    color: #ffffff;
}

.sfc-viewtoggle button i {
    font-size: 13px;
}

/* status notices + empty state */
.sfc-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(31, 85, 105, 0.06);
    color: var(--sfc-muted);
    font-size: 14.5px;
    font-weight: 600;
}

.sfc-notice i {
    color: var(--sfc-blue);
    font-size: 16px;
}

.sfc-notice--warn {
    border-color: #ecd3a2;
    background: #fdf6e8;
    color: var(--sfc-gold-dark);
}

.sfc-notice--warn i {
    color: var(--sfc-gold-dark);
}

.sfc-notice--error {
    border-color: #e4b6b6;
    background: #fdf0f0;
    color: #a04545;
}

.sfc-notice--error i {
    color: #a04545;
}

.sfc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 56px 24px;
    border: 1px dashed #c7dbe1;
    border-radius: 8px;
    background: #ffffff;
    text-align: center;
}

.sfc-empty-icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 1px solid var(--sfc-line);
    border-radius: 50%;
    background: var(--sfc-soft);
    color: var(--sfc-blue);
    font-size: 22px;
}

.sfc-empty strong {
    color: var(--sfc-navy);
    font-size: 17px;
    font-weight: 800;
}

.sfc-empty p {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 13.5px;
}

/* assignment chips: mode + deadline */
.sfc-chip--practice {
    background: #dcf1ed;
    border: 1px solid #a8d7cf;
    color: var(--sfc-teal-dark);
}

/* 評核 used to share #fdf3dd with .sfc-chip--due, so mode and deadline read as
   one gold blob. Rose keeps it warm/serious but unmistakably not a deadline;
   amber is now reserved strictly for urgency. */
.sfc-chip--assess {
    background: #fbe9ea;
    border: 1px solid #eec2c5;
    color: var(--sfc-rose-dark);
}

.sfc-chip--date {
    background: #eef2f4;
    border: 1px solid #d8e2e6;
    color: #7f939c;
}

.sfc-chip--due {
    background: #fdf3dd;
    border: 1px solid var(--sfc-gold);
    color: var(--sfc-gold-dark);
}

/* 輸入法 chip: filled navy so it outranks the pastel mode chips. Hierarchy on a
   card is IME (filled) > mode (pastel) > deadline (grey, or amber when urgent). */
.sfc-chip--ime {
    gap: 5px;
    background: var(--sfc-navy);
    border: 1px solid var(--sfc-navy);
    color: #ffffff;
    font-weight: 800;
}

.sfc-chip--ime img {
    width: 13px;
    height: 13px;
    filter: brightness(0) invert(1);
}

/* 限時 / 次機會 — constraints on how the task may be attempted. Outline navy
   pairs with the filled navy 輸入法 chip as "hard facts about this task",
   distinct from the grey/amber deadline (time) and from the buttons (mode). */
.sfc-chip--spec {
    background: #ffffff;
    border: 1px solid var(--sfc-navy);
    color: var(--sfc-navy);
    font-weight: 800;
    white-space: nowrap;
}

.sfc-chip--spec i {
    opacity: 0.7;
    font-size: 11px;
}

/* ---------------------------------------------------- 校內練習 輸入法 filter */
/* The page head's right side: 輸入法 dropdown, then 卡片 / 列表. */
.sfc-asg-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sfc-asg-imefilter {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.sfc-asg-imefilter[hidden] {
    display: none;
}

.sfc-asg-imefilter > i {
    position: absolute;
    left: 14px;
    color: var(--sfc-muted);
    font-size: 14px;
    pointer-events: none;
}

.sfc-asg-imefilter select {
    height: 48px;
    padding: 0 36px 0 38px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: var(--sfc-panel, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2397a6b4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    box-shadow: 0 8px 20px rgba(31, 85, 105, 0.08);
    color: var(--sfc-navy);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
}

.sfc-asg-imefilter select:focus-visible {
    outline: 2px solid var(--sfc-blue);
    outline-offset: 2px;
}

/* Phone: the two dropdowns share the first row; 卡片 / 列表 sits below on the right. */
@media (max-width: 600px) {
    .sfc-asg-tools {
        width: 100%;
    }

    .sfc-asg-imefilter {
        flex: 1 1 140px;
        min-width: 0;
    }

    .sfc-asg-imefilter select {
        width: 100%;
        min-width: 0;
        padding-right: 30px;
        text-overflow: ellipsis;
    }

    .sfc-asg-tools .sfc-viewtoggle {
        flex: none;
        margin-left: auto;
    }

    .sfc-asg-tools .sfc-viewtoggle button {
        padding: 0 10px;
        white-space: nowrap;
    }
}

/* smaller ime icon + button variants shared by both views */
.sfc-ime-icon--sm {
    width: 38px;
    height: 38px;
}

.sfc-ime-icon--sm img {
    width: 24px;
    height: 24px;
}

.sfc-btn--sm {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
}

/* grid view */
.sfc-asg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
}

.sfc-asg-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(27, 78, 96, 0.10);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sfc-asg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(27, 78, 96, 0.16);
}

.sfc-asg-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    padding: 18px 20px 20px;
}

.sfc-asg-chiprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.sfc-asg-chipgroup {
    display: inline-flex;
    gap: 6px;
}

.sfc-asg-title {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 18.5px;
    font-weight: 800;
    line-height: 1.35;
}

.sfc-asg-desc {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 13.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sfc-asg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.sfc-asg-metaitem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sfc-muted);
    font-size: 12.5px;
    font-weight: 600;
    min-width: 0;
}

.sfc-asg-metaitem i {
    color: #9db3bc;
    font-size: 12px;
}

.sfc-asg-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.sfc-asg-card .sfc-asg-actions .sfc-btn {
    flex: 1 1 auto;
}

/* list view */
.sfc-asg-list {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.sfc-asg--list .sfc-asg-grid {
    display: none;
}

.sfc-asg--list .sfc-asg-list {
    display: flex;
}

/* Grid and list each hold their own copy of the group headers, so the whole
   wrapper toggles — hiding only the inner .sfc-asg-grid would leave the grid
   view's headers stacked above the list. */
.sfc-asg-groups--list {
    display: none;
}

.sfc-asg--list .sfc-asg-groups--grid {
    display: none;
}

.sfc-asg--list .sfc-asg-groups--list {
    display: block;
}

.sfc-asg-row {
    /* Fixed columns: icon | title | mode | deadline | actions. Was flex, which
       sized every cell to its content, so a row without a mode chip (練習+評核)
       pushed its deadline chip left and the column zig-zagged down the list. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 248px 118px 206px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--sfc-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(27, 78, 96, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sfc-asg-row:hover {
    border-color: var(--sfc-blue);
    box-shadow: 0 12px 26px rgba(22, 118, 163, 0.10);
}

.sfc-asg-row-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.sfc-asg-row-copy strong {
    display: block;
    color: var(--sfc-navy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.sfc-asg-row-copy small {
    display: block;
    margin-top: 2px;
    color: var(--sfc-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfc-asg-row-mode,
.sfc-asg-row-due {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}

/* an empty mode cell still holds its column open */
.sfc-asg-row-mode:empty {
    display: block;
}

.sfc-asg-row .sfc-asg-actions {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* one button fills the column, two split it — either way the row ends flush */
.sfc-asg-row .sfc-asg-actions .sfc-btn {
    flex: 1 1 0;
    min-width: 0;
}

.sfc-asg-row .sfc-btn--sm {
    height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
}

@media (max-width: 980px) {
    /* not enough width for five columns — icon+title on row 1, chips and
       actions wrap underneath */
    .sfc-asg-row {
        display: flex;
        flex-wrap: wrap;
    }

    .sfc-asg-row-copy {
        flex: 1 1 calc(100% - 52px);
    }

    .sfc-asg-row-mode,
    .sfc-asg-row-due {
        flex: 0 0 auto;
    }

    .sfc-asg-row-mode:empty {
        display: none;
    }

    .sfc-asg-row-mode {
        padding-left: 52px;
    }

    .sfc-asg-row .sfc-asg-actions {
        margin-left: auto;
    }

    .sfc-asg-row .sfc-asg-actions .sfc-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 620px) {
    .sfc-asg-grid {
        grid-template-columns: 1fr;
    }

    .sfc-viewtoggle {
        align-self: flex-start;
    }

    .sfc-asg-row-mode {
        padding-left: 0;
    }

    .sfc-asg-row .sfc-asg-actions {
        width: 100%;
        margin-left: 0;
    }

    .sfc-asg-row .sfc-asg-actions .sfc-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfc-asg-card,
    .sfc-asg-row,
    .sfc-viewtoggle button {
        transition: none;
    }

    .sfc-asg-card:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------- level frames
   Lifetime level (best assessment net WPM ever) earns an avatar ring from Lv 3,
   one ring per two levels across the ten-level ladder.

   The ring is a conic gradient in the element's own padding, not a flat
   box-shadow: the sheen is what makes it read as a frame rather than a
   coloured outline, and it needs no wrapper element or artwork. Avatars are
   content-box here so the picture keeps its size and the ring is added around
   it — with border-box a 28px header avatar would lose 6px of face.

   Copper was #cd8f56 and gold #d99b33 — close enough in hue to be mistaken for
   each other, and the old top tier reused gold outright, so three of four tiers
   looked alike. Copper is now redder, gold brighter, and the top tier violet so
   it cannot be confused with any metal. */
/* Each tier only declares its gradient; the ring itself is applied below.
   The highlight stop stays well clear of white: the avatar art has a white
   circular ground, so a near-white stop made the ring look broken — solid at
   the angles where the gradient was dark, invisible where it peaked. */
.sfc-avframe--copper {
    --av-frame: conic-gradient(#d98a4e, #5e2c0f, #a85a25, #d98a4e, #5e2c0f, #d98a4e);
}

.sfc-avframe--silver {
    --av-frame: conic-gradient(#b9ccd6, #435966, #7e97a5, #b9ccd6, #435966, #b9ccd6);
}

.sfc-avframe--gold {
    --av-frame: conic-gradient(#f0c352, #7d5703, #d19a12, #f0c352, #7d5703, #f0c352);
}

.sfc-avframe--legend {
    --av-frame: conic-gradient(#a78bfa, #33195f, #7040d9, #a78bfa, #33195f, #a78bfa);
}

/* Applied with an attribute+class selector so it outranks the avatars' own
   background. .set-avatar paints a blue-teal gradient and settings.css loads
   after this file, so a plain .sfc-avframe--x rule lost the cascade and left
   the padding widening the element while the teal showed through as the ring.
   background-image, not background, so each avatar keeps its own fallback
   colour underneath the picture. */
.sfc-user-avatar[class*="sfc-avframe--"],
.set-avatar[class*="sfc-avframe--"],
.lbd-avatar[class*="sfc-avframe--"],
.lbd-podium-avatar[class*="sfc-avframe--"],
.lbd-runner-avatar[class*="sfc-avframe--"],
.lbd-champ-avatar[class*="sfc-avframe--"] {
    box-sizing: content-box;
    padding: 3px;
    background-image: var(--av-frame);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

/* Thicker ring where there is room for it. */
.set-avatar[class*="sfc-avframe--"],
.lbd-champ-avatar[class*="sfc-avframe--"],
.lbd-podium-avatar[class*="sfc-avframe--"],
.lbd-runner-avatar[class*="sfc-avframe--"] {
    padding: 4px;
}

/* ==========================================================================
   Badge earn popup (student home)
   Announces badges earned since the student last acknowledged them. The badge
   art is the hero; the sky panel behind it continues the artwork's own blue
   rather than competing with it.
   ========================================================================== */

.sbp-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
    background: var(--sfc-wash);
}

.sbp-scrim[hidden] {
    display: none;
}

.sbp-pop {
    position: relative;
    width: min(380px, 100%);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(8, 48, 64, 0.32);
    overflow: hidden;
    animation: sbp-rise 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes sbp-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

.sbp-hero {
    position: relative;
    padding: 26px 20px 0;
    text-align: center;
    background: linear-gradient(180deg, #bfe4f5 0%, #dcf0f9 60%, #ffffff 100%);
}

.sbp-rays {
    position: absolute;
    left: 50%;
    top: 52px;
    width: 230px;
    height: 230px;
    translate: -50% -50%;
    border-radius: 50%;
    opacity: 0.5;
    /* repeating-: a plain conic-gradient holds its last stop from 30deg to
       360deg, which yields one lone spoke instead of a sunburst. */
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.85) 0 6deg, transparent 6deg 30deg);
    animation: sbp-spin 14s linear infinite;
}

@keyframes sbp-spin {
    to { rotate: 360deg; }
}

.sbp-badge {
    position: relative;
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(8, 48, 64, 0.28));
    animation: sbp-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both 0.1s;
}

@keyframes sbp-pop {
    from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
}

.sbp-eyebrow {
    position: relative;
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--sfc-blue-dark);
}

.sbp-body {
    padding: 6px 24px 22px;
    text-align: center;
}

.sbp-nm {
    margin: 4px 0 2px;
    font-size: 23px;
    font-weight: 900;
    color: var(--sfc-navy);
}

.sbp-rq {
    margin: 0;
    color: var(--sfc-muted);
    font-size: 13.5px;
}

/* Many badges at once stay a filmstrip: one badge is still the subject. */
.sbp-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 2px;
}

.sbp-strip button {
    width: 46px;
    height: 46px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 11px;
    background: var(--sfc-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.sbp-strip button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sbp-strip button[aria-current="true"] {
    border-color: var(--sfc-blue);
    transform: translateY(-2px);
}

.sbp-count {
    margin: 10px 0 0;
    color: var(--sfc-muted);
    font-size: 12.5px;
    font-weight: 700;
}

.sbp-acts {
    display: flex;
    gap: 10px;
    padding: 0 24px 22px;
}

.sbp-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border: 1px solid var(--sfc-line);
    border-radius: 11px;
    background: #ffffff;
    color: var(--sfc-navy);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.sbp-primary {
    background: var(--sfc-blue);
    border-color: var(--sfc-blue);
    color: #ffffff;
}

.sbp-btn:focus-visible,
.sbp-strip button:focus-visible {
    outline: 2px solid var(--sfc-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sbp-pop,
    .sbp-badge {
        animation: none;
    }

    .sbp-rays {
        animation: none;
        opacity: 0.32;
    }
}