/* 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;
}

/* ================================================================ 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--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-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);
}

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

/* ================================================================ 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;
}

/* ---------------------------------------------------- 校內練習 filters + groups */
.sfc-asg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.sfc-asg-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--sfc-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--sfc-muted);
    font: 700 13px/1 inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sfc-asg-filter:hover {
    border-color: var(--sfc-blue);
    color: var(--sfc-blue);
}

.sfc-asg-filter.is-active {
    background: var(--sfc-navy);
    border-color: var(--sfc-navy);
    color: #ffffff;
}

.sfc-asg-filter img {
    width: 14px;
    height: 14px;
}

.sfc-asg-filter.is-active img {
    filter: brightness(0) invert(1);
}

.sfc-asg-filter-count {
    opacity: 0.65;
    font-weight: 600;
}

.sfc-asg-group + .sfc-asg-group {
    margin-top: 30px;
}

.sfc-asg-grouphead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--sfc-line);
}

.sfc-asg-grouphead h2 {
    margin: 0;
    color: var(--sfc-navy);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.sfc-asg-grouphead .sfc-asg-groupcount {
    margin-left: auto;
    color: var(--sfc-muted);
    font-size: 13px;
    font-weight: 600;
}

/* 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;
    }
}