:root {
    --ink: #101828;
    --muted: #667085;
    --line: #d7deea;
    --surface: #ffffff;
    --bg-a: #f7fafc;
    --bg-b: #ecf2ff;
    --brand-a: #0d9488;
    --brand-b: #0ea5e9;
    --brand-c: #f59e0b;
    --warn: #f59e0b;
    --danger: #e11d48;
    --radius-xl: 18px;
    --radius-lg: 14px;
    --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.09);
    --shadow-strong: 0 16px 42px rgba(13, 148, 136, 0.22);
    --mobile-shell-max-width: 430px;
    --mobile-shell-gutter: 14px;
    --mobile-shell-section-gap: 16px;
    --mobile-shell-bottom-space: calc(112px + env(safe-area-inset-bottom));
    --mobile-card-radius: 22px;
    --mobile-card-padding: 16px;
    --font-family-base: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial, sans-serif;
    --font-family-display: var(--font-family-base);
}

/* 跨学科共创：参考移动端活动页的轻量双卡节奏，所有字号均以 375px 可读性为基线。 */
.co-creation-entry {
    display: grid;
    gap: 12px;
    margin: 14px 0 18px;
    padding: 14px;
    border: 1px solid rgba(211, 226, 247, 0.96);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(50, 94, 148, 0.08);
}

.co-creation-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.co-creation-entry-head > div > span {
    display: block;
    color: #6f5ae5;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.co-creation-entry-head h3 {
    margin: 3px 0 0;
    color: #182a4c;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
}

.co-creation-entry-head > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 13px;
    background: #f1edff;
    color: #7651ef;
    font-size: 20px;
}

.co-creation-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.co-creation-entry-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.co-creation-entry-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 4px;
    min-height: 142px;
    padding: 12px;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
}

.co-creation-entry-card.topic {
    background: linear-gradient(145deg, #8c67ef 0%, #7252df 100%);
}

.co-creation-entry-card.honor {
    background: linear-gradient(145deg, #5dc7da 0%, #318fc1 100%);
}

.co-creation-entry-card > i {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 18px;
}

.co-creation-entry-card strong {
    align-self: end;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.co-creation-entry-card span {
    min-height: 34px;
    grid-column: 1 / -1;
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.42;
}

.co-creation-entry-card em {
    grid-column: 1 / -1;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.co-creation-entry-card em i { font-size: 13px; }

.co-creation-page-body {
    min-height: 100vh;
    margin: 0;
    background: #f3f8ff;
    color: #17294a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.co-creation-page,
.co-creation-page * { box-sizing: border-box; }

.co-creation-page {
    width: min(100%, 480px);
    min-height: 100vh;
    margin: 0 auto;
    padding: calc(8px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
        radial-gradient(circle at 88% 5%, rgba(120, 195, 255, 0.18), transparent 22%),
        linear-gradient(180deg, #fafdff 0%, #f4f8ff 50%, #f7fbff 100%);
}

.co-creation-page-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 56px;
    margin: 0 -2px 12px;
}

.co-creation-page-header h1 {
    margin: 0;
    overflow: hidden;
    color: #132545;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-creation-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #17305a;
    text-decoration: none;
}

.co-creation-back:active { background: rgba(215, 228, 248, 0.7); }
.co-creation-back i { font-size: 23px; }

.co-creation-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 138px;
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    box-shadow: 0 16px 28px rgba(93, 74, 193, 0.22);
}

.co-creation-hero::after {
    position: absolute;
    right: -28px;
    bottom: -64px;
    width: 160px;
    height: 160px;
    border: 22px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    content: "";
}

.co-creation-hero-topic { background: linear-gradient(135deg, #8e66f5 0%, #7556df 52%, #5f72e1 100%); }
.co-creation-hero-honor { background: linear-gradient(135deg, #8563ee 0%, #704ce0 56%, #9664ed 100%); }

.co-creation-hero > div { position: relative; z-index: 1; max-width: calc(100% - 74px); }
.co-creation-hero-kicker { margin: 0 0 6px; color: rgba(255,255,255,.84); font-size: 13px; font-weight: 700; }
.co-creation-hero h2 { margin: 0; color: #fff; font-size: 21px; font-weight: 800; line-height: 1.3; }
.co-creation-hero p:not(.co-creation-hero-kicker) { margin: 8px 0 0; color: rgba(255,255,255,.88); font-size: 13px; font-weight: 600; line-height: 1.45; }
.co-creation-hero > i { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255,255,255,.18); color: #fff; font-size: 30px; transform: rotate(-8deg); }
.co-creation-hero-honor > i { color: #ffda58; background: rgba(255,255,255,.16); transform: none; }

.co-creation-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 2px 12px; }
.co-creation-filter-row h2 { margin: 0; color: #1a2d50; font-size: 18px; font-weight: 800; }
.co-creation-sort { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; background: #edf3fb; }
.co-creation-sort button,
.co-creation-honor-tabs button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: #7183a1; font-size: 12px; font-weight: 800; }
.co-creation-sort button.is-active { background: #fff; color: #6846d8; box-shadow: 0 3px 8px rgba(78, 95, 135, 0.1); }
.co-creation-vote-tip { margin: 0 2px 12px; color: #7183a1; font-size: 12px; font-weight: 600; line-height: 1.45; }

.co-creation-proposal-list { display: grid; gap: 12px; }
.co-creation-proposal-card { position: relative; min-height: 144px; padding: 16px; border: 1px solid #d9e6f7; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 9px 20px rgba(55, 94, 143, .06); }
.co-creation-proposal-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; }
.co-creation-anonymous-mark,
.co-creation-own-mark { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.co-creation-anonymous-mark { background: #eef4ff; color: #5a6f9f; }
.co-creation-own-mark { background: #f2edff; color: #7353e5; }
.co-creation-proposal-meta time { color: #90a0ba; font-size: 12px; font-weight: 600; white-space: nowrap; }
.co-creation-proposal-card h3 { margin: 12px 0 6px; color: #1b2e50; font-size: 17px; font-weight: 800; line-height: 1.35; }
.co-creation-proposal-card p { display: -webkit-box; margin: 0 0 42px; overflow: hidden; color: #647693; font-size: 14px; font-weight: 600; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.co-creation-support-btn { position: absolute; right: 14px; bottom: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 74px; min-height: 36px; padding: 0 10px; border: 1px solid #d8e3f5; border-radius: 999px; background: #fff; color: #7958e8; font-size: 13px; font-weight: 800; }
.co-creation-support-btn.is-supported { border-color: #bfaeff; background: #f5f1ff; color: #6942de; }
.co-creation-support-btn:disabled { opacity: .55; }
.co-creation-support-btn i { font-size: 16px; }
.co-creation-loading,
.co-creation-empty { display: grid; place-items: center; gap: 6px; min-height: 126px; padding: 18px; border: 1px dashed #ccdbee; border-radius: 18px; color: #7a8ba6; text-align: center; font-size: 13px; font-weight: 600; }
.co-creation-empty i { color: #8865ef; font-size: 24px; }
.co-creation-empty strong { color: #526784; font-size: 15px; }
.co-creation-empty span { line-height: 1.45; }

.co-creation-fixed-action { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; gap: 6px; width: min(100%, 480px); margin: 0 auto; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); background: rgba(250,253,255,.94); box-shadow: 0 -8px 24px rgba(47, 73, 118,.08); backdrop-filter: blur(12px); }
.co-creation-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 15px; background: linear-gradient(105deg, #8057ed, #6d53e5); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 10px 18px rgba(112, 76, 220,.24); }
.co-creation-primary-action:active { transform: translateY(1px); }
.co-creation-fixed-action p { margin: 0; color: #8a99b0; font-size: 11px; font-weight: 600; text-align: center; }

.co-creation-sheet[hidden] { display: none; }
.co-creation-sheet { position: fixed; z-index: 30; inset: 0; }
.co-creation-sheet-mask { position: absolute; inset: 0; background: rgba(20, 34, 61, .42); }
.co-creation-sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 14px; width: min(100%, 480px); margin: 0 auto; padding: 18px 16px max(20px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -16px 44px rgba(20, 34, 61, .2); }
.co-creation-sheet-head { display: grid; grid-template-columns: minmax(72px,1fr) auto minmax(72px,1fr); align-items: center; gap: 8px; min-height: 44px; }
.co-creation-sheet-head h2 { margin: 0; color: #1b2e50; font-size: 18px; font-weight: 800; text-align: center; }
.co-creation-sheet-back { justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 12px; background: #f2f6fc; color: #586d8e; font-size: 14px; font-weight: 800; }
.co-creation-sheet-back i { font-size: 20px; }
.co-creation-sheet-head-spacer { justify-self: end; width: 40px; height: 40px; }
.co-creation-sheet-panel label { display: grid; gap: 7px; color: #455b7e; font-size: 13px; font-weight: 800; }
.co-creation-sheet-panel input,
.co-creation-sheet-panel textarea { width: 100%; border: 1px solid #d7e3f4; border-radius: 12px; outline: none; background: #fbfdff; color: #1c3152; font: inherit; font-size: 15px; font-weight: 600; }
.co-creation-sheet-panel input { height: 44px; padding: 0 12px; }
.co-creation-sheet-panel textarea { min-height: 96px; padding: 11px 12px; line-height: 1.5; resize: vertical; }
.co-creation-sheet-panel input:focus,
.co-creation-sheet-panel textarea:focus { border-color: #8d70ee; box-shadow: 0 0 0 3px rgba(131, 94, 235, .13); }
.co-creation-form-message { min-height: 18px; margin: -5px 0 0; color: #d04d58; font-size: 12px; font-weight: 600; }

.co-creation-honor-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 20px 0 14px; padding-bottom: 2px; border-bottom: 1px solid #dae5f4; }
.co-creation-honor-tabs button { position: relative; min-height: 42px; border-radius: 0; font-size: 14px; }
.co-creation-honor-tabs button.is-active { color: #6d48df; }
.co-creation-honor-tabs button.is-active::after { position: absolute; right: 12px; bottom: -3px; left: 12px; height: 3px; border-radius: 99px; background: #7650e8; content: ""; }
.co-creation-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 200px; padding: 18px 12px 14px; border: 1px solid #e7ddc4; border-radius: 20px 20px 14px 14px; background: linear-gradient(180deg, #fffdf6, #fff); box-shadow: 0 10px 24px rgba(119, 98, 51, .08); }
.co-creation-podium .co-creation-empty,
.co-creation-podium .co-creation-loading { grid-column: 1 / -1; width: 100%; }
.co-creation-podium-item { display: grid; justify-items: center; gap: 5px; min-width: 0; color: #556985; text-align: center; }
.co-creation-podium-item.rank-1 { order: 2; color: #334d73; transform: translateY(-10px); }
.co-creation-podium-item.rank-2 { order: 1; }
.co-creation-podium-item.rank-3 { order: 3; }
.co-creation-medal { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #bdc9da; color: #fff; font-size: 14px; font-style: normal; font-weight: 800; }
.rank-1 .co-creation-medal { width: 34px; height: 34px; background: #ffbd2d; font-size: 16px; }
.rank-3 .co-creation-medal { background: #eaa060; }
.co-creation-podium-item img { width: 52px; height: 52px; border: 3px solid #fff; border-radius: 50%; background: #e8f2ff; box-shadow: 0 5px 12px rgba(60,91,133,.14); object-fit: cover; }
.rank-1 img { width: 66px; height: 66px; border-color: #ffe2a1; }
.co-creation-podium-item strong { width: 100%; overflow: hidden; color: inherit; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.co-creation-podium-item em { color: #7183a1; font-size: 13px; font-style: normal; font-weight: 700; }
.co-creation-ranking-list { display: grid; margin-top: 12px; overflow: hidden; border: 1px solid #dce7f4; border-radius: 16px; background: #fff; }
.co-creation-rank-row { display: grid; grid-template-columns: 28px 36px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 58px; padding: 8px 13px; border-bottom: 1px solid #e8eef7; color: #6c7f9e; }
.co-creation-rank-row:last-child { border-bottom: 0; }
.co-creation-rank-row.is-current { background: #f4f1ff; }
.co-creation-rank-row > span { color: #627797; font-size: 14px; font-weight: 800; text-align: center; }
.co-creation-rank-row img { width: 36px; height: 36px; border-radius: 50%; background: #e9f2ff; object-fit: cover; }
.co-creation-rank-row strong { overflow: hidden; color: #304869; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.co-creation-rank-row em { color: #7184a5; font-size: 13px; font-style: normal; font-weight: 700; white-space: nowrap; }
.co-creation-ranking-note { margin: 20px 0 0; color: #91a0b7; font-size: 12px; font-weight: 600; text-align: center; }

.co-creation-teacher-page { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.co-creation-teacher-hero { min-height: 144px; }
.co-creation-teacher-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.co-creation-teacher-metrics > div { min-width: 0; padding: 12px 10px; border: 1px solid #dce7f6; border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 8px 18px rgba(56,92,140,.05); }
.co-creation-teacher-metrics strong { display: block; overflow: hidden; color: #7050df; font-size: 21px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.co-creation-teacher-metrics span { display: block; margin-top: 4px; color: #7a8ca8; font-size: 11px; font-weight: 700; }
.co-creation-teacher-section { margin-top: 13px; padding: 15px; border: 1px solid #dce7f6; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 9px 20px rgba(56,92,140,.05); }
.co-creation-teacher-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.co-creation-teacher-section-head h2 { margin: 0; color: #1c3153; font-size: 17px; font-weight: 800; }
.co-creation-teacher-section-head span { overflow: hidden; color: #7587a4; font-size: 11px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.co-creation-teacher-ideas { display: grid; gap: 9px; margin-top: 13px; color: #6a7d9a; font-size: 13px; font-weight: 600; line-height: 1.5; }
.co-creation-teacher-ideas > div { display: flex; justify-content: space-between; gap: 10px; min-width: 0; padding-bottom: 9px; border-bottom: 1px solid #edf2f8; }
.co-creation-teacher-ideas > div:last-child { padding-bottom: 0; border-bottom: 0; }
.co-creation-teacher-ideas strong { overflow: hidden; color: #344b70; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.co-creation-teacher-ideas span { flex: 0 0 auto; color: #7760db; font-size: 12px; }
.co-creation-teacher-ai { margin-top: 13px; color: #5c7090; font-size: 13px; font-weight: 600; line-height: 1.6; }
.co-creation-teacher-keywords { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.co-creation-teacher-keywords span { display: inline-flex; min-height: 26px; align-items: center; padding: 0 9px; border-radius: 999px; background: #edf5ff; color: #546f9b; font-size: 11px; font-weight: 800; }
.co-creation-teacher-exceptions { margin-top: 14px; padding: 14px; border: 1px solid #ffd99f; border-radius: 17px; background: #fff9ed; color: #885c16; font-size: 13px; line-height: 1.55; }
.co-creation-teacher-exceptions strong { display: block; color: #75470a; font-size: 14px; }
.co-creation-teacher-exceptions p { margin: 6px 0 0; }
.teacher-co-creation-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 16px; border: 1px solid rgba(190, 177, 255, .7); border-radius: 22px; background: linear-gradient(135deg, #faf8ff 0%, #edf6ff 100%); box-shadow: 0 12px 25px rgba(105, 81, 197, .08); }
.teacher-co-creation-entry-copy { min-width: 0; }
.teacher-co-creation-entry-copy > span { display: block; color: #7655dd; font-size: 12px; font-weight: 800; }
.teacher-co-creation-entry-copy h2 { margin: 4px 0 5px; color: #1d3154; font-size: 20px; font-weight: 800; line-height: 1.2; }
.teacher-co-creation-entry-copy p { margin: 0; color: #6d7f9b; font-size: 12px; font-weight: 600; line-height: 1.45; }
.teacher-co-creation-entry-actions { display: grid; flex: 0 0 82px; gap: 7px; }
.teacher-co-creation-entry-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 34px; padding: 0 7px; border-radius: 11px; background: #7354e6; color: #fff; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.teacher-co-creation-entry-action.is-secondary { background: #38a6c9; }

@media (max-width: 390px) {
    .co-creation-entry { padding: 12px; }
    .co-creation-entry-card { min-height: 136px; padding: 11px; }
    .co-creation-entry-card strong { font-size: 14px; }
    .co-creation-entry-card span { font-size: 11px; }
    .co-creation-page { padding-right: 12px; padding-left: 12px; }
    .co-creation-hero { min-height: 128px; padding: 18px; }
    .co-creation-hero h2 { font-size: 19px; }
    .co-creation-proposal-card { min-height: 138px; padding: 14px; }
    .co-creation-proposal-card h3 { font-size: 16px; }
    .co-creation-proposal-card p { font-size: 13px; }
    .co-creation-honor-tabs button { padding: 0 4px; font-size: 13px; }
    .co-creation-teacher-metrics > div { padding: 11px 8px; }
    .teacher-co-creation-entry { align-items: flex-start; padding: 14px; }
    .teacher-co-creation-entry-copy h2 { font-size: 18px; }
}

html,
body {
    font-family: var(--font-family-base);
    color: var(--ink);
    background:
        linear-gradient(125deg, rgba(13, 148, 136, 0.08) 0%, rgba(14, 165, 233, 0.08) 34%, rgba(245, 158, 11, 0.08) 100%),
        radial-gradient(circle at 9% 8%, rgba(13, 148, 136, 0.18), transparent 35%),
        radial-gradient(circle at 92% 15%, rgba(14, 165, 233, 0.16), transparent 36%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-a), var(--bg-b));
    background-size: auto, auto, auto, 24px 24px, 24px 24px, auto;
    min-height: 100%;
    overflow-x: hidden;
}

.app-main {
    animation: pageFadeIn .35s ease-out both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panelRise {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-main > section,
.app-main > .row,
.app-main > .card,
.mobile-shell > section,
.mobile-shell > nav:not(.bottom-nav),
.mobile-page-content > * {
    animation: panelRise .45s ease both;
}

.app-main > *:nth-child(2),
.mobile-shell > *:nth-child(2),
.mobile-page-content > *:nth-child(2) { animation-delay: .05s; }
.app-main > *:nth-child(3),
.mobile-shell > *:nth-child(3),
.mobile-page-content > *:nth-child(3) { animation-delay: .1s; }
.app-main > *:nth-child(4),
.mobile-shell > *:nth-child(4),
.mobile-page-content > *:nth-child(4) { animation-delay: .15s; }

.app-nav {
    background: linear-gradient(118deg, #0f3d4b 0%, #0d9488 52%, #0284c7 100%);
    box-shadow: 0 8px 26px rgba(11, 18, 32, 0.28);
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 60px;
}

.navbar-brand {
    font-family: var(--font-family-display);
    letter-spacing: 0.9px;
}

.hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13, 148, 136, 0.24);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.11), rgba(14, 165, 233, 0.09), rgba(245, 158, 11, 0.07)),
        var(--surface);
    box-shadow: var(--shadow-soft);
}

.hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -50px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.35), rgba(13, 148, 136, 0));
    pointer-events: none;
}

.hero-eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-family-display);
    font-size: 12px;
    letter-spacing: 1.2px;
    background: rgba(13, 148, 136, 0.14);
    color: #0f766e;
    font-weight: 700;
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(4px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 148, 136, 0.32);
    box-shadow: var(--shadow-strong);
}

.card-header {
    border-bottom: 1px solid var(--line);
}

.role-tile {
    transition: transform .18s ease, box-shadow .18s ease;
}

.role-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.role-parent {
    border-top: 4px solid #0ea5e9;
}

.role-teacher {
    border-top: 4px solid #22c55e;
}

.role-admin {
    border-top: 4px solid #ef4444;
}

.login-card {
    border-top: 5px solid var(--brand-a);
}

.auth-shell {
    border-radius: 22px;
}

.auth-side {
    color: #ecfeff;
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.16), transparent 40%),
        linear-gradient(135deg, #0b3b66 0%, #0e7490 55%, #14b8a6 100%);
}

.auth-brand {
    display: inline-block;
    font-family: var(--font-family-display);
    letter-spacing: 1.4px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(236, 254, 255, 0.4);
    border-radius: 999px;
    padding: 4px 10px;
}

.auth-side p {
    color: rgba(236, 254, 255, 0.88);
}

.auth-points {
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: rgba(236, 254, 255, 0.92);
}

.btn {
    border-radius: 11px;
    font-weight: 600;
}

.btn-primary {
    border-color: transparent;
    background: linear-gradient(120deg, #0d9488, #0ea5e9);
}

.btn-success {
    border-color: transparent;
    background: linear-gradient(120deg, #0891b2, #0d9488);
}

.btn-danger {
    border-color: transparent;
    background: linear-gradient(120deg, #be123c, #e11d48);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    border-width: 1.5px;
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: #c7d3e6;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-a);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.16);
}

.nav-tabs {
    border-bottom: 0;
    gap: 8px;
}

.nav-tabs .nav-link {
    border: 1px solid #c9d6e9;
    border-radius: 12px;
    color: #334155;
    font-weight: 600;
    background: #fff;
}

.nav-tabs .nav-link.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg, #0d9488, #0ea5e9);
}

.admin-module-shell {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #d8e3f0;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    padding: 12px;
}

.admin-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, #0f3460 0%, #0f4f82 54%, #0d7b84 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
    padding: 14px 12px;
}

.admin-sidebar-title {
    color: #dbeafe;
    border-bottom: 1px solid rgba(219, 234, 254, 0.24);
    margin-bottom: 12px;
    padding: 2px 6px 10px;
    line-height: 1.45;
}

.admin-sidebar-title .small {
    opacity: 0.88;
    letter-spacing: 0.4px;
}

.admin-sidebar-title strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 10px;
    color: #d5ecff;
    text-decoration: none;
    font-weight: 600;
    transition: all .18s ease;
}

.admin-sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.admin-sidebar-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    font-weight: 700;
}

.admin-sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: #7dd3fc;
}

.admin-sidebar-link i {
    font-size: 14px;
}

.admin-workspace {
    min-width: 0;
}

.admin-workspace .table-responsive {
    overflow-x: auto;
}

.admin-console-body .app-nav,
.edu-dashboard-body .app-nav {
    background: #f8fbff;
    border-bottom: 1px solid #dbe6f4;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.admin-console-body .app-nav .navbar-brand,
.admin-console-body .app-nav .text-light,
.edu-dashboard-body .app-nav .navbar-brand,
.edu-dashboard-body .app-nav .text-light {
    color: #1e3a8a !important;
}

.admin-console-body .app-nav .btn-outline-light,
.edu-dashboard-body .app-nav .btn-outline-light {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #fff;
}

.admin-console-body .app-main.container,
.edu-dashboard-body .app-main.container {
    max-width: 1640px;
}

.admin-sidebar,
.edu-sidebar {
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-sidebar::after,
.edu-sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background:
        radial-gradient(circle at 12% 88%, rgba(125, 211, 252, 0.25), transparent 46%),
        radial-gradient(circle at 90% 92%, rgba(56, 189, 248, 0.18), transparent 42%);
    pointer-events: none;
}

.admin-sidebar-nav,
.edu-sidebar-nav {
    position: relative;
    z-index: 1;
}

.admin-sidebar-link,
.edu-sidebar-link {
    border: 1px solid transparent;
}

.admin-sidebar-link.active,
.edu-sidebar-link.active {
    border-color: rgba(191, 219, 254, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-workspace > .card,
.edu-workspace > .card {
    border-radius: 18px;
}

.ui-activity-page .card-header,
.ui-school-data-page .card-header,
.ui-class-overview-page .card-header,
.ui-class-students-page .card-header {
    background: linear-gradient(180deg, #ffffff, #f4f8ff) !important;
}

.ui-activity-page .admin-overview-card,
.ui-school-data-page .admin-overview-card,
.ui-class-overview-page .admin-overview-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #cfe0f6;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.08);
    background: linear-gradient(170deg, #ffffff 0%, #f3f8ff 100%);
}

.ui-activity-page .admin-overview-card::before,
.ui-school-data-page .admin-overview-card::before,
.ui-class-overview-page .admin-overview-card::before {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0) 70%);
}

.ui-activity-page .admin-overview-card .fs-4,
.ui-school-data-page .admin-overview-card .fs-4,
.ui-class-overview-page .admin-overview-card .fs-4 {
    color: #1e3a8a;
    letter-spacing: 0.2px;
}

.ui-activity-page .table thead th,
.ui-school-data-page .table thead th,
.ui-class-overview-page .table thead th,
.ui-class-students-page .table thead th {
    background: linear-gradient(180deg, #edf4ff, #e7f0ff);
    color: #1f3d8b;
}

.ui-activity-page .card-body > .row > .col-6.col-md-3 .border,
.ui-school-data-page .card-body .border.rounded,
.ui-class-overview-page .card-body .border.rounded {
    border-color: #d2e1f3 !important;
    border-radius: 14px !important;
    background: #fbfdff;
}

.ui-school-data-page .stats-trend-row {
    padding: 7px 0;
    border-bottom: 1px dashed #dbe7f7;
}

.ui-school-data-page .stats-trend-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #475569;
    font-size: 12px;
}

.ui-school-data-page .stats-trend-track {
    margin-top: 5px;
    height: 7px;
    border-radius: 999px;
    background: #dbe7f7;
    overflow: hidden;
}

.ui-school-data-page .stats-trend-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.ui-school-data-page .stats-rank-row {
    padding: 7px 0;
    border-bottom: 1px dashed #dbe7f7;
}

.ui-school-data-page .stats-rank-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ui-school-data-page .stats-rank-index {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #0ea5e9);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.ui-school-data-page .stats-rank-name {
    color: #334155;
    font-weight: 600;
    flex: 1;
}

.ui-school-data-page .stats-rank-value {
    color: #1e40af;
    font-weight: 700;
}

.ui-school-data-page .stats-rank-track {
    margin-top: 5px;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #e3ebf8;
}

.ui-school-data-page .stats-rank-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.ui-class-students-page .class-students-table-wrap {
    border: 1px solid #d5e3f5;
    border-radius: 14px;
    background: #fff;
    padding: 10px 12px;
}

.ui-class-students-page .class-students-table-title {
    font-size: 26px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 10px;
}

.ui-class-students-page .class-side-card {
    border: 1px solid #d5e3f5;
    border-radius: 14px;
    background: linear-gradient(165deg, #ffffff 0%, #f3f9ff 100%);
    padding: 14px;
    box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
}

.ui-class-students-page .class-side-card.warning {
    background: linear-gradient(165deg, #fff7ed 0%, #fff 95%);
}

.ui-class-students-page .class-side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    color: #334155;
    font-weight: 700;
}

.ui-class-students-page .class-side-card-link {
    color: #ef4444;
    font-size: 12px;
    font-weight: 700;
}

.ui-class-students-page .class-side-metric {
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    color: #1e40af;
}

.ui-class-students-page .class-side-sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.edu-dashboard-body .edu-workspace .card {
    border: 1px solid #d6e4f6;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
}

.edu-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.edu-sidebar {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 94px);
    overflow-y: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, #0f3460 0%, #0f4f82 54%, #0d7b84 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
    padding: 14px 12px;
}

.edu-sidebar-title {
    color: #dbeafe;
    border-bottom: 1px solid rgba(219, 234, 254, 0.24);
    margin-bottom: 12px;
    padding: 2px 6px 10px;
    line-height: 1.45;
}

.edu-sidebar-title strong {
    display: block;
    color: #fff;
    font-size: 16px;
}

.edu-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edu-sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 10px;
    color: #d5ecff;
    text-decoration: none;
    font-weight: 600;
    transition: all .18s ease;
}

.edu-sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.edu-sidebar-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.edu-sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: #7dd3fc;
}

.edu-workspace {
    min-width: 0;
}

.edu-kpi-card {
    border: 1px solid #d3e2f4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(30, 64, 175, 0.08);
    padding: 16px;
    height: 100%;
}

.edu-kpi-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.edu-kpi-icon {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 16px rgba(37, 99, 235, 0.24);
}

.edu-kpi-icon svg {
    width: 30px;
    height: 30px;
}

.edu-kpi-icon.icon-school {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
}

.edu-kpi-icon.icon-student {
    background: linear-gradient(135deg, #0ea5e9, #0d9488);
}

.edu-kpi-icon.icon-completion {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.edu-kpi-icon.icon-duration {
    background: linear-gradient(135deg, #0f4f82, #2563eb);
}

.edu-kpi-label {
    font-size: 18px;
    color: #1e3a8a;
    font-weight: 700;
}

.edu-kpi-main {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.edu-kpi-value {
    font-size: 48px;
    font-weight: 800;
    color: #0f3d84;
    line-height: 1.1;
}

.edu-kpi-unit {
    font-size: 26px;
    font-weight: 700;
    color: #334e8e;
}

.edu-kpi-delta {
    margin-top: 8px;
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
}

.edu-trend-chart {
    width: 100%;
    min-height: 300px;
    height: 320px;
}

.edu-trend-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.edu-trend-grid-line {
    stroke: #dbe7f7;
    stroke-width: 1;
}

.edu-trend-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.edu-trend-point {
    fill: #2563eb;
    stroke: #fff;
    stroke-width: 1.6;
}

.edu-trend-point-label {
    fill: #1e3a8a;
    font-size: 12px;
    font-weight: 700;
}

.edu-trend-axis-label {
    fill: #64748b;
    font-size: 12px;
}

.edu-trend-empty {
    height: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 13px;
}

.edu-pager-note {
    color: #64748b;
    font-size: 12px;
}

.edu-ranking-wrap {
    display: grid;
    gap: 10px;
}

.edu-rank-item {
    border: 1px solid #dbe7f3;
    border-radius: 10px;
    background: #f8fbff;
    padding: 12px;
}

.edu-rank-no {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.edu-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.edu-summary-item {
    border: 1px solid #dce7f4;
    border-radius: 10px;
    padding: 10px;
    background: #f8fbff;
}

.edu-summary-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.edu-summary-value {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.1;
    color: #0f3d84;
    font-weight: 800;
}

.achievement-dashboard-page {
    background:
        radial-gradient(circle at 4% -10%, rgba(59, 130, 246, 0.12), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.12), transparent 30%),
        linear-gradient(180deg, #f6faff 0%, #eff5ff 100%);
}

.achievement-dashboard-shell {
    display: grid;
    gap: 12px;
}

.achievement-type-detail-table-wrap { max-height: min(62vh, 620px); }
.achievement-type-detail-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.achievement-work-row { cursor: pointer; }
.achievement-work-row:hover > * { background-color: #eef6ff; }
.achievement-work-title { max-width: 280px; }
.achievement-work-title .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.achievement-kpi-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
}

.achievement-kpi-card {
    border: 1px solid #d6e3f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
    padding: 10px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 82px;
    overflow: hidden;
}

.achievement-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex: 0 0 auto;
}

.achievement-kpi-main {
    flex: 1 1 auto;
    min-width: 0;
}

.achievement-kpi-name {
    font-size: 12px;
    color: #334155;
    font-weight: 700;
    line-height: 1.2;
}

.achievement-kpi-value {
    margin-top: 2px;
    font-size: clamp(21px, 1.4vw, 25px);
    line-height: 1;
    color: #1e3a8a;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.achievement-kpi-value--compact {
    font-size: clamp(19px, 1.25vw, 23px);
}

.achievement-kpi-unit {
    margin-left: 2px;
    font-size: 0.62em;
    font-weight: 750;
    letter-spacing: 0;
    vertical-align: 0.12em;
}

.achievement-state {
    grid-column: 1 / -1;
    border: 1px dashed #d8e4f4;
    border-radius: 12px;
    background: #f8fbff;
    text-align: center;
    color: #64748b;
    padding: 16px 12px;
    font-size: 13px;
}

.achievement-panel {
    height: 100%;
    border: 1px solid #d5e3f4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
    padding: 10px 12px;
}

.achievement-panel-title {
    font-size: 18px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.achievement-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.achievement-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e6edf8;
    overflow: hidden;
}

.achievement-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.achievement-total-row td {
    background: #f5f9ff;
    font-weight: 800;
    color: #1e3a8a;
}

.achievement-pie-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 4px auto 8px;
}

.achievement-pie-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
}

.achievement-pie-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 112px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.achievement-pie-total {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #1e3a8a;
}

.achievement-legend-list {
    display: grid;
    gap: 6px;
}

.achievement-legend-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.achievement-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.achievement-legend-name {
    color: #334155;
    font-weight: 700;
}

.achievement-legend-val {
    color: #475569;
    white-space: nowrap;
}

.achievement-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.achievement-ai-card {
    border: 1px solid #dbe7f6;
    border-radius: 12px;
    background: #f8fbff;
    padding: 8px;
    min-height: 84px;
}

.achievement-ai-icon {
    font-size: 18px;
    line-height: 1;
}

.achievement-ai-name {
    margin-top: 4px;
    font-size: 12px;
    color: #475569;
    font-weight: 700;
    line-height: 1.25;
}

.achievement-ai-value {
    margin-top: 3px;
    font-size: 36px;
    line-height: 1;
    color: #1e3a8a;
    font-weight: 800;
}

.achievement-keyword-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.achievement-keyword {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #cae0f7;
    background: linear-gradient(180deg, #f4f9ff, #ecf4ff);
    color: #1e3a8a;
    font-weight: 700;
    line-height: 1;
}

.achievement-class-bars {
    display: grid;
    gap: 8px;
    max-height: 350px;
    overflow: auto;
    padding-right: 4px;
}

.achievement-bar-item {
    border: 1px solid #dde8f6;
    border-radius: 10px;
    background: #f8fbff;
    padding: 8px;
}

.achievement-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #334155;
}

.achievement-bar-track {
    margin-top: 4px;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e3ebf8;
    overflow: hidden;
}

.achievement-bar-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.achievement-tip {
    border-radius: 12px;
    border: 1px solid #d8e3f2;
    padding: 10px 12px;
    min-height: 110px;
}

.achievement-tip.success {
    background: linear-gradient(180deg, #f0fdf4, #effcf7);
    border-color: #bbf7d0;
}

.achievement-tip.danger {
    background: linear-gradient(180deg, #fff7ed, #fff8f0);
    border-color: #fed7aa;
}

@media (max-width: 1680px) {
    .achievement-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .achievement-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .achievement-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .achievement-pie-wrap {
        width: 220px;
        height: 220px;
    }

    .achievement-pie-center {
        width: 96px;
        height: 96px;
    }

    .achievement-pie-total {
        font-size: 28px;
    }
}

.table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #eef3fb;
    margin-top: 12px;
    flex-wrap: nowrap;
}

.table-pager .pager-meta {
    color: #64748b;
    font-size: 13px;
}

.table-pager .page-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.table-pager .pager-size {
    min-width: 108px;
}

.table-pager .pager-jump {
    width: 60px;
}

.table-pager .pager-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.table-pager .summer-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
}

.admin-state-loading,
.admin-state-empty,
.admin-state-error {
    text-align: center;
    padding: 14px 8px !important;
}

.admin-state-loading {
    color: #64748b;
}

.admin-state-empty {
    color: #64748b;
}

.admin-state-error {
    color: #dc2626;
}

.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 1060;
}

/* Shared work preview: keep touch scrolling inside the dialog and freeze the page beneath it. */
#userWorkPreviewModal {
    z-index: 1080;
    overscroll-behavior: none;
}

#userWorkPreviewModal .user-work-preview-dialog {
    width: min(900px, calc(100% - 24px));
    max-width: 900px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: calc(12px + env(safe-area-inset-top)) auto calc(12px + env(safe-area-inset-bottom));
}

#userWorkPreviewModal .user-work-preview-content {
    max-height: inherit;
    overflow: hidden;
}

#userWorkPreviewModal .user-work-preview-body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

#userWorkPreviewModal .user-work-preview-image,
#userWorkPreviewModal .user-work-preview-video {
    display: block;
    width: 100%;
    margin: 0 auto;
}

#userWorkPreviewModal .user-work-preview-image {
    height: auto;
    max-height: none;
    object-fit: contain;
}

#userWorkPreviewModal .user-work-preview-video {
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    background: #0f172a;
}

#userWorkPreviewModal .user-work-preview-image.d-none,
#userWorkPreviewModal .user-work-preview-video.d-none {
    display: none;
}

body.user-work-preview-open .bottom-nav {
    pointer-events: none;
}

@media (max-width: 575.98px) {
    #userWorkPreviewModal .user-work-preview-dialog {
        width: calc(100% - 20px);
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: calc(10px + env(safe-area-inset-top)) auto calc(10px + env(safe-area-inset-bottom));
    }

    #userWorkPreviewModal .user-work-preview-content {
        border-radius: 20px;
    }

    #userWorkPreviewModal .modal-header {
        flex: 0 0 auto;
    }

    #userWorkPreviewModal .user-work-preview-body {
        padding: 14px;
    }
}

.admin-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.admin-modal:not(.hidden) {
    pointer-events: auto;
}

.admin-modal-dialog {
    pointer-events: auto;
}

@media (max-width: 1440px) {
    .edu-kpi-value {
        font-size: 38px;
    }
    .edu-kpi-icon {
        width: 54px;
        height: 54px;
        font-size: 24px;
    }
    .edu-kpi-label {
        font-size: 16px;
    }
    .edu-kpi-unit {
        font-size: 22px;
    }
}

@media (max-width: 1024px) {
    .admin-layout {
        display: block;
    }
    .edu-layout {
        display: block;
    }
    .admin-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        margin-bottom: 12px;
        overflow: hidden;
    }
    .edu-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        margin-bottom: 12px;
        overflow: hidden;
    }
    .admin-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .edu-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .admin-sidebar-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .edu-sidebar-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .admin-sidebar-link.active::before {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: -4px;
        width: auto;
        height: 3px;
    }
    .edu-sidebar-link.active::before {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: -4px;
        width: auto;
        height: 3px;
    }
    .edu-trend-chart {
        height: 240px;
    }
    .edu-kpi-value {
        font-size: 34px;
    }
    .edu-kpi-unit {
        font-size: 18px;
    }
}

.admin-overview-card {
    border: 1px solid #d9e4f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.table > :not(caption) > * > * {
    border-bottom-color: #e2e8f0;
}

.table thead th {
    color: #1e293b;
    font-weight: 700;
    background: linear-gradient(180deg, #f8fbff, #f2f7ff);
}

.table tbody tr:hover {
    background: rgba(13, 148, 136, 0.06);
}

.table td,
.table th {
    white-space: nowrap;
}

.admin-audit-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid #d3ddeb;
    background: #f8fbff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-audit-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-audit-thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0f172a;
}

.admin-audit-thumb-fallback {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.admin-post-actions-cell {
    min-width: 124px;
}

.admin-post-content-cell {
    white-space: normal !important;
}

.admin-post-title,
.admin-post-reflection {
    max-width: 30ch;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.6;
}

.weekly-report-kpi {
    border-radius: 14px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.12), rgba(34, 197, 94, 0.08));
    padding: 12px 14px;
}

.weekly-report-kpi-label {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.weekly-report-kpi-value {
    margin-top: 4px;
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}

.weekly-report-share-box textarea {
    font-size: 13px;
    line-height: 1.65;
    background: #f8fbff;
}

.weekly-grade-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.weekly-grade-card {
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    padding: 14px;
    background:
        linear-gradient(150deg, rgba(14, 165, 233, 0.08), rgba(16, 185, 129, 0.07), rgba(255, 255, 255, 0.96));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.weekly-grade-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.weekly-grade-title {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
}

.weekly-grade-metrics {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.weekly-grade-topic {
    margin-top: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 10px 12px;
}

.weekly-grade-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #0369a1;
}

.weekly-grade-text {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.55;
    color: #0f172a;
}

.weekly-grade-summary {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed rgba(15, 118, 110, 0.34);
    color: #115e59;
    line-height: 1.6;
}

.weekly-highlight-item {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(203, 213, 225, 0.75);
}

.weekly-highlight-tag {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
}

.weekly-highlight-main {
    margin-top: 4px;
    font-weight: 700;
    color: #0f172a;
}

.weekly-highlight-sub {
    margin-top: 3px;
    color: #475569;
    line-height: 1.55;
    font-size: 13px;
}

.weekly-grade-footer {
    margin-top: 10px;
    border-radius: 12px;
    background: rgba(30, 64, 175, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.26);
    color: #1e3a8a;
    padding: 10px 12px;
    line-height: 1.58;
    font-weight: 600;
}

.comment-input {
    min-width: 180px;
}

.upload-card {
    overflow: hidden;
}

.upload-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
}

.upload-intro {
    padding: 14px 16px;
    border: 1px solid #d7e8f8;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.06));
}

.upload-intro-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.upload-textarea {
    min-height: 150px;
    line-height: 1.7;
}

.upload-dropzone {
    padding: 22px 18px;
    border: 1.5px dashed #8dc8ea;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(255, 255, 255, 0.96));
    text-align: center;
}

.upload-dropzone-icon {
    font-size: 28px;
    color: #0284c7;
    margin-bottom: 8px;
}

.upload-dropzone-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.upload-dropzone-text {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 14px;
}

.upload-file-input {
    max-width: 420px;
    margin: 0 auto;
}

.upload-guide-card {
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.1), transparent 36%),
        #fff;
}

.guide-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px dashed #dbe4f0;
}

.guide-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.guide-index {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0284c7, #14b8a6);
    color: #fff;
    font-family: var(--font-family-display);
    font-weight: 700;
}

.upload-note h6 {
    margin-bottom: 6px;
    font-weight: 700;
}

.feed-card {
    overflow: hidden;
}

.feed-reflection {
    white-space: pre-wrap;
    line-height: 1.75;
    color: #334155;
}

.feed-stat {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
}

.feed-comments {
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.feed-comment-item {
    padding: 10px 0;
    border-bottom: 1px dashed #dbe4f0;
}

.feed-comment-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.video-reflection-cell {
    min-width: 260px;
    max-width: 360px;
    white-space: normal;
    line-height: 1.6;
}

.reject-input {
    width: 170px;
}

.badge {
    font-weight: 600;
}

.alert {
    border-radius: 12px;
    border: 0;
}

.network-weak-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(254, 243, 199, 0.88);
    color: #92400e;
    font-size: 12px;
    line-height: 1.45;
}

.text-secondary {
    color: var(--muted) !important;
}

#trendChart {
    min-height: 260px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero {
        border-radius: 14px;
    }

    .card {
        border-radius: 14px;
    }

    .table td,
    .table th {
        font-size: 12px;
        white-space: normal;
        vertical-align: top;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 3px;
    }

    .card-body {
        padding: 12px;
    }

    .auth-shell {
        border-radius: 14px;
    }

    .auth-side {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .comment-form {
        display: flex !important;
        width: 100%;
        margin-top: 8px;
        margin-left: 0 !important;
    }

    .comment-input {
        width: 100%;
        min-width: 0;
    }

    .video-reflection-cell {
        min-width: 0;
        max-width: none;
    }

    .upload-intro-title {
        font-size: 16px;
    }

    .upload-dropzone {
        padding: 18px 14px;
    }

    .upload-file-input {
        max-width: none;
    }

    .guide-item {
        grid-template-columns: 38px 1fr;
        gap: 10px;
    }

    .guide-index {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 12px;
    }

    .reject-form {
        width: 100%;
        margin-left: 0 !important;
    }

    .reject-input {
        width: 100%;
    }

    .cf-turnstile {
        transform: scale(0.95);
        transform-origin: left top;
    }

    #trendChart {
        min-height: 220px;
    }
}

.mobile-shell {
    position: relative;
    width: min(100%, var(--mobile-shell-max-width));
    max-width: var(--mobile-shell-max-width);
    margin: 0 auto;
    min-height: 100vh;
    padding: max(16px, env(safe-area-inset-top)) var(--mobile-shell-gutter) calc(var(--mobile-shell-bottom-space) + 8px);
    overflow-x: hidden;
    isolation: isolate;
    container-type: inline-size;
    container-name: mobile-page;
}

.mobile-shell.teacher-role-shell,
.mobile-shell.teacher-workbench-shell {
    width: min(100%, 430px);
    max-width: 430px;
    margin: 0 auto;
}

.mobile-page-shell {
    position: relative;
    min-height: calc(100vh - env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
}

.mobile-page-content {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: var(--mobile-shell-section-gap);
    align-content: start;
    padding-bottom: 18px;
}

.mobile-page-content > * {
    width: 100%;
    min-width: 0;
}

.onboarding-shell {
    padding-top: 32px;
}

.onboarding-hero,
.mobile-topbar,
.hero-summary,
.app-card,
.post-card,
.empty-card,
.rank-card,
.profile-card,
.member-card,
.my-work-card {
    border-radius: 24px;
}

.onboarding-hero {
    padding: 28px;
    margin-bottom: 18px;
    color: #f8fafc;
    background: linear-gradient(145deg, #0f3c68, #0f766e 60%, #1d4ed8);
    box-shadow: 0 16px 44px rgba(15, 60, 104, 0.28);
}

.hero-badge,
.section-title {
    font-family: var(--font-family-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    margin-bottom: 12px;
    font-size: 12px;
}

.onboarding-hero h1 {
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 800;
}

.quick-entry-grid,
.content-stack {
    display: grid;
    gap: 16px;
}

.quick-entry-grid,
.content-stack,
.post-grid,
.channel-tabs,
.ranking-switch,
.profile-links {
    width: 100%;
    min-width: 0;
}

.app-card {
    overflow: hidden;
}

.section-desc {
    color: var(--muted);
    margin-bottom: 18px;
}

.quick-list {
    display: grid;
    gap: 10px;
}

.quick-entry-btn {
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 197, 94, 0.08));
}

.quick-entry-btn span {
    display: grid;
    text-align: left;
}

.quick-entry-btn small {
    color: var(--muted);
}

.mobile-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 18px;
    color: #f8fafc;
    background: linear-gradient(140deg, #0f172a, #0f766e);
}

.mobile-topbar-title {
    font-size: 20px;
    font-weight: 800;
}

.mobile-topbar-meta {
    font-size: 13px;
    opacity: 0.88;
}

.student-home-page {
    gap: 14px;
}

.student-home-page,
.student-home-page * {
    box-sizing: border-box;
}

.student-home-hero-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 118px;
    padding: 16px;
    border-radius: 18px;
    color: #f8fbff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(132deg, #2370e7 0%, #1198ce 45%, #16a58b 100%);
    box-shadow: 0 16px 38px rgba(25, 92, 179, 0.24);
    overflow: hidden;
}

.student-home-hero-main {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-right: 112px;
}

.student-home-hero-avatar {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.student-home-hero-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.student-home-hero-brand {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.student-home-hero-brand span {
    opacity: 0.92;
}

.student-home-hero-name {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-home-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(248, 250, 252, 0.9);
}

.student-home-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.student-home-hero-meta span span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-home-level-pill {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    width: 104px;
    height: 90px;
    place-items: center;
}

/* The source artwork already includes the level plaque and its Chinese label.
 * Keep it as one contained image so the illustration and plaque cannot drift. */
.student-home-level-full-icon {
    display: block;
    width: 104px;
    height: 90px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px rgba(8, 50, 105, 0.25));
}

.student-home-level-icon {
    display: block;
    width: 58px;
    height: 56px;
    flex: 0 0 auto;
    background-image: url('/platform-assets/images/student-reading-level-icons-transparent.png');
    background-repeat: no-repeat;
    background-size: 184px 276px;
    background-position: -22px 0;
    filter: drop-shadow(0 3px 4px rgba(8, 50, 105, 0.28));
}

.student-reading-level-2 .student-home-level-icon { background-position: -102px 0; }
.student-reading-level-3 .student-home-level-icon { background-position: -23px -57px; }
.student-reading-level-4 .student-home-level-icon { background-position: -102px -57px; }
.student-reading-level-5 .student-home-level-icon { background-position: -22px -107px; }
.student-reading-level-6 .student-home-level-icon { background-position: -101px -108px; }
.student-reading-level-7 .student-home-level-icon { background-position: -23px -159px; }
.student-reading-level-8 .student-home-level-icon { background-position: -101px -159px; }
.student-reading-level-9 .student-home-level-icon {
    background-size: 154px 230px;
    background-position: -11px -174px;
}
.student-reading-level-10 .student-home-level-icon {
    background-size: 133px 200px;
    background-position: -66px -144px;
}

.student-home-level-label {
    display: block;
    max-width: 82px;
    min-height: 17px;
    padding: 1px 5px 0;
    overflow: hidden;
    border: 1px solid rgba(193, 225, 255, 0.96);
    border-radius: 999px;
    color: #1557a3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(225, 243, 255, 0.95));
    box-shadow: 0 2px 5px rgba(10, 64, 130, 0.18);
    font-size: 9px;
    line-height: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-home-level-pill-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.student-home-level-pill-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.96);
    outline-offset: 3px;
    border-radius: 14px;
}

.student-reading-level-page {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(191, 225, 255, 0.92);
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.92), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(200, 231, 255, 0.86), transparent 26%),
        linear-gradient(180deg, #dceeff 0%, #f7fbff 36%, #edf7ff 100%);
    box-shadow: 0 18px 46px rgba(45, 124, 207, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.student-reading-level-page-header {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    min-height: 50px;
    padding: 0 4px;
}

.student-reading-level-page-header h1 {
    margin: 0;
    color: #102a61;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
}

.student-reading-level-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    padding: 7px 8px 7px 5px;
    border-radius: 14px;
    color: #174c96;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.student-reading-level-back i {
    font-size: 20px;
    line-height: 1;
}

.student-reading-level-back:focus-visible,
.student-reading-level-back:hover {
    color: #0f3d7c;
    background: rgba(255, 255, 255, 0.72);
}

.student-reading-level-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 218px;
    padding: 12px 10px;
    overflow: hidden;
    border: 1px solid rgba(137, 202, 255, 0.98);
    border-radius: 23px;
    background:
        radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.94) 0 7%, rgba(255, 255, 255, 0) 38%),
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.86) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.86) 0 2px, transparent 3px),
        linear-gradient(145deg, #2787df 0%, #78bff2 32%, #dff5ff 50%, #78bff2 68%, #2787df 100%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.68), 0 12px 28px rgba(39, 116, 194, 0.15);
}

.student-reading-level-stage::before,
.student-reading-level-stage::after {
    position: absolute;
    inset: 8px;
    z-index: 0;
    border-radius: 17px;
    content: "";
    pointer-events: none;
}

.student-reading-level-stage::before {
    border: 1px solid rgba(234, 249, 255, 0.78);
    background:
        linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, 0.24) 35%, transparent 50%),
        radial-gradient(circle at 49% 48%, rgba(255, 255, 255, 0.76) 0 1px, transparent 2px),
        radial-gradient(circle at 43% 32%, rgba(255, 255, 255, 0.74) 0 1px, transparent 2px),
        radial-gradient(circle at 57% 32%, rgba(255, 255, 255, 0.74) 0 1px, transparent 2px);
}

.student-reading-level-stage::after {
    inset: auto 8% 12px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(28, 101, 194, 0.21), rgba(28, 101, 194, 0) 68%);
}

.student-reading-level-stage > * {
    position: relative;
    z-index: 1;
}

.student-reading-level-stage-item {
    position: relative;
    display: grid;
    grid-template-rows: 24px 132px 34px;
    justify-items: center;
    align-items: center;
    min-width: 0;
    color: #0d4da7;
    text-align: center;
}

.student-reading-level-stage-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 12px;
    border: 1px solid rgba(193, 225, 255, 0.94);
    border-radius: 999px;
    color: #3167ad;
    background: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.student-reading-level-stage-art {
    display: block;
    width: min(156px, 100%);
    height: 132px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 10px rgba(14, 82, 164, 0.3));
}

.student-reading-level-stage-plaque {
    display: block;
    width: min(160px, calc(100% - 2px));
    min-height: 32px;
    padding: 6px 7px 4px;
    overflow: hidden;
    border: 1px solid #236fc4;
    border-radius: 999px;
    color: #083c9a;
    background: linear-gradient(180deg, #f6fdff 0%, #cce9ff 42%, #88c7ef 100%);
    box-shadow: 0 3px 0 #2268b4, 0 7px 10px rgba(13, 80, 166, 0.22), inset 0 1px 0 #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(16, 77, 161, 0.25);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-level-stage-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    color: #4c8ff1;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22);
    font-size: 20px;
}

.student-reading-level-progress-card,
.student-reading-level-guide-card,
.student-reading-level-rule-card {
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid rgba(190, 222, 255, 0.94);
    border-radius: 21px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 255, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 9px 22px rgba(50, 125, 196, 0.1);
}

.student-reading-level-section-title,
.student-reading-level-guide-card h2,
.student-reading-level-rule-card h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 12px;
    color: #3167ae;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.student-reading-level-section-title > span,
.student-reading-level-guide-card h2 > span,
.student-reading-level-rule-card h2 > span {
    color: #65a6f6;
}

.student-reading-level-progress-summary,
.student-reading-level-quality-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.student-reading-level-progress-summary > strong {
    color: #1670ed;
    font-family: var(--font-family-display);
    font-size: 37px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.student-reading-level-progress-summary strong small,
.student-reading-level-quality-summary strong small {
    color: #4c6fa6;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
}

.student-reading-level-progress-summary > span,
.student-reading-level-quality-summary > span {
    min-width: 0;
    color: #4774b4;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

.student-reading-level-progress-track,
.student-reading-level-quality-track {
    position: relative;
    height: 18px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(151, 197, 245, 0.78);
    border-radius: 999px;
    background: rgba(224, 239, 255, 0.92);
    box-shadow: inset 0 2px 4px rgba(51, 115, 190, 0.1);
}

.student-reading-level-progress-fill,
.student-reading-level-quality-fill {
    display: block;
    min-width: 8px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #377cf5, #76c6ff 65%, #d5f4ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 0 12px rgba(55, 124, 245, 0.42);
}

.student-reading-level-quality-summary {
    align-items: center;
    margin-top: 15px;
}

.student-reading-level-quality-summary > div {
    display: grid;
    gap: 2px;
}

.student-reading-level-quality-summary > div > span {
    color: #6481b1;
    font-size: 11px;
    font-weight: 700;
}

.student-reading-level-quality-summary strong {
    color: #236fd2;
    font-size: 20px;
    line-height: 1.1;
}

.student-reading-level-quality-track {
    height: 9px;
    margin-top: 7px;
}

.student-reading-level-quality-fill {
    background: linear-gradient(90deg, #6a82f3, #ba8ff5 62%, #ebc7ff);
}

.student-reading-level-progress-card > p {
    margin: 10px 0 0;
    color: #6b85ad;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.student-reading-level-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 5);
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    padding: 12px 8px 10px;
    border: 1px solid rgba(190, 222, 255, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.68);
    scrollbar-width: none;
}

.student-reading-level-rail::-webkit-scrollbar { display: none; }

.student-reading-level-rail-item {
    display: grid;
    grid-template-rows: 46px 19px 17px;
    min-height: 82px;
    justify-items: center;
    align-content: center;
    min-width: 0;
    color: #2461b2;
    text-align: center;
}

.student-reading-level-rail-art,
.student-reading-level-rule-art {
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(12, 82, 169, 0.18));
}

.student-reading-level-rail-art {
    width: min(68px, 100%);
    height: 46px;
    margin: 0;
}

.student-reading-level-rail-plaque {
    display: block;
    width: min(43px, 100%);
    min-height: 17px;
    padding: 3px 2px 1px;
    overflow: hidden;
    border: 1px solid #347bc6;
    border-radius: 999px;
    color: #0b459d;
    background: linear-gradient(180deg, #f7fdff, #b9e0fa);
    box-shadow: 0 2px 0 #609ed4, inset 0 1px 0 #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-level-rail-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #0b4b9e;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 #fff;
    white-space: nowrap;
}

/* Wide silhouettes receive a small, proportion-preserving visual correction. */
.student-reading-level-rail-9 .student-reading-level-rail-art,
.student-reading-level-rail-10 .student-reading-level-rail-art,
.student-reading-level-rule-9 .student-reading-level-rule-art,
.student-reading-level-rule-10 .student-reading-level-rule-art { transform: scale(1.18); }
.student-reading-level-stage-9 .student-reading-level-stage-art,
.student-reading-level-stage-10 .student-reading-level-stage-art { transform: scale(1.14); }

.student-reading-level-rail-item strong {
    align-self: center;
    padding: 2px 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #4f91f5, #356fd7);
    font-size: 11px;
    line-height: 1.1;
}

.student-reading-level-rail-item > span:last-child {
    display: -webkit-box;
    min-height: 28px;
    max-width: 100%;
    margin-top: 1px;
    overflow: hidden;
    color: #1754aa;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-reading-level-guide-card h2,
.student-reading-level-rule-card h2 {
    justify-content: flex-start;
    font-size: 19px;
}

.student-reading-level-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.student-reading-level-guide-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(177, 222, 251, 0.72);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.72);
}

.student-reading-level-guide-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #1e9d78;
    background: rgba(220, 250, 238, 0.92);
    font-size: 19px;
}

.student-reading-level-guide-item.is-purple i { color: #7b57d8; background: rgba(239, 233, 255, 0.94); }
.student-reading-level-guide-item.is-orange i { color: #ed7a38; background: rgba(255, 239, 221, 0.95); }

.student-reading-level-guide-item div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.student-reading-level-guide-item strong {
    overflow: hidden;
    color: #24487b;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-level-guide-item span {
    display: -webkit-box;
    overflow: hidden;
    color: #6981a5;
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-reading-level-rule-list {
    overflow: hidden;
    border: 1px solid rgba(185, 218, 250, 0.9);
    border-radius: 17px;
}

.student-reading-level-rule-list article {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 76px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(201, 224, 247, 0.74);
    background: rgba(252, 254, 255, 0.72);
}

.student-reading-level-rule-list article:last-child { border-bottom: 0; }
.student-reading-level-rule-list article.is-current { background: linear-gradient(90deg, rgba(219, 240, 255, 0.9), rgba(255, 255, 255, 0.86)); }

.student-reading-level-rule-art {
    width: 82px;
    height: 70px;
}

.student-reading-level-rule-copy {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
}

.student-reading-level-rule-copy strong {
    overflow: hidden;
    color: #1753aa;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-level-rule-copy span {
    overflow: hidden;
    color: #6580a9;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-level-rule-threshold {
    display: grid;
    justify-items: end;
    gap: 2px;
    color: #4378c5;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
}

.student-reading-level-rule-threshold small {
    color: #7991b4;
    font-size: 9px;
    font-weight: 700;
}

.student-reading-level-rule-note {
    margin: 12px 0 0;
    color: #537aa9;
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

.student-home-quick-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px 8px 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.14);
    box-shadow: var(--shadow-soft);
}

.student-home-quick-link {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 2px 10px;
    color: #0f172a;
    text-decoration: none;
    border-radius: 14px;
}

.student-home-quick-link span:last-child {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.student-home-quick-link.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
}

.student-home-quick-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.student-home-quick-icon.school {
    color: #2073ff;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(56, 189, 248, 0.2));
}

.student-home-quick-icon.class {
    color: #0f9f78;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(34, 197, 94, 0.16));
}

.student-home-quick-icon.featured {
    color: #d49b11;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(251, 191, 36, 0.22));
}

.student-home-quick-icon.weekly {
    color: #7c3aed;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(192, 132, 252, 0.2));
}

.student-home-quick-icon.campus {
    color: #f97316;
    background: linear-gradient(135deg, rgba(253, 186, 116, 0.2), rgba(251, 146, 60, 0.18));
}

.student-home-feed-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    scroll-margin-top: 18px;
}

.student-home-feed-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.student-home-feed-copy h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
}

.student-home-feed-copy p {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #71839a;
}

.student-home-sort-popover {
    position: relative;
    flex: 0 0 auto;
}

.student-home-sort-popover summary {
    list-style: none;
}

.student-home-sort-popover summary::-webkit-details-marker {
    display: none;
}

.student-home-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(191, 207, 232, 0.92);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    color: #42566f;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.student-home-sort-pill i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.student-home-sort-popover[open] .student-home-sort-pill i {
    transform: rotate(180deg);
}

.student-home-sort-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 12;
    width: min(250px, calc(100vw - 38px));
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(191, 207, 232, 0.92);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
}

.student-home-sort-panel .feed-sort-label {
    display: none;
}

.student-home-sort-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
    color: #64748b;
}

.student-home-sort-panel .form-select {
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    font-size: 12px;
    min-height: 36px;
}

.student-home-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(186, 230, 253, 0.9);
    background: rgba(240, 249, 255, 0.95);
    color: #44617c;
    font-size: 11px;
    line-height: 1.3;
}

.student-home-active-filter a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.student-home-feed-list {
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.student-home-feed-card {
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px;
}

.student-home-feed-cover-wrap {
    position: relative;
    min-width: 0;
}

.student-home-feed-media {
    height: 100%;
    min-height: 118px;
    aspect-ratio: auto;
    border-radius: 16px;
}

.student-home-feed-media .feed-media-image,
.student-home-feed-media .feed-media-video {
    height: 100%;
    min-height: 118px;
    max-height: none;
}

.student-home-feed-content {
    display: grid;
    gap: 7px;
    min-width: 0;
    align-content: start;
}

.student-home-feed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.student-home-feed-author {
    flex: 1 1 auto;
    min-width: 0;
}

.student-home-feed-author strong {
    display: block;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-home-feed-type {
    flex: 0 0 auto;
    max-width: 42%;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(191, 207, 232, 0.88);
    background: #f8fbff;
    color: #4b6181;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-home-feed-card h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    min-height: calc(1.35em * 2);
}

.student-home-feed-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11px;
    line-height: 1.4;
    color: #71839a;
}

.student-home-feed-actions {
    margin-top: 2px;
}

.student-home-feed-card .comment-panel {
    margin-top: 2px;
}

.student-home-empty-card {
    padding-top: 22px;
    padding-bottom: 22px;
    font-size: 14px;
    color: #64748b;
    text-align: center;
}

.student-feed-load-more {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 8px;
}

.student-feed-load-more-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
    text-align: center;
}

.hero-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(14, 165, 233, 0.12);
}

.hero-summary div {
    display: grid;
    gap: 6px;
}

.hero-summary-label {
    color: var(--muted);
    font-size: 12px;
}

.admin-view-switch {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.14), transparent 42%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.97), rgba(232, 245, 255, 0.9));
    box-shadow: var(--shadow-soft);
}

.admin-view-switch-head {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.admin-view-switch-head strong {
    font-size: 15px;
}

.admin-view-switch-head span {
    color: var(--muted);
    font-size: 12px;
}

.admin-view-switch-form {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) minmax(150px, 1fr) auto;
    gap: 8px;
}

.channel-tabs,
.ranking-switch,
.profile-links {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.channel-tabs::-webkit-scrollbar,
.ranking-switch::-webkit-scrollbar,
.profile-links::-webkit-scrollbar {
    display: none;
}

.channel-tabs a,
.ranking-switch a,
.profile-links a {
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    background: #fff;
    border: 1px solid #d6e2ef;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
}

.channel-tabs a.active,
.ranking-switch a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0284c7, #2563eb);
}

.section-head h2 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
}

.section-head p,
.post-header span,
.rule-item span,
.my-work-card p,
.profile-card span,
.member-card small {
    color: var(--muted);
}

.post-card,
.empty-card,
.rank-card,
.profile-card,
.member-card,
.my-work-card {
    width: 100%;
    min-width: 0;
    padding: var(--mobile-card-padding);
    border-radius: var(--mobile-card-radius);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.12);
    box-shadow: var(--shadow-soft);
}

.accent-green { border-left: 6px solid #16a34a; }
.accent-red { border-left: 6px solid #dc2626; }

.feed-sort-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.86));
    box-shadow: var(--shadow-soft);
}

.game-sort-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background: linear-gradient(138deg, rgba(255, 255, 255, 0.98), rgba(234, 245, 255, 0.9));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.game-filter-shell {
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background:
        radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.12), transparent 40%),
        linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(14, 165, 233, 0.09)),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.game-filter-inside {
    margin-top: 2px;
}

.game-wall-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.game-wall-overview span {
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(255, 255, 255, 0.9);
    color: #516273;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
}

.game-phase-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #475569;
}

.game-phase-badge {
    border-radius: 999px;
    padding: 5px 12px;
    border: 1px solid rgba(14, 165, 233, 0.24);
    background: rgba(255, 255, 255, 0.9);
    color: #1e3a8a;
    font-weight: 700;
}

.game-filter-head {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.game-filter-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.teacher-home-student-shell {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

.teacher-home-hero-card {
    overflow: visible;
}

.teacher-home-hero-main {
    padding-right: 84px;
}

.teacher-home-hero-copy {
    gap: 6px;
}

.teacher-home-hero-name {
    max-width: 100%;
}

.teacher-home-role-pill {
    min-width: 78px;
}

.teacher-home-role-pill strong {
    font-size: 12px;
}

.teacher-home-switch-form {
    position: absolute;
    right: 14px;
    bottom: 12px;
}

.teacher-home-switch-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.teacher-home-switch-link i {
    font-size: 12px;
}

.teacher-home-quick-nav {
    gap: 8px;
}

.teacher-home-feed-panel {
    display: grid;
    gap: 12px;
}

.teacher-home-feed-toolbar {
    margin-bottom: 0;
}

.teacher-home-sort-popover {
    align-self: flex-start;
}

.teacher-home-sort-panel {
    width: min(260px, calc(100vw - 40px));
}

.teacher-home-sort-panel .btn {
    border-radius: 12px;
}

.game-filter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.game-filter-meta span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #0f4c81;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.feed-sort-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.feed-sort-form .form-select {
    width: auto;
    min-width: 122px;
}

.game-sort-form .form-select {
    width: auto;
    min-width: 122px;
}

.game-sort-apply {
    margin-left: auto;
}

.btn-soft {
    border-color: #c9d6e9 !important;
    color: #475569 !important;
    background: #fff !important;
}

.btn-soft:hover {
    border-color: #9fb8d9 !important;
    color: #1e293b !important;
    background: #f8fbff !important;
}

.game-only-followed-check {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.game-follow-row {
    margin: 2px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.feed-post {
    width: 100%;
    min-width: 0;
    padding: 12px;
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.feed-post > * {
    min-width: 0;
}

.post-header,
.post-actions,
.comment-box,
.member-card,
.member-main,
.my-work-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.post-header div {
    display: grid;
}

.post-author-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.post-author-link {
    text-decoration: none;
    color: var(--ink);
}

.post-author-link:hover {
    color: #0369a1;
}

.post-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background: #eaf3ff;
}

.featured-feed-card .post-header {
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.featured-feed-card .post-author-line,
.featured-feed-card .post-author-link {
    flex: 1 1 auto;
    min-width: 0;
}

.featured-feed-card .post-author-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

.featured-feed-card .post-author-line strong {
    display: block;
    min-width: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-feed-card .post-type-badge {
    flex: 0 0 auto;
    max-width: 45%;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(191, 207, 232, 0.88);
    background: #f8fbff;
    color: #4b6181;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-feed-card .work-card-header {
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.work-feed-card .post-author-line,
.work-feed-card .post-author-link {
    flex: 1 1 auto;
    min-width: 0;
}

.work-feed-card .post-author-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.work-feed-card .work-card-student {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-feed-card .work-card-type {
    flex: 0 0 auto;
    max-width: 42%;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-feed-card .badge.work-card-type {
    padding: 4px 8px;
    border: 1px solid rgba(191, 207, 232, 0.88);
    background: #f8fbff;
    color: #4b6181;
    font-weight: 700;
}

.work-feed-card .work-card-title {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #10233f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(15px * 1.35 * 2);
}

.post-card h3 {
    margin: 14px 0 10px;
    font-size: 20px;
    font-weight: 800;
}

.feed-post h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.45em * 2);
}

.feed-post .post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
}

.feed-post .feed-interact-btn {
    flex: 0 1 auto;
    min-width: 58px;
    max-width: 72px;
    height: 30px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.feed-post .post-action-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: auto;
}

.feed-post .post-action-stats > form,
.feed-post .post-action-stats > .icon-btn {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
}

.feed-post .post-action-stats .icon-btn {
    min-width: 42px;
    height: 30px;
    padding: 0 8px;
    border-radius: 15px;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    box-sizing: border-box;
}

.feed-post .post-action-stats .icon-btn i {
    font-size: 16px;
    line-height: 1;
}

.feed-post .post-action-stats .icon-btn span {
    font-size: 13px;
    line-height: 1;
}

.post-text {
    white-space: pre-wrap;
    line-height: 1.8;
    margin-bottom: 16px;
}

.post-text-brief {
    margin: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-media,
.my-work-media {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #eaf3ff;
    border: 1px solid rgba(14, 165, 233, 0.18);
    aspect-ratio: 3 / 4;
}

.feed-media-excellent-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(249, 115, 22, 0.96));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.26);
    pointer-events: none;
}

.feed-media-excellent-badge i {
    font-size: 11px;
    line-height: 1;
}

.feed-media-image,
.feed-media-video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    background: #0f172a;
    display: block;
}

.student-feed-card-media-img,
.student-feed-card-media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #eef6ff;
}

.student-feed-card-video-cover {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eef6ff;
}

.student-feed-card-video-cover.is-video-cover-error::after {
    content: "视频封面加载失败";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.96));
    color: #475569;
    font-size: 12px;
    text-align: center;
}

.student-feed-card-video-cover.is-video-cover-error .student-feed-card-media-video {
    opacity: 0;
}

.student-feed-card-video-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}

.student-feed-video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #0f172a;
}

.student-video-inline-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    background: #0f172a;
}

.student-video-placeholder {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: left;
    color: #fff;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
}

.student-video-play-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.student-video-placeholder strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.student-video-placeholder small {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.76);
}

.student-video-generated-poster {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #eef6ff;
}

.student-video-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
}

.student-feed-video-thumb.is-poster-loading .student-video-placeholder,
.student-feed-video-thumb.is-poster-failed .student-video-placeholder {
    display: flex;
}

.student-feed-video-thumb.is-inline-video-ready .student-video-placeholder,
.student-feed-video-thumb.is-poster-ready .student-video-placeholder {
    display: none;
}

.student-feed-video-thumb.is-inline-video-ready .student-video-inline-preview {
    opacity: 1;
}

.student-feed-video-thumb.is-poster-ready .student-video-inline-preview {
    opacity: 0;
}

.student-feed-card-media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
    color: #64748b;
    text-align: center;
}

.student-feed-card-media-placeholder i {
    font-size: 28px;
    line-height: 1;
    color: #94a3b8;
}

.student-feed-card-media-placeholder span {
    font-size: 12px;
    line-height: 1.5;
}

.media-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #f8fafc;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.7));
    pointer-events: none;
}

.media-loading-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid rgba(248, 250, 252, 0.32);
    border-top-color: rgba(248, 250, 252, 0.95);
    animation: mediaSpin .8s linear infinite;
}

.media-loading-text {
    font-size: 12px;
    letter-spacing: 0.02em;
}

.media-load-hint {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.76);
    color: #f8fafc;
    font-size: 12px;
    line-height: 1.4;
}

.media-load-hint a {
    color: #93c5fd;
    text-underline-offset: 2px;
}

@keyframes mediaSpin {
    to {
        transform: rotate(360deg);
    }
}

.icon-btn {
    border: 0;
    background: rgba(14, 165, 233, 0.08);
    border-radius: 999px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.icon-btn.static {
    color: var(--ink);
}

.icon-btn.liked {
    color: #e11d48;
    background: rgba(225, 29, 72, 0.12);
}

.icon-btn.js-comment-open {
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.icon-btn.js-comment-open:hover {
    transform: translateY(-1px);
    background: rgba(14, 165, 233, 0.15);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.16);
}

.comment-box {
    margin-top: 12px;
}

.comment-box-inline {
    margin-top: 10px;
}

.comment-panel {
    margin-top: 4px;
    border-top: 1px solid rgba(14, 165, 233, 0.12);
    padding-top: 10px;
}

.comment-toggle {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(13, 148, 136, 0.08)),
        rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.comment-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.28);
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(13, 148, 136, 0.12)),
        #fff;
}

.comment-toggle-main,
.comment-toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.comment-toggle-main i {
    color: #0284c7;
}

.comment-toggle-meta {
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.comment-toggle::after {
    content: "展开";
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.comment-panel[open] .comment-toggle {
    border-color: rgba(13, 148, 136, 0.28);
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.16), rgba(14, 165, 233, 0.12)),
        #fff;
}

.comment-panel[open] .comment-toggle::after {
    content: "收起";
}

.comment-panel[open] {
    padding: 10px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(241, 248, 255, 0.82));
}

.comment-panel-focus {
    animation: commentPanelPulse .7s ease;
}

.comment-toggle::-webkit-details-marker {
    display: none;
}

@keyframes commentPanelPulse {
    0% {
        box-shadow: 0 0 0 rgba(14, 165, 233, 0);
    }
    45% {
        box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.12);
    }
    100% {
        box-shadow: 0 0 0 rgba(14, 165, 233, 0);
    }
}

.comment-thread-list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.comment-thread-item {
    padding: 10px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #e2e8f0;
    display: grid;
    gap: 8px;
}

.comment-content-line {
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

.reply-panel {
    margin-top: 2px;
}

.reply-trigger {
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    color: #0f766e;
    font-weight: 700;
}

.reply-trigger::-webkit-details-marker {
    display: none;
}

.reply-form {
    margin-top: 8px;
}

.reply-list {
    margin-top: 6px;
    display: grid;
    gap: 8px;
}

.reply-item {
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    border: 1px dashed #d7deea;
}

.comment-empty {
    margin-top: 10px;
    color: #64748b;
    font-size: 13px;
}

.comment-list {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.comment-item {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fbff;
    display: grid;
    gap: 6px;
}

.comment-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.comment-item-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.comment-time {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.comment-like-form {
    margin: 0;
}

.comment-like-btn {
    border: 0;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 999px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink);
}

.comment-like-btn.liked {
    color: #e11d48;
    background: rgba(225, 29, 72, 0.12);
}

.rank-card,
.rule-item,
.profile-card,
.member-card,
.my-work-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rank-card div,
.rule-item,
.profile-card,
.my-work-card div {
    display: grid;
}

.my-work-card {
    display: grid;
    gap: 10px;
}

.my-work-card .my-work-main {
    display: grid;
    gap: 6px;
}

.my-work-card .my-work-main p {
    margin: 0;
}

.my-work-card .my-work-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.my-work-card .my-work-meta a {
    font-weight: 700;
}

.me-rank {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(34, 197, 94, 0.12));
}

.rule-box {
    display: grid;
    gap: 10px;
}

.rule-page-box {
    padding: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.12);
    box-shadow: var(--shadow-soft);
}

.rule-upgrade-note {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(13, 148, 136, 0.08));
}

.level-rule-list {
    display: grid;
    gap: 8px;
}

.level-rule-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(14, 165, 233, 0.14);
    font-size: 13px;
}

.level-rule-item span {
    color: #475569;
}

.language-game-card {
    border-left: 6px solid #0ea5e9;
    background: linear-gradient(140deg, rgba(14, 165, 233, 0.12), rgba(16, 185, 129, 0.1));
}

.game-wall-section {
    margin-top: 12px;
}

#weeklyGameWallSection.student-home-page {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
}

.game-wall-grid {
    margin-top: 2px;
}

.game-wall-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.game-answer-card {
    border-left: 0;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.game-answer-preview {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.game-answer-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.13);
}

.game-topic-card {
    border-left: 6px solid #0ea5e9;
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.12);
}

.game-topic-note {
    margin-top: 10px;
    color: #475569;
}

.game-wall-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-interaction-section {
    display: grid;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-preview-card,
#weeklyGameWallSection .student-weekly-question-card,
#weeklyGameWallSection .student-weekly-answer-card,
#weeklyGameWallSection .student-weekly-featured-card,
#weeklyGameWallSection .student-weekly-interaction-empty {
    border: 1px solid rgba(205, 229, 247, 0.88);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 26px rgba(45, 100, 145, 0.10);
}

#weeklyGameWallSection .student-weekly-preview-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    cursor: pointer;
    background:
        radial-gradient(circle at top right, rgba(229, 255, 247, 0.95), transparent 24%),
        radial-gradient(circle at 10% 0%, rgba(229, 242, 255, 0.98), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.97));
}

#weeklyGameWallSection .student-weekly-preview-card:focus-visible {
    outline: 2px solid rgba(47, 134, 246, 0.48);
    outline-offset: 2px;
}

#weeklyGameWallSection .student-weekly-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-preview-copy,
#weeklyGameWallSection .student-weekly-question-copy,
#weeklyGameWallSection .student-weekly-featured-main {
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-preview-copy h3,
#weeklyGameWallSection .student-weekly-question-copy h3,
#weeklyGameWallSection .student-weekly-answer-head h3,
#weeklyGameWallSection .student-weekly-featured-title h3 {
    margin: 0;
    color: #14213d;
    font-weight: 900;
}

#weeklyGameWallSection .student-weekly-preview-copy h3,
#weeklyGameWallSection .student-weekly-question-copy h3 {
    font-size: 22px;
    line-height: 1.24;
}

#weeklyGameWallSection .student-weekly-preview-title-row {
    display: grid;
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-answer-head h3,
#weeklyGameWallSection .student-weekly-featured-title h3 {
    font-size: 19px;
    line-height: 1.25;
}

#weeklyGameWallSection .student-weekly-preview-subtitle {
    margin: 0;
    color: #2f86f6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
}

#weeklyGameWallSection .student-weekly-preview-period-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#weeklyGameWallSection .student-weekly-preview-period-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f7fbff;
    border: 1px solid rgba(191, 212, 239, 0.92);
    color: #5d6f8e;
    font-size: 12px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-preview-meta,
#weeklyGameWallSection .student-weekly-question-meta,
#weeklyGameWallSection .student-weekly-interaction-entry-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-preview-meta span,
#weeklyGameWallSection .student-weekly-question-meta span,
#weeklyGameWallSection .student-weekly-interaction-entry-status span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f6faff;
    border: 1px solid rgba(191, 212, 239, 0.9);
    color: #60708a;
    font-size: 12px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-preview-summary {
    margin: 8px 0 0;
    color: #324560;
    font-size: 14px;
    line-height: 1.68;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#weeklyGameWallSection .student-weekly-preview-direction {
    margin: 0;
    color: #51627b;
    font-size: 13px;
    line-height: 1.45;
}

#weeklyGameWallSection .student-weekly-preview-art {
    position: relative;
    min-height: 82px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 236, 178, 0.88), transparent 22%),
        radial-gradient(circle at 18% 70%, rgba(191, 219, 254, 0.9), transparent 30%),
        linear-gradient(145deg, rgba(238, 247, 255, 0.98), rgba(248, 253, 255, 0.98));
    overflow: hidden;
}

#weeklyGameWallSection .student-weekly-preview-art span {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#weeklyGameWallSection .student-weekly-preview-art-book {
    left: 12px;
    bottom: 10px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #2f86f6;
    background: rgba(255, 255, 255, 0.98);
    font-size: 22px;
    box-shadow: 0 8px 14px rgba(47, 134, 246, 0.12);
}

#weeklyGameWallSection .student-weekly-preview-art-earth {
    right: 10px;
    top: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #16a34a;
    background: rgba(236, 253, 245, 0.98);
    font-size: 13px;
}

#weeklyGameWallSection .student-weekly-preview-art-stars {
    right: 14px;
    bottom: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #f59e0b;
    background: rgba(255, 251, 235, 0.96);
    font-size: 11px;
}

#weeklyGameWallSection .student-weekly-preview-boost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffdf4, #fff7d6);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: #c97b06;
    font-size: 13px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-preview-boost i {
    color: #f6b517;
    font-size: 16px;
}

#weeklyGameWallSection .student-weekly-preview-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

#weeklyGameWallSection .student-weekly-preview-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-preview-step {
    display: grid;
    grid-template-columns: 24px 40px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-height: 86px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(203, 220, 243, 0.9);
    background: rgba(255, 255, 255, 0.95);
}

#weeklyGameWallSection .student-weekly-preview-step.blue { background: linear-gradient(135deg, #eef6ff, #ffffff); }
#weeklyGameWallSection .student-weekly-preview-step.green { background: linear-gradient(135deg, #effcf5, #ffffff); }
#weeklyGameWallSection .student-weekly-preview-step.purple { background: linear-gradient(135deg, #f5f0ff, #ffffff); }
#weeklyGameWallSection .student-weekly-preview-step.gold { background: linear-gradient(135deg, #fff6e7, #ffffff); }

#weeklyGameWallSection .student-weekly-preview-step-no {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    background: linear-gradient(180deg, #4da1ff, #2f86f6);
}

#weeklyGameWallSection .student-weekly-preview-step.green .student-weekly-preview-step-no { background: linear-gradient(180deg, #3ad39a, #18a970); }
#weeklyGameWallSection .student-weekly-preview-step.purple .student-weekly-preview-step-no { background: linear-gradient(180deg, #8b6af6, #7c3aed); }
#weeklyGameWallSection .student-weekly-preview-step.gold .student-weekly-preview-step-no { background: linear-gradient(180deg, #ffb24d, #f97316); }

#weeklyGameWallSection .student-weekly-preview-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, #5aa8ff, #2f86f6);
    box-shadow: 0 10px 18px rgba(47, 134, 246, 0.18);
}

#weeklyGameWallSection .student-weekly-preview-step.green .student-weekly-preview-step-icon {
    background: linear-gradient(145deg, #51d79f, #18a970);
    box-shadow: 0 10px 18px rgba(24, 169, 112, 0.16);
}

#weeklyGameWallSection .student-weekly-preview-step.purple .student-weekly-preview-step-icon {
    background: linear-gradient(145deg, #9a7cff, #7c3aed);
    box-shadow: 0 10px 18px rgba(124, 58, 237, 0.16);
}

#weeklyGameWallSection .student-weekly-preview-step.gold .student-weekly-preview-step-icon {
    background: linear-gradient(145deg, #ffbd66, #f97316);
    box-shadow: 0 10px 18px rgba(249, 115, 22, 0.16);
}

#weeklyGameWallSection .student-weekly-preview-step-copy {
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-preview-step-copy strong {
    display: block;
    color: #1d4b9e;
    font-size: 15px;
    line-height: 1.28;
}

#weeklyGameWallSection .student-weekly-preview-step.green .student-weekly-preview-step-copy strong { color: #0f8a5d; }
#weeklyGameWallSection .student-weekly-preview-step.purple .student-weekly-preview-step-copy strong { color: #6d28d9; }
#weeklyGameWallSection .student-weekly-preview-step.gold .student-weekly-preview-step-copy strong { color: #d97706; }

#weeklyGameWallSection .student-weekly-preview-step-copy small {
    display: block;
    margin-top: 2px;
    color: #7b8da6;
    font-size: 12px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-preview-step-copy p {
    margin: 4px 0 0;
    color: #3f5170;
    font-size: 12px;
    line-height: 1.4;
}

#weeklyGameWallSection .student-weekly-preview-side {
    display: grid;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-preview-reminder {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff9e8, #fffef7);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #9a6106;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

#weeklyGameWallSection .student-weekly-preview-reminder i {
    flex: 0 0 auto;
    color: #f59e0b;
    font-size: 16px;
    margin-top: 1px;
}

#weeklyGameWallSection .student-weekly-preview-badge {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 84px;
    padding: 12px 10px;
    border-radius: 18px;
    color: #c15a06;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 247, 200, 0.98), rgba(255, 231, 146, 0.98) 68%, rgba(255, 255, 255, 0) 69%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 235, 0.98));
    border: 1px solid rgba(245, 158, 11, 0.18);
    box-shadow: inset 0 0 0 4px rgba(255, 241, 186, 0.65);
    text-align: center;
}

#weeklyGameWallSection .student-weekly-preview-badge-top,
#weeklyGameWallSection .student-weekly-preview-badge span {
    font-size: 13px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-preview-badge strong {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 900;
    color: #ef5f14;
}

#weeklyGameWallSection .student-weekly-preview-tip {
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(203, 220, 243, 0.86);
    background: linear-gradient(145deg, #f7fbff, #ffffff);
}

#weeklyGameWallSection .student-weekly-preview-tip-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2f86f6;
    font-size: 15px;
    font-weight: 900;
}

#weeklyGameWallSection .student-weekly-preview-tip-title i {
    color: #fbbf24;
    font-size: 18px;
}

#weeklyGameWallSection .student-weekly-preview-tip p {
    margin: 6px 0 0;
    color: #324560;
    font-size: 13px;
    line-height: 1.55;
}

#weeklyGameWallSection .student-weekly-preview-honor {
    display: grid;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-preview-honor-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2f86f6;
    font-size: 13px;
    font-weight: 900;
}

#weeklyGameWallSection .student-weekly-preview-honor-head i {
    color: #f59e0b;
    font-size: 16px;
}

#weeklyGameWallSection .student-weekly-preview-honor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-preview-honor-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 56px;
    padding: 10px 11px;
    border-radius: 16px;
    border: 1px solid rgba(213, 226, 243, 0.86);
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#weeklyGameWallSection button.student-weekly-preview-honor-item:active { transform: translateY(1px); background: #f7fbff; }
#weeklyGameWallSection button.student-weekly-preview-honor-item:focus-visible { outline: 3px solid rgba(47, 134, 246, 0.3); outline-offset: 2px; }

#weeklyGameWallSection .student-weekly-preview-honor-item i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#weeklyGameWallSection .student-weekly-preview-honor-item.gold i { background: #fff7dd; color: #e7a10b; }
#weeklyGameWallSection .student-weekly-preview-honor-item.green i { background: #ecfdf3; color: #18a970; }
#weeklyGameWallSection .student-weekly-preview-honor-item.purple i { background: #f1ebff; color: #7c3aed; }
#weeklyGameWallSection .student-weekly-preview-honor-item.pink i { background: #ffe8f0; color: #ec4899; }

#weeklyGameWallSection .student-weekly-preview-honor-item strong {
    display: block;
    color: #163050;
    font-size: 14px;
    line-height: 1.3;
}

#weeklyGameWallSection .student-weekly-preview-honor-item span {
    display: block;
    margin-top: 2px;
    color: #73859c;
    font-size: 11px;
    line-height: 1.35;
}

#weeklyGameWallSection .student-weekly-preview-honor-item em {
    display: block;
    margin-top: 2px;
    color: #73859c;
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

#weeklyGameWallSection .student-weekly-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#weeklyGameWallSection .student-weekly-preview-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-preview-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f6faff;
    border: 1px solid rgba(191, 212, 239, 0.9);
    color: #536783;
    font-size: 13px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-preview-stats span.accent {
    color: #d97706;
    background: #fff7ed;
    border-color: rgba(249, 115, 22, 0.24);
}

#weeklyGameWallSection .student-weekly-preview-footer .btn {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-question-art {
    position: relative;
    min-height: 76px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 22%, rgba(153, 246, 228, 0.78), transparent 34%),
        radial-gradient(circle at 20% 80%, rgba(191, 219, 254, 0.9), transparent 42%),
        linear-gradient(145deg, rgba(236, 247, 255, 0.98), rgba(248, 252, 255, 0.96));
    overflow: hidden;
}

#weeklyGameWallSection .student-weekly-question-art span {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#weeklyGameWallSection .student-weekly-question-art .book {
    left: 10px;
    bottom: 8px;
    width: 40px;
    height: 40px;
    color: #2f86f6;
    background: rgba(255, 255, 255, 0.96);
    font-size: 18px;
}

#weeklyGameWallSection .student-weekly-question-art .earth {
    right: 8px;
    top: 8px;
    width: 28px;
    height: 28px;
    color: #22a76f;
    background: rgba(230, 252, 243, 0.96);
    font-size: 14px;
}

#weeklyGameWallSection .student-weekly-question-art .leaf {
    right: 14px;
    bottom: 10px;
    width: 24px;
    height: 24px;
    color: #84cc16;
    background: rgba(247, 254, 231, 0.98);
    font-size: 12px;
}

#weeklyGameWallSection .student-home-sort-pill[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

#weeklyGameWallSection .student-weekly-interaction-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 22px 18px;
    text-align: center;
    color: #64748b;
}

#weeklyGameWallSection .student-weekly-interaction-empty strong {
    color: #14213d;
    font-size: 17px;
}

#weeklyGameWallSection .student-weekly-interaction-detail {
    display: grid;
    gap: 12px;
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

#weeklyGameWallSection .student-weekly-interaction-detail[hidden] {
    display: none !important;
}

#weeklyGameWallSection.weekly-game-detail-open .student-weekly-preview-card {
    display: none;
}

#weeklyGameWallSection.weekly-game-detail-open .student-home-quick-nav {
    display: none;
}

#weeklyGameWallSection .student-weekly-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

#weeklyGameWallSection .student-weekly-detail-back {
    position: static;
    left: auto;
    top: auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    padding: 0;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: rgba(218, 226, 238, 0.9);
    background: rgba(255, 255, 255, 0.96);
    color: #2f86f6;
    font-size: 28px;
}

#weeklyGameWallSection .student-weekly-detail-back span {
    transform: translateY(-1px);
}

#weeklyGameWallSection .student-weekly-question-card,
#weeklyGameWallSection .student-weekly-answer-card,
#weeklyGameWallSection .student-weekly-featured-card {
    padding: 16px;
}

#weeklyGameWallSection .student-weekly-answer-upgraded {
    display: grid;
    gap: 14px;
    min-width: 0;
    border-color: rgba(123, 92, 235, 0.22);
    background: linear-gradient(145deg, #ffffff 0%, #f7f4ff 100%);
}

#weeklyGameWallSection .student-weekly-answer-upgraded .student-weekly-answer-head {
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-answer-upgraded .student-weekly-answer-stage-note {
    margin: 0;
    white-space: normal;
    word-break: break-word;
}

#weeklyGameWallSection .student-weekly-answer-upgraded .btn {
    width: 100%;
    min-height: 44px;
}

#weeklyGameWallSection .student-weekly-question-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-bottom: 8px;
}

#weeklyGameWallSection .student-weekly-question-phase {
    color: #2563eb !important;
    background: #eaf4ff !important;
    border-color: rgba(37, 99, 235, 0.24) !important;
}

#weeklyGameWallSection .student-weekly-question-remain {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #179a63;
    font-size: 12px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-question-rows {
    display: grid;
    gap: 0;
}

#weeklyGameWallSection .student-weekly-question-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(70, 110, 170, 0.18);
}

#weeklyGameWallSection .student-weekly-question-row:first-child {
    padding-top: 0;
}

#weeklyGameWallSection .student-weekly-question-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#weeklyGameWallSection .student-weekly-question-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-question-tag i {
    font-size: 16px;
    line-height: 1;
}

#weeklyGameWallSection .student-weekly-question-tag.blue { background: #e8f1ff; color: #2f86f6; }
#weeklyGameWallSection .student-weekly-question-tag.green { background: #eafaf1; color: #18a970; }
#weeklyGameWallSection .student-weekly-question-tag.gold { background: #fff6dc; color: #e7a10b; }
#weeklyGameWallSection .student-weekly-question-tag.purple { background: #f1ebff; color: #8b5cf6; }
#weeklyGameWallSection .student-weekly-question-tag.slate { background: #edf4ff; color: #5678b1; }

#weeklyGameWallSection .student-weekly-question-text {
    min-width: 0;
    color: #23324d;
    font-size: 14px;
    line-height: 1.65;
    word-break: break-word;
}

#weeklyGameWallSection .student-weekly-answer-head,
#weeklyGameWallSection .student-weekly-featured-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#weeklyGameWallSection .student-weekly-answer-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#weeklyGameWallSection .student-weekly-answer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #179a63;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

#weeklyGameWallSection .student-weekly-answer-clear {
    border: 1px solid rgba(191, 212, 239, 0.9);
    background: #fff;
    color: #4d6385;
    border-radius: 999px;
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-clear:disabled {
    opacity: .5;
}

#weeklyGameWallSection .student-weekly-answer-form {
    display: grid;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-answer-stage-note {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(191, 212, 239, 0.76);
    background: #f7fbff;
    color: #60708a;
    font-size: 13px;
    line-height: 1.58;
}

#weeklyGameWallSection .student-weekly-answer-input {
    min-height: 118px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: #14213d;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    background: #fcfeff;
}

#weeklyGameWallSection .student-weekly-answer-input::placeholder {
    color: #94a3b8;
}

#weeklyGameWallSection .student-weekly-answer-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-answer-hint {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

#weeklyGameWallSection .student-weekly-answer-count {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-answer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-answer-actions .btn {
    min-height: 44px;
    border-radius: 23px;
    font-size: 14px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-featured-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#weeklyGameWallSection .student-weekly-featured-title > span {
    width: 32px;
    height: 32px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2f86f6;
    background: #eaf4ff;
    font-size: 16px;
}

#weeklyGameWallSection .student-weekly-featured-more {
    border: 0;
    padding: 0;
    background: transparent;
    color: #2f86f6;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#weeklyGameWallSection .student-weekly-featured-list {
    display: grid;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-featured-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 52px;
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-radius: 16px;
    background: linear-gradient(145deg, #f8fbff, #ffffff);
    border: 1px solid #edf2f7;
}

#weeklyGameWallSection .student-weekly-featured-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #dbeafe;
}

#weeklyGameWallSection .student-weekly-featured-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-featured-line strong {
    min-width: 0;
    color: #14213d;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-featured-line em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #179a63;
    background: #ecfdf3;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-featured-main small {
    display: block;
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
}

#weeklyGameWallSection .student-weekly-featured-main p {
    margin: 6px 0 0;
    color: #30435f;
    font-size: 13px;
    line-height: 1.52;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#weeklyGameWallSection .student-weekly-featured-side {
    display: flex;
    justify-content: flex-end;
}

#weeklyGameWallSection .student-weekly-featured-side span {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22a76f;
    background: radial-gradient(circle at 30% 25%, #8df0c2 0%, #31b97c 54%, #1e9d67 100%);
    box-shadow: 0 10px 18px rgba(34, 167, 111, 0.18);
    font-size: 20px;
}

#weeklyGameWallSection .student-weekly-featured-side span::before,
#weeklyGameWallSection .student-weekly-featured-side span::after {
    position: absolute;
    color: #f7c948;
    font-size: 10px;
    line-height: 1;
}

#weeklyGameWallSection .student-weekly-featured-side span::before {
    content: '✦';
    top: -3px;
    left: 4px;
}

#weeklyGameWallSection .student-weekly-featured-side span::after {
    content: '✦';
    top: 2px;
    right: 3px;
}

#weeklyGameWallSection .student-weekly-featured-side[data-honor-type="FEATURED"] span {
    color: #f59e0b;
    background: radial-gradient(circle at 30% 25%, #fff0ae 0%, #ffd76b 56%, #ffbf47 100%);
    box-shadow: 0 10px 18px rgba(245, 158, 11, 0.16);
}

#weeklyGameWallSection .student-weekly-featured-side[data-honor-type="FEATURED"] span::before,
#weeklyGameWallSection .student-weekly-featured-side[data-honor-type="FEATURED"] span::after {
    color: #fff4c6;
}

#weeklyGameWallSection .student-weekly-featured-empty,
#weeklyGameWallSection .student-weekly-featured-note {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

#weeklyGameWallSection .student-weekly-featured-empty {
    padding: 14px;
    border-radius: 16px;
    background: rgba(241, 248, 252, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    text-align: center;
}

#weeklyGameWallSection.weekly-game-answer-list-open .student-home-hero-card,
#weeklyGameWallSection.weekly-game-answer-list-open .student-home-quick-nav,
#weeklyGameWallSection.weekly-game-answer-list-open .student-weekly-preview-card,
#weeklyGameWallSection.weekly-game-answer-list-open .student-weekly-interaction-detail,
#weeklyGameWallSection.weekly-game-answer-list-open .student-weekly-my-answer-page,
#weeklyGameWallSection.weekly-game-answer-list-open .dubbing-wall-section,
#weeklyGameWallSection.weekly-game-answer-list-open .game-hot-top3-card,
#weeklyGameWallSection.weekly-game-answer-list-open .student-weekly-interaction-empty {
    display: none !important;
}

#weeklyGameWallSection.weekly-game-my-answer-open .student-home-hero-card,
#weeklyGameWallSection.weekly-game-my-answer-open .student-home-quick-nav,
#weeklyGameWallSection.weekly-game-my-answer-open .student-weekly-preview-card,
#weeklyGameWallSection.weekly-game-my-answer-open .student-weekly-interaction-detail,
#weeklyGameWallSection.weekly-game-my-answer-open .student-weekly-answer-list-page,
#weeklyGameWallSection.weekly-game-my-answer-open .dubbing-wall-section,
#weeklyGameWallSection.weekly-game-my-answer-open .game-hot-top3-card,
#weeklyGameWallSection.weekly-game-my-answer-open .student-weekly-interaction-empty {
    display: none !important;
}

#weeklyGameWallSection .student-weekly-my-answer-page {
    display: grid;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

#weeklyGameWallSection .student-weekly-my-answer-page[hidden] {
    display: none !important;
}

#weeklyGameWallSection .student-weekly-my-answer-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#weeklyGameWallSection .student-weekly-my-answer-back {
    width: 40px;
    height: 40px;
    min-width: 40px;
    color: #2f86f6;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#weeklyGameWallSection .student-weekly-my-answer-back i {
    font-size: 18px;
    line-height: 1;
}

#weeklyGameWallSection .student-weekly-answer-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 212, 239, 0.96);
    background: rgba(255, 255, 255, 0.94);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

#weeklyGameWallSection .student-weekly-my-answer-card,
#weeklyGameWallSection .student-weekly-my-answer-empty {
    display: grid;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(220, 230, 243, 0.9);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

#weeklyGameWallSection .student-weekly-my-answer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-my-answer-head h3 {
    margin: 0;
    color: #12233f;
    font-size: 20px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-my-answer-head p {
    margin: 6px 0 0;
    color: #179a63;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-my-answer-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #eefbf4;
    color: #179a63;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-my-answer-author {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

#weeklyGameWallSection .student-weekly-my-answer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #dbeafe;
}

#weeklyGameWallSection .student-weekly-my-answer-author-copy {
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-my-answer-author-copy strong {
    display: block;
    color: #14213d;
    font-size: 16px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-my-answer-author-copy small {
    display: block;
    margin-top: 4px;
    color: #7a8798;
    font-size: 12px;
    line-height: 1.45;
}

#weeklyGameWallSection .student-weekly-my-answer-tip {
    padding: 10px 12px;
    border-radius: 14px;
    background: #eefbf4;
    color: #179a63;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

#weeklyGameWallSection .student-weekly-my-answer-body {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(191, 212, 239, 0.72);
    background: #f8fbff;
    color: #1f2a44;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

#weeklyGameWallSection .student-weekly-my-answer-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #61718c;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-my-answer-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#weeklyGameWallSection .student-weekly-my-answer-stats em {
    font-style: normal;
}

#weeklyGameWallSection .student-weekly-my-answer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-my-answer-actions .btn {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 999px;
}

#weeklyGameWallSection .student-weekly-my-answer-empty strong {
    color: #12233f;
    font-size: 18px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-my-answer-empty p {
    margin: 0;
    color: #6a7890;
    font-size: 14px;
    line-height: 1.65;
}

#weeklyGameWallSection .student-weekly-answer-list-page {
    display: grid;
    gap: 12px;
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

#weeklyGameWallSection .student-weekly-answer-list-page[hidden] {
    display: none !important;
}

#weeklyGameWallSection .student-weekly-answer-list-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#weeklyGameWallSection .student-weekly-answer-list-back {
    width: 40px;
    height: 40px;
    min-width: 40px;
    color: #2f86f6;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#weeklyGameWallSection .student-weekly-answer-list-back i {
    font-size: 18px;
    line-height: 1;
}

#weeklyGameWallSection .student-weekly-answer-filter-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#weeklyGameWallSection .student-weekly-answer-filter-tabs::-webkit-scrollbar {
    display: none;
}

#weeklyGameWallSection .student-weekly-answer-filter {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(191, 212, 239, 0.9);
    background: rgba(255, 255, 255, 0.94);
    color: #61718c;
    font-size: 13px;
    font-weight: 700;
    transition: all .18s ease;
}

#weeklyGameWallSection .student-weekly-answer-filter.active {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.32);
    background: #ecf5ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

#weeklyGameWallSection .student-weekly-answer-list-empty {
    padding: 16px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    background: rgba(247, 250, 252, 0.92);
    text-align: center;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

#weeklyGameWallSection .student-weekly-answer-list-stack,
#weeklyGameWallSection .student-weekly-answer-thread-list {
    display: grid;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-answer-section {
    display: grid;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-answer-section-head {
    display: grid;
    gap: 6px;
}

#weeklyGameWallSection .student-weekly-answer-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #12233f;
}

#weeklyGameWallSection .student-weekly-answer-section-title i {
    color: #2f86f6;
    font-size: 18px;
}

#weeklyGameWallSection .student-weekly-answer-section-title strong {
    font-size: 18px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-answer-section-note {
    color: #6a7890;
    font-size: 12px;
    line-height: 1.6;
}

#weeklyGameWallSection .student-weekly-answer-flow-card,
#weeklyGameWallSection .student-weekly-answer-thread-block {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(220, 230, 243, 0.9);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

#weeklyGameWallSection .student-weekly-answer-flow-card-own {
    border-color: rgba(191, 219, 254, 0.95);
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.08);
}

#weeklyGameWallSection .student-weekly-answer-flow-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

#weeklyGameWallSection .student-weekly-answer-flow-avatar,
#weeklyGameWallSection .student-weekly-answer-thread-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #dbeafe;
}

#weeklyGameWallSection .student-weekly-answer-flow-main,
#weeklyGameWallSection .student-weekly-answer-thread-main,
#weeklyGameWallSection .student-weekly-answer-flow-comment-main,
#weeklyGameWallSection .student-weekly-answer-discussion-main,
#weeklyGameWallSection .student-weekly-answer-thread-reply-main {
    min-width: 0;
}

#weeklyGameWallSection .student-weekly-answer-flow-line,
#weeklyGameWallSection .student-weekly-answer-flow-comment-line,
#weeklyGameWallSection .student-weekly-answer-discussion-line,
#weeklyGameWallSection .student-weekly-answer-thread-line,
#weeklyGameWallSection .student-weekly-answer-thread-reply-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

#weeklyGameWallSection .student-weekly-answer-flow-line strong,
#weeklyGameWallSection .student-weekly-answer-thread-line strong {
    color: #14213d;
    font-size: 16px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-answer-flow-main small,
#weeklyGameWallSection .student-weekly-answer-thread-line small,
#weeklyGameWallSection .student-weekly-answer-thread-line span,
#weeklyGameWallSection .student-weekly-answer-discussion-line span,
#weeklyGameWallSection .student-weekly-answer-thread-reply-line small {
    color: #7a8798;
    font-size: 12px;
    line-height: 1.45;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge[data-honor-type="FEATURED"] {
    color: #179a63;
    background: #ecfdf3;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge[data-honor-type="LIKE_STAR"] {
    color: #15803d;
    background: #eafbf2;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge[data-honor-type="HOT_COMMENT"] {
    color: #7c3aed;
    background: #f3ecff;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge[data-honor-type="TEACHER_PICK"] {
    color: #d97706;
    background: #fff6dc;
}

#weeklyGameWallSection .student-weekly-answer-flow-badge-own {
    color: #0f766e;
    background: #e9fbf7;
}

#weeklyGameWallSection .student-weekly-answer-flow-status {
    display: flex;
    justify-content: flex-end;
}

#weeklyGameWallSection .student-weekly-answer-flow-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eefbf4;
    color: #179a63;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

#weeklyGameWallSection .student-weekly-answer-flow-side,
#weeklyGameWallSection .student-weekly-answer-thread-more {
    flex: 0 0 auto;
}

#weeklyGameWallSection .student-weekly-answer-flow-side span {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    background: radial-gradient(circle at 30% 25%, #fff0ae 0%, #ffd76b 56%, #ffbf47 100%);
    box-shadow: 0 10px 18px rgba(245, 158, 11, 0.16);
    font-size: 20px;
}

#weeklyGameWallSection .student-weekly-answer-flow-side span::before,
#weeklyGameWallSection .student-weekly-answer-flow-side span::after {
    content: '✦';
    position: absolute;
    color: #f7c948;
    font-size: 10px;
    line-height: 1;
}

#weeklyGameWallSection .student-weekly-answer-flow-side span::before {
    top: -3px;
    left: 4px;
}

#weeklyGameWallSection .student-weekly-answer-flow-side span::after {
    top: 3px;
    right: 3px;
}

#weeklyGameWallSection .student-weekly-answer-flow-side[data-honor-type="LIKE_STAR"] span {
    color: #22a76f;
    background: radial-gradient(circle at 30% 25%, #8df0c2 0%, #31b97c 54%, #1e9d67 100%);
    box-shadow: 0 10px 18px rgba(34, 167, 111, 0.18);
}

#weeklyGameWallSection .student-weekly-answer-flow-side[data-honor-type="HOT_COMMENT"] span {
    color: #7c3aed;
    background: radial-gradient(circle at 30% 25%, #ece3ff 0%, #bf9cff 55%, #8b5cf6 100%);
    box-shadow: 0 10px 18px rgba(124, 58, 237, 0.18);
}

#weeklyGameWallSection .student-weekly-answer-flow-side[data-honor-type="TEACHER_PICK"] span {
    color: #2563eb;
    background: radial-gradient(circle at 30% 25%, #e0eaff 0%, #bbcbff 56%, #7ea1ff 100%);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

#weeklyGameWallSection .student-weekly-answer-flow-content {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid rgba(220, 230, 243, 0.9);
}

#weeklyGameWallSection .student-weekly-answer-flow-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(191, 212, 239, 0.9);
    color: #2f86f6;
    font-size: 12px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-answer-flow-text {
    width: 100%;
    margin-top: 10px;
    color: #1f2a44;
    font-size: 15px;
    line-height: 1.68;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
    max-height: 8.4em;
}

#weeklyGameWallSection .student-weekly-answer-flow-text.is-expanded {
    max-height: none;
}

#weeklyGameWallSection .student-weekly-answer-flow-more {
    margin-top: 10px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-flow-teacher {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #eefbf4;
    color: #179a63;
    font-size: 13px;
    line-height: 1.6;
}

#weeklyGameWallSection .student-weekly-answer-flow-teacher i {
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

#weeklyGameWallSection .student-weekly-answer-flow-comments-preview,
#weeklyGameWallSection .student-weekly-answer-discussion-list,
#weeklyGameWallSection .student-weekly-answer-thread-replies {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

#weeklyGameWallSection .student-weekly-answer-flow-comment,
#weeklyGameWallSection .student-weekly-answer-discussion-item,
#weeklyGameWallSection .student-weekly-answer-thread-reply {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

#weeklyGameWallSection .student-weekly-answer-flow-comment-avatar,
#weeklyGameWallSection .student-weekly-answer-discussion-avatar,
#weeklyGameWallSection .student-weekly-answer-thread-reply-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #dbeafe;
}

#weeklyGameWallSection .student-weekly-answer-flow-comment-line strong,
#weeklyGameWallSection .student-weekly-answer-discussion-line strong,
#weeklyGameWallSection .student-weekly-answer-thread-reply-line strong {
    color: #24364f;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-flow-comment-line em,
#weeklyGameWallSection .student-weekly-answer-discussion-line em,
#weeklyGameWallSection .student-weekly-answer-thread-reply-line em {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff4d8;
    color: #d97706;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-flow-comment p,
#weeklyGameWallSection .student-weekly-answer-discussion-main p,
#weeklyGameWallSection .student-weekly-answer-thread-reply-main p {
    margin: 3px 0 0;
    color: #4c5f7a;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
}

#weeklyGameWallSection .student-weekly-answer-flow-comments-empty,
#weeklyGameWallSection .student-weekly-answer-discussion-empty {
    margin-top: 12px;
    color: #7a8798;
    font-size: 13px;
    line-height: 1.6;
}

#weeklyGameWallSection .student-weekly-answer-flow-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

#weeklyGameWallSection .student-weekly-answer-flow-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#weeklyGameWallSection .student-weekly-answer-flow-stats form {
    margin: 0;
}

#weeklyGameWallSection .student-weekly-answer-flow-stat,
#weeklyGameWallSection .student-weekly-answer-flow-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 212, 239, 0.9);
    background: #ffffff;
    color: #526173;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-flow-stat.liked {
    color: #e11d48;
}

#weeklyGameWallSection .student-weekly-answer-flow-action {
    color: #2563eb;
}

#weeklyGameWallSection .student-weekly-answer-discussion {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(220, 230, 243, 0.9);
    background: #fbfdff;
    padding: 12px;
}

#weeklyGameWallSection .student-weekly-answer-discussion > summary {
    cursor: pointer;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-discussion-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
}

#weeklyGameWallSection .student-weekly-answer-discussion-form .form-control {
    min-width: 0;
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
}

#weeklyGameWallSection .student-weekly-answer-discussion-form .btn {
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-discussion-lock,
#weeklyGameWallSection .student-weekly-answer-discussion-empty {
    color: #7a8798;
    font-size: 13px;
    line-height: 1.6;
}

#weeklyGameWallSection .student-weekly-answer-discussion-more {
    justify-self: start;
    margin-top: 2px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-thread-block {
    display: grid;
    gap: 12px;
}

#weeklyGameWallSection .student-weekly-answer-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

#weeklyGameWallSection .student-weekly-answer-thread-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
}

#weeklyGameWallSection .student-weekly-answer-thread-title strong {
    color: #14213d;
    font-size: 18px;
    font-weight: 800;
}

#weeklyGameWallSection .student-weekly-answer-thread-title i {
    color: #f97316;
    font-size: 18px;
}

#weeklyGameWallSection .student-weekly-answer-thread-more {
    border: 0;
    padding: 0;
    background: transparent;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-thread-item {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(220, 230, 243, 0.9);
    background: #fbfdff;
}

#weeklyGameWallSection .student-weekly-answer-thread-answer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

#weeklyGameWallSection .student-weekly-answer-thread-line em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2563eb;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

#weeklyGameWallSection .student-weekly-answer-thread-main p {
    margin: 6px 0 0;
    color: #1f2a44;
    font-size: 14px;
    line-height: 1.62;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-answer-actions {
    margin-top: 4px;
}

.game-hot-top3-card {
    border-left: 4px solid #0f87c9;
    background: #ffffff;
    padding: 12px 14px;
}

.game-hot-top3-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-hot-top3-list > * {
    text-decoration: none;
    color: inherit;
}

.game-hot-top3-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #f0f2f5;
    transition: background-color .16s ease, border-color .16s ease;
}

.game-hot-top3-item:hover {
    background: #e6eaf0;
    border-color: #cbd5e1;
}

.game-hot-top3-rank {
    min-width: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    text-align: left;
}

.game-hot-top3-word {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-hot-top3-weight {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: right;
    font-size: 15px;
    color: #333333;
    font-weight: 700;
}

.game-hot-top3-item.self-hit {
    background: #007bff;
    border-color: #007bff;
}

.game-hot-top3-item.self-hit .game-hot-top3-rank,
.game-hot-top3-item.self-hit .game-hot-top3-word,
.game-hot-top3-item.self-hit .game-hot-top3-weight {
    color: #fff;
    font-weight: 800;
}

.game-hot-top3-item.self-hit .game-hot-top3-word {
    font-size: 16px;
}

.game-hot-top3-item.disabled {
    cursor: not-allowed;
    color: #94a3b8;
}

.game-hot-top3-item.disabled:hover {
    background: #f0f2f5;
    border-color: #e2e8f0;
}

.game-hot-top3-item.disabled .game-hot-top3-rank,
.game-hot-top3-item.disabled .game-hot-top3-word,
.game-hot-top3-item.disabled .game-hot-top3-weight {
    color: #94a3b8;
}

.game-hot-top3-tip {
    margin-top: 8px;
    color: #007bff;
    font-weight: 600;
}

.dubbing-wall-section {
    border-left: 4px solid #0ea5e9;
    background: #ffffff;
}

.dubbing-activity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dubbing-activity-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    overflow: hidden;
    background: #f8fbff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.dubbing-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #dbeafe;
}

.dubbing-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d4ed8;
    font-weight: 700;
    letter-spacing: 0.5px;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.1)),
        #eaf3ff;
}

.dubbing-card-body {
    padding: 10px 12px 12px;
    display: grid;
    gap: 6px;
}

.dubbing-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.dubbing-meta {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.dubbing-meta span {
    white-space: nowrap;
    color: #64748b;
}

.dubbing-meta strong {
    color: #0f172a;
    font-weight: 600;
    min-width: 0;
}

.dubbing-card-actions {
    margin-top: 2px;
}

.dubbing-detail-dialog {
    position: relative;
    z-index: 90001;
    pointer-events: auto;
    width: min(94vw, 980px);
    max-width: min(94vw, 980px);
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.dubbing-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
}

.dubbing-detail-modal.show {
    display: flex !important;
}

.dubbing-detail-modal:not(.show) {
    pointer-events: none;
}

.dubbing-detail-modal .modal-content {
    max-height: 88vh;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dubbing-detail-body,
.dubbing-detail-modal .modal-body {
    display: block;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    pointer-events: auto;
}

.dubbing-detail-media {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    background: #f8fafc;
}

.dubbing-detail-video {
    width: 100%;
    max-height: 360px;
    border-radius: 10px;
    background: #000;
    display: block;
}

.dubbing-detail-section {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.dubbing-role-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
    color: #334155;
}

.dubbing-role-card {
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    padding: 10px;
    background: #f8fbff;
    display: grid;
    gap: 6px;
}

.dubbing-role-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dubbing-role-claimed {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.dubbing-role-mine {
    border-color: #93c5fd;
    background: #eaf3ff;
}

.dubbing-role-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dubbing-line-table-wrap {
    overflow-x: auto;
}

.dubbing-line-table {
    min-width: 560px;
    margin-bottom: 0;
}

.dubbing-my-section {
    border-left: 4px solid #0ea5e9;
}

.dubbing-my-task-list {
    display: grid;
    gap: 10px;
}

.dubbing-my-task-item {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px 12px;
    display: grid;
    gap: 5px;
}

.dubbing-recorder-panel {
    display: grid;
    gap: 10px;
}

.dubbing-recorder-header {
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #f8fbff;
    padding: 10px;
    display: grid;
    gap: 6px;
}

.dubbing-recorder-section {
    display: grid;
    gap: 8px;
}

.dubbing-recorder-status {
    font-weight: 700;
    color: #0f172a;
}

.dubbing-recorder-tip {
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
}

.dubbing-recorder-lines {
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #f8fbff;
    padding: 8px;
    max-height: 220px;
    overflow-y: auto;
    display: grid;
    gap: 8px;
}

.dubbing-recorder-line {
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px;
    line-height: 1.45;
    display: grid;
    gap: 6px;
    transform-origin: left center;
    width: calc(100% * var(--line-weight, 1));
    min-width: 68%;
}

.dubbing-line-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e7eef8;
    overflow: hidden;
}

.dubbing-line-track-bar {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: 999px;
    background: #8bb6ff;
}

.dubbing-line-meta {
    font-size: 12px;
    color: #64748b;
}

.dubbing-line-text {
    font-size: 15px;
    color: #0f172a;
    line-height: 1.55;
    word-break: break-word;
}

.dubbing-current-line-badge {
    display: none;
    width: fit-content;
    background: #0ea5e9;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    padding: 2px 8px;
}

.dubbing-recorder-line.active {
    border-color: #0ea5e9;
    background: #eef8ff;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.15);
    width: 100%;
}

.dubbing-recorder-line.active .dubbing-current-line-badge {
    display: inline-flex;
}

.dubbing-recorder-line.active .dubbing-line-track-bar {
    width: 100%;
    background: #0ea5e9;
}

.dubbing-record-track {
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #f8fbff;
    padding: 8px;
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    gap: 8px;
}

.dubbing-record-track-item {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 8px;
    display: grid;
    gap: 6px;
}

.dubbing-record-track-status {
    font-size: 13px;
    color: #334155;
}

.dubbing-record-track-audio {
    width: 100%;
    max-width: 100%;
}

.dubbing-recorder-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.dubbing-recorder-controls .btn {
    min-height: 44px;
    font-size: 13px;
    width: 100%;
}

.dubbing-btn-start,
.dubbing-btn-stop,
.dubbing-btn-submit {
    grid-column: 1 / -1;
}

.dubbing-recording-status {
    font-weight: 600;
    color: #0f172a;
}

.dubbing-record-audio {
    width: 100%;
    max-width: 100%;
    display: block;
}

.dubbing-record-submitted {
    color: #0369a1;
    font-weight: 700;
}

.dubbing-workbench {
    display: grid;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.dubbing-workbench-header {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #0f172a;
}

.dubbing-workbench-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.dubbing-workbench-left,
.dubbing-workbench-right {
    min-width: 0;
    min-height: 0;
}

.dubbing-workbench-footer {
    min-height: 76px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.dubbing-current-cue {
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
    min-width: 0;
}

.dubbing-current-cue-time {
    font-size: 12px;
    color: #64748b;
}

.dubbing-current-cue-role {
    font-size: 13px;
    color: #0f172a;
    font-weight: 700;
}

.dubbing-current-cue-text {
    font-size: 18px;
    line-height: 1.6;
    color: #0f172a;
    font-weight: 600;
}

.dubbing-current-cue-status {
    font-size: 13px;
    color: #0369a1;
    font-weight: 600;
}

.dubbing-record-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.dubbing-record-controls .btn {
    min-height: 44px;
}

.dubbing-record-control-grid {
    align-items: stretch;
}

.dubbing-record-control-grid .btn {
    width: 100%;
}

.dubbing-mini-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    width: 100%;
}

.dubbing-mini-timeline-item {
    display: grid;
    gap: 2px;
    border: 1px solid #dbe7f5;
    background: #f8fbff;
    color: #334155;
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 92px;
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
}

.dubbing-mini-timeline-item.mine {
    border-color: #93c5fd;
    background: #eaf3ff;
    color: #1d4ed8;
}

.dubbing-mini-timeline-item.submitted {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.dubbing-mini-timeline-item.other {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.dubbing-mini-timeline-item.active {
    border-color: #0ea5e9;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.35);
}

.dubbing-all-lines-toggle {
    justify-self: start;
}

.dubbing-all-lines-panel {
    border: 1px dashed #d1def2;
    border-radius: 10px;
    padding: 8px;
    background: #fbfdff;
}

.dubbing-voice-line-card {
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px;
    margin-bottom: 10px;
}

.dubbing-voice-line-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dubbing-voice-line-text {
    font-size: 15px;
    line-height: 1.6;
    color: #0f172a;
    margin-bottom: 8px;
}

.dubbing-voice-line-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.dubbing-voice-line-actions .btn,
.dubbing-voice-recorder-panel .btn {
    min-height: 44px;
}

.dubbing-voice-audio-list {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.dubbing-voice-audio-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.dubbing-voice-audio-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.dubbing-voice-audio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dubbing-voice-audio-actions audio {
    width: 180px;
    max-width: 100%;
}

.dubbing-voice-recorder-panel {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.dubbing-landscape-tip {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
}

.dubbing-landscape-tip.dubbing-landscape-tip-open {
    display: flex;
}

.dubbing-landscape-tip-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    pointer-events: auto;
}

.dubbing-landscape-tip-dialog {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(92vw, 420px);
    max-height: 80vh;
    margin: 0;
    z-index: 100001;
    pointer-events: auto;
    overflow-y: auto;
    box-sizing: border-box;
}

.dubbing-landscape-tip .modal-content {
    border-radius: 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.dubbing-landscape-tip .modal-header,
.dubbing-landscape-tip .modal-body,
.dubbing-landscape-tip .modal-footer {
    pointer-events: auto;
}

.dubbing-landscape-tip-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dubbing-landscape-tip-actions .btn {
    min-height: 44px;
}

body.dubbing-modal-lock {
    overflow: hidden !important;
    touch-action: none;
}

body.dubbing-page-locked {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    touch-action: none;
}

.dubbing-abandon-btn {
    border-color: #f59e0b;
    color: #b45309;
}

.game-note-cover {
    position: relative;
    min-height: 150px;
    border-radius: 16px;
    padding: 14px 14px 12px;
    background:
        linear-gradient(160deg, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 0.96) 55%),
        #fff;
    border: 1px solid rgba(14, 165, 233, 0.18);
    overflow: hidden;
}

.game-note-cover::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 70%);
}

.game-note-cover-tag {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: #2563eb;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

.game-note-cover-text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.66;
    font-weight: 600;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-note-cover-text-full {
    -webkit-line-clamp: 6;
}

.game-my-answer-box {
    border-radius: 12px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(248, 251, 255, 0.95);
    padding: 10px 12px;
}

.weekly-game-modal-body {
    display: grid;
    gap: 12px;
}

.modal-game-grid {
    grid-template-columns: 1fr;
}

.feed-post .js-open-feed-interact {
    cursor: pointer;
}

.feed-interact-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: #0f172a;
}

.feed-interact-media .feed-media-image,
.feed-interact-media .feed-media-video {
    max-height: min(72vh, 720px);
    object-fit: contain;
    background: #000;
}

.feed-interact-media .feed-media-video {
    width: 100%;
}

.feed-interact-author {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
}

.feed-interact-head-main {
    flex: 1;
    min-width: 0;
}

.material-module-collapse {
    background: #fff;
}

.material-module-collapse > summary.material-module-summary {
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
    list-style: none;
}

.material-module-collapse > summary.material-module-summary::-webkit-details-marker {
    display: none;
}

.material-kpi-card {
    border-color: rgba(13, 110, 253, 0.24) !important;
    background: linear-gradient(180deg, rgba(13, 110, 253, 0.04), rgba(13, 110, 253, 0.01));
}

.material-table-pager {
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #f8fafc;
}

.feed-interact-head-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.feed-interact-author-link {
    text-decoration: none;
    color: #334155;
}

.feed-interact-author-link strong {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-interact-follow-box {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.feed-interact-dialog {
    margin: 0;
    max-width: none;
    min-height: 100vh;
}

.feed-interact-modal-content {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

.feed-interact-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0;
    overflow-y: auto;
}

.post-detail-content {
    padding: 8px 18px calc(126px + env(safe-area-inset-bottom));
}

.feed-interact-modal-header {
    min-height: 88px;
    padding: 20px 18px 10px;
    justify-content: flex-start;
    border-bottom: 0;
}

.feed-interact-modal-header .front-back-btn {
    top: 18px;
    left: 18px;
    transform: none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.96);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.feed-interact-modal-header .front-back-btn span {
    transform: translateY(-2px);
}

.feed-interact-modal-header .feed-interact-head-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 62px;
}

.feed-interact-author {
    margin-top: 0;
}

.feed-interact-author-link {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #0f172a;
}

.feed-interact-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    object-fit: cover;
    background: #f1f5f9;
    border: 1px solid rgba(191, 219, 254, 0.9);
}

.feed-interact-author-link strong {
    max-width: 150px;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}

.feed-interact-follow-box {
    margin-top: 0;
    flex: 0 0 auto;
}

.feed-interact-follow-box form {
    margin: 0;
}

.feed-interact-follow-box .btn,
.feed-interact-follow-placeholder {
    min-width: 84px;
    height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.42);
    background: #ffffff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.feed-interact-follow-box .btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.42);
    color: #475569;
    background: #ffffff;
}

.feed-interact-media {
    border-radius: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #f8fafc;
}

.feed-interact-media .feed-media-image,
.feed-interact-media .feed-media-video {
    width: 100%;
    max-height: none;
    border-radius: 16px;
    object-fit: contain;
    background: #f8fafc;
}

.feed-interact-post-title {
    margin: 0;
    font-size: clamp(28px, 7vw, 34px);
    line-height: 1.12;
    font-weight: 800;
    color: #0f172a;
    min-width: 0;
}

.feed-interact-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.feed-interact-work-type {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eef6ff;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 700;
}

.feed-interact-post-text {
    margin: 0 0 22px;
    color: #334155;
    font-size: 16px;
    line-height: 1.75;
    white-space: pre-wrap;
}

.feed-teacher-review-card {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
}

.feed-teacher-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #047857;
}

.feed-teacher-review-head strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
}

.feed-teacher-review-head > span {
    color: #64748b;
    font-size: 13px;
}

.feed-teacher-review-card p {
    margin: 0;
    color: #1e293b;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feed-interact-comment-box .comment-panel {
    border: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 12px 0 0;
    background: transparent;
    box-shadow: none;
}

.feed-interact-comment-box .comment-thread-list {
    display: grid;
    gap: 0;
}

.feed-interact-comment-panel {
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
}

.feed-interact-comment-box .comment-thread-item,
.feed-interact-comment-box .reply-item {
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
}

.feed-interact-comment-box .reply-item {
    margin-left: 48px;
}

.feed-interact-comment-box .comment-item-head {
    align-items: flex-start;
    gap: 12px;
}

.feed-interact-comment-box .comment-item-author {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.feed-detail-comment-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 999px;
    object-fit: cover;
    background: #f1f5f9;
}

.feed-detail-comment-avatar-reply {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.feed-detail-comment-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-detail-comment-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.feed-detail-comment-user-row strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-interact-comment-box .comment-time {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
}

.feed-interact-comment-box .comment-content-line {
    margin: 8px 0 0 54px;
    font-size: 15px;
    line-height: 1.7;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-interact-comment-box .reply-item .comment-content-line {
    margin-left: 48px;
    font-size: 14px;
}

.feed-interact-comment-box .comment-like-form {
    flex: 0 0 auto;
}

.feed-interact-comment-box .comment-like-btn {
    min-width: 56px;
    padding: 0;
    background: transparent;
    color: #0f172a;
    border-radius: 999px;
    gap: 6px;
    font-size: 13px;
}

.feed-interact-comment-box .comment-like-btn.liked {
    background: transparent;
    color: #ef4444;
}

.feed-interact-comment-box .reply-list {
    margin-top: 8px;
}

.feed-interact-comment-box .comment-empty {
    padding: 8px 0 0;
    color: #94a3b8;
    font-size: 15px;
}

.post-action-bar.feed-interact-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1065;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.feed-interact-comment-form-box {
    flex: 1 1 auto;
    min-width: 0;
}

.feed-interact-comment-form {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
    margin: 0;
    width: 100%;
}

.feed-interact-comment-form textarea.form-control,
.feed-interact-comment-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 42px;
    max-height: 96px;
    height: 42px;
    border-radius: 22px;
    border: 1px solid #d8e2ef;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #10233f;
    background: #f8fbff;
    box-shadow: none;
    resize: none;
    overflow-y: auto;
}

.feed-interact-comment-form .btn {
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    height: 42px;
    padding: 0;
    border-radius: 21px;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feed-interact-comment-form.comment-box {
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
}

.feed-interact-comment-form.comment-box textarea.form-control,
.feed-interact-comment-form.comment-box .form-control {
    width: auto !important;
}

.feed-interact-comment-form.comment-box .btn {
    width: 72px !important;
}

.feed-interact-like-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 74px;
}

.feed-interact-like-box form {
    margin: 0;
}

.feed-interact-like-box .icon-btn {
    min-width: 74px;
    height: 42px;
    padding: 0 16px;
    border-radius: 21px;
    background: #ffffff;
    border: 1px solid #d8e2ef;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    box-shadow: none;
}

.post-action-bar.feed-interact-action-bar.input-mode {
    gap: 10px;
}

.post-action-bar.feed-interact-action-bar.input-mode .feed-interact-like-box {
    display: none;
}

.feed-interact-like-box .icon-btn.liked {
    color: #ef4444;
    border-color: rgba(248, 113, 113, 0.45);
    background: #fff7f7;
}

.ranking-podium-box {
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.16);
    box-shadow: var(--shadow-soft);
}

.ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.podium-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.podium-card .podium-crown {
    color: #f59e0b;
    font-size: 20px;
    line-height: 1;
}

.podium-card.rank-1 {
    order: 2;
    transform: translateY(-10px);
}

.podium-card.rank-2 {
    order: 1;
}

.podium-card.rank-3 {
    order: 3;
}

.ranking-list-box {
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-soft);
}

.ranking-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.ranking-row + .ranking-row {
    border-top: 1px solid rgba(14, 165, 233, 0.14);
}

.ranking-row-no {
    font-size: 24px;
    font-weight: 700;
    color: #334155;
}

.ranking-row-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ranking-row-user span {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-avatar-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
}

.back-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    text-decoration: none;
    color: #10233f;
    border: 1px solid rgba(218, 226, 238, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    padding: 0;
    font-weight: 300;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.front-round-back-btn,
.front-back-btn,
.teacher-back-icon-btn,
.teacher-point-ranking-back,
.student-reading-insight-modal-close {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
    border: 1px solid rgba(218, 226, 238, 0.9);
    background: rgba(255, 255, 255, 0.96);
    color: #10233f;
    font-size: 30px;
    line-height: 1;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 20;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.front-back-btn {
    position: absolute;
    left: 14px;
    top: 14px;
}

.front-round-back-btn span,
.front-back-btn span,
.teacher-back-icon-btn span,
.teacher-point-ranking-back span,
.student-reading-insight-modal-close span {
    display: block;
    transform: translateY(-1px);
}

.front-round-back-btn:focus-visible,
.front-back-btn:focus-visible,
.teacher-back-icon-btn:focus-visible,
.teacher-point-ranking-back:focus-visible,
.student-reading-insight-modal-close:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.front-back-btn-light {
    color: #10233f;
}

.front-back-page-link {
    position: static;
    left: auto;
    top: auto;
    flex: 0 0 42px;
    min-width: 42px;
    padding: 0;
    margin: 0;
}

.back-home-btn.front-back-page-link {
    gap: 0;
}

.front-subpage-back-row .front-back-btn,
.front-subpage-back-row .front-round-back-btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
}

.front-back-header {
    position: relative;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px 12px;
}

.front-back-header .front-back-btn {
    top: 50%;
    transform: translateY(-50%);
}

.front-back-header .front-back-btn span {
    transform: translateY(-1px);
}

.front-back-header .btn-close {
    display: none !important;
}

.front-back-title-wrap {
    width: 100%;
    min-width: 0;
    padding: 0 56px;
    text-align: center;
}

.feed-interact-modal-header .feed-interact-head-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 44px;
}

.teacher-workbench-card-head-inline .front-back-page-link {
    margin-top: 2px;
}

.teacher-workbench-card-head-inline .front-back-page-link + div {
    flex: 1 1 auto;
    min-width: 0;
}

.front-back-title-wrap h2,
.front-back-title-wrap h5,
.front-back-title-wrap strong {
    margin: 0;
    color: #0f172a;
}

.front-back-title-wrap p,
.front-back-title-wrap small,
.front-back-title-wrap .small {
    margin: 4px 0 0;
    color: #64748b;
}

.front-back-header .modal-title {
    width: 100%;
    margin: 0;
    padding: 0 56px;
    text-align: center;
}

.front-subpage-back-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 18px 6px;
    box-sizing: border-box;
}

.front-subpage-title-block {
    text-align: center;
    padding: 0 18px 16px;
    box-sizing: border-box;
}

.front-subpage-title-block h2,
.front-subpage-title-block h5,
.front-subpage-title-block strong {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    color: #10233f;
}

.front-subpage-title-block p,
.front-subpage-title-block small,
.front-subpage-title-block .small {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #7a8aa0;
}

.front-standalone-nav-title {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.profile-home-card {
    padding: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(14, 165, 233, 0.12);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 16px;
}

.profile-home-main {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar-ring {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    padding: 4px;
    background: #cbd5e1;
    flex: 0 0 102px;
}

.profile-avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #0f172a;
}

.profile-avatar-ring.frame-gold {
    background: linear-gradient(135deg, #f59e0b, #facc15);
}

.profile-avatar-ring.frame-silver {
    background: linear-gradient(135deg, #9ca3af, #e5e7eb);
}

.profile-avatar-ring.frame-bronze {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.profile-avatar-ring.avatar-sm {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    padding: 3px;
}

.profile-avatar-ring.avatar-md {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    padding: 3px;
}

.profile-avatar-ring.avatar-xs {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    padding: 2px;
}

.profile-home-text h2 {
    margin: 0 0 6px;
    font-size: 36px;
    font-weight: 800;
}

.profile-home-text p {
    margin: 0 0 10px;
    color: var(--muted);
}

.profile-level-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
}

.profile-rank-link {
    display: inline-flex;
    text-decoration: none;
    border: 1px solid #d6e2ef;
    border-radius: 8px;
    padding: 4px 8px;
    color: var(--ink);
    font-weight: 700;
    background: #fff;
}

.teacher-role-shell {
    --mobile-shell-bottom-space: calc(148px + env(safe-area-inset-bottom));
    --teacher-card: rgba(255, 255, 255, 0.96);
    --teacher-border: rgba(188, 207, 232, 0.72);
    --teacher-shadow: 0 20px 44px rgba(148, 190, 232, 0.2);
    --teacher-blue: #1f6fff;
    --teacher-teal: #12a48d;
    --teacher-navy: #17315d;
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(191, 219, 254, 0.9) 0%, rgba(239, 246, 255, 0.95) 34%, rgba(248, 251, 255, 1) 72%),
        linear-gradient(180deg, #eff7ff 0%, #f9fbff 100%);
}

.teacher-role-shell .content-stack {
    gap: 18px;
}

.teacher-role-home-page,
.teacher-role-panel,
.teacher-workbench-page {
    width: 100%;
    min-width: 0;
}

.teacher-page-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
}

.teacher-page-head-spacer,
.teacher-theme-works-spacer {
    width: 44px;
    height: 44px;
}

.teacher-page-head-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.teacher-page-head-title-wrap h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: #12284b;
}

.teacher-page-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(60, 191, 152, 0.18);
    color: #2b7a62;
    font-size: 16px;
    font-weight: 700;
}

.teacher-page-notice {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: #11284a;
    font-size: 30px;
}

.teacher-page-notice-dot {
    position: absolute;
    top: 6px;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ff5c5c;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.teacher-role-hero,
.teacher-role-card,
.teacher-theme-class-row,
.teacher-campus-card,
.teacher-featured-card,
.teacher-theme-work-card,
.teacher-activity-detail-card,
.teacher-theme-works-card {
    border-radius: 28px;
    border: 1px solid var(--teacher-border);
    background: var(--teacher-card);
    box-shadow: var(--teacher-shadow);
}

.teacher-role-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 24px 26px;
    background: linear-gradient(135deg, #082a55 0%, #0c5472 48%, #10a88e 100%);
    color: #fff;
}

.teacher-role-hero-main {
    display: flex;
    gap: 18px;
    align-items: center;
}

.teacher-role-hero-avatar {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
}

.teacher-role-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-role-hero-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-role-hero-title {
    font-size: 26px;
    font-weight: 800;
}

.teacher-role-hero-name {
    font-size: 18px;
    font-weight: 600;
}

.teacher-role-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-size: 14px;
    opacity: 0.94;
}

.teacher-role-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.teacher-role-switch-btn {
    min-height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.teacher-home-pills,
.teacher-publish-pills {
    display: grid;
    gap: 12px;
}

.teacher-home-pills {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-publish-pills {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-home-pills a,
.teacher-publish-pills button {
    min-height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(220, 229, 242, 0.85);
    background: rgba(255, 255, 255, 0.9);
    color: #1a2f55;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.teacher-home-pills .active,
.teacher-publish-pills .active {
    background: linear-gradient(135deg, #11a68e, #1a9f7b);
    color: #fff;
    border-color: transparent;
}

.teacher-role-card,
.teacher-activity-detail-card,
.teacher-publish-form-card,
.teacher-campus-upload-card,
.teacher-theme-works-card {
    padding: 22px 24px;
}

.teacher-role-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.teacher-role-card-head.inline,
.teacher-role-card-head.split-banner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.teacher-role-card-head.centered {
    align-items: center;
    text-align: center;
}

.teacher-role-card-head h2 {
    margin: 0;
    color: #152d53;
    font-size: 28px;
    font-weight: 800;
}

.teacher-role-card-head p {
    margin: 0;
    color: #6b7d9b;
    font-size: 15px;
}

.teacher-role-link {
    border: none;
    background: transparent;
    color: var(--teacher-blue);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.teacher-role-link.center {
    display: block;
    text-align: center;
    width: 100%;
}

.teacher-role-link.mini {
    font-size: 13px;
}

.teacher-role-card-head.inline .front-back-page-link {
    margin-top: 2px;
}

.teacher-role-card-head.inline .front-back-page-link + div {
    flex: 1 1 auto;
    min-width: 0;
}

.teacher-class-summary-grid,
.teacher-class-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.teacher-class-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.teacher-class-summary-card,
.teacher-class-status-item {
    padding: 18px 16px;
    border-radius: 22px;
    border: 1px solid rgba(220, 229, 242, 0.85);
    background: rgba(255, 255, 255, 0.92);
}

.teacher-class-summary-card span,
.teacher-class-status-item span {
    display: block;
    color: #617694;
    font-size: 14px;
    margin-bottom: 6px;
}

.teacher-class-summary-card strong,
.teacher-class-status-item strong {
    color: #17315d;
    font-size: 22px;
    line-height: 1.2;
}

.teacher-class-summary-card.green strong,
.teacher-class-status-item.mint strong { color: #14a263; }
.teacher-class-summary-card.red strong,
.teacher-class-status-item.coral strong { color: #f05b5b; }
.teacher-class-summary-card.gold strong,
.teacher-class-status-item.gold strong,
.teacher-class-status-item.amber strong { color: #f29c14; }

.teacher-class-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 10px;
    font-size: 14px;
    color: #617694;
}

.teacher-class-progress-meta strong {
    color: #14a263;
    font-size: 18px;
}

.teacher-class-progress-track {
    height: 12px;
    border-radius: 999px;
    background: #e8f0fb;
    overflow: hidden;
}

.teacher-class-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #11b77b, #17a5af);
}

.teacher-class-actions,
.teacher-campus-footer,
.teacher-reminder-quick-actions,
.teacher-publish-sheet-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.teacher-primary-btn,
.teacher-outline-btn {
    min-height: 56px;
    padding: 0 18px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid var(--teacher-blue);
    text-decoration: none;
}

.teacher-outline-btn.subtle {
    opacity: 0.58;
    border-color: rgba(191, 207, 232, 0.88);
    color: rgba(27, 51, 93, 0.54);
}

.teacher-primary-btn {
    background: linear-gradient(135deg, var(--teacher-blue), #0f67f3);
    color: #fff;
}

.teacher-primary-btn.block,
.teacher-outline-btn.block {
    width: 100%;
}

.teacher-outline-btn {
    background: #fff;
    color: var(--teacher-blue);
}

.teacher-outline-btn.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.18));
    border-color: rgba(37, 99, 235, 0.42);
    color: #1d4ed8;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.18);
}

.teacher-outline-btn.compact {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 14px;
}

.teacher-primary-btn.compact {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 14px;
}

.teacher-home-task-card {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.teacher-home-task-cover,
.teacher-campus-card-cover,
.teacher-featured-cover {
    border-radius: 20px;
    overflow: hidden;
    min-height: 120px;
    background: linear-gradient(135deg, #d7ecff, #eaf7ff);
}

.teacher-home-task-cover img,
.teacher-campus-card-cover img,
.teacher-featured-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-home-task-badges,
.teacher-campus-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #637693;
    font-size: 14px;
}

.teacher-home-task-badges span {
    padding: 5px 10px;
    border-radius: 999px;
    background: #edf5ff;
    color: #31598a;
}

.teacher-home-task-main strong {
    display: block;
    margin: 6px 0;
    font-size: 20px;
    color: #18335e;
}

.teacher-home-task-main p {
    margin: 0 0 8px;
    color: #6c7e9b;
    font-size: 14px;
}

.teacher-inline-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #70819e;
    font-size: 15px;
    text-align: center;
}

.teacher-activity-filter-row,
.teacher-campus-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.teacher-theme-class-list,
.teacher-campus-style-grid,
.teacher-featured-grid {
    display: grid;
    gap: 16px;
}

.teacher-theme-class-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 196px;
    gap: 20px;
    padding: 24px 24px 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(221, 231, 246, 0.9);
    box-shadow: 0 14px 34px rgba(148, 190, 232, 0.12);
}

.teacher-theme-class-row-main strong {
    display: block;
    color: #19335d;
    font-size: 24px;
    margin-bottom: 16px;
}

.teacher-theme-class-row-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.teacher-theme-class-thumb {
    position: relative;
    min-height: 104px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffedc4, #ffd8d8);
    box-shadow: 0 8px 20px rgba(112, 148, 191, 0.14);
}

.teacher-theme-class-thumb img,
.teacher-theme-work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-theme-class-thumb i,
.teacher-theme-work-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.teacher-theme-class-row-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    min-width: 196px;
    color: #6b7d9a;
    font-size: 15px;
}

.teacher-theme-class-row-count {
    color: #6f809d;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.teacher-theme-class-row-breakdown {
    color: #8a98b0;
    font-size: 14px;
    line-height: 1.3;
}

.teacher-campus-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.teacher-campus-card,
.teacher-featured-card {
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(221, 231, 246, 0.88);
    box-shadow: 0 16px 38px rgba(148, 190, 232, 0.12);
}

.teacher-campus-card-cover {
    min-height: 198px;
    background: #eef5ff;
}

.teacher-campus-card-main,
.teacher-featured-main {
    padding: 18px 20px 20px;
}

.teacher-campus-card-main strong,
.teacher-featured-main strong {
    display: block;
    color: #18335f;
    font-size: 22px;
    margin-bottom: 12px;
}

.teacher-campus-card-meta {
    align-items: center;
}

.teacher-campus-card-meta i {
    font-size: 14px;
    color: #7f8ea7;
}

.teacher-campus-card-meta-date {
    margin-bottom: 4px;
}

.teacher-campus-card-meta-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.teacher-campus-card-meta-divider {
    opacity: 0.55;
}

.teacher-campus-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: var(--teacher-blue);
    font-weight: 700;
    text-decoration: none;
}

.teacher-campus-page {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

.teacher-campus-page-topbar {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.teacher-campus-activity-summary-card,
.teacher-campus-detail-filter-card {
    margin-bottom: 14px;
}

.teacher-campus-detail-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.teacher-campus-detail-sort-popover {
    width: auto;
    max-width: min(100%, 320px);
}

.teacher-campus-detail-sort-popover .student-home-sort-pill {
    margin-left: auto;
}

.teacher-campus-detail-sort-popover .student-home-sort-panel {
    min-width: min(88vw, 320px);
}

.teacher-campus-summary-shell {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 136px;
}

.teacher-campus-summary-media {
    width: 104px;
    min-height: 136px;
    border-radius: 14px;
    overflow: visible;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-summary-media img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.teacher-campus-summary-media .teacher-cover-placeholder {
    width: 104px;
    height: 104px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-summary-copy {
    min-width: 0;
}

.teacher-campus-summary-title {
    color: #18335f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.teacher-campus-summary-date {
    margin-top: 6px;
    color: #6a7891;
    font-size: 13px;
    line-height: 1.4;
}

.teacher-campus-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.teacher-campus-summary-stats span {
    min-width: 0;
    padding: 10px 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(243, 248, 255, 0.98), rgba(233, 242, 255, 0.92));
    border: 1px solid rgba(194, 214, 240, 0.68);
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}

.teacher-campus-summary-stats strong {
    color: #1760d7;
    font-size: 18px;
    line-height: 1.1;
}

.teacher-campus-summary-stats small {
    color: #71819c;
    font-size: 11px;
    line-height: 1.2;
}

.teacher-campus-detail-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.teacher-campus-detail-filter-grid .form-select {
    min-height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(189, 208, 232, 0.95);
    background: rgba(255, 255, 255, 0.98);
    color: #23324d;
    font-size: 13px;
    line-height: 1.2;
    box-shadow: none;
}

.teacher-campus-detail-filter-grid .teacher-primary-btn,
.teacher-campus-detail-filter-grid .teacher-primary-btn.block {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.teacher-campus-class-list {
    display: grid;
    gap: 12px;
}

.teacher-campus-class-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 84px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(215, 228, 244, 0.9);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 28px rgba(148, 190, 232, 0.1);
}

.teacher-campus-class-previews,
.teacher-campus-class-info,
.teacher-campus-class-action-wrap {
    min-width: 0;
}

.teacher-campus-class-previews {
    display: grid;
    grid-template-columns: repeat(2, 56px);
    gap: 8px;
    width: 120px;
}

.teacher-campus-class-preview-item,
.teacher-campus-class-preview-empty {
    display: block;
    width: 56px;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    overflow: hidden;
    background: #eef5ff;
}

.teacher-campus-class-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-campus-class-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a98b0;
    font-size: 12px;
}

.teacher-campus-class-info {
    display: grid;
    gap: 4px;
}

.teacher-campus-class-name {
    color: #18335f;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.teacher-campus-class-count {
    color: #18335f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.teacher-campus-class-count small {
    margin-left: 4px;
    color: #74839d;
    font-size: 12px;
    font-weight: 600;
}

.teacher-campus-class-metrics {
    display: grid;
    gap: 3px;
    color: #74839d;
    font-size: 12px;
    line-height: 1.45;
}

.teacher-campus-class-action-wrap {
    display: flex;
    justify-content: flex-end;
}

.teacher-campus-class-action.teacher-outline-btn {
    min-width: 82px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.teacher-campus-works-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.teacher-campus-works-head h2 {
    margin: 0;
    color: #18335f;
    font-size: 20px;
    line-height: 1.2;
}

.teacher-campus-works-head p {
    margin: 6px 0 0;
    color: #71819c;
    font-size: 13px;
    line-height: 1.45;
}

.teacher-campus-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

.teacher-campus-work-grid .feed-post {
    width: 100%;
    min-width: 0;
}

.teacher-campus-feed-author-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-campus-feed-author-meta {
    color: #7a8798;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-work-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(215, 228, 244, 0.9);
    box-shadow: 0 12px 26px rgba(148, 190, 232, 0.12);
}

.teacher-campus-work-open {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: none;
    background: transparent;
    text-align: left;
    color: inherit;
}

.teacher-campus-work-author {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.teacher-campus-work-author-avatar {
    width: 22px;
    height: 22px;
    min-width: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    overflow: hidden;
    background: #dbe8ff;
}

.teacher-campus-work-author-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.teacher-campus-work-author-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-campus-work-author-copy strong {
    color: #18335f;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-work-author-copy small {
    color: #7a8798;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-work-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-campus-work-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: #eef5ff;
}

.teacher-campus-work-cover img,
.teacher-campus-work-cover video,
.teacher-campus-work-cover .teacher-cover-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.teacher-campus-work-cover .teacher-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-work-body {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-campus-work-title {
    display: block;
    color: #18335f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.teacher-campus-work-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #edf5ff;
    color: #2b67c9;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.teacher-campus-work-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: #7a8798;
    font-size: 11px;
    line-height: 1.35;
}

.teacher-campus-work-comment {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(229, 246, 239, 0.92);
    color: #227455;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
}

.teacher-campus-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-campus-detail-stats span,
.teacher-campus-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #edf5ff;
    color: #2b67c9;
    font-size: 12px;
    font-weight: 600;
}

.teacher-campus-detail-extra {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(238, 245, 255, 0.95));
    border: 1px solid rgba(205, 220, 242, 0.9);
}

.teacher-campus-detail-line {
    color: #5f728f;
    font-size: 12px;
    line-height: 1.5;
}

.teacher-campus-detail-comment {
    margin-top: 10px;
}

.teacher-campus-detail-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: #9fb2cf;
    vertical-align: middle;
}

.teacher-campus-detail-comment strong {
    display: block;
    margin-bottom: 6px;
    color: #18335f;
    font-size: 13px;
}

.teacher-campus-detail-comment p {
    margin: 0;
    color: #41556f;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.teacher-campus-badge-art {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffe18a, #ffd04e 68%, #fff4ca);
    color: #f6a800;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-theme-works-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.teacher-theme-works-head {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.teacher-theme-works-head h2 {
    margin: 0;
    color: #132c55;
    font-size: 30px;
    font-weight: 900;
}

.teacher-theme-works-head p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7385a2;
    font-size: 16px;
    font-weight: 600;
}

.teacher-back-icon-btn {
    font-size: 24px;
}

.teacher-theme-class-badge {
    width: 100%;
    min-height: 88px;
    margin-bottom: 16px;
    border-radius: 26px;
    border: 1px solid rgba(96, 210, 180, 0.8);
    background: linear-gradient(135deg, rgba(235, 255, 249, 0.95), rgba(248, 255, 252, 0.98));
    color: #16335d;
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.teacher-theme-class-badge-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d9f88, #179f74);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.18);
}

.teacher-theme-class-badge-arrow {
    color: #50709a;
    font-size: 28px;
}

.teacher-theme-works-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.teacher-theme-works-filter-row button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(205, 217, 235, 0.92);
    background: #fff;
    color: #526883;
    font-size: 15px;
    font-weight: 700;
}

.teacher-theme-works-filter-row button i {
    font-size: 13px;
    color: #f5a623;
}

.teacher-theme-works-filter-row button.active {
    background: linear-gradient(135deg, #11a48d, #1d9c78);
    color: #fff;
    border-color: transparent;
}

.teacher-theme-works-filter-row button.active i {
    color: #ffe68a;
}

.teacher-theme-works-filter-row span {
    margin-left: auto;
    color: #7a8ca8;
    font-size: 15px;
}

.teacher-theme-works-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(245, 248, 255, 0.96);
    border: 1px solid rgba(212, 224, 243, 0.92);
    color: #6f809e;
    font-size: 14px;
    font-weight: 700;
}

.teacher-theme-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.teacher-theme-work-card {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(148, 190, 232, 0.14);
    border: 1px solid rgba(222, 232, 245, 0.92);
}

.teacher-theme-work-cover {
    position: relative;
    min-height: 176px;
    background: #f3f9ff;
    border-radius: 22px;
    overflow: hidden;
}

.teacher-theme-work-art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.teacher-theme-work-art.art-0 { background: linear-gradient(135deg, #ffbd6e, #ff8a8a); }
.teacher-theme-work-art.art-1 { background: linear-gradient(135deg, #9ad6ff, #4f9fff); }
.teacher-theme-work-art.art-2 { background: linear-gradient(135deg, #9ef0c0, #29b98d); }
.teacher-theme-work-art.art-3 { background: linear-gradient(135deg, #d6b8ff, #8b7dff); }
.teacher-theme-work-art.art-4 { background: linear-gradient(135deg, #ffc8d6, #ff8cb0); }
.teacher-theme-work-art.art-5 { background: linear-gradient(135deg, #ffd97a, #f3b11d); }

.teacher-theme-work-featured {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 183, 37, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.teacher-theme-work-owner,
.teacher-theme-work-title {
    padding: 0 12px;
}

.teacher-theme-work-owner {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    color: #18335e;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
}

.teacher-theme-work-owner-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe, #f0f9ff);
}

.teacher-theme-work-owner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-theme-work-title {
    padding: 12px 6px 4px;
    color: #18335e;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.teacher-publish-subtitle {
    margin: -10px 0 0;
    text-align: center;
    color: #6d7d98;
    font-size: 16px;
}

.teacher-publish-empty-state {
    min-height: 220px;
    border-radius: 28px;
    background: rgba(247, 251, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #7b8ca8;
}

.teacher-publish-empty-state i {
    font-size: 64px;
    color: #b6caea;
}

.teacher-publish-sheet {
    margin-top: 18px;
    padding: 28px;
    border-radius: 32px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 44px rgba(148, 163, 184, 0.12);
}

.teacher-sheet-handle {
    width: 84px;
    height: 8px;
    border-radius: 999px;
    background: rgba(194, 203, 218, 0.92);
    margin: 0 auto 16px;
}

.teacher-publish-sheet-head {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.teacher-sheet-title {
    text-align: left;
    color: #162d53;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.teacher-sheet-subtitle {
    text-align: left;
    color: #70829e;
    font-size: 16px;
    line-height: 1.75;
}

.teacher-publish-option {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 24px;
    gap: 22px;
    align-items: center;
    padding: 22px 24px;
    margin-top: 16px;
    border-radius: 28px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: #fff;
    color: #18335d;
    text-align: left;
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.teacher-publish-option.active {
    border-color: rgba(37, 99, 235, 0.55);
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 18px 32px rgba(37, 99, 235, 0.14);
    transform: translateY(-1px);
}

.teacher-publish-option-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

.teacher-publish-option.active .teacher-publish-option-check {
    display: inline-flex;
}

.teacher-publish-option-art {
    width: 132px;
    height: 132px;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid rgba(191, 219, 254, 0.55);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.teacher-publish-option-art.blue {
    background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.96), rgba(222, 238, 255, 0.82) 42%, rgba(203, 223, 255, 0.96) 100%);
    color: #3b82f6;
}

.teacher-publish-option-art.green {
    background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.96), rgba(225, 245, 236, 0.82) 42%, rgba(199, 239, 220, 0.96) 100%);
    color: #10b981;
}

.teacher-publish-option-art.image {
    width: 132px;
    height: 132px;
    border-radius: 32px;
    color: inherit;
}

.teacher-publish-option-art.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-publish-option-main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-publish-option-main strong,
.teacher-publish-option-main small,
.teacher-publish-option-main em {
    display: block;
}

.teacher-publish-option-main strong {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
}

.teacher-publish-option-main small,
.teacher-publish-option-main em {
    color: #6d819f;
    font-size: 15px;
    line-height: 1.7;
}

.teacher-publish-option-main em {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 16px;
    background: rgba(237, 244, 255, 0.96);
    color: #587194;
}

.teacher-publish-option-main em i {
    color: #3b82f6;
}

.teacher-publish-option-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c92b2;
    font-size: 22px;
}

.teacher-task-build-form {
    display: grid;
    gap: 20px;
}

.teacher-task-build-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.teacher-task-build-field {
    display: grid;
    gap: 10px;
}

.teacher-task-build-field.full {
    grid-column: 1 / -1;
}

.teacher-task-build-field > span {
    color: #17315d;
    font-size: 15px;
    font-weight: 700;
}

.teacher-task-build-static {
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: rgba(245, 249, 255, 0.86);
    color: #2c466f;
    display: flex;
    align-items: center;
}

.teacher-task-build-types {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-task-build-types label {
    min-height: 50px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: #fff;
    color: #26426d;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.teacher-task-build-preview {
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(238, 246, 255, 0.9));
    border: 1px solid rgba(220, 229, 242, 0.92);
}

.teacher-task-build-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.teacher-task-build-preview-head strong {
    color: #17315d;
    font-size: 18px;
}

.teacher-task-build-preview-head small,
.teacher-task-build-preview-body p,
.teacher-task-build-preview-body div {
    color: #637897;
    font-size: 14px;
    line-height: 1.7;
}

.teacher-task-build-preview-body > div:first-child {
    color: #17315d;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}

.teacher-task-library-preview-copy > div:first-child {
    color: #17315d;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.45;
}

.teacher-task-build-preview-body p {
    margin: 10px 0 0;
}

.teacher-task-build-status {
    min-height: 24px;
    color: #617694;
    font-size: 14px;
}

.teacher-task-build-status.success {
    color: #14a263;
}

.teacher-task-build-status.error {
    color: #e05656;
}

.teacher-task-build-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.teacher-task-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 0.8fr)) auto;
    gap: 12px;
    margin-bottom: 18px;
}

.teacher-task-library-state {
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    color: #64748b;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-task-library-state.error {
    border-style: solid;
    border-color: rgba(239, 68, 68, 0.18);
    background: rgba(254, 242, 242, 0.92);
    color: #b91c1c;
}

.teacher-task-library-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.teacher-task-library-card {
    width: 100%;
    display: block;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: #fff;
    color: #18335d;
    text-align: left;
    box-shadow: 0 8px 20px rgba(148, 163, 184, 0.08);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.teacher-task-library-card.active {
    border-color: rgba(37, 99, 235, 0.48);
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.14);
    transform: translateY(-1px);
}

.teacher-task-library-card-cover {
    width: 140px;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.12);
    background: linear-gradient(180deg, #f8fbff 0%, #e8f1ff 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    align-self: stretch;
}

.teacher-task-library-card-cover[data-ratio="1:1"] {
    aspect-ratio: 1 / 1;
}

.teacher-task-library-card-cover[data-ratio="4:3"] {
    aspect-ratio: 4 / 3;
}

.teacher-task-library-card-cover[data-ratio="16:9"] {
    aspect-ratio: 16 / 9;
}

.teacher-task-library-card-cover[data-ratio="16:5"] {
    aspect-ratio: 16 / 5;
}

.teacher-task-library-card-cover.list {
    width: 140px;
    min-height: 140px;
}

.teacher-task-library-card-cover.selected,
.teacher-task-library-card-cover.preview {
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.teacher-task-library-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-task-library-card-cover.list img,
.teacher-task-library-card-cover.selected img {
    object-fit: cover;
}

.teacher-task-library-card-cover.preview img {
    object-fit: cover;
}

.teacher-task-library-card-cover.empty {
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    text-align: center;
    padding: 12px;
}

.teacher-task-library-card-cover.empty i {
    font-size: 22px;
    color: #93c5fd;
}

.teacher-task-library-card-main {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.teacher-task-library-card-head {
    display: block;
}

.teacher-task-library-card-head strong {
    font-size: 18px;
    font-weight: 800;
    color: #17315d;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher-task-library-card-body {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.teacher-task-library-card-info {
    min-width: 0;
    display: grid;
    gap: 10px;
    align-content: start;
    min-height: 132px;
}

.teacher-task-library-card-main p,
.teacher-task-library-card-meta {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.teacher-task-library-card-main p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.teacher-task-library-card-meta,
.teacher-task-library-card-types,
.teacher-task-library-selected-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-task-library-card-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.teacher-task-library-card-meta span,
.teacher-task-library-card-types span,
.teacher-task-library-selected-meta span {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.teacher-task-library-card-action {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: #fff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    justify-self: end;
    white-space: nowrap;
}

.teacher-task-library-card.active .teacher-task-library-card-action {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(219, 234, 254, 0.92);
}

.teacher-task-library-selected {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(220, 229, 242, 0.92);
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(238, 246, 255, 0.9));
}

.teacher-task-library-selected-cover {
    width: 140px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: #dbeafe;
    aspect-ratio: 1 / 1;
}

.teacher-task-library-selected-cover[data-ratio="16:9"] {
    aspect-ratio: 16 / 9;
}

.teacher-task-library-selected-cover[data-ratio="1:1"] {
    aspect-ratio: 1 / 1;
}

.teacher-task-library-selected-cover[data-ratio="4:3"] {
    aspect-ratio: 4 / 3;
}

.teacher-task-library-selected-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-task-library-selected-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.teacher-task-library-selected-main strong {
    color: #17315d;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.4;
}

.teacher-task-library-selected-main p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.teacher-task-library-preview-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.teacher-task-library-preview-cover {
    width: 100%;
    max-width: none;
}

.teacher-task-library-preview-cover .teacher-task-library-card-cover.preview {
    width: 100%;
    border-radius: 18px;
    aspect-ratio: 16 / 5;
}

.teacher-task-library-note {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.88);
    border: 1px solid rgba(191, 219, 254, 0.9);
    color: #47627f;
    font-size: 13px;
    line-height: 1.6;
}

.teacher-task-library-preview-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-task-library-preview-copy > div:first-child {
    color: #17315d;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
}

.teacher-task-library-preview-copy p {
    margin: 0;
    color: #637897;
    font-size: 14px;
    line-height: 1.7;
}

.student-current-task-card {
    display: grid;
    gap: 12px;
}

.student-current-task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(33, 150, 243, 0.12);
    color: #1666d8;
    font-size: 12px;
    font-weight: 700;
}

.student-current-task-body {
    display: grid;
    gap: 6px;
}

.student-current-task-body strong {
    color: #17315d;
    font-size: 22px;
}

.student-current-task-body p {
    margin: 6px 0 0;
    color: #5d7393;
    line-height: 1.7;
}

.student-current-task-loading,
.student-current-task-empty,
.student-current-task-error {
    color: #6a7f9e;
    font-size: 14px;
}

.student-publish-page {
    gap: 16px;
    padding-bottom: calc(146px + env(safe-area-inset-bottom));
}

.student-publish-hero-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    min-height: 154px;
    padding: 18px 18px 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #2979ff 0%, #33a8ff 42%, #2dcfb0 100%);
    color: #fff;
    box-shadow: 0 18px 44px rgba(37, 99, 235, 0.2);
}

.student-publish-hero-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.student-publish-avatar-ring {
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.student-publish-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: rgba(15, 23, 42, 0.18);
}

.student-publish-hero-copy {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding-right: 118px;
}

.student-publish-hero-name {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.student-publish-hero-meta {
    display: grid;
    gap: 8px;
}

.student-publish-hero-meta span {
    min-width: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 14px;
}

.student-publish-hero-meta span span {
    white-space: normal;
    line-height: 1.35;
    word-break: break-all;
}

.student-publish-switch-btn {
    position: absolute;
    top: 20px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.student-publish-task-panel,
.student-publish-form-panel,
.student-publish-stepper-card {
    padding: 18px;
}

.student-publish-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.student-publish-panel-head h2,
.student-publish-form-head h2 {
    margin: 0;
    color: #17315d;
    font-size: 17px;
    font-weight: 800;
}

.student-publish-more-btn {
    border: none;
    background: transparent;
    color: #2563eb;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.student-publish-task-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.student-publish-task-item {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 168px;
    padding: 16px 14px 14px;
    border-radius: 22px;
    border: 1px solid rgba(222, 230, 242, 0.95);
    background: #fff;
    text-align: left;
    display: grid;
    gap: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.student-publish-task-item.is-selected {
    border-color: #2563eb;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.15);
    transform: translateY(-1px);
}

.student-publish-task-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-task-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.student-publish-task-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.student-publish-task-copy strong {
    display: block;
    color: #17315d;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    min-height: 40px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-publish-task-deadline {
    color: #71829d;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-publish-task-status {
    justify-self: start;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #059669;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.student-publish-task-status.is-submitted {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
}

.student-publish-task-status.is-expired {
    background: rgba(241, 245, 249, 1);
    color: #64748b;
}

.student-publish-empty {
    min-height: 96px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
    color: #68809f;
    font-size: 14px;
    display: grid;
    place-items: center;
    text-align: center;
}

.student-publish-stepper-card {
    display: grid;
    gap: 14px;
}

.student-publish-stepper {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.student-publish-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #9aa8bf;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.student-publish-step.is-active {
    color: #1d4ed8;
}

.student-publish-step-index {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #dbe6f7;
    color: #8ea2bf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.student-publish-step.is-active .student-publish-step-index {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
}

.student-publish-step-line {
    height: 1px;
    border-top: 2px dashed rgba(148, 163, 184, 0.55);
}

.student-publish-selected-banner {
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 253, 244, 0.94));
    color: #16a34a;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.student-publish-selected-banner::before {
    content: "\F26A";
    font-family: bootstrap-icons, sans-serif;
    font-size: 18px;
}

.student-publish-draft-badge {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.student-publish-form-grid {
    display: grid;
    gap: 18px;
}

.student-publish-field {
    display: grid;
    gap: 8px;
}

.student-publish-field-head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #17315d;
    font-size: 15px;
    font-weight: 700;
}

.student-publish-field-head em {
    font-style: normal;
    color: #ef4444;
}

.student-publish-activity-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.student-publish-activity-status {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.student-publish-row-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.student-publish-media-section {
    display: grid;
    gap: 12px;
}

.student-publish-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.student-publish-mode-card {
    min-height: 62px;
    border-radius: 18px;
    border: 1px solid rgba(215, 225, 239, 0.92);
    background: #fff;
    color: #17315d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
}

.student-publish-mode-card i {
    font-size: 21px;
}

.student-publish-mode-card strong {
    font-size: 16px;
    font-weight: 700;
}

.student-publish-mode-card.active {
    border-color: rgba(37, 99, 235, 0.5);
    color: #1d4ed8;
    background: rgba(239, 246, 255, 0.92);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

.student-publish-upload-box {
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 112px;
    padding: 18px;
    border-radius: 22px;
    border: 1px dashed rgba(59, 130, 246, 0.5);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(243, 248, 255, 0.96) 100%);
    color: #1d4ed8;
}

.student-publish-upload-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-size: 24px;
}

.student-publish-upload-box strong {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

.student-publish-media-preview {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(216, 226, 241, 0.94);
    border-radius: 20px;
    background: rgba(248, 251, 255, 0.98);
}

.student-publish-media-preview-visual {
    width: 100%;
    min-height: 188px;
    border-radius: 18px;
    overflow: hidden;
    background: #eef5ff;
    display: grid;
    place-items: center;
}

.student-publish-media-preview-visual img,
.student-publish-media-preview-visual video {
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
}

.student-publish-media-preview-copy {
    display: grid;
    gap: 4px;
}

.student-publish-media-preview-copy strong {
    color: #17315d;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-all;
}

.student-publish-media-preview-copy span {
    color: #71839f;
    font-size: 13px;
}

.student-publish-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-publish-preview-actions button {
    min-width: 108px;
}

.student-publish-server-status {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(241, 247, 255, 0.96);
    color: #34527f;
    font-size: 14px;
    line-height: 1.6;
}

.student-publish-server-status.is-error {
    background: rgba(254, 242, 242, 0.96);
    color: #b91c1c;
}

.student-publish-server-status.is-success {
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
}

.student-publish-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.student-publish-secondary-btn,
.student-publish-primary-btn {
    min-height: 50px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.24);
}

.student-publish-secondary-btn {
    background: #fff;
    color: #2563eb;
}

.student-publish-primary-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

.student-publish-secondary-btn:disabled,
.student-publish-primary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.student-publish-task-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

html.student-publish-sheet-open,
body.student-publish-sheet-open {
    overflow: hidden;
}

.student-publish-task-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

.student-publish-task-sheet-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-height: min(72vh, 560px);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.student-publish-task-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.student-publish-task-sheet-head.front-back-header {
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 14px 18px 12px;
}

.student-publish-task-sheet-head strong {
    color: #17315d;
    font-size: 18px;
    font-weight: 800;
}

.student-publish-task-sheet-head p {
    margin: 6px 0 0;
    color: #71839f;
    font-size: 13px;
}

.student-publish-task-sheet-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 246, 255, 0.9);
    color: #5b6f8c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.student-publish-task-sheet-list {
    padding: 14px 18px 18px;
    display: grid;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
    .student-publish-hero-card {
        min-height: 146px;
        padding: 16px;
    }

    .student-publish-avatar-ring {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .student-publish-hero-name {
        font-size: 24px;
    }

    .student-publish-hero-copy {
        padding-right: 90px;
    }

    .student-publish-switch-btn {
        top: 16px;
        right: 12px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
    }

    .student-publish-task-item {
        min-height: 160px;
        padding: 14px 12px 13px;
    }

    .student-publish-task-icon {
        width: 48px;
        height: 48px;
        font-size: 23px;
    }

    .student-publish-task-copy strong {
        font-size: 14px;
        min-height: 38px;
    }

    .student-publish-task-deadline {
        font-size: 11px;
    }

    .student-publish-row-two {
        grid-template-columns: 1fr;
    }
}

.teacher-campus-form {
    display: grid;
    gap: 20px;
}

.teacher-campus-form-row {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 234, 244, 0.9);
}

.teacher-campus-form-row:first-child {
    padding-top: 0;
    border-top: none;
}

.teacher-campus-form-row > label,
.teacher-reminder-action-title,
.teacher-reminder-editor-head span,
.teacher-reminder-strategy-head span {
    color: #1b335d;
    font-size: 18px;
    font-weight: 800;
}

.teacher-campus-toggle,
.teacher-campus-type-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 18px;
    border: 1px solid rgba(205, 217, 235, 0.92);
    overflow: hidden;
}

.teacher-campus-type-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: none;
    gap: 12px;
    overflow: visible;
}

.teacher-campus-toggle button,
.teacher-campus-type-row button {
    min-height: 50px;
    border: none;
    background: #fff;
    color: #21395f;
    font-size: 16px;
    font-weight: 700;
}

.teacher-campus-toggle button.active,
.teacher-campus-type-row button.active {
    background: linear-gradient(135deg, #12aa8f, #19a370);
    color: #fff;
}

.teacher-campus-scope-grid,
.teacher-campus-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.teacher-campus-time-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    color: #355072;
    font-size: 14px;
}

.teacher-campus-time-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 700;
}

.teacher-campus-time-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

img[class*="avatar" i],
img[data-avatar-fallback] {
    object-fit: cover;
}

.teacher-campus-time-range label {
    display: grid;
    gap: 6px;
    color: #48617f;
    font-size: 13px;
    font-weight: 700;
}

.teacher-campus-time-range input:disabled {
    background: #f4f7fb;
    color: #90a0b6;
}

@media (max-width: 520px) {
    .teacher-campus-time-range {
        grid-template-columns: 1fr;
    }
}

.teacher-campus-inline-tip,
.teacher-campus-upload-note,
.teacher-campus-sync-tip,
.teacher-reminder-meta-line,
.teacher-reminder-foot-tip {
    color: #74839c;
    font-size: 14px;
}

.teacher-campus-upload-drop {
    min-height: 160px;
    border-radius: 24px;
    border: 1px dashed rgba(120, 171, 255, 0.7);
    background: #fbfdff;
    color: #1d3056;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.teacher-campus-upload-drop i {
    font-size: 40px;
    color: #4e81ef;
}

.teacher-campus-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-campus-preview-placeholder {
    grid-column: 1 / -1;
    min-height: 160px;
    border-radius: 24px;
    background: #f7fbff;
    color: #7a89a3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.teacher-campus-preview-item {
    position: relative;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #dbe5f3;
    background: #f8fbff;
    box-shadow: 0 12px 24px rgba(140, 177, 219, 0.12);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.teacher-campus-preview-item:hover,
.teacher-campus-preview-item:focus-visible {
    border-color: rgba(59, 130, 246, 0.56);
    box-shadow: 0 18px 32px rgba(59, 130, 246, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.teacher-campus-preview-item.is-complete {
    border-color: rgba(16, 185, 129, 0.42);
    background: #f0fdf6;
}

.teacher-campus-preview-item.is-missing {
    border-color: rgba(239, 68, 68, 0.18);
    background: #fffdfd;
}

.teacher-campus-preview-item.is-highlight {
    border-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

.teacher-campus-preview-item.is-editing {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

.teacher-campus-preview-thumb {
    width: 100%;
    aspect-ratio: 1 / 0.72;
    background: linear-gradient(135deg, #eef4ff, #edf8ff);
    overflow: hidden;
}

.teacher-campus-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-campus-preview-video {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: linear-gradient(135deg, #dcecff, #f0f8ff);
    color: #2563eb;
    overflow: hidden;
}

.teacher-campus-preview-video-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: 6px;
    color: #2563eb;
    font-weight: 700;
}

.teacher-campus-preview-video-fallback i {
    font-size: 28px;
}

.teacher-campus-preview-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-campus-preview-video span {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(29, 48, 86, 0.72);
    padding: 4px 8px;
    border-radius: 999px;
}

.teacher-campus-preview-item button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    z-index: 2;
}

.teacher-campus-preview-body {
    display: grid;
    gap: 4px;
    padding: 10px 10px 11px;
}

.teacher-campus-preview-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #20385e;
}

.teacher-campus-preview-student {
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    color: #16a34a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-preview-title {
    min-width: 0;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.teacher-campus-preview-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.teacher-campus-preview-status.status-complete {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.teacher-campus-preview-status.status-pending,
.teacher-campus-preview-status.status-missing-student,
.teacher-campus-preview-status.status-missing-title {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.teacher-campus-preview-edit {
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
}

.teacher-campus-inline-editor {
    grid-column: 1 / -1;
    margin-top: -2px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.teacher-campus-inline-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-campus-inline-editor-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.teacher-campus-inline-editor-copy strong {
    font-size: 15px;
    color: #0f172a;
}

.teacher-campus-inline-editor-copy small {
    min-width: 0;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-campus-inline-editor-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-inline-student-btn {
    min-height: 62px;
}

.teacher-campus-inline-student-picker {
    margin-top: -2px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.teacher-campus-inline-student-search .form-control {
    min-height: 42px;
    border-radius: 12px;
    border-color: #cbd5e1;
    padding-inline: 12px;
    font-size: 15px;
}

.teacher-campus-inline-student-empty {
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.teacher-campus-inline-student-list {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    gap: 8px;
    padding-right: 2px;
}

.teacher-campus-inline-student-option {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    text-align: left;
}

.teacher-campus-inline-student-option.is-selected {
    border-color: #10b981;
    background: #ecfdf5;
}

.teacher-campus-inline-student-option i {
    color: #94a3b8;
    font-size: 16px;
}

.teacher-campus-inline-student-option.is-selected i {
    color: #10b981;
}

.teacher-campus-inline-editor-block {
    display: grid;
    gap: 6px;
}

.teacher-campus-inline-editor-block label {
    font-size: 14px;
    font-weight: 700;
    color: #20385e;
}

.teacher-campus-inline-title-input {
    min-height: 48px;
}

.teacher-campus-inline-title-tip {
    color: #74839c;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-inline-status {
    min-height: 18px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.teacher-campus-inline-status.status-complete {
    color: #16a34a;
}

.teacher-campus-inline-status.status-pending,
.teacher-campus-inline-status.status-missing-student,
.teacher-campus-inline-status.status-missing-title {
    color: #d97706;
}

.teacher-campus-inline-actions {
    display: grid;
    gap: 10px;
}

.teacher-campus-inline-actions button {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
}

.teacher-campus-fill-table {
    display: grid;
    gap: 12px;
}

.teacher-campus-fill-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(203, 213, 225, 0.94);
    border-radius: 16px;
    background: #fff;
    padding: 12px 14px;
    text-align: left;
}

.teacher-campus-fill-summary {
    color: #6b7e99;
    font-size: 13px;
    margin-top: -2px;
}

.teacher-campus-fill-order {
    font-size: 12px;
    font-weight: 800;
    color: #2563eb;
}

.teacher-campus-fill-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.teacher-campus-fill-main strong {
    min-width: 0;
    font-size: 14px;
    color: #20385e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-fill-main small {
    min-width: 0;
    font-size: 12px;
    color: #74839c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-fill-item.status-complete {
    border-color: rgba(16, 185, 129, 0.28);
    background: #f0fdf6;
}

.teacher-campus-fill-item.status-missing-student,
.teacher-campus-fill-item.status-missing-title,
.teacher-campus-fill-item.status-pending {
    border-color: rgba(245, 158, 11, 0.24);
    background: #fffdf8;
}

.teacher-campus-student {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 700;
    color: #20385e;
}

.teacher-campus-student-btn {
    width: 100%;
    padding: 0;
    border: 1px solid rgba(191, 210, 236, 0.96);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    justify-content: space-between;
    text-align: left;
    padding-right: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.teacher-campus-student-btn:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.teacher-campus-student-btn.is-selected {
    border-color: rgba(22, 163, 74, 0.36);
    background: linear-gradient(180deg, #f4fff8 0%, #ffffff 100%);
}

.teacher-campus-student-btn i {
    color: #94a3b8;
    font-size: 14px;
}

.teacher-campus-student-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe, #ecfeff);
    border: 1px solid rgba(186, 210, 240, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-campus-student-avatar.more {
    color: #2563eb;
    font-size: 15px;
    font-weight: 800;
}

.teacher-campus-student-text {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1;
    padding: 10px 0;
}

.teacher-campus-student-text strong,
.teacher-campus-student-text small {
    display: block;
    writing-mode: horizontal-tb;
    word-break: normal;
    overflow-wrap: break-word;
}

.teacher-campus-student-text strong {
    font-size: 14px;
    color: #20385e;
}

.teacher-campus-student-text small {
    font-size: 11px;
    color: #74839c;
    font-weight: 500;
}

.teacher-campus-fill-status {
    justify-self: end;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
}

.teacher-campus-fill-status.status-complete {
    color: #16a34a;
}

.teacher-campus-fill-status.status-missing-student,
.teacher-campus-fill-status.status-missing-title,
.teacher-campus-fill-status.status-pending {
    color: #d97706;
}

.teacher-campus-progress {
    margin-top: 4px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.teacher-campus-submit-status {
    min-height: 20px;
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.teacher-campus-submit-status.success {
    color: #16a34a;
}

.teacher-campus-submit-status.error {
    color: #dc2626;
}

.teacher-campus-form {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.teacher-campus-picker {
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.teacher-campus-picker.is-open {
    opacity: 1;
    pointer-events: auto;
}

.teacher-campus-picker-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.44);
}

.teacher-campus-picker-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(76vh, 680px);
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -20px 48px rgba(15, 23, 42, 0.22);
    display: grid;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.teacher-campus-picker.is-open .teacher-campus-picker-sheet {
    transform: translateY(0);
}

.teacher-campus-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-campus-picker-head.front-back-header {
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 4px 0 8px;
}

.teacher-campus-picker-head strong,
.teacher-campus-picker-head small {
    display: block;
}

.teacher-campus-picker-head strong {
    font-size: 18px;
    color: #0f172a;
}

.teacher-campus-picker-head small {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.teacher-campus-picker-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-picker-search {
    position: relative;
}

.teacher-campus-picker-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.teacher-campus-picker-search .form-control {
    min-height: 44px;
    padding-left: 38px;
    border-radius: 14px;
}

.teacher-campus-picker-empty {
    padding: 14px 12px;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.teacher-campus-picker-list {
    display: grid;
    gap: 10px;
    overflow-y: auto;
    max-height: min(54vh, 460px);
    padding-right: 2px;
}

.teacher-campus-picker-item {
    width: 100%;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 16px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    text-align: left;
}

.teacher-campus-picker-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
}

.teacher-campus-picker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-campus-picker-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-campus-picker-text strong,
.teacher-campus-picker-text small {
    display: block;
    writing-mode: horizontal-tb;
    word-break: normal;
    overflow-wrap: break-word;
}

.teacher-campus-picker-text strong {
    color: #0f172a;
    font-size: 14px;
}

.teacher-campus-picker-text small {
    color: #64748b;
    font-size: 11px;
}

.teacher-campus-picker-item i {
    color: #94a3b8;
    font-size: 16px;
}

.teacher-campus-editor {
    position: fixed;
    inset: 0;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.teacher-campus-editor.is-open {
    opacity: 1;
    pointer-events: auto;
}

.teacher-campus-editor-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
}

.teacher-campus-editor-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(88vh, calc(var(--teacher-campus-editor-vh, 100dvh) - 12px));
    max-height: calc(var(--teacher-campus-editor-vh, 100dvh) - 12px);
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 48px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.teacher-campus-editor.is-open .teacher-campus-editor-sheet {
    transform: translateY(0);
}

.teacher-campus-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 64px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.teacher-campus-editor-head.front-back-header {
    align-items: center;
    justify-content: center;
}

.teacher-campus-editor-head strong,
.teacher-campus-editor-head small {
    display: block;
}

.teacher-campus-editor-head strong {
    font-size: 18px;
    color: #0f172a;
}

.teacher-campus-editor-head small {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.teacher-campus-editor-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-editor-preview {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}

.teacher-campus-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 18px;
    display: grid;
    gap: 12px;
}

.teacher-campus-editor-media {
    width: 100%;
    min-height: 96px;
    max-height: 170px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-campus-editor-media img,
.teacher-campus-editor-media video {
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
    background: #f1f5f9;
}

.teacher-campus-editor-block {
    display: grid;
    gap: 6px;
}

.teacher-campus-editor-block > label {
    font-size: 14px;
    font-weight: 700;
    color: #20385e;
}

.teacher-campus-editor-student {
    min-height: 58px;
}

.teacher-campus-editor-title-input {
    min-height: 50px;
}

.teacher-campus-editor-title-tip {
    color: #74839c;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-campus-editor-status {
    min-height: 18px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
    margin-top: -2px;
}

.teacher-campus-editor-status.status-complete {
    color: #16a34a;
}

.teacher-campus-editor-status.status-pending,
.teacher-campus-editor-status.status-missing-student,
.teacher-campus-editor-status.status-missing-title {
    color: #d97706;
}

.teacher-campus-editor-actions {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
    z-index: 1;
}

.teacher-campus-editor-actions .teacher-campus-editor-save-btn {
    grid-column: 1 / -1;
}

.teacher-campus-editor-actions button {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
}

body.campus-editor-open .bottom-nav {
    display: none;
}

body.campus-editor-open {
    overflow: hidden;
}

@media (max-height: 720px) {
    .teacher-campus-inline-student-list {
        max-height: 180px;
    }
}

.teacher-campus-toggle button:disabled {
    background: #f4f7fb;
    color: #9aa9bf;
    cursor: not-allowed;
}

.teacher-campus-sync-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.teacher-campus-switch {
    position: relative;
    display: inline-flex;
}

.teacher-campus-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.teacher-campus-switch span {
    width: 72px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #15aa8b, #1ca46f);
    display: inline-block;
    position: relative;
}

.teacher-campus-switch span::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
}

.teacher-reminder-dialog {
    max-width: min(920px, 94vw);
}

.teacher-reminder-panel {
    border-radius: 32px !important;
    border: none;
    box-shadow: 0 28px 56px rgba(15, 30, 70, 0.22);
}

.teacher-reminder-header {
    display: block;
    border-bottom: none;
    padding: 18px 24px 0;
    position: relative;
    min-height: 74px;
    text-align: center;
}

.teacher-reminder-header .btn-close {
    position: absolute;
    right: 22px;
    top: 20px;
    margin: 0;
    opacity: 0.72;
}

.teacher-reminder-back-btn {
    position: absolute;
    left: 22px;
    top: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(218, 226, 238, 0.9);
    background: rgba(255, 255, 255, 0.96);
    color: #10233f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: all 0.18s ease;
}

.teacher-reminder-back-btn:hover {
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.35);
    background: #f7fbff;
}

.teacher-reminder-back-btn span {
    display: block;
    font-size: 30px;
    line-height: 1;
    font-weight: 300;
    transform: translateY(-1px);
}

.teacher-subpage-head {
    display: grid;
    gap: 6px;
}

.teacher-subpage-head .front-subpage-title-block {
    padding-bottom: 8px;
}

.teacher-reminder-header .modal-title {
    color: #152d53;
    font-size: 28px;
    font-weight: 800;
}

.teacher-reminder-body {
    padding: 18px 28px calc(30px + env(safe-area-inset-bottom));
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.teacher-reminder-target-row,
.teacher-reminder-editor-head,
.teacher-reminder-strategy-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.teacher-reminder-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.teacher-reminder-task-picker {
    position: relative;
    margin: 10px 0 14px;
}

.teacher-reminder-task-trigger {
    width: 100%;
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid rgba(188, 206, 233, 0.92);
    background: #fff;
    color: #1f3b68;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    text-align: left;
    box-shadow: 0 10px 22px rgba(171, 199, 236, 0.08);
}

.teacher-reminder-task-trigger:disabled {
    opacity: 0.7;
    box-shadow: none;
}

.teacher-reminder-task-trigger-label {
    display: block;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    color: #17315b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-reminder-task-trigger-meta {
    display: block;
    min-width: 0;
    grid-column: 1 / 2;
    color: #6c7f99;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-reminder-task-trigger i {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    font-size: 16px;
    color: #5f7395;
    transition: transform 0.18s ease;
}

.teacher-reminder-task-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.teacher-reminder-task-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    margin-top: 8px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(215, 226, 241, 0.95);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.teacher-reminder-task-panel.d-none {
    display: none !important;
}

.teacher-reminder-task-panel-head {
    margin-bottom: 8px;
    color: #18305a;
    font-size: 12px;
    font-weight: 700;
}

.teacher-reminder-task-list {
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.teacher-reminder-task-option {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(188, 206, 233, 0.92);
    background: #fff;
    color: #23406c;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    text-align: left;
}

.teacher-reminder-task-option.active {
    border-color: rgba(59, 130, 246, 0.52);
    background: rgba(242, 248, 255, 0.98);
}

.teacher-reminder-task-option-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.teacher-reminder-task-option-main strong,
.teacher-reminder-task-option-main small {
    min-width: 0;
    overflow: hidden;
}

.teacher-reminder-task-option-main strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.teacher-reminder-task-option-main small {
    color: #6e819a;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.teacher-reminder-task-option-side {
    display: grid;
    justify-items: end;
    align-self: center;
    min-width: 78px;
    gap: 4px;
    color: #5a7193;
    font-size: 11px;
    font-weight: 700;
}

.teacher-reminder-task-option-side i {
    font-size: 15px;
    color: #3b82f6;
}

.teacher-reminder-task-empty {
    padding: 10px 12px;
    color: #70829d;
    font-size: 12px;
    text-align: center;
    background: #f8fbff;
    border-radius: 14px;
}

.teacher-reminder-target-title {
    color: #142b52;
    font-size: 18px;
    font-weight: 800;
}

.teacher-reminder-target-meta,
.teacher-reminder-page-tip {
    color: #6c7f99;
    font-size: 14px;
    font-weight: 600;
}

.teacher-reminder-target-all {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3771df;
    font-size: 16px;
    font-weight: 700;
}

.teacher-reminder-target-all i {
    font-size: 18px;
}

.teacher-reminder-chip-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(34px, auto));
    grid-auto-columns: minmax(78px, 1fr);
    gap: 10px;
    margin: 0;
    min-width: max-content;
}

.teacher-reminder-chip-scroll {
    margin: 14px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.teacher-reminder-chip-scroll::-webkit-scrollbar {
    display: none;
}

.teacher-reminder-chip-hint {
    margin-bottom: 14px;
    color: #91a0b8;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}

.teacher-reminder-page-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 4px;
}

.teacher-reminder-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 1px solid rgba(191, 207, 229, 0.92);
    background: #fff;
    color: #254574;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(171, 199, 236, 0.09);
    text-align: center;
    transition: all 0.18s ease;
}

.teacher-reminder-chip {
    border-color: rgba(188, 206, 233, 0.95);
}

.teacher-reminder-chip.active {
    background: rgba(241, 247, 255, 0.98);
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.teacher-reminder-chip.more {
    justify-content: center;
    min-height: 38px;
    padding: 12px 16px;
    color: #677a98;
    background: #f7f9fe;
}

.teacher-reminder-chip-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.teacher-reminder-chip-check {
    width: 14px;
    min-width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 12px;
    line-height: 1;
}

.teacher-reminder-quick-btn {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(188, 206, 233, 0.92);
    background: #fff;
    color: #24497d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(171, 199, 236, 0.08);
    transition: all 0.18s ease;
}

.teacher-reminder-quick-btn i {
    font-size: 16px;
}

.teacher-reminder-quick-btn:hover:not(:disabled) {
    border-color: rgba(59, 130, 246, 0.35);
    color: #1d4ed8;
    background: #f7fbff;
}

.teacher-reminder-quick-btn.is-active {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(240, 247, 255, 0.98);
    color: #1d4ed8;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.12);
}

.teacher-reminder-quick-btn:disabled {
    opacity: 0.58;
    box-shadow: none;
}

.teacher-reminder-editor-box {
    position: relative;
}

.teacher-reminder-char-count {
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: #8090aa;
    font-size: 14px;
    font-weight: 500;
}

.teacher-reminder-textarea {
    min-height: 112px;
    border-radius: 20px;
    border: 1px solid rgba(184, 205, 240, 0.92);
    padding: 18px;
    font-size: 17px;
    line-height: 1.7;
    color: #1c3358;
    padding-bottom: 42px;
}

.teacher-reminder-audience-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(184, 205, 240, 0.8);
    border-radius: 14px;
    color: #354d70;
    background: #f8fbff;
    font-size: 14px;
    line-height: 1.5;
}

.teacher-reminder-audience-option input {
    margin-top: 3px;
}

.teacher-reminder-action-status {
    min-height: 22px;
    margin-top: 10px;
    color: #71839f;
    font-size: 14px;
    font-weight: 600;
}

.teacher-reminder-action-status.success {
    color: #159258;
}

.teacher-reminder-action-status.error {
    color: #d14b52;
}

.teacher-reminder-send-zone {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
    z-index: 3;
    margin-top: 10px;
    padding: 10px 0 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.96) 18%, rgba(255, 255, 255, 0.99) 100%);
}

.teacher-reminder-body #memberReminderSendBtn {
    min-height: 50px;
    margin-top: 8px;
    border-radius: 16px;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
    background: linear-gradient(135deg, #2563eb, #0f67f3);
    color: #fff;
    border-color: #2563eb;
    position: relative;
    z-index: 1;
}

.teacher-reminder-body #memberReminderSendBtn i {
    font-size: 18px;
}

.teacher-reminder-body #memberReminderSendBtn:disabled {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.98), rgba(239, 246, 255, 0.98));
    border-color: rgba(191, 219, 254, 0.96);
    color: #7c93b5;
    box-shadow: none;
    opacity: 1;
}

.teacher-reminder-body #memberReminderSendBtn:disabled i,
.teacher-reminder-body #memberReminderSendBtn:disabled span {
    color: #7c93b5;
}

.teacher-reminder-toast-shell {
    position: fixed;
    left: 50%;
    bottom: 110px;
    transform: translateX(-50%);
    z-index: 2000;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.teacher-reminder-toast {
    min-width: 200px;
    max-width: min(88vw, 360px);
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.26);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}

.teacher-reminder-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.teacher-reminder-toast.success {
    background: rgba(21, 146, 88, 0.94);
}

.teacher-reminder-toast.error {
    background: rgba(209, 75, 82, 0.94);
}

.teacher-reminder-strategy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.teacher-reminder-strategy-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 96px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(214, 224, 242, 0.95);
    background: #fff;
    text-align: left;
    color: #26416a;
    box-shadow: 0 8px 18px rgba(171, 199, 236, 0.08);
}

.teacher-reminder-strategy-card.active {
    border-color: rgba(59, 130, 246, 0.58);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(247, 251, 255, 0.98));
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.12);
}

.teacher-reminder-strategy-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #c4d0e1;
    font-size: 16px;
    line-height: 1;
}

.teacher-reminder-strategy-card.active .teacher-reminder-strategy-check {
    color: #2563eb;
}

.teacher-reminder-strategy-card strong,
.teacher-reminder-strategy-card small,
.teacher-reminder-strategy-card p {
    display: block;
}

.teacher-reminder-strategy-card strong {
    font-size: 14px;
    margin-bottom: 2px;
}

.teacher-reminder-strategy-card small {
    color: #6a7e98;
    font-size: 11px;
    margin-bottom: 2px;
}

.teacher-reminder-strategy-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher-reminder-strategy-icon {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    font-size: 12px;
}

.teacher-reminder-strategy-tools {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.teacher-reminder-strategy-icon.green {
    color: #16a34a;
    background: rgba(220, 252, 231, 0.95);
}

.teacher-reminder-strategy-icon.blue {
    color: #3b82f6;
    background: rgba(219, 234, 254, 0.95);
}

.teacher-reminder-strategy-icon.amber {
    color: #f59e0b;
    background: rgba(255, 237, 213, 0.98);
}

.teacher-backend-entry-page {
    min-height: 100vh;
}

.teacher-backend-entry-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 28px;
    border-radius: 24px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(14, 165, 233, 0.08)),
        rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
}

.teacher-backend-entry-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(13, 148, 136, 0.12);
    font-family: var(--font-family-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.teacher-backend-entry-hero h1 {
    margin: 14px 0 10px;
    font-size: 34px;
    font-weight: 800;
    color: #13294b;
}

.teacher-backend-entry-hero p {
    margin: 0;
    max-width: 720px;
    color: #5c718f;
    line-height: 1.75;
}

.teacher-backend-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.teacher-backend-entry-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(207, 219, 239, 0.92);
    background: rgba(255, 255, 255, 0.96);
    color: #163258;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.teacher-backend-entry-card.is-disabled {
    text-align: left;
    width: 100%;
    opacity: 0.88;
    cursor: not-allowed;
}

.teacher-backend-entry-card-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.teacher-backend-entry-card-icon.blue { background: linear-gradient(135deg, #3b82f6, #0ea5e9); }
.teacher-backend-entry-card-icon.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.teacher-backend-entry-card-icon.violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.teacher-backend-entry-card-icon.amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.teacher-backend-entry-card-icon.teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.teacher-backend-entry-card-icon.red { background: linear-gradient(135deg, #ef4444, #dc2626); }

.teacher-backend-entry-card-main strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.teacher-backend-entry-card-main p {
    margin: 8px 0 12px;
    color: #64748b;
    line-height: 1.65;
}

.teacher-backend-entry-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(220, 252, 231, 0.96);
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
}

.teacher-backend-entry-badge.muted {
    background: rgba(226, 232, 240, 0.96);
    color: #475569;
}

.teacher-backend-entry-note {
    margin-top: 20px;
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(207, 219, 239, 0.92);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
}

.teacher-backend-entry-note h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: #163258;
}

.teacher-backend-entry-note p {
    margin: 0;
    color: #64748b;
    line-height: 1.75;
}

@media (max-width: 767.98px) {
    .teacher-role-shell {
        width: min(100%, 430px);
        max-width: 430px;
        margin: 0 auto;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 12px;
        padding-bottom: calc(148px + env(safe-area-inset-bottom));
    }

    .teacher-role-publish-page {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
        overflow-x: hidden;
    }

    .teacher-page-head {
        grid-template-columns: 34px 1fr 34px;
        gap: 8px;
    }

    .teacher-page-head-spacer,
    .teacher-theme-works-spacer,
    .teacher-page-notice,
    .teacher-back-icon-btn {
        width: 34px;
        height: 34px;
    }

    .teacher-page-head-title-wrap {
        gap: 6px;
    }

    .teacher-page-head-title-wrap h1 {
        font-size: 24px;
    }

    .teacher-page-role-badge {
        min-height: 24px;
        padding: 0 8px;
        font-size: 12px;
    }

    .teacher-page-notice {
        font-size: 22px;
    }

    .teacher-page-notice-dot {
        width: 8px;
        height: 8px;
        top: 3px;
        right: 1px;
    }

    .teacher-role-hero {
        grid-template-columns: 1fr;
        padding: 18px 18px 20px;
        gap: 14px;
        border-radius: 24px;
    }

    .teacher-role-hero-main {
        gap: 12px;
        align-items: flex-start;
    }

    .teacher-role-hero-avatar {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .teacher-role-hero-title {
        font-size: 22px;
    }

    .teacher-role-hero-name {
        font-size: 15px;
        line-height: 1.45;
    }

    .teacher-role-hero-meta {
        gap: 8px 12px;
        font-size: 11px;
    }

    .teacher-role-switch-btn {
        width: 100%;
        min-height: 46px;
        font-size: 14px;
    }

    .teacher-home-pills,
    .teacher-publish-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-role-publish-page .teacher-publish-pills {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .teacher-home-pills a,
    .teacher-publish-pills button {
        min-height: 44px;
        font-size: 14px;
    }

    .teacher-role-card,
    .teacher-activity-detail-card,
    .teacher-publish-form-card,
    .teacher-campus-upload-card,
    .teacher-theme-works-card {
        padding: 16px;
        border-radius: 22px;
    }

    .teacher-role-card-head h2 {
        font-size: 20px;
    }

    .teacher-role-card-head p,
    .teacher-inline-empty,
    .teacher-campus-inline-tip,
    .teacher-campus-upload-note,
    .teacher-campus-sync-tip,
    .teacher-reminder-meta-line,
    .teacher-reminder-foot-tip {
        font-size: 12px;
    }

    .teacher-class-summary-grid,
    .teacher-class-status-grid {
        grid-template-columns: 1fr;
    }

    .teacher-home-task-card,
    .teacher-campus-scope-grid,
    .teacher-reminder-quick-actions,
    .teacher-class-actions,
    .teacher-campus-filter-row {
        grid-template-columns: 1fr;
    }

    .teacher-role-home-page .teacher-campus-style-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .teacher-role-home-page .teacher-theme-works-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .teacher-role-home-page .teacher-theme-class-row {
        grid-template-columns: minmax(0, 1fr) 172px;
        gap: 14px;
        padding: 18px;
    }

    .teacher-role-home-page .teacher-theme-class-row-count {
        font-size: 16px;
    }

    .teacher-role-home-page .teacher-theme-class-row-breakdown {
        font-size: 13px;
    }

    .teacher-role-home-page .teacher-activity-filter-row,
    .teacher-role-home-page .teacher-campus-filter-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-role-publish-page .teacher-publish-sheet-actions,
    .teacher-role-publish-page .teacher-campus-footer,
    .teacher-role-publish-page .teacher-task-build-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-role-publish-page .teacher-task-library-toolbar,
    .teacher-role-publish-page .teacher-task-build-grid,
    .teacher-role-publish-page .teacher-task-build-types {
        grid-template-columns: 1fr;
    }

    .teacher-role-publish-page .teacher-task-library-list {
        grid-template-columns: 1fr;
    }

    .teacher-role-publish-page .teacher-campus-upload-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .teacher-role-publish-page .teacher-campus-fill-item {
        grid-template-columns: 68px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .teacher-task-library-card-head strong {
        font-size: 18px;
        -webkit-line-clamp: 2;
    }

    .teacher-task-library-card-main p {
        font-size: 12px;
        min-height: 38px;
    }

    .teacher-task-library-card-info {
        min-height: 132px;
    }

    .teacher-task-library-card-meta span,
    .teacher-task-library-card-types span,
    .teacher-task-library-selected-meta span {
        font-size: 11px;
        min-height: 24px;
        padding: 0 8px;
    }

    .teacher-task-library-card-action {
        min-height: 32px;
        font-size: 12px;
        padding: 0 12px;
    }

    .teacher-task-library-selected {
        grid-template-columns: 1fr;
    }

    .teacher-task-library-selected-cover {
        width: 100%;
        max-width: 132px;
    }

    .teacher-task-library-preview-body {
        grid-template-columns: 1fr;
    }

    .teacher-task-library-preview-cover {
        width: 100%;
        max-width: none;
    }

    .teacher-task-library-note {
        font-size: 12px;
        padding: 10px 12px;
    }

    .teacher-campus-upload-drop,
    .teacher-campus-preview-placeholder {
        min-height: 120px;
    }

    .teacher-role-publish-page .teacher-campus-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-role-publish-page .teacher-campus-preview-item {
        min-width: 0;
    }

    .teacher-role-publish-page .teacher-campus-student-btn {
        min-height: 64px;
    }

    .teacher-role-publish-page .teacher-campus-preview-name {
        font-size: 12px;
    }

    .teacher-role-publish-page .teacher-campus-footer {
        gap: 10px;
        margin-top: 6px;
    }

    .teacher-reminder-dialog {
        max-width: 94vw;
        margin: 0 auto;
    }

    .teacher-reminder-header {
        min-height: 68px;
        padding-top: 16px;
    }

    .teacher-reminder-header .modal-title {
        font-size: 22px;
    }

    .teacher-reminder-back-btn,
    .teacher-reminder-header .btn-close {
        top: 14px;
    }

    .teacher-reminder-back-btn {
        left: 14px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 16px;
    }

    .teacher-reminder-header .btn-close {
        right: 14px;
    }

    .teacher-reminder-body {
        padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
    }

    .teacher-reminder-target-title,
    .teacher-campus-form-row > label,
    .teacher-reminder-action-title,
    .teacher-reminder-editor-head span,
    .teacher-reminder-strategy-head span {
        font-size: 15px;
    }

    .teacher-reminder-task-trigger {
        min-height: 48px;
        padding: 9px 12px;
        border-radius: 16px;
    }

    .teacher-reminder-task-trigger-label {
        font-size: 13px;
    }

    .teacher-reminder-task-trigger-meta,
    .teacher-reminder-task-option-main small,
    .teacher-reminder-task-option-side {
        font-size: 11px;
    }

    .teacher-reminder-textarea {
        min-height: 140px;
        padding: 14px;
        font-size: 15px;
        padding-bottom: 38px;
    }

    .teacher-reminder-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-reminder-chip-list {
        grid-auto-columns: minmax(64px, 1fr);
        gap: 8px;
    }

    .teacher-reminder-page-row {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .teacher-reminder-chip {
        gap: 6px;
        min-height: 36px;
        padding: 7px 10px;
        font-size: 13px;
    }

    .teacher-reminder-chip-check {
        width: 14px;
        min-width: 14px;
        font-size: 13px;
    }

    .teacher-reminder-quick-btn {
        min-height: 44px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 12px;
    }

    .teacher-reminder-quick-btn i {
        font-size: 14px;
    }

    .teacher-reminder-char-count {
        right: 14px;
        bottom: 10px;
        font-size: 13px;
    }

    .teacher-reminder-body #memberReminderSendBtn {
        min-height: 48px;
        border-radius: 14px;
    }

    .teacher-reminder-send-zone {
        bottom: calc(env(safe-area-inset-bottom) + 4px);
        padding-bottom: 4px;
    }

    .teacher-reminder-strategy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-reminder-strategy-card {
        min-height: 90px;
        padding: 10px;
        border-radius: 16px;
    }

    .teacher-reminder-strategy-card strong {
        font-size: 13px;
    }

    .teacher-reminder-strategy-card small,
    .teacher-reminder-strategy-card p {
        font-size: 11px;
    }

    .teacher-reminder-strategy-tools {
        gap: 8px;
    }

    .teacher-backend-entry-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
    }

    .teacher-backend-entry-hero h1 {
        font-size: 28px;
    }

    .teacher-backend-entry-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .teacher-role-publish-page .teacher-publish-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-role-publish-page .teacher-publish-sheet-actions,
    .teacher-role-publish-page .teacher-campus-footer,
    .teacher-role-publish-page .teacher-campus-upload-grid {
        grid-template-columns: 1fr;
    }

    .teacher-role-publish-page .teacher-campus-fill-item {
        grid-template-columns: 60px minmax(0, 1fr) auto;
    }

    .teacher-role-publish-page .teacher-campus-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-role-publish-page .teacher-campus-preview-body {
        padding: 9px;
    }

    .teacher-role-publish-page .teacher-campus-student-btn {
        padding-right: 10px;
    }

    .teacher-role-publish-page .teacher-campus-inline-editor {
        padding: 12px;
        gap: 10px;
    }

    .teacher-role-publish-page .teacher-campus-inline-editor-copy strong,
    .teacher-role-publish-page .teacher-campus-inline-editor-block label {
        font-size: 14px;
    }

    .teacher-role-publish-page .teacher-campus-inline-editor-copy small,
    .teacher-role-publish-page .teacher-campus-inline-title-tip,
    .teacher-role-publish-page .teacher-campus-inline-status {
        font-size: 12px;
    }

    .teacher-role-publish-page .teacher-campus-inline-student-list {
        max-height: 200px;
    }

    .teacher-role-publish-page .teacher-campus-fill-main strong,
    .teacher-role-publish-page .teacher-campus-student-text strong {
        font-size: 13px;
    }

    .teacher-role-publish-page .teacher-campus-fill-main small,
    .teacher-role-publish-page .teacher-campus-student-text small,
    .teacher-role-publish-page .teacher-campus-submit-status {
        font-size: 12px;
    }

    .teacher-role-publish-page .teacher-campus-editor-actions {
        grid-template-columns: 1fr;
    }

    .teacher-role-publish-page .teacher-campus-editor-actions .teacher-campus-editor-save-btn {
        grid-column: auto;
    }

    .teacher-role-publish-page .teacher-publish-option {
        grid-template-columns: 68px minmax(0, 1fr) 18px;
        gap: 12px;
        padding: 14px 12px;
    }

    .teacher-role-publish-page .teacher-publish-option-check {
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .teacher-role-publish-page .teacher-publish-sheet {
        padding: 18px 16px;
        border-radius: 24px;
    }

    .teacher-role-publish-page .teacher-publish-option-art.image {
        width: 68px;
        height: 68px;
        border-radius: 18px;
    }

    .teacher-role-publish-page .teacher-publish-option-art {
        width: 68px;
        height: 68px;
        border-radius: 18px;
        font-size: 26px;
    }

    .teacher-role-home-page .teacher-campus-style-grid,
    .teacher-role-home-page .teacher-theme-works-grid {
        grid-template-columns: 1fr;
    }

    .teacher-role-home-page .teacher-theme-class-row,
    .teacher-role-home-page .teacher-activity-filter-row,
    .teacher-role-home-page .teacher-campus-filter-row {
        grid-template-columns: 1fr;
    }

    .teacher-role-home-page .teacher-theme-class-row-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-reminder-quick-actions {
        grid-template-columns: 1fr;
    }

    .teacher-reminder-chip-list {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 740px) {
    .teacher-campus-editor-head {
        min-height: 60px;
        padding: 12px 16px 8px;
    }

    .teacher-campus-editor-body {
        padding: 10px 16px;
        gap: 10px;
    }

    .teacher-campus-editor-media img,
    .teacher-campus-editor-media video {
        max-height: 120px;
    }

    .teacher-campus-editor-title-tip {
        font-size: 11px;
    }
}

@media (max-height: 680px) {
    .teacher-campus-editor-head strong {
        font-size: 17px;
    }

    .teacher-campus-editor-head small {
        font-size: 11px;
        line-height: 1.35;
    }

    .teacher-campus-editor-media {
        min-height: 84px;
        max-height: 120px;
    }

    .teacher-campus-editor-media img,
    .teacher-campus-editor-media video {
        max-height: 96px;
    }

    .teacher-campus-editor-title-tip {
        display: none;
    }

    .teacher-campus-editor-status {
        font-size: 12px;
    }

    .teacher-campus-editor-actions {
        padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
        gap: 8px;
    }

    .teacher-campus-editor-actions button {
        min-height: 46px;
        font-size: 15px;
    }
}

.teacher-workbench-shell {
    --mobile-shell-bottom-space: calc(148px + env(safe-area-inset-bottom));
    min-height: 100vh;
    padding-top: 20px;
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    background:
        radial-gradient(circle at top center, rgba(191, 219, 254, 0.75) 0%, rgba(239, 246, 255, 0.92) 34%, rgba(248, 251, 255, 1) 72%),
        linear-gradient(180deg, #eff7ff 0%, #f9fbff 100%);
}

.teacher-workbench-page {
    gap: 16px;
}

.teacher-workbench-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
}

.teacher-workbench-titlebar h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    color: #0f172a;
}

.teacher-workbench-notice-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}

.teacher-workbench-notice-btn i {
    font-size: 22px;
}

.teacher-workbench-notice-dot {
    position: absolute;
    right: 12px;
    top: 11px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #fff;
}

.teacher-workbench-notice-inline {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 16px;
}

.teacher-workbench-hero,
.teacher-workbench-profile-card,
.teacher-workbench-quick-card,
.teacher-workbench-card,
.teacher-workbench-resource-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid rgba(14, 165, 233, 0.14);
    box-shadow: var(--shadow-soft);
}

.teacher-workbench-hero {
    padding: 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f2d58 0%, #006d74 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.teacher-workbench-hero-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.teacher-workbench-hero-avatar {
    width: 104px;
    height: 104px;
    flex-basis: 104px;
    background: rgba(255, 255, 255, 0.88);
}

.teacher-workbench-hero-avatar img {
    background: #dbeafe;
}

.teacher-workbench-hero-text {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-workbench-hero-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.teacher-workbench-hero-name {
    font-size: 16px;
    font-weight: 700;
}

.teacher-workbench-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.86);
}

.teacher-workbench-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.teacher-workbench-switch-btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: transparent;
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.teacher-workbench-hero-actions {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 12px;
    flex: 0 0 auto;
}

.teacher-workbench-top-stack {
    display: grid;
    gap: 12px;
}

.teacher-point-hero-card {
    position: relative;
    padding: 18px 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(135deg, #0d5db8 0%, #00a88d 100%);
}

.teacher-point-hero-avatar {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    border-width: 4px;
    box-shadow: 0 14px 26px rgba(6, 49, 110, 0.26);
}

.teacher-point-hero-text {
    gap: 10px;
}

.teacher-point-hero-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-point-hero-name {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.teacher-point-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #17a570;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(17, 86, 110, 0.16);
}

.teacher-point-hero-meta-grid {
    display: grid;
    gap: 8px;
}

.teacher-point-hero-meta-grid,
.teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
.teacher-point-hero-meta-line {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
}

.teacher-point-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.teacher-point-hero-meta-item i {
    font-size: 15px;
    opacity: 0.94;
}

.teacher-point-hero-meta-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-point-hero-separator {
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
}

.teacher-point-hero-meta-id {
    gap: 6px;
}

.teacher-point-class-id-prefix {
    color: rgba(255, 255, 255, 0.78);
}

.teacher-point-copy-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    transition: background .2s ease, transform .2s ease;
}

.teacher-point-copy-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.teacher-point-copy-btn i {
    font-size: 11px;
}

.teacher-point-hero-actions {
    align-self: flex-start;
}

.teacher-point-switch-btn {
    min-height: 42px;
    padding: 0 18px;
    border-color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.teacher-point-profile-btn {
    min-height: 42px;
    padding: 0 18px;
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 18px rgba(5, 78, 120, 0.14);
}

.teacher-point-profile-btn:hover {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.22);
}

.teacher-point-summary-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(128px, 0.84fr) minmax(0, 1.16fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(14, 165, 233, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 30px rgba(22, 70, 135, 0.08);
}

.teacher-point-summary-main {
    min-width: 0;
    display: grid;
    align-content: center;
}

.teacher-point-summary-side {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
    border-left: 1px solid rgba(190, 208, 235, 0.88);
}

.teacher-point-summary-label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #24497f;
}

.teacher-point-summary-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teacher-point-summary-value-row strong {
    font-size: 42px;
    line-height: 0.95;
    font-weight: 800;
    color: #143b72;
    letter-spacing: -0.03em;
}

.teacher-point-summary-star {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffba1a 0%, #ff9300 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 159, 0, 0.28);
    flex: 0 0 auto;
}

.teacher-point-summary-star i {
    font-size: 14px;
}

.teacher-point-summary-divider {
    display: none;
}

.teacher-point-ranking-entry {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

.teacher-point-ranking-entry:hover {
    text-decoration: none;
}

.teacher-point-ranking-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaf3ff 0%, #dfeeff 100%);
    color: #2f73ea;
    box-shadow: inset 0 0 0 1px rgba(72, 123, 213, 0.08);
}

.teacher-point-ranking-icon i {
    font-size: 23px;
}

.teacher-point-ranking-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.teacher-point-ranking-copy strong {
    font-size: 16px;
    line-height: 1.15;
    font-weight: 800;
    color: #1d437a;
}

.teacher-point-ranking-copy small {
    font-size: 12px;
    color: #7a90b1;
}

.teacher-point-ranking-tail {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.teacher-point-ranking-arrow {
    font-size: 21px;
    line-height: 1;
    color: #7f92ae;
}

.teacher-point-notice-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 16px;
    border: 1px solid rgba(239, 90, 92, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%);
    box-shadow: 0 10px 20px rgba(239, 90, 92, 0.08);
    color: #ef5a5c;
    font-size: 26px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.teacher-point-notice-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff 0%, #fff1f1 100%);
    box-shadow: 0 12px 22px rgba(239, 90, 92, 0.12);
}

.teacher-point-notice-btn .teacher-page-notice-dot {
    top: 8px;
    right: 10px;
}

.teacher-point-summary-card,
.teacher-point-ranking-entry,
.teacher-point-notice-btn,
.teacher-workbench-quick-card {
    -webkit-tap-highlight-color: transparent;
}

.teacher-point-ranking-panel {
    padding: 0 0 calc(24px + env(safe-area-inset-bottom));
    overflow-x: hidden;
}

.teacher-point-ranking-panel,
.teacher-point-ranking-panel *,
.teacher-point-ranking-panel *::before,
.teacher-point-ranking-panel *::after {
    box-sizing: border-box;
}

.teacher-point-ranking-shell {
    display: grid;
    gap: 12px;
    min-width: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
}

.teacher-point-ranking-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 0 2px;
}

.teacher-back-icon-btn i,
.teacher-point-ranking-back i {
    font-size: 22px;
    line-height: 1;
}

.teacher-back-icon-btn span,
.teacher-point-ranking-back span {
    display: block;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
    transform: translateY(-1px);
}

.teacher-point-ranking-topbar-center {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
}

.teacher-point-ranking-title {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900;
    color: #122a66;
    letter-spacing: 0.02em;
}

.teacher-point-ranking-view-chip {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(84, 228, 176, 0.16);
    color: #159a62;
    font-size: 13px;
    font-weight: 800;
}

.teacher-point-ranking-mode-pill {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 245, 255, 0.96);
    color: #2469e8;
    font-size: 15px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(209, 224, 248, 0.96);
    white-space: nowrap;
}

.teacher-point-ranking-hero {
    margin-bottom: 0;
    min-height: 156px;
    padding: 14px 16px;
    border-radius: 20px;
}

.teacher-point-ranking-hero .teacher-workbench-hero-main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.teacher-point-ranking-hero .teacher-workbench-hero-avatar,
.teacher-point-ranking-hero .teacher-point-hero-avatar {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
}

.teacher-point-ranking-hero .teacher-point-hero-text {
    gap: 8px;
}

.teacher-point-ranking-hero .teacher-point-hero-name-row {
    gap: 8px;
    padding-right: 102px;
}

.teacher-point-ranking-hero .teacher-point-hero-name {
    font-size: 22px;
}

.teacher-point-ranking-hero .teacher-point-role-badge {
    min-height: 22px;
    padding: 0 9px;
    font-size: 11px;
}

.teacher-point-ranking-hero .teacher-point-hero-meta-grid,
.teacher-point-ranking-hero .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
.teacher-point-ranking-hero .teacher-point-hero-meta-line {
    font-size: 13px;
}

.teacher-point-ranking-hero .teacher-workbench-hero-actions,
.teacher-point-ranking-hero .teacher-point-hero-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    gap: 8px;
}

.teacher-point-ranking-hero .teacher-point-switch-btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
}

.teacher-point-ranking-board {
    display: grid;
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(201, 216, 241, 0.72);
    box-shadow: 0 16px 34px rgba(15, 61, 126, 0.08);
    min-width: 0;
    overflow: hidden;
}

.teacher-point-ranking-main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    border-bottom: 1px solid rgba(219, 229, 242, 0.92);
}

.teacher-point-ranking-main-tab {
    position: relative;
    min-height: 48px;
    border: none;
    background: transparent;
    color: #7485a6;
    font-size: 16px;
    font-weight: 700;
    min-width: 0;
}

.teacher-point-ranking-main-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: #2f73ea;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

.teacher-point-ranking-main-tab.active {
    color: #2469e8;
}

.teacher-point-ranking-main-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

.teacher-point-ranking-range-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 6px;
    border-radius: 999px;
    background: #f4f8ff;
}

.teacher-point-ranking-range-tab {
    min-height: 42px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #677899;
    font-size: 16px;
    font-weight: 700;
    min-width: 0;
}

.teacher-point-ranking-range-tab.active {
    background: linear-gradient(180deg, #eef5ff 0%, #e7f0ff 100%);
    color: #2469e8;
    box-shadow: inset 0 0 0 1px rgba(174, 201, 245, 0.75);
}

.teacher-point-ranking-view {
    display: grid;
    gap: 14px;
}

.teacher-point-class-overview-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
    min-height: 112px;
    border-radius: 20px;
    border: 1px solid rgba(162, 230, 217, 0.9);
    background:
        linear-gradient(180deg, rgba(247, 255, 252, 0.98) 0%, rgba(241, 255, 251, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86);
    min-width: 0;
}

.teacher-point-class-overview-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.teacher-point-class-overview-divider {
    align-self: stretch;
    background: linear-gradient(180deg, rgba(185, 219, 214, 0) 0%, rgba(185, 219, 214, 0.96) 24%, rgba(185, 219, 214, 0.96) 76%, rgba(185, 219, 214, 0) 100%);
}

.teacher-point-class-overview-metric {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-content: center;
}

.teacher-point-class-overview-label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: #3b4f78;
    min-width: 0;
    white-space: nowrap;
}

.teacher-point-class-overview-value-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
}

.teacher-point-class-overview-value-row.align-end {
    align-items: baseline;
}

.teacher-point-class-overview-value-row strong {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.03em;
    min-width: 0;
}

.teacher-point-class-overview-card .teacher-point-class-overview-metric:first-child strong {
    color: #10a35d;
    font-size: clamp(30px, 9vw, 44px);
}

.teacher-point-class-overview-card .teacher-point-class-overview-metric:last-child strong {
    color: #163f7b;
}

.teacher-point-class-overview-unit {
    font-size: 12px;
    font-weight: 700;
    color: #6883a6;
    flex: 0 0 auto;
}

.teacher-point-change {
    display: inline-flex;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

.teacher-point-change-up {
    color: #ef4444;
}

.teacher-point-change-down {
    color: #12a060;
}

.teacher-point-change-neutral {
    color: #98a7bf;
}

.teacher-point-change.trend-up,
.teacher-point-class-change-cell.trend-up,
.teacher-point-teacher-metric-subline .trend-up {
    color: #ff4d4f !important;
}

.teacher-point-change.trend-down,
.teacher-point-class-change-cell.trend-down,
.teacher-point-teacher-metric-subline .trend-down {
    color: #16a34a !important;
}

.teacher-point-change.trend-flat,
.teacher-point-class-change-cell.trend-flat,
.teacher-point-teacher-metric-subline .trend-flat {
    color: #98a2b3 !important;
}

.teacher-point-class-overview-art {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
    min-width: 88px;
}

.teacher-point-trophy-illustration {
    position: relative;
    width: 84px;
    height: 78px;
    border-radius: 30px 30px 18px 18px;
    background:
        radial-gradient(circle at 28px 26px, rgba(255, 255, 255, 0.78) 0 4px, transparent 4px),
        radial-gradient(circle at 86px 18px, rgba(255, 193, 7, 0.88) 0 3px, transparent 3px),
        radial-gradient(circle at 96px 36px, rgba(16, 185, 129, 0.18) 0 6px, transparent 6px),
        linear-gradient(180deg, rgba(190, 251, 225, 0.12) 0%, rgba(89, 214, 174, 0.18) 100%);
}

.teacher-point-trophy-illustration::before,
.teacher-point-trophy-illustration::after {
    content: "";
    position: absolute;
    inset: auto;
    width: 10px;
    height: 20px;
    border-radius: 8px;
    background: #ffbf2b;
}

.teacher-point-trophy-illustration::before {
    top: 22px;
    left: 14px;
    transform: rotate(-36deg);
}

.teacher-point-trophy-illustration::after {
    top: 42px;
    right: 6px;
    transform: rotate(28deg);
}

.teacher-point-trophy-illustration i {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: 60px;
    line-height: 1;
    color: #55d3ac;
    opacity: 0.92;
    filter: drop-shadow(0 16px 28px rgba(62, 184, 145, 0.26));
}

.teacher-point-ranking-table-card,
.teacher-point-rule-board,
.teacher-point-source-board {
    border-radius: 22px;
    border: 1px solid rgba(217, 228, 245, 0.86);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(21, 66, 126, 0.06);
}

.teacher-point-ranking-table-head {
    display: grid;
    align-items: center;
    padding: 0 18px 12px;
    color: #8190a9;
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
}

.teacher-point-class-table-head {
    grid-template-columns: 72px minmax(0, 1fr) 110px 96px;
}

.teacher-point-teacher-table-head {
    grid-template-columns: 72px minmax(0, 1.4fr) 108px 100px 98px;
}

.teacher-point-ranking-table-body {
    display: grid;
    min-width: 0;
}

.teacher-point-class-row,
.teacher-point-teacher-row {
    display: grid;
    align-items: center;
    gap: 10px;
    min-height: 88px;
    padding: 0 18px;
    border-top: 1px solid rgba(237, 242, 249, 0.96);
    min-width: 0;
}

.teacher-point-class-row {
    grid-template-columns: 72px minmax(0, 1fr) 110px 96px;
}

.teacher-point-teacher-row {
    grid-template-columns: 72px minmax(0, 1.4fr) 108px 100px 98px;
}

.teacher-point-class-row.mine,
.teacher-point-teacher-row.mine {
    background: linear-gradient(180deg, rgba(238, 247, 255, 0.92) 0%, rgba(241, 253, 249, 0.92) 100%);
    box-shadow: inset 0 0 0 1px rgba(179, 229, 214, 0.9);
}

.teacher-point-class-rank-cell,
.teacher-point-class-score-cell,
.teacher-point-class-change-cell,
.teacher-point-teacher-score-cell,
.teacher-point-teacher-student-cell {
    font-size: 18px;
    font-weight: 700;
    color: #203d70;
}

.teacher-point-class-score-cell,
.teacher-point-teacher-score-cell,
.teacher-point-teacher-student-cell {
    justify-self: end;
}

.teacher-point-class-score-cell em {
    margin-left: 4px;
    font-style: normal;
    font-size: 14px;
    color: #8190a9;
}

.teacher-point-class-change-cell {
    justify-self: end;
}

.teacher-point-rank-medal {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 8px 18px rgba(148, 163, 184, 0.2);
}

.teacher-point-rank-medal.gold {
    background: linear-gradient(180deg, #ffcf3e 0%, #ff9800 100%);
}

.teacher-point-rank-medal.silver {
    background: linear-gradient(180deg, #c9d4ea 0%, #92a0be 100%);
}

.teacher-point-rank-medal.bronze {
    background: linear-gradient(180deg, #ffae7a 0%, #ef6c00 100%);
}

.teacher-point-rank-plain {
    display: inline-block;
    min-width: 22px;
    font-size: 34px;
    line-height: 1;
    font-weight: 500;
    color: #46557a;
}

.teacher-point-class-info-cell,
.teacher-point-teacher-info-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.teacher-point-class-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 48px;
    border: 2px solid rgba(207, 230, 255, 0.95);
    background: #edf5ff;
}

.teacher-point-class-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.teacher-point-class-copy strong {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
    color: #1f4178;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher-point-class-copy small {
    font-size: 14px;
    color: #8b97ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-rule-board {
    padding: 14px 16px;
    display: grid;
    gap: 14px;
}

.teacher-point-rule-board-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #2e517f;
}

.teacher-point-rule-board-title i {
    color: #25b075;
}

.teacher-point-rule-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.teacher-point-rule-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 72px;
    align-items: center;
    column-gap: 10px;
    min-height: 60px;
}

.teacher-point-rule-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.teacher-point-rule-icon.green {
    background: rgba(16, 185, 129, 0.14);
    color: #1ca56a;
}

.teacher-point-rule-icon.blue {
    background: rgba(59, 130, 246, 0.14);
    color: #2f73ea;
}

.teacher-point-rule-icon.amber {
    background: rgba(245, 158, 11, 0.16);
    color: #e88b00;
}

.teacher-point-rule-icon.violet {
    background: rgba(139, 92, 246, 0.14);
    color: #8b5cf6;
}

.teacher-point-rule-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.teacher-point-rule-copy strong {
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    color: #253f69;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-rule-copy small {
    font-size: 13px;
    line-height: 16px;
    color: #8694aa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-rule-score {
    width: 72px;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    color: #ef4444;
    white-space: nowrap;
}

.teacher-point-rule-score em {
    margin-left: 2px;
    font-style: normal;
    font-size: 13px;
    color: #2f73ea;
}

.teacher-point-teacher-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.teacher-point-teacher-metric-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding: 14px 10px;
    height: 96px;
    border-radius: 20px;
    border: 1px solid rgba(229, 236, 248, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 252, 255, 0.98) 100%);
    min-width: 0;
    align-items: start;
}

.teacher-point-teacher-metric-card.blue {
    box-shadow: inset 0 0 0 1px rgba(92, 146, 255, 0.08);
}

.teacher-point-teacher-metric-card.green {
    box-shadow: inset 0 0 0 1px rgba(76, 201, 164, 0.08);
}

.teacher-point-teacher-metric-card.amber {
    box-shadow: inset 0 0 0 1px rgba(255, 181, 74, 0.08);
}

.teacher-point-teacher-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.teacher-point-teacher-metric-card.blue .teacher-point-teacher-metric-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #256fe8;
}

.teacher-point-teacher-metric-card.green .teacher-point-teacher-metric-icon {
    background: rgba(16, 185, 129, 0.14);
    color: #0f9e61;
}

.teacher-point-teacher-metric-card.amber .teacher-point-teacher-metric-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #e98b00;
}

.teacher-point-teacher-metric-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.teacher-point-teacher-metric-copy strong {
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #21416f;
}

.teacher-point-teacher-metric-value {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1;
    font-weight: 800;
    color: #18407c;
    min-width: 0;
}

.teacher-point-teacher-rank-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.teacher-point-teacher-rank-inline small {
    font-size: 14px;
    color: #687d9b;
}

.teacher-point-teacher-metric-subline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #7b8fae;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.teacher-point-teacher-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.teacher-point-source-board {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.teacher-point-source-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #23508b;
}

.teacher-point-source-board-head span {
    font-size: 18px;
    font-weight: 800;
}

.teacher-point-source-board-head small {
    font-size: 14px;
    color: #7e90ae;
}

.teacher-point-source-list {
    display: grid;
    gap: 10px;
}

.teacher-point-source-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.teacher-point-source-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.teacher-point-source-top strong {
    font-size: 14px;
    color: #234472;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-source-top small,
.teacher-point-source-points {
    font-size: 12px;
    font-weight: 700;
    color: #7b8fae;
}

.teacher-point-source-bar {
    height: 10px;
    border-radius: 999px;
    background: #ebf2fb;
    overflow: hidden;
}

.teacher-point-source-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f73ea 0%, #58cfad 100%);
}

.teacher-point-source-total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(223, 232, 245, 0.92);
    font-size: 14px;
    font-weight: 800;
    color: #2469e8;
}

.teacher-point-rule-modal-notes {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(223, 232, 245, 0.92);
    display: grid;
    gap: 8px;
}

.teacher-point-rule-modal-note {
    font-size: 12px;
    line-height: 1.55;
    color: #7586a1;
}

.teacher-point-rule-board-compact .teacher-point-rule-grid {
    grid-template-columns: 1fr;
}

.teacher-point-rule-page {
    display: grid;
    position: relative;
    gap: 0;
    padding-top: 56px;
}

.teacher-point-rule-page-back-row {
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    padding: 0 18px;
    z-index: 2;
}

.teacher-point-rule-page-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(217, 228, 245, 0.86);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(21, 66, 126, 0.06);
}

.teacher-point-rule-page-head {
    display: grid;
    gap: 6px;
}

.teacher-point-rule-page-head.front-back-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.teacher-point-rule-page-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
    color: #183a72;
}

.teacher-point-rule-page-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #7384a0;
}

.teacher-point-rule-page-list {
    display: grid;
    gap: 12px;
}

.teacher-point-rule-page-notes {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(223, 232, 245, 0.92);
}

.teacher-point-inline-link-btn {
    justify-self: end;
    border: none;
    background: transparent;
    color: #2469e8;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.teacher-point-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.88fr);
    gap: 14px;
}

.teacher-point-primary-btn,
.teacher-point-secondary-btn {
    min-height: 56px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 800;
}

.teacher-point-primary-btn {
    border: none;
    background: linear-gradient(180deg, #2f73ea 0%, #0954de 100%);
    color: #fff;
    box-shadow: 0 14px 26px rgba(25, 84, 205, 0.24);
}

.teacher-point-secondary-btn {
    border: 1px solid rgba(189, 210, 241, 0.96);
    background: rgba(255, 255, 255, 0.98);
    color: #2469e8;
}

.teacher-point-rule-modal-content {
    border-radius: 22px;
    border: 1px solid rgba(213, 225, 245, 0.96);
    box-shadow: 0 20px 44px rgba(16, 52, 105, 0.18);
}

.teacher-point-rule-modal-subtitle {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #7485a2;
}

.teacher-point-rule-modal-list {
    display: grid;
    gap: 12px;
}

.teacher-point-rule-modal-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 12px;
}

.teacher-point-rule-modal-index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 115, 234, 0.12);
    color: #2469e8;
    font-size: 13px;
    font-weight: 800;
}

.teacher-point-rule-modal-copy strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #1f3f73;
}

.teacher-point-rule-modal-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #7d8ca6;
}

.teacher-point-rule-modal-score {
    width: 72px;
    justify-self: end;
    align-self: center;
    text-align: right;
    font-size: 14px;
    line-height: 18px;
    font-weight: 800;
    color: #ef4444;
    white-space: nowrap;
}

.teacher-point-ranking-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 15px;
    color: #8c99ad;
}

.teacher-point-ranking-empty.compact {
    padding: 16px 8px;
    font-size: 14px;
}

.teacher-workbench-profile-card {
    padding: 22px 22px 20px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
    align-items: center;
}

.teacher-workbench-profile-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.teacher-workbench-profile-text {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-workbench-profile-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
}

.teacher-workbench-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
    font-size: 14px;
    font-weight: 700;
}

.teacher-workbench-profile-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 16px;
}

.teacher-workbench-score-panel {
    min-width: 0;
    padding-left: 20px;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    display: grid;
    align-content: center;
    gap: 10px;
}

.teacher-workbench-score-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.teacher-workbench-score-label {
    color: #64748b;
    font-size: 14px;
}

.teacher-workbench-score-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}

.teacher-workbench-score-value i {
    color: #f59e0b;
    font-size: 22px;
}

.teacher-workbench-score-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
    justify-self: start;
}

.teacher-workbench-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.teacher-workbench-quick-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    padding: 18px 12px 16px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0f172a;
    min-height: 118px;
    cursor: pointer;
    text-align: center;
    border: 0;
    box-shadow: 0 14px 28px rgba(150, 184, 222, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.teacher-workbench-quick-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(112, 157, 210, 0.2);
}

#teacherWorkReviewEntryBtn {
    position: relative;
}

#teacherWorkReviewEntryBtn .teacher-workbench-quick-count {
    position: absolute;
    top: 9px;
    right: 9px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.teacher-workbench-quick-icon,
.teacher-workbench-resource-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    font-size: 24px;
    color: #fff;
}

.teacher-workbench-quick-icon.blue,
.teacher-workbench-resource-icon.blue { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.teacher-workbench-quick-icon.green,
.teacher-workbench-resource-icon.green { background: linear-gradient(135deg, #16a34a, #34d399); }
.teacher-workbench-quick-icon.teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.teacher-workbench-quick-icon.amber,
.teacher-workbench-resource-icon.amber { background: linear-gradient(135deg, #f59e0b, #fb7185); }
.teacher-workbench-quick-icon.violet,
.teacher-workbench-resource-icon.purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.teacher-workbench-resource-icon.pink { background: linear-gradient(135deg, #ec4899, #fb7185); }

.teacher-workbench-quick-text {
    display: grid;
    gap: 5px;
    text-align: center;
    justify-items: center;
    min-width: 0;
}

.teacher-workbench-quick-text strong {
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
    writing-mode: horizontal-tb;
    word-break: normal;
    overflow-wrap: break-word;
}

.teacher-workbench-quick-text small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
    display: block;
    writing-mode: horizontal-tb;
    word-break: normal;
    overflow-wrap: break-word;
}

.teacher-workbench-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.32fr);
    gap: 16px;
}

.teacher-workbench-main-grid-minimal {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.teacher-workbench-main-grid-minimal .teacher-workbench-overview-card {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
}

.teacher-weekly-interaction-card {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    gap: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.teacher-weekly-wall {
    display: grid;
    gap: 16px;
    padding-bottom: calc(168px + env(safe-area-inset-bottom));
}

.teacher-weekly-interaction-empty {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px dashed rgba(148, 163, 184, 0.36);
    color: #64748b;
    line-height: 1.7;
}

.teacher-weekly-interaction-empty strong {
    color: #0f172a;
    font-size: 16px;
}

.teacher-wall-task-card,
.teacher-wall-section {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 24px;
    border: 1px solid rgba(191, 219, 254, 0.72);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 14px 32px rgba(148, 163, 184, 0.12);
}

.teacher-wall-task-card {
    gap: 14px;
}

.teacher-wall-task-layout,
.teacher-wall-task-grid {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.teacher-wall-week-badge {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    width: 92px;
    min-height: 108px;
    padding: 14px 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.teacher-wall-week-badge strong {
    color: #2563eb;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.teacher-wall-week-badge span {
    color: #5f7390;
    font-size: 13px;
    font-weight: 700;
}

.teacher-wall-task-main,
.teacher-wall-task-content {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.teacher-wall-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.teacher-wall-title-row h2,
.teacher-wall-title-row h3 {
    margin: 0;
    color: #1e3a6d;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.28;
}

.teacher-wall-status {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(187, 247, 208, 0.5), rgba(220, 252, 231, 0.92));
    color: #15803d;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    justify-self: end;
}

.teacher-wall-time-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-wall-time-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(243, 247, 255, 0.82);
    border: 1px solid rgba(219, 234, 254, 0.92);
    min-height: 58px;
}

.teacher-wall-time-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: #3b82f6;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12);
    flex: 0 0 auto;
}

.teacher-wall-time-dot.purple {
    background: #a855f7;
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.12);
}

.teacher-wall-time-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-wall-time-copy strong {
    color: #355288;
    font-weight: 800;
}

.teacher-wall-time-copy span {
    color: #5f7390;
    font-size: 13px;
    font-weight: 700;
}

.teacher-wall-section-head h3,
.teacher-wall-info-label strong {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 800;
}

.teacher-wall-info-list {
    display: grid;
    gap: 0;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
    overflow: hidden;
}

.teacher-wall-info-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
}

.teacher-wall-info-row + .teacher-wall-info-row {
    border-top: 1px dashed rgba(203, 213, 225, 0.76);
}

.teacher-wall-info-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-wall-info-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 auto;
}

.teacher-wall-info-label.is-target {
    background: #eff6ff;
    color: #2563eb;
}

.teacher-wall-info-label.is-subject {
    background: #ecfdf5;
    color: #059669;
}

.teacher-wall-info-label.is-thinking {
    background: #fff7ed;
    color: #d97706;
}

.teacher-wall-info-label.is-life {
    background: #f5f3ff;
    color: #7c3aed;
}

.teacher-wall-info-label.is-ability {
    background: #eff6ff;
    color: #4f46e5;
}

.teacher-wall-info-row p,
.teacher-wall-section-head p,
.teacher-wall-panel-empty {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.teacher-wall-section-head p {
    color: #7b8aa5;
}

.teacher-wall-goal-line strong,
.teacher-wall-section-head h3 {
    margin: 0;
    color: #1f3f75;
    font-size: 18px;
    font-weight: 900;
}

.teacher-wall-section {
    gap: 16px;
}

.teacher-wall-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-wall-section-head p {
    margin-top: 6px;
    color: #7b8aa5;
}

.teacher-wall-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.teacher-wall-tabs::-webkit-scrollbar {
    display: none;
}

.teacher-wall-tab,
.teacher-wall-filter-chip {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: #f3f6fb;
    color: #60738f;
    font-size: 14px;
    font-weight: 800;
    padding: 11px 18px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.teacher-wall-tab.is-active,
.teacher-wall-filter-chip.is-active {
    background: linear-gradient(135deg, #3b82f6, #5b8dff);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.2);
}

.teacher-wall-tab-panels,
.teacher-wall-answer-list {
    display: grid;
    gap: 12px;
}

.teacher-wall-tab-panel[hidden] {
    display: none !important;
}

.teacher-wall-answer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    flex: 0 0 auto;
}

.teacher-wall-answer-badge.orange {
    background: #fff7ed;
    color: #ea580c;
}

.teacher-wall-answer-badge.purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.teacher-wall-answer-badge.green {
    background: #ecfdf5;
    color: #059669;
}

.teacher-wall-feature-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
    align-items: center;
}

.teacher-wall-feature-card.is-echo {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.teacher-wall-feature-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    background: #e5eefc;
}

.teacher-wall-feature-body {
    min-width: 0;
    display: grid;
    gap: 6px;
    align-content: start;
}

.teacher-wall-feature-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.teacher-wall-feature-user {
    min-width: 0;
    flex: 1 1 auto;
}

.teacher-wall-feature-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-wall-feature-name strong {
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-wall-feature-name span {
    color: #7b8aa5;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-wall-feature-kicker {
    margin: 0;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.teacher-wall-feature-text {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher-wall-feature-stats,
.teacher-wall-class-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.teacher-wall-feature-stats span,
.teacher-wall-class-stats span,
.teacher-wall-answer-summary span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.teacher-wall-feature-meta {
    row-gap: 6px;
}

.teacher-wall-feature-card.is-echo .teacher-wall-feature-text {
    -webkit-line-clamp: 2;
}

.teacher-wall-feature-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.teacher-wall-feature-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #dbeafe;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.teacher-wall-feature-dot.is-active {
    width: 20px;
    background: #3b82f6;
}

.teacher-wall-panel-empty {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(191, 219, 254, 0.72);
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
}

.teacher-wall-answer-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.teacher-wall-answer-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f3f7ff;
}

.teacher-wall-answer-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.teacher-wall-class-answer-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 84px;
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
    align-items: start;
}

.teacher-wall-class-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background: #e5eefc;
}

.teacher-wall-class-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.teacher-wall-class-head {
    display: block;
    min-width: 0;
}

.teacher-wall-class-identity {
    min-width: 0;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.teacher-wall-class-name {
    color: #0f172a;
    display: block;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-wall-class-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    min-width: 0;
}

.teacher-wall-class-meta span,
.teacher-wall-class-meta time {
    color: #7b8aa5;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.teacher-wall-class-main p {
    margin: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.52;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teacher-wall-class-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 12px;
    background: #eef5ff;
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.55;
}

.teacher-wall-class-actions {
    display: grid;
    gap: 6px;
    align-content: start;
    justify-items: stretch;
    min-width: 0;
}

.teacher-wall-review-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    justify-content: center;
}

.teacher-wall-review-status.reviewed {
    background: #ecfdf5;
    color: #059669;
}

.teacher-wall-review-status.pending {
    background: #fff7ed;
    color: #ea580c;
}

.teacher-wall-class-actions .teacher-workbench-outline-btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 800;
    width: 100%;
}

@media (max-width: 991.98px) {
    .teacher-wall-feature-card {
        grid-template-columns: 100px minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .teacher-weekly-wall {
        gap: 16px;
        padding-bottom: calc(176px + env(safe-area-inset-bottom));
    }

    .teacher-wall-task-card,
    .teacher-wall-section {
        padding: 16px;
        border-radius: 22px;
    }

    .teacher-wall-task-layout,
    .teacher-wall-task-grid {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-wall-week-badge {
        width: 82px;
        min-height: 96px;
        padding: 12px 6px;
    }

    .teacher-wall-week-badge strong {
        font-size: 24px;
    }

    .teacher-wall-title-row h2,
    .teacher-wall-title-row h3 {
        font-size: 19px;
    }

    .teacher-wall-info-row {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-wall-feature-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-wall-class-answer-row {
        grid-template-columns: 68px minmax(0, 1fr) 76px;
        gap: 8px;
    }

    .teacher-wall-class-name {
        font-size: 18px;
    }
}

@media (max-width: 430px) {
    .teacher-wall-task-layout,
    .teacher-wall-task-grid {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-wall-week-badge {
        width: 82px;
        min-height: 88px;
        padding: 12px 6px;
        border-radius: 20px;
    }

    .teacher-wall-week-badge span {
        font-size: 12px;
    }

    .teacher-wall-title-row h2,
    .teacher-wall-title-row h3 {
        font-size: 18px;
        line-height: 1.25;
    }

    .teacher-wall-time-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .teacher-wall-info-row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
        padding: 11px 12px;
    }

    .teacher-wall-info-label {
        min-height: 30px;
        padding: 0 10px;
    }

    .teacher-wall-tab,
    .teacher-wall-filter-chip {
        padding: 10px 16px;
        font-size: 13px;
    }

    .teacher-wall-feature-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-wall-feature-name strong {
        font-size: 16px;
    }

    .teacher-wall-class-answer-row {
        grid-template-columns: 66px minmax(0, 1fr) 72px;
        gap: 8px;
    }

    .teacher-wall-time-copy span,
    .teacher-wall-answer-summary span {
        font-size: 12px;
    }

    .teacher-wall-class-actions .teacher-workbench-outline-btn {
        min-height: 32px;
        padding: 0 6px;
        font-size: 11px;
    }

    .teacher-wall-class-name {
        font-size: 18px;
    }

    .teacher-wall-class-meta span,
    .teacher-wall-class-meta time,
    .teacher-wall-feature-name span {
        font-size: 11px;
    }
}

@media (max-width: 375px) {
    .teacher-wall-time-row {
        grid-template-columns: 1fr 1fr;
    }

    .teacher-wall-feature-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .teacher-wall-class-answer-row {
        grid-template-columns: 62px minmax(0, 1fr) 70px;
    }

    .teacher-wall-info-row {
        grid-template-columns: 82px minmax(0, 1fr);
    }
}

.teacher-account-settings-dialog {
    max-width: 560px;
}

.teacher-account-settings-panel {
    border-radius: 24px;
}

.teacher-account-settings-panel .modal-body {
    display: grid;
    gap: 18px;
    padding: 20px;
}

.teacher-account-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-account-settings-item {
    width: 100%;
    min-height: 112px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--shadow-soft);
    color: #0f172a;
    text-decoration: none;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 14px 12px;
}

.teacher-account-settings-item i {
    font-size: 24px;
    color: #0ea5e9;
}

.teacher-account-settings-item strong {
    font-size: 15px;
    line-height: 1.3;
}

.teacher-account-settings-item small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.teacher-account-settings-upload-form,
.teacher-account-settings-logout-form {
    margin: 0;
}

.teacher-account-settings-upload-label,
.teacher-account-settings-logout-btn {
    width: 100%;
    min-height: 112px;
    border: 0;
    background: transparent;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: center;
}

.teacher-account-password-panel {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 18px;
    display: grid;
    gap: 14px;
}

.teacher-account-password-head {
    display: grid;
    gap: 4px;
}

.teacher-account-password-head strong {
    color: #0f172a;
    font-size: 17px;
}

.teacher-account-password-head span {
    color: #64748b;
    font-size: 13px;
}

.teacher-account-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.student-weekly-preview-result-state {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.82);
}

.student-weekly-preview-result-state strong {
    color: #334155;
    font-size: 15px;
}

.student-weekly-preview-result-state span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.student-weekly-answer-list-theme {
    display: grid;
    gap: 4px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(45, 125, 246, 0.16);
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fbff, #ffffff);
}

.student-weekly-answer-list-theme span,
.student-weekly-answer-list-theme small {
    color: #64748b;
    font-size: 12px;
}

.student-weekly-answer-list-theme strong {
    color: #1e3a5f;
    font-size: 17px;
}

.teacher-profile-security-card .teacher-workbench-password-form {
    gap: 12px;
}

.teacher-profile-logout-form {
    margin: 12px 0 0;
}

.teacher-workbench-card {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    padding: 18px;
    display: grid;
    gap: 16px;
}

.teacher-workbench-side-stack {
    display: grid;
    gap: 16px;
}

.teacher-workbench-card-head {
    display: grid;
    gap: 4px;
}

.teacher-workbench-card-head-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-workbench-card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.teacher-workbench-card-head span {
    color: #64748b;
    font-size: 13px;
}

.teacher-workbench-password-form {
    display: grid;
    gap: 12px;
}

.teacher-workbench-password-form label {
    display: grid;
    gap: 6px;
}

.teacher-workbench-password-form span {
    font-size: 14px;
    color: #334155;
    font-weight: 700;
}

.teacher-workbench-primary-btn,
.teacher-workbench-outline-btn {
    min-height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}

.teacher-workbench-outline-btn {
    border-width: 1px;
}

.teacher-workbench-stat-grid,
.teacher-workbench-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-workbench-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-workbench-stat-box,
.teacher-workbench-status-item {
    border-radius: 18px;
    padding: 16px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: grid;
    gap: 8px;
    align-content: space-between;
}

.teacher-workbench-stat-box span,
.teacher-workbench-status-item span {
    color: #64748b;
    font-size: 13px;
}

.teacher-workbench-stat-box strong,
.teacher-workbench-status-item strong {
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
}

.teacher-workbench-metric-value {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 2px;
    line-height: 1;
}

.teacher-workbench-metric-value.compact {
    gap: 1px;
}

.teacher-workbench-metric-number {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: currentColor;
}

.teacher-workbench-metric-number.secondary {
    font-size: 28px;
    opacity: 0.92;
}

.teacher-workbench-metric-unit,
.teacher-workbench-metric-separator {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    color: currentColor;
}

.teacher-workbench-metric-value.compact .teacher-workbench-metric-number {
    font-size: 28px;
}

.teacher-workbench-metric-value.compact .teacher-workbench-metric-unit,
.teacher-workbench-metric-value.compact .teacher-workbench-metric-separator {
    font-size: 14px;
}

.teacher-workbench-stat-box.warn strong,
.teacher-workbench-status-item.amber strong { color: #ef4444; }

.teacher-workbench-stat-box.accent strong,
.teacher-workbench-status-item.gold strong { color: #f59e0b; }

.teacher-workbench-status-item.green strong { color: #16a34a; }

.teacher-workbench-status-item.red strong { color: #ef4444; }

.teacher-workbench-status-item small {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

.teacher-workbench-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #475569;
}

.teacher-workbench-progress-meta strong {
    color: #059669;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.teacher-workbench-progress-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}

.teacher-workbench-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    transition: width .2s ease;
}

.teacher-workbench-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.teacher-workbench-action-row .btn {
    flex: 1 1 180px;
}

.teacher-workbench-link-btn {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 0;
}

.teacher-workbench-period-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0f766e;
    font-size: 13px;
    font-weight: 700;
    max-width: 100%;
    white-space: normal;
}

.teacher-task-v2-badge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(14, 165, 233, 0.16));
    border: 1px solid rgba(20, 184, 166, 0.26);
    color: #047857;
    letter-spacing: 0.01em;
}

.teacher-class-dashboard {
    display: grid;
    gap: 16px;
}

.teacher-class-overview-shell {
    padding: 18px;
}

.teacher-class-overview-shell .teacher-workbench-task-line {
    margin: 0;
}

.teacher-workbench-overview-card .teacher-workbench-task-line,
.teacher-class-overview-shell .teacher-workbench-task-line {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.teacher-workbench-task-picker,
.teacher-class-task-picker {
    margin: 10px 0 14px;
}

.teacher-class-overview-shell .teacher-workbench-action-row .btn {
    flex: 1 1 calc(50% - 6px);
}

.teacher-class-status-grid {
    margin-top: 0;
}

.teacher-class-status-grid .teacher-workbench-status-item {
    min-height: 112px;
}

.teacher-workbench-quality-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.teacher-workbench-quality-ring {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0 30%, #3b82f6 30% 64%, #f59e0b 64% 84%, #8b5cf6 84% 100%);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.teacher-workbench-quality-ring-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    align-content: center;
    gap: 4px;
}

.teacher-workbench-quality-ring-inner strong {
    font-size: 34px;
    line-height: 1;
    color: #0f172a;
}

.teacher-workbench-quality-ring-inner span {
    font-size: 14px;
    color: #64748b;
}

.teacher-workbench-quality-meta {
    display: grid;
    gap: 14px;
}

.teacher-workbench-quality-score-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-workbench-quality-score-line span {
    color: #64748b;
    font-size: 14px;
}

.teacher-workbench-quality-score-line strong {
    color: #059669;
    font-size: 28px;
    font-weight: 900;
}

.teacher-workbench-quality-list {
    display: grid;
    gap: 10px;
}

.teacher-workbench-quality-item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #334155;
}

.teacher-workbench-quality-item strong {
    color: #0f172a;
    font-weight: 800;
}

.teacher-workbench-quality-item .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.teacher-workbench-quality-item .dot.green { background: #22c55e; }
.teacher-workbench-quality-item .dot.blue { background: #3b82f6; }
.teacher-workbench-quality-item .dot.amber { background: #f59e0b; }
.teacher-workbench-quality-item .dot.violet { background: #8b5cf6; }

.teacher-workbench-quality-note {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}

.teacher-workbench-inline-tip {
    color: #64748b;
    font-size: 14px;
}

.teacher-workbench-empty-state {
    min-height: 200px;
    border-radius: 20px;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
    color: #64748b;
}

.teacher-workbench-empty-state.compact {
    min-height: 140px;
}

.teacher-workbench-empty-state i {
    font-size: 28px;
    color: #93c5fd;
}

.teacher-workbench-empty-state div {
    font-size: 16px;
    font-weight: 800;
    color: #334155;
}

.teacher-workbench-empty-state p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.teacher-workbench-task-content {
    display: grid;
    gap: 14px;
}

.teacher-workbench-task-cover {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: #dbeafe;
    flex: 0 0 88px;
}

.teacher-workbench-task-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-workbench-task-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.teacher-workbench-task-meta {
    min-width: 0;
    display: grid;
    gap: 8px;
    flex: 1;
}

.teacher-workbench-task-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-workbench-task-badge {
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.teacher-workbench-task-title {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.45;
}

.teacher-workbench-task-desc,
.teacher-workbench-task-line {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    min-width: 0;
}

.teacher-workbench-task-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #475569;
}

.teacher-workbench-task-progress-meta strong {
    color: #0f766e;
}

.teacher-class-panel {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.teacher-subpage-shell {
    display: grid;
    gap: 16px;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.teacher-flow-back-row {
    margin-bottom: -4px;
}

.teacher-flow-back-row .front-round-back-btn {
    width: 48px;
    height: 48px;
    border-color: rgba(191, 207, 232, 0.9);
    background: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.teacher-task-detail-summary-card,
.teacher-review-overview-card,
.teacher-review-readonly-card,
.teacher-review-form-card,
.teacher-review-media-shell {
    border-radius: 22px;
    border: 1px solid rgba(191, 207, 232, 0.78);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 18px;
}

.teacher-task-detail-task-meta {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.teacher-task-detail-task-topline,
.teacher-review-task-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-task-detail-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.teacher-task-detail-kpi-card,
.teacher-review-summary-tab {
    display: grid;
    gap: 6px;
    align-content: center;
    justify-items: center;
    min-height: 88px;
    padding: 12px 10px;
    border-radius: 20px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    background: #fff;
    text-decoration: none;
    color: #475569;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.teacher-task-detail-kpi-card span,
.teacher-review-summary-tab span {
    font-size: 12px;
    font-weight: 700;
}

.teacher-task-detail-kpi-card strong,
.teacher-review-summary-tab strong {
    font-size: 18px;
    line-height: 1.2;
    color: #0f172a;
    font-weight: 900;
}

.teacher-task-detail-kpi-card.active,
.teacher-review-summary-tab.active {
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.14) 0%, rgba(14, 165, 233, 0.08) 100%);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
}

.teacher-task-detail-kpi-card.success strong {
    color: #059669;
}

.teacher-task-detail-kpi-card.warn strong {
    color: #ea580c;
}

.teacher-task-detail-kpi-card.accent strong {
    color: #7c3aed;
}

.teacher-task-detail-kpi-card.rate strong {
    color: #2563eb;
}

.teacher-task-detail-reminder-card {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(253, 186, 116, 0.6);
    background: linear-gradient(180deg, #fffdf7 0%, #fff7ed 100%);
    box-shadow: 0 18px 36px rgba(249, 115, 22, 0.08);
}

.teacher-task-detail-reminder-main {
    display: grid;
    gap: 6px;
    align-content: center;
}

.teacher-task-detail-reminder-main span {
    font-size: 14px;
    color: #9a3412;
    font-weight: 700;
}

.teacher-task-detail-reminder-main strong {
    font-size: 40px;
    line-height: 1;
    color: #ea580c;
    font-weight: 900;
}

.teacher-task-detail-reminder-main small {
    font-size: 13px;
    color: #9a3412;
}

.teacher-task-detail-reminder-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.teacher-task-detail-reminder-stats div {
    display: grid;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(253, 186, 116, 0.46);
}

.teacher-task-detail-reminder-stats span {
    font-size: 12px;
    color: #9a3412;
}

.teacher-task-detail-reminder-stats strong {
    font-size: 26px;
    line-height: 1.1;
    color: #0f172a;
    font-weight: 900;
}

.teacher-task-detail-task-badges,
.teacher-review-top-badges,
.teacher-review-submission-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-task-detail-task-badges span,
.teacher-review-mini-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.teacher-review-mini-badge.excellent {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.teacher-task-detail-task-meta h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.32;
    font-weight: 900;
    color: #10233f;
}

.teacher-task-detail-stat-grid {
    margin-bottom: 14px;
}

.teacher-review-status-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-status-tab {
    display: grid;
    gap: 4px;
    align-items: center;
    justify-items: center;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 18px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    background: #fff;
    color: #475569;
    text-decoration: none;
}

.teacher-review-status-tab span {
    font-size: 12px;
    font-weight: 700;
}

.teacher-review-status-tab strong {
    font-size: 22px;
    line-height: 1;
    color: #0f172a;
}

.teacher-review-status-tab.active {
    border-color: rgba(37, 99, 235, 0.34);
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.14);
}

.teacher-task-detail-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.teacher-task-detail-page {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.teacher-task-detail-inline-select {
    min-width: 0;
    min-height: 52px;
    border-radius: 16px;
}

.teacher-task-detail-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(191, 207, 232, 0.78);
    background: #fff;
}

.teacher-task-detail-search i {
    color: #94a3b8;
    font-size: 16px;
}

.teacher-task-detail-search .form-control {
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    background: transparent;
}

.teacher-task-detail-filter-panel {
    border-radius: 20px;
    border: 1px solid rgba(191, 207, 232, 0.78);
    background: rgba(255, 255, 255, 0.96);
    padding: 16px;
    display: grid;
    gap: 12px;
}

.teacher-task-detail-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-task-detail-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-task-detail-result-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-task-detail-result-meta strong {
    font-size: 20px;
    color: #10233f;
}

.teacher-task-detail-result-meta span {
    color: #64748b;
    font-size: 13px;
}

.teacher-review-submission-list {
    display: grid;
    gap: 14px;
}

.teacher-task-submission-group {
    display: grid;
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    background: #fff;
    color: #10233f;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.teacher-task-submission-group-head,
.teacher-task-submission-group.collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 12px 16px;
}

.teacher-task-submission-group-head {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.teacher-task-submission-group-head strong,
.teacher-task-submission-group.collapsed strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 900;
}

.teacher-task-submission-group-head strong i { color: #f05b3d; }
.teacher-task-submission-group.collapsed strong i:first-child { color: #22a65a; }
.teacher-task-submission-group.collapsed:last-child strong i:first-child { color: #8b5cf6; }

.teacher-task-submission-group-head span {
    color: #718096;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}

.teacher-task-submission-group.collapsed {
    min-height: 58px;
}

.teacher-task-submission-group.collapsed > i {
    color: #64748b;
}

.teacher-task-submission-group-body {
    border-top: 1px solid rgba(226, 232, 240, 0.92);
}

.teacher-task-submission-group-body .teacher-review-submission-card {
    border: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 0;
    box-shadow: none;
}

.teacher-task-submission-group-body .teacher-review-submission-card:last-child {
    border-bottom: 0;
}

.teacher-review-submission-card {
    border-radius: 22px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 16px;
    display: grid;
    gap: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.teacher-review-submission-card.is-pending {
    border-style: dashed;
}

.teacher-task-student-row {
    gap: 12px;
}

.teacher-task-student-head {
    align-items: center;
}

.teacher-task-student-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(226, 232, 240, 0.68);
    flex: 0 0 34px;
}

.teacher-task-student-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.teacher-task-student-check span {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid rgba(148, 163, 184, 0.96);
    background: #fff;
    position: relative;
}

.teacher-task-student-check input:checked + span {
    border-color: #2563eb;
    background: #2563eb;
}

.teacher-task-student-check input:checked + span::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 3px;
    background: #fff;
}

.teacher-task-detail-student-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-task-detail-student-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-review-mini-badge.priority.high,
.teacher-review-mini-badge.warn {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
}

.teacher-review-mini-badge.priority.medium {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
}

.teacher-task-detail-student-actions {
    align-items: center;
}

.teacher-task-detail-show-more {
    justify-self: center;
}

.teacher-review-submission-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.teacher-review-student {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.teacher-review-student > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.teacher-review-student strong {
    display: block;
    font-size: 19px;
    line-height: 1.2;
    color: #0f172a;
    font-weight: 900;
}

.teacher-review-student span {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}

.teacher-review-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 50px;
    background: #e2e8f0;
}

.teacher-review-avatar.lg {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
}

.teacher-review-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-review-status-pill.reviewed {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.teacher-review-status-pill.unreviewed,
.teacher-review-status-pill.pending {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
}

.teacher-review-submission-meta,
.teacher-review-overview-meta,
.teacher-review-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-review-submission-meta div,
.teacher-review-overview-meta div,
.teacher-review-readonly-grid div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid rgba(226, 232, 240, 0.96);
}

.teacher-review-submission-meta span,
.teacher-review-overview-meta span,
.teacher-review-readonly-grid span {
    font-size: 12px;
    color: #64748b;
}

.teacher-review-submission-meta strong,
.teacher-review-overview-meta strong,
.teacher-review-readonly-grid strong {
    font-size: 14px;
    line-height: 1.45;
    color: #0f172a;
    font-weight: 800;
}

.teacher-review-submission-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-review-submission-score {
    font-size: 14px;
    color: #10233f;
    font-weight: 800;
}

.teacher-task-detail-footer-actions {
    margin-top: 2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-overview-card {
    display: grid;
    gap: 16px;
}

.teacher-review-task-hero {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(191, 207, 232, 0.78);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.teacher-review-task-hero-copy {
    display: grid;
    gap: 6px;
}

.teacher-review-task-hero-copy strong {
    font-size: 24px;
    line-height: 1.35;
    color: #10233f;
    font-weight: 900;
}

.teacher-review-task-hero-copy span {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

.teacher-review-summary-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-inline-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.teacher-review-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.teacher-review-media-shell {
    display: grid;
    gap: 10px;
}

.teacher-review-media {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.teacher-review-media img,
.teacher-review-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #0f172a;
}

.teacher-review-media-note {
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

.teacher-review-block-title {
    font-size: 20px;
    color: #10233f;
    font-weight: 900;
    margin-bottom: 14px;
}

.teacher-review-readonly-card,
.teacher-review-form-card {
    display: grid;
    gap: 14px;
}

.teacher-review-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.teacher-review-content-main {
    display: grid;
    gap: 14px;
}

.teacher-review-media-shell.compact {
    padding: 14px;
    gap: 12px;
}

.teacher-review-readonly-grid-rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-review-static-content {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(226, 232, 240, 0.96);
}

.teacher-review-static-content span,
.teacher-review-score-row label,
.teacher-review-textarea-meta label {
    font-size: 13px;
    color: #64748b;
    font-weight: 700;
}

.teacher-review-static-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #10233f;
    white-space: pre-wrap;
}

.teacher-review-static-content.highlight {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border-color: rgba(59, 130, 246, 0.16);
}

.teacher-review-score-row,
.teacher-review-textarea-block {
    display: grid;
    gap: 10px;
}

.teacher-review-score-field-row {
    display: grid;
    gap: 10px;
}

.teacher-review-score-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-review-chip {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.teacher-review-textarea-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.teacher-review-textarea-meta strong {
    font-size: 12px;
    color: #94a3b8;
}

.teacher-review-switch-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(226, 232, 240, 0.96);
    cursor: pointer;
}

.teacher-review-switch-row span {
    font-size: 15px;
    color: #10233f;
    font-weight: 800;
}

.teacher-review-switch-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.teacher-review-switch-row em {
    width: 56px;
    height: 32px;
    border-radius: 999px;
    background: #dbeafe;
    position: relative;
    transition: background .2s ease;
}

.teacher-review-switch-row em::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    transition: transform .2s ease;
}

.teacher-review-switch-row input:checked + em {
    background: linear-gradient(135deg, #10b981, #06b6d4);
}

.teacher-review-switch-row input:checked + em::after {
    transform: translateX(24px);
}

.teacher-review-form-note {
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
}

.teacher-review-preset-shell {
    display: grid;
    gap: 10px;
}

.teacher-review-preset-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.teacher-review-preset-head strong {
    color: #10233f;
    font-size: 15px;
    font-weight: 900;
}

.teacher-review-preset-head span {
    color: #64748b;
    font-size: 12px;
}

.teacher-review-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-preset-card {
    min-width: 0;
    min-height: 94px;
    padding: 12px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    border-radius: 16px;
    background: #fff;
    color: #10233f;
    display: grid;
    align-content: start;
    gap: 6px;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.teacher-review-preset-card strong {
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
}

.teacher-review-preset-card span {
    font-size: 12px;
    line-height: 1.55;
}

.teacher-review-preset-card:hover,
.teacher-review-preset-card.active {
    border-color: rgba(37, 99, 235, 0.55);
    background: #f4f8ff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.teacher-review-ai-shell {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #f4f9ff 100%);
    border: 1px solid rgba(191, 207, 232, 0.72);
}

.teacher-review-ai-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-review-ai-head > div {
    display: grid;
    gap: 4px;
}

.teacher-review-ai-head strong {
    font-size: 18px;
    color: #10233f;
    font-weight: 900;
}

.teacher-review-ai-head span {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

.teacher-review-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.teacher-review-ai-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(191, 207, 232, 0.82);
    background: #fff;
}

.teacher-review-ai-card-head span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.teacher-review-ai-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: #10233f;
    white-space: pre-wrap;
}

.teacher-review-ai-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-review-ai-action {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.24);
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.teacher-review-ai-action.fill {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, rgba(14, 165, 233, 0.08) 100%);
}

.teacher-review-ai-meta {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

.teacher-review-ai-quick-chip {
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(147, 197, 253, 0.86);
    border-radius: 14px;
    background: #fff;
    color: #1d4ed8;
    display: grid;
    gap: 2px;
    align-content: center;
    text-align: left;
}

.teacher-review-ai-quick-chip strong {
    font-size: 13px;
    font-weight: 900;
}

.teacher-review-ai-quick-chip span {
    font-size: 11px;
    color: #64748b;
}

#teacherWorkReviewModal .modal-body {
    padding: 14px;
}

#teacherWorkReviewModal .teacher-review-form-card {
    gap: 12px;
}

#teacherWorkReviewModal .teacher-review-preset-shell {
    gap: 6px;
}

#teacherWorkReviewModal .teacher-review-preset-head span {
    display: none;
}

#teacherWorkReviewModal .teacher-review-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

#teacherWorkReviewModal .teacher-review-preset-card {
    min-height: 52px;
    padding: 8px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#teacherWorkReviewModal .teacher-review-preset-card span {
    display: none;
}

#teacherWorkReviewModal .teacher-review-ai-shell {
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
}

#teacherWorkReviewModal .teacher-review-ai-head strong {
    font-size: 15px;
}

#teacherWorkReviewModal .teacher-review-ai-head span {
    font-size: 11px;
}

#teacherWorkReviewModal .teacher-review-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

#teacherWorkReviewModal .teacher-review-ai-empty {
    min-height: 68px;
    padding: 10px;
}

/* 老师作品审核：授权班级队列、任务来源、定向退回原因与连续批阅。 */
#teacherWorkReviewModal .teacher-work-review-dialog {
    max-width: 920px;
}

#teacherWorkReviewModal .teacher-work-review-content {
    overflow: hidden;
    border: 0;
    background: #f6f9fe;
}

#teacherWorkReviewModal .teacher-work-review-header {
    min-height: 86px;
    padding: 14px 20px;
    border-bottom: 1px solid #dce6f4;
    background: rgba(255, 255, 255, 0.97);
}

#teacherWorkReviewModal .front-back-title-wrap {
    text-align: center;
}

#teacherWorkReviewModal .front-back-title-wrap h5 {
    color: #10233f;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .03em;
}

.teacher-work-review-queue-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.teacher-work-review-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.teacher-work-review-scope-badge,
.teacher-work-review-list-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-work-review-scope-badge {
    border: 1px solid #b5eadb;
    background: #edfbf6;
    color: #078b70;
}

.teacher-work-review-list-btn {
    border: 1px solid #cfe0f7;
    background: #fff;
    color: #246df5;
}

#teacherWorkReviewModal .modal-body {
    background: #f6f9fe;
}

.teacher-work-review-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.teacher-work-review-filter-bar label {
    min-width: 0;
}

.teacher-work-review-filter-bar .form-select {
    min-height: 42px;
    padding: 6px 34px 6px 13px;
    border-color: #cfdced;
    border-radius: 14px;
    background-color: #fff;
    color: #27405f;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.teacher-work-review-filter-bar .form-select:disabled {
    opacity: 1;
    color: #64748b;
    background-color: #f8fbff;
}

.teacher-work-review-detail-shell {
    display: grid;
    gap: 12px;
}

.teacher-work-review-student-context,
.teacher-work-review-section,
.teacher-work-review-queue-card {
    border: 1px solid #d8e4f3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 67, 113, 0.05);
}

.teacher-work-review-student-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}

.teacher-work-review-student-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.teacher-work-review-student-name,
.teacher-work-review-task-line,
.teacher-work-review-submit-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex-wrap: wrap;
}

.teacher-work-review-student-name strong {
    color: #10233f;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

.teacher-work-review-student-name span {
    padding: 3px 9px;
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    color: #246df5;
    font-size: 12px;
    font-weight: 800;
}

.teacher-work-review-task-line > strong {
    min-width: 0;
    overflow: hidden;
    color: #172f50;
    font-size: 16px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-work-review-source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.teacher-work-review-source.reading {
    border: 1px solid #a9ead4;
    background: #ecfbf5;
    color: #079173;
}

.teacher-work-review-source.theme {
    border: 1px solid #d8c8fb;
    background: #f6f1ff;
    color: #7652c7;
}

.teacher-work-review-submit-meta {
    color: #718198;
    font-size: 12px;
}

.teacher-work-review-submit-meta em {
    padding: 3px 9px;
    border: 1px solid #ffd3a0;
    border-radius: 999px;
    color: #e87811;
    font-style: normal;
    font-weight: 800;
}

.teacher-work-review-section {
    padding: 18px;
}

#teacherWorkReviewModal .teacher-review-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #10233f;
    font-size: 19px;
}

#teacherWorkReviewModal .teacher-review-block-title small {
    color: #718198;
    font-size: 12px;
    font-weight: 700;
}

.teacher-work-review-student-work h6 {
    margin: 0 0 10px;
    color: #173456;
    font-size: 16px;
    font-weight: 900;
}

.teacher-work-review-work-body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr);
    gap: 12px;
    align-items: stretch;
}

#teacherWorkReviewModal .teacher-review-reflection-card {
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background: #f8fbff;
}

#teacherWorkReviewModal .teacher-review-reflection-card strong {
    color: #273f5e;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
    white-space: pre-wrap;
}

#teacherWorkReviewModal .teacher-review-media-shell.compact {
    min-width: 0;
    padding: 0;
}

#teacherWorkReviewModal .teacher-review-media {
    min-height: 142px;
    max-height: 260px;
    aspect-ratio: 16 / 9;
    border: 1px solid #dce7f4;
    border-radius: 14px;
    background: #f2f6fb;
}

#teacherWorkReviewModal .teacher-review-media img,
#teacherWorkReviewModal .teacher-review-media video {
    width: 100%;
    height: 100%;
    max-height: 260px;
    object-fit: contain;
    background: #f2f6fb;
}

.teacher-work-review-previous {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #dbe8f8;
    border-radius: 14px;
    background: #f4f8ff;
}

.teacher-work-review-previous > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1d5ebf;
}

.teacher-work-review-previous p {
    margin: 0;
    color: #52667f;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.teacher-work-review-score-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 10px;
    align-items: center;
}

#teacherWorkReviewModal .teacher-review-score-shortcuts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

#teacherWorkReviewModal .teacher-review-chip {
    min-width: 0;
    min-height: 40px;
    padding: 0 7px;
    border-radius: 12px;
    background: #fff;
    color: #26405f;
}

#teacherWorkReviewModal .teacher-review-chip.active {
    border-color: #246df5;
    background: #f3f7ff;
    color: #246df5;
    box-shadow: inset 0 0 0 1px #246df5;
}

.teacher-work-review-score-controls > input {
    min-height: 40px;
    border-radius: 12px;
    text-align: center;
}

.teacher-work-review-reasons {
    display: grid;
    gap: 9px;
}

.teacher-work-review-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.teacher-work-review-field-head strong {
    color: #10233f;
    font-size: 14px;
}

.teacher-work-review-field-head small,
#teacherWorkReviewModal .teacher-review-textarea-meta small,
#teacherWorkReviewModal .teacher-review-textarea-block > label small {
    color: #718198;
    font-weight: 600;
}

.teacher-work-review-field-head button {
    border: 0;
    background: transparent;
    color: #718198;
    font-size: 12px;
}

.teacher-work-review-reason-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.teacher-work-review-reason {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-width: 0;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px solid #d6e1ef;
    border-radius: 12px;
    background: #fff;
    color: #334a67;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.teacher-work-review-reason i {
    display: none;
    flex: 0 0 auto;
}

.teacher-work-review-reason.active {
    border-color: #246df5;
    background: #f3f7ff;
    color: #246df5;
    box-shadow: inset 0 0 0 1px #246df5;
}

.teacher-work-review-reason.active i {
    display: inline-block;
}

#teacherWorkReviewModal .teacher-review-textarea-block > label {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

#teacherWorkReviewModal .teacher-review-textarea-block textarea {
    border-color: #d6e1ef;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.65;
    box-shadow: none;
}

.teacher-work-review-excellent {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: #183554;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.teacher-work-review-excellent input {
    width: 18px;
    height: 18px;
    accent-color: #246df5;
}

.teacher-work-review-excellent i {
    margin-right: 6px;
    color: #f5a300;
}

.teacher-work-review-status {
    min-height: 20px;
    color: #d14343;
    font-size: 13px;
    font-weight: 700;
}

.teacher-work-review-action-dock {
    position: sticky;
    z-index: 4;
    bottom: -14px;
    display: grid;
    grid-template-columns: 150px repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    margin: 0 -14px -14px;
    padding: 14px 18px;
    border-top: 1px solid #d7e2f0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 28px rgba(30, 64, 106, 0.08);
    backdrop-filter: blur(10px);
}

.teacher-work-review-action-dock p {
    margin: 0;
    color: #718198;
    font-size: 12px;
    line-height: 1.5;
}

.teacher-work-review-reject-btn,
.teacher-work-review-approve-btn {
    min-width: 0;
    min-height: 48px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 900;
}

.teacher-work-review-reject-btn {
    border: 1.5px solid #246df5;
    background: #fff;
    color: #246df5;
}

.teacher-work-review-approve-btn {
    border: 0;
    background: linear-gradient(135deg, #079fd1 0%, #0ab98e 100%);
    color: #fff;
    box-shadow: 0 9px 20px rgba(4, 159, 168, 0.2);
}

.teacher-work-review-reject-btn:disabled,
.teacher-work-review-approve-btn:disabled {
    cursor: wait;
    opacity: .55;
}

.teacher-work-review-queue-card {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.teacher-work-review-queue-task {
    display: grid;
    gap: 4px;
}

.teacher-work-review-queue-task strong {
    color: #173456;
    font-size: 16px;
}

.teacher-work-review-queue-task span {
    overflow: hidden;
    color: #718198;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-work-review-queue-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.teacher-work-review-queue-task-meta span {
    min-width: 0;
}

.teacher-work-review-queue-task-meta em {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid #ffd3a0;
    border-radius: 999px;
    background: #fff8ed;
    color: #e87811;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    vertical-align: middle;
}

.teacher-work-review-empty {
    border: 1px solid #d8e4f3;
    border-radius: 20px;
    background: #fff;
}

.teacher-work-review-previous ul {
    display: grid;
    gap: 6px;
    margin: 10px 0 0;
    padding-left: 20px;
    color: #536a86;
    font-size: 13px;
    line-height: 1.65;
}

.teacher-work-review-previous li::marker {
    color: #246df5;
}

@media (max-width: 576px) {
    #teacherWorkReviewModal .teacher-work-review-header {
        min-height: 74px;
        padding: 10px 12px;
    }

    #teacherWorkReviewModal .front-back-title-wrap h5 {
        font-size: 18px;
    }

    .teacher-work-review-scope-badge {
        position: absolute;
        right: 12px;
        bottom: -31px;
        z-index: 2;
        min-height: 26px;
        padding: 0 8px;
        font-size: 10px;
    }

    .teacher-work-review-list-btn span {
        display: none;
    }

    .teacher-work-review-list-btn {
        width: 36px;
        padding: 0;
    }

    #teacherWorkReviewModal .modal-body {
        padding: 12px;
    }

    .teacher-work-review-filter-bar {
        gap: 6px;
        margin-top: 22px;
        margin-bottom: 10px;
    }

    .teacher-work-review-filter-bar .form-select {
        min-height: 38px;
        padding: 5px 24px 5px 8px;
        border-radius: 11px;
        background-position: right 6px center;
        background-size: 12px 9px;
        font-size: 11px;
    }

    .teacher-work-review-student-context,
    .teacher-work-review-section,
    .teacher-work-review-queue-card {
        border-radius: 16px;
    }

    .teacher-work-review-student-context {
        gap: 11px;
        padding: 13px;
    }

    #teacherWorkReviewModal .teacher-review-avatar.lg {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .teacher-work-review-student-name strong {
        font-size: 17px;
    }

    .teacher-work-review-task-line > strong {
        flex-basis: 100%;
        font-size: 14px;
    }

    .teacher-work-review-section {
        padding: 14px;
    }

    .teacher-work-review-work-body {
        grid-template-columns: 1fr;
    }

    #teacherWorkReviewModal .teacher-review-media {
        max-height: 220px;
    }

    .teacher-work-review-score-controls {
        grid-template-columns: 1fr;
    }

    #teacherWorkReviewModal .teacher-review-score-shortcuts {
        gap: 5px;
    }

    #teacherWorkReviewModal .teacher-review-chip {
        min-height: 38px;
        padding: 0 3px;
        font-size: 11px;
    }

    .teacher-work-review-score-controls > input {
        width: 100%;
    }

    .teacher-work-review-reason-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .teacher-work-review-reason {
        min-height: 40px;
        padding: 6px 9px;
        font-size: 12px;
    }

    .teacher-work-review-action-dock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 -12px -12px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .teacher-work-review-action-dock p {
        grid-column: 1 / -1;
        text-align: center;
    }

    .teacher-work-review-action-dock p br {
        display: none;
    }

    .teacher-work-review-reject-btn,
    .teacher-work-review-approve-btn {
        min-height: 46px;
        padding: 0 6px;
        font-size: 13px;
    }
}

@media (max-width: 389px) {
    .teacher-work-review-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-work-review-filter-bar label:last-child {
        grid-column: 1 / -1;
    }

    .teacher-work-review-field-head strong small {
        display: block;
        margin-top: 2px;
    }
}

.teacher-review-ai-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 124px;
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    color: #64748b;
    background: rgba(255, 255, 255, 0.78);
    grid-column: 1 / -1;
    text-align: center;
}

/* 当前任务详情与作品批阅按老师移动端参考稿保持同一层级和统计节奏。 */
.teacher-task-detail-page .teacher-task-detail-summary-card,
.teacher-review-detail-shell .teacher-review-task-hero {
    padding: 18px;
    border-radius: 22px;
}

.teacher-task-detail-title-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.teacher-task-detail-title-with-icon > i,
.teacher-review-task-hero-copy strong > i {
    color: #1677ff;
    font-size: 24px;
    line-height: 1.35;
    flex: 0 0 auto;
}

.teacher-task-detail-title-with-icon h3 {
    margin: 0;
}

.teacher-task-detail-task-badges span i,
.teacher-review-status-pill > i {
    margin-right: 5px;
}

.teacher-review-status-pill > i {
    font-size: 8px;
    vertical-align: 1px;
}

.teacher-task-detail-kpi-grid,
.teacher-review-summary-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.teacher-task-detail-kpi-card {
    min-height: 112px;
    padding: 12px 8px;
    text-align: center;
}

.teacher-task-detail-kpi-card span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

.teacher-task-detail-kpi-card span i {
    font-size: 14px;
    color: #3b82f6;
}

.teacher-task-detail-kpi-card.success span i { color: #16a34a; }
.teacher-task-detail-kpi-card.warn span i { color: #f59e0b; }
.teacher-task-detail-kpi-card.accent span i { color: #8b5cf6; }
.teacher-task-detail-kpi-card.rate span i { color: #2563eb; }

.teacher-task-detail-kpi-card strong small {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 700;
}

.teacher-review-task-hero-copy strong {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.teacher-review-readonly-grid-rich {
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.96);
}

.teacher-review-readonly-grid-rich div {
    display: grid;
    grid-template-columns: minmax(98px, 0.72fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.96);
    background: #fff;
}

.teacher-review-readonly-grid-rich div:last-child {
    border-bottom: 0;
}

.teacher-review-readonly-grid-rich span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.teacher-review-readonly-grid-rich span i {
    color: #365478;
    font-size: 17px;
}

.teacher-review-readonly-grid-rich strong {
    text-align: left;
    word-break: break-word;
}

.teacher-review-readonly-grid-rich .teacher-review-reflection-row {
    grid-template-columns: 1fr;
    align-items: start;
}

.teacher-review-reflection-row strong {
    line-height: 1.7;
    font-weight: 700;
}

.teacher-review-reflection-shell {
    display: grid;
    gap: 8px;
}

.teacher-link-btn {
    border: 0;
    background: transparent;
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
}

.teacher-review-ai-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.teacher-review-ai-card {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
}

.teacher-review-ai-card p {
    font-size: 13px;
    line-height: 1.65;
}

.teacher-review-ai-card-actions {
    justify-content: center;
}

.teacher-review-ai-action {
    min-height: 30px;
    padding: 0 10px;
}

.teacher-review-excellent-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.teacher-review-form-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.teacher-review-form-actions .teacher-outline-btn,
.teacher-review-form-actions .teacher-primary-btn {
    min-width: 0;
    min-height: 50px;
    padding: 0 10px;
    white-space: nowrap;
}

.teacher-review-form-actions i {
    margin-right: 5px;
}

.teacher-workbench-resource-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.teacher-workbench-resource-item {
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 18px 12px;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-decoration: none;
    color: #0f172a;
    text-align: center;
    cursor: pointer;
}

.teacher-workbench-resource-item strong {
    font-size: 16px;
}

@media (max-width: 768px) {
    .teacher-task-detail-kpi-grid,
    .teacher-review-summary-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .teacher-task-detail-reminder-card {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr);
    }

    .teacher-review-content-layout {
        grid-template-columns: minmax(124px, 0.72fr) minmax(0, 1.15fr);
        gap: 10px;
    }

    .teacher-task-detail-reminder-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .teacher-task-detail-reminder-stats div {
        min-width: 0;
        padding: 10px 7px;
    }

    .teacher-task-detail-reminder-stats span {
        font-size: 10px;
        line-height: 1.35;
    }

    .teacher-task-detail-reminder-stats strong {
        font-size: 18px;
    }

    .teacher-task-detail-reminder-main strong {
        font-size: 32px;
    }

    .teacher-task-detail-reminder-main small {
        font-size: 11px;
        line-height: 1.5;
    }

    .teacher-review-ai-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-review-preset-grid {
        grid-template-columns: 1fr;
    }

    .teacher-review-preset-card {
        min-height: 0;
    }

    .teacher-task-detail-kpi-card {
        min-height: 88px;
        padding: 9px 3px;
        gap: 4px;
    }

    .teacher-task-detail-kpi-card span {
        gap: 2px;
        font-size: 10px;
    }

    .teacher-task-detail-kpi-card span i {
        display: none;
    }

    .teacher-task-detail-kpi-card strong,
    .teacher-review-summary-tab strong {
        font-size: 16px;
    }

    .teacher-task-detail-kpi-card strong small {
        font-size: 10px;
    }

    .teacher-review-summary-tab {
        min-height: 72px;
        padding: 8px 3px;
    }

    .teacher-review-summary-tab span {
        font-size: 10px;
    }

    .teacher-review-media-shell.compact {
        padding: 8px;
        gap: 8px;
    }

    .teacher-review-preview-btn {
        min-height: 38px;
        font-size: 12px;
    }

    .teacher-review-readonly-grid-rich div {
        grid-template-columns: minmax(68px, 0.72fr) minmax(0, 1.18fr);
        min-height: 48px;
        padding: 9px 8px;
        gap: 6px;
    }

    .teacher-review-readonly-grid-rich span,
    .teacher-review-readonly-grid-rich strong {
        font-size: 11px;
    }

    .teacher-review-readonly-grid-rich span i {
        display: none;
    }

    .teacher-review-readonly-grid-rich .teacher-review-reflection-row {
        grid-template-columns: 1fr;
    }

    .teacher-review-reflection-row strong {
        font-size: 12px;
        line-height: 1.65;
    }

    .teacher-review-static-content {
        padding: 12px;
    }

    .teacher-review-static-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .teacher-review-ai-card {
        padding: 10px;
    }

    .teacher-review-ai-card p {
        font-size: 12px;
    }

    .teacher-review-form-actions {
        gap: 8px;
    }

    .teacher-review-form-actions .teacher-outline-btn,
    .teacher-review-form-actions .teacher-primary-btn {
        min-height: 44px;
        padding: 0 5px;
        font-size: 13px;
    }

    .teacher-class-overview-shell .teacher-workbench-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-class-overview-shell .teacher-workbench-action-row .btn {
        width: 100%;
        flex-basis: auto;
    }

    .teacher-review-status-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-task-detail-filter-grid,
    .teacher-task-detail-student-meta,
    .teacher-review-submission-meta,
    .teacher-review-overview-meta,
    .teacher-review-readonly-grid {
        grid-template-columns: 1fr;
    }

    .teacher-task-detail-toolbar {
        grid-template-columns: 1fr;
    }

    .teacher-task-detail-inline-select {
        width: 100%;
    }

    .teacher-review-overview-head,
    .teacher-review-submission-head,
    .teacher-review-submission-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-task-student-head {
        align-items: flex-start;
    }

    .teacher-task-detail-footer-actions {
        grid-template-columns: 1fr;
    }

    .teacher-review-top-badges {
        width: 100%;
    }
}

.teacher-workbench-resource-item small {
    color: #64748b;
    font-size: 12px;
}

.avatar-upload-form {
    margin: 0;
}

.avatar-upload-trigger {
    cursor: pointer;
    transition: transform .18s ease;
}

.avatar-upload-trigger:hover {
    transform: translateY(-2px);
}

.avatar-file-input {
    display: none;
}

.member-entry-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.member-entry-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    padding: 18px 14px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-soft);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.member-entry-card i {
    font-size: 22px;
    color: #0f766e;
}

.followed-list {
    display: grid;
    gap: 12px;
}

.followed-item {
    position: relative;
    border: 1px solid #d9e8f5;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.followed-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #23a6f0, #22c55e);
    opacity: 0.7;
}

.followed-user-link {
    min-width: 0;
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}

.followed-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(14, 165, 233, 0.25);
    background: #eaf3ff;
    flex: 0 0 42px;
}

.followed-user-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.followed-user-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 1.2;
}

.followed-user-note {
    color: #64748b;
    font-size: 12px;
}

.followed-user-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 14px;
}

.followed-unfollow-btn {
    border: 1px solid #c9d9ea;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    padding: 6px 12px;
    font-weight: 600;
}

.followed-unfollow-btn:hover {
    background: #fff;
    color: #334155;
    border-color: #b8cde2;
}

.followed-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.student-follow-page {
    --follow-ink: #17213a;
    --follow-muted: #60708a;
    --follow-green: #54bd69;
    --follow-blue: #168cf2;
    position: relative;
    width: calc(100% + (var(--mobile-shell-gutter) * 2));
    min-height: calc(100vh - 24px);
    margin: calc(-1 * max(16px, env(safe-area-inset-top))) calc(-1 * var(--mobile-shell-gutter)) calc(-1 * var(--mobile-shell-bottom-space));
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
    overflow: hidden;
    color: var(--follow-ink);
    background-color: #edf8ff;
    background-image:
            linear-gradient(rgba(255, 255, 255, 0.74) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.74) 1px, transparent 1px),
            radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.9) 0 90px, transparent 180px),
            linear-gradient(180deg, #eaf7ff 0%, #f6fbff 58%, #eff8ff 100%);
    background-size: 18px 18px, 18px 18px, auto, auto;
}

.student-follow-hero {
    position: relative;
    min-height: 320px;
    padding: calc(22px + env(safe-area-inset-top)) 18px 18px;
    isolation: isolate;
}

.student-follow-hero-art {
    position: absolute;
    inset: 48px -18px 0 28%;
    z-index: -1;
    background: linear-gradient(90deg, rgba(237, 248, 255, 0.12), rgba(237, 248, 255, 0.68) 84%), url("/platform-assets/images/student-follow-hero.png") center bottom / cover no-repeat;
    opacity: 0.82;
    filter: saturate(0.95);
}

.student-follow-top-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.student-follow-nav-btn {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    color: #15213a;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(60, 116, 159, 0.12);
}

.student-follow-nav-btn i {
    font-size: 26px;
    line-height: 1;
}

.student-follow-nav-btn.is-tapped {
    transform: scale(0.96);
}

.student-follow-title-block {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    margin-top: 56px;
}

.student-follow-title-block h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: #17213a;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0;
}

.student-follow-title-block h1 i {
    color: var(--follow-green);
    font-size: 31px;
}

.student-follow-title-block p {
    margin: 0;
    color: #5e6b85;
    font-size: 17px;
    font-weight: 700;
}

.student-follow-body {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 18px;
    padding: 0 18px;
}

.student-follow-overview-card,
.student-follow-card,
.student-follow-discover-card,
.student-follow-empty-card,
.student-follow-loading-card {
    border: 1px solid rgba(214, 232, 247, 0.72);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(67, 111, 152, 0.11);
}

.student-follow-loading-card {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.student-follow-loading-card span {
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef6fc 0%, #dceef9 48%, #eef6fc 100%);
    background-size: 220% 100%;
    animation: studentFollowSkeleton 1.2s ease-in-out infinite;
}

.student-follow-loading-card span:nth-child(1) { width: 58%; }
.student-follow-loading-card span:nth-child(2) { width: 86%; }
.student-follow-loading-card span:nth-child(3) { width: 68%; }

@keyframes studentFollowSkeleton {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

.student-follow-overview-card {
    margin-top: -32px;
    padding: 22px 18px 18px;
}

.student-follow-overview-main {
    display: grid;
    grid-template-columns: 58px minmax(82px, 0.82fr) 1px 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.student-follow-overview-icon,
.student-follow-stat-icon {
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
}

.student-follow-overview-icon {
    width: 58px;
    height: 58px;
    font-size: 28px;
}

.student-follow-overview-icon-blue {
    color: #138ef2;
    background: #e5f5ff;
}

.student-follow-overview-icon-green {
    color: #139a59;
    background: #e6f6ed;
}

.student-follow-count-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.student-follow-count-line strong {
    font-size: 38px;
    line-height: 1;
}

.student-follow-count-line span,
.student-follow-overview-main h2 {
    font-size: 18px;
    font-weight: 800;
    color: #17213a;
}

.student-follow-overview-main h2 {
    margin: 0 0 7px;
    line-height: 1.2;
}

.student-follow-overview-main p {
    margin: 0;
    color: var(--follow-muted);
    font-size: 15px;
    line-height: 1.45;
}

.student-follow-overview-divider {
    width: 1px;
    height: 52px;
    background: #e5ecf3;
}

.student-follow-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf2f7;
}

.student-follow-stat-item {
    display: grid;
    grid-template-columns: 40px auto 1fr;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.student-follow-stat-item:not(:first-child) {
    border-left: 1px solid #edf2f7;
    padding-left: 10px;
}

.student-follow-stat-icon {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.student-follow-stat-icon-blue { color: #168cf2; background: #e8f6ff; }
.student-follow-stat-icon-purple { color: #8756df; background: #f0e9ff; }
.student-follow-stat-icon-gold { color: #e8a11a; background: #fff4db; }

.student-follow-stat-item strong {
    color: #16213b;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.student-follow-stat-item small {
    color: var(--follow-muted);
    font-size: 12px;
    line-height: 1.35;
}

.student-follow-filter-tabs {
    display: flex;
    gap: 12px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.student-follow-filter-tabs::-webkit-scrollbar {
    display: none;
}

.student-follow-filter-tab {
    flex: 0 0 auto;
    min-width: 76px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #25324a;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 -6px 16px rgba(15, 23, 42, 0.06);
    font-size: 17px;
    font-weight: 800;
}

.student-follow-filter-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #72c76e 0%, #2fae61 100%);
    box-shadow: 0 12px 28px rgba(50, 174, 98, 0.26);
}

.student-follow-list {
    display: grid;
    gap: 18px;
}

.student-follow-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 118px;
    padding: 18px;
}

.student-follow-card.is-hidden {
    display: none;
}

.student-follow-card-link {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    min-width: 0;
    text-decoration: none;
    color: var(--follow-ink);
}

.student-follow-avatar-wrap {
    position: relative;
    width: 82px;
    height: 82px;
}

.student-follow-avatar {
    width: 82px;
    height: 82px;
    border: 5px solid #fff;
    border-radius: 999px;
    object-fit: cover;
    background: #132033;
    box-shadow: 0 10px 24px rgba(23, 33, 58, 0.16);
}

.student-follow-avatar-badge {
    position: absolute;
    right: -2px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #5fb65d;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(82, 177, 92, 0.24);
}

.student-follow-card-info {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.student-follow-card-info strong {
    overflow: hidden;
    color: #17213a;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-follow-card-info em {
    width: fit-content;
    max-width: 100%;
    padding: 3px 10px;
    overflow: hidden;
    border-radius: 999px;
    color: #2d9a4f;
    background: #e7f6e4;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-follow-card-meta {
    overflow: hidden;
    color: #7a8799;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-follow-card-info small {
    color: #69758a;
    font-size: 16px;
    line-height: 1.3;
}

.student-follow-card-info small b {
    color: #32a852;
}

.student-follow-card-arrow {
    color: #9aa4b4;
    font-size: 25px;
}

.student-follow-status-form {
    margin: 0;
}

.student-follow-status-btn {
    min-width: 82px;
    min-height: 42px;
    border: 1px solid #3fb45d;
    border-radius: 999px;
    color: #35a353;
    background: #fff;
    font-size: 17px;
    font-weight: 900;
}

.student-follow-empty-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 20px;
    text-align: center;
}

.student-follow-empty-card i {
    color: #54bd69;
    font-size: 34px;
}

.student-follow-empty-card strong {
    color: #17213a;
    font-size: 20px;
}

.student-follow-empty-card span {
    color: var(--follow-muted);
    font-size: 14px;
    line-height: 1.45;
}

.student-follow-error-card i {
    color: #f59e0b;
}

.student-follow-retry-btn {
    min-width: 96px;
    min-height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #168cf2, #24bfa6);
    font-size: 14px;
    font-weight: 800;
}

.student-follow-retry-btn:hover {
    color: #fff;
}

.student-follow-discover-card {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
    min-height: 166px;
    padding: 18px;
    overflow: hidden;
}

.student-follow-discover-art {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.student-follow-discover-art img {
    width: min(152px, 120%);
    max-width: none;
    height: auto;
    transform: translateX(-10px);
}

.student-follow-discover-copy {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.student-follow-discover-copy h2 {
    margin: 0;
    color: #17213a;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.12;
}

.student-follow-discover-copy p {
    margin: 0;
    color: var(--follow-muted);
    font-size: 15px;
    line-height: 1.55;
}

.student-follow-discover-btn {
    width: min(100%, 218px);
    min-height: 50px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #168cf2 0%, #20bdc6 100%);
    box-shadow: 0 12px 24px rgba(22, 140, 242, 0.24);
    font-size: 18px;
    font-weight: 900;
}

.student-follow-discover-btn:hover {
    color: #fff;
}

@media (max-width: 390px) {
    .student-follow-hero {
        min-height: 300px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .student-follow-title-block {
        margin-top: 48px;
    }

    .student-follow-title-block h1 {
        font-size: 40px;
    }

    .student-follow-title-block p {
        font-size: 16px;
    }

    .student-follow-body {
        gap: 16px;
        padding: 0 16px;
    }

    .student-follow-overview-main {
        grid-template-columns: 52px minmax(68px, 0.76fr) 1px 52px minmax(0, 1fr);
        gap: 10px;
    }

    .student-follow-overview-icon {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }

    .student-follow-count-line strong {
        font-size: 32px;
    }

    .student-follow-count-line span,
    .student-follow-overview-main h2 {
        font-size: 16px;
    }

    .student-follow-stat-item {
        grid-template-columns: 34px auto;
    }

    .student-follow-stat-item small {
        grid-column: 2;
    }

    .student-follow-stat-icon {
        width: 34px;
        height: 34px;
    }

    .student-follow-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .student-follow-card-link {
        grid-template-columns: 74px minmax(0, 1fr) 18px;
        gap: 12px;
    }

    .student-follow-avatar-wrap,
    .student-follow-avatar {
        width: 74px;
        height: 74px;
    }

    .student-follow-status-form {
        position: absolute;
        right: 16px;
        top: 40px;
    }

    .student-follow-card-info {
        padding-right: 84px;
    }

    .student-follow-card-info strong {
        font-size: 22px;
    }

    .student-follow-card-info small {
        font-size: 14px;
    }

    .student-follow-discover-card {
        grid-template-columns: 34% minmax(0, 1fr);
        padding: 16px;
    }

    .student-follow-discover-copy h2 {
        font-size: 22px;
    }

    .student-follow-discover-btn {
        min-height: 46px;
        font-size: 16px;
    }
}

body:has(#studentFollowPage) {
    overflow-x: hidden;
}

#studentFollowPage,
#studentFollowPage * {
    box-sizing: border-box;
}

#studentFollowPage.student-follow-page {
    width: calc(100% + (var(--mobile-shell-gutter) * 2));
    max-width: calc(var(--mobile-shell-max-width) + (var(--mobile-shell-gutter) * 2));
    min-height: 100vh;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

#studentFollowPage .student-follow-hero {
    min-height: clamp(236px, 64vw, 282px);
    padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
}

#studentFollowPage .student-follow-hero-art {
    inset: 42px -20px 0 30%;
    background-size: contain;
    background-position: right bottom;
    opacity: 0.76;
}

#studentFollowPage .student-follow-top-actions {
    justify-content: flex-start;
}

#studentFollowPage .student-follow-nav-btn {
    width: 44px;
    height: 44px;
    box-shadow: 0 10px 22px rgba(60, 116, 159, 0.12);
}

#studentFollowPage .student-follow-nav-btn i {
    font-size: 22px;
}

#studentFollowPage .student-follow-title-block {
    width: min(100%, 300px);
    margin-top: clamp(42px, 14vw, 58px);
}

#studentFollowPage .student-follow-title-block h1 {
    gap: 10px;
    margin-bottom: 10px;
    font-size: clamp(38px, 11vw, 46px);
    line-height: 1.04;
}

#studentFollowPage .student-follow-title-block h1 i {
    font-size: clamp(24px, 7vw, 30px);
}

#studentFollowPage .student-follow-title-block p {
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.35;
}

#studentFollowPage .student-follow-body {
    gap: 14px;
    padding: 0 16px;
}

#studentFollowPage .student-follow-overview-card,
#studentFollowPage .student-follow-card,
#studentFollowPage .student-follow-discover-card,
#studentFollowPage .student-follow-empty-card,
#studentFollowPage .student-follow-loading-card {
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(67, 111, 152, 0.1);
}

#studentFollowPage .student-follow-overview-card {
    margin-top: -26px;
    padding: 16px 16px 14px;
}

#studentFollowPage .student-follow-overview-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

#studentFollowPage .student-follow-overview-main > div:nth-child(2),
#studentFollowPage .student-follow-overview-main > div:nth-child(5) {
    flex: 1 1 0;
    min-width: 0;
}

#studentFollowPage .student-follow-overview-main > div:nth-child(2) {
    flex-basis: 92px;
}

#studentFollowPage .student-follow-overview-main > div:nth-child(5) {
    flex-basis: 130px;
}

#studentFollowPage .student-follow-overview-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 22px;
}

#studentFollowPage .student-follow-overview-divider {
    flex: 0 0 1px;
    height: 46px;
}

#studentFollowPage .student-follow-count-line {
    gap: 7px;
}

#studentFollowPage .student-follow-count-line strong {
    font-size: clamp(30px, 8vw, 36px);
}

#studentFollowPage .student-follow-count-line span {
    font-size: clamp(15px, 4.2vw, 18px);
}

#studentFollowPage .student-follow-overview-main h2 {
    margin-bottom: 5px;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.25;
}

#studentFollowPage .student-follow-overview-main p {
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.35;
}

#studentFollowPage .student-follow-stat-grid {
    gap: 4px;
    margin-top: 14px;
    padding-top: 12px;
}

#studentFollowPage .student-follow-stat-item {
    grid-template-columns: 34px minmax(0, auto) minmax(0, 1fr);
    gap: 6px;
}

#studentFollowPage .student-follow-stat-item:not(:first-child) {
    padding-left: 7px;
}

#studentFollowPage .student-follow-stat-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

#studentFollowPage .student-follow-stat-item strong {
    font-size: clamp(20px, 6vw, 25px);
}

#studentFollowPage .student-follow-stat-item small {
    min-width: 0;
    font-size: 11px;
    line-height: 1.25;
}

#studentFollowPage .student-follow-filter-tabs {
    gap: 10px;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scroll-padding-inline: 16px;
}

#studentFollowPage .student-follow-filter-tab {
    min-width: auto;
    min-height: 44px;
    padding: 0 17px;
    white-space: nowrap;
    font-size: clamp(16px, 4.4vw, 18px);
    box-shadow: inset 0 -5px 14px rgba(15, 23, 42, 0.05);
}

#studentFollowPage .student-follow-list {
    gap: 14px;
}

#studentFollowPage .student-follow-card {
    min-height: 122px;
    padding: 15px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

#studentFollowPage .student-follow-card-link {
    grid-template-columns: 74px minmax(0, 1fr) 22px;
    gap: 12px;
}

#studentFollowPage .student-follow-avatar-wrap,
#studentFollowPage .student-follow-avatar {
    width: 74px;
    height: 74px;
}

#studentFollowPage .student-follow-avatar {
    border-width: 4px;
}

#studentFollowPage .student-follow-avatar-badge {
    width: 26px;
    height: 26px;
    border-width: 3px;
    font-size: 14px;
}

#studentFollowPage .student-follow-card-info {
    gap: 5px;
}

#studentFollowPage .student-follow-card-info strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.18;
}

#studentFollowPage .student-follow-card-info em {
    padding: 3px 9px;
    font-size: 14px;
    line-height: 1.1;
}

#studentFollowPage .student-follow-card-meta,
#studentFollowPage .student-follow-card-info small {
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#studentFollowPage .student-follow-card-arrow {
    font-size: 23px;
}

#studentFollowPage .student-follow-status-btn {
    min-width: 94px;
    min-height: 40px;
    padding: 0 14px;
    font-size: 16px;
}

#studentFollowPage .student-follow-discover-card {
    grid-template-columns: 34% minmax(0, 1fr);
    min-height: 146px;
    padding: 15px;
}

#studentFollowPage .student-follow-discover-art img {
    width: min(116px, 118%);
    transform: translateX(-6px);
}

#studentFollowPage .student-follow-discover-copy {
    gap: 8px;
}

#studentFollowPage .student-follow-discover-copy h2 {
    font-size: clamp(24px, 7.2vw, 29px);
}

#studentFollowPage .student-follow-discover-copy p {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.45;
}

#studentFollowPage .student-follow-discover-btn {
    width: min(100%, 206px);
    min-height: 46px;
    font-size: clamp(16px, 4.8vw, 18px);
}

body:has(#studentFollowPage) .bottom-nav {
    min-height: 76px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    padding: 8px;
    border-radius: 24px;
}

body:has(#studentFollowPage) .bottom-nav a {
    min-height: 56px;
    padding: 8px 0;
    border-radius: 18px;
    gap: 3px;
    font-size: 15px;
}

body:has(#studentFollowPage) .bottom-nav i {
    font-size: 21px;
}

.student-public-profile-page,
.student-public-profile-page * {
    box-sizing: border-box;
}

.student-public-profile-page {
    width: min(var(--mobile-shell-max-width), 100vw);
    max-width: var(--mobile-shell-max-width);
    margin: -16px auto 0;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 16px 14px calc(108px + env(safe-area-inset-bottom));
    color: #12213d;
    background-color: #edf8ff;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.72) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.72) 1px, transparent 1px),
        radial-gradient(circle at 82% 8%, rgba(112, 196, 255, 0.22), transparent 28%),
        linear-gradient(180deg, #eaf7ff 0%, #f7fcff 68%, #eef8ff 100%);
    background-size: 24px 24px, 24px 24px, 100% 240px, 100% 100%;
}

.student-public-profile-top {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 12px;
}

.student-public-profile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #12213d;
    background: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(52, 103, 153, 0.14);
}

.student-public-profile-back i {
    font-size: 24px;
}

.student-public-profile-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-public-profile-hero,
.student-public-profile-card,
.student-public-profile-stat,
.student-public-profile-post,
.student-public-profile-empty {
    border: 1px solid rgba(207, 229, 247, 0.88);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(40, 91, 145, 0.12);
}

.student-public-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 158px;
    padding: 18px 16px;
    border-radius: 24px;
    overflow: hidden;
}

.student-public-profile-hero::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -44px;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 24px solid rgba(142, 205, 255, 0.24);
    pointer-events: none;
}

.student-public-profile-avatar-wrap {
    position: relative;
    width: 82px;
    height: 82px;
    z-index: 1;
}

.student-public-profile-avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 4px solid #fff;
    background: #0d1931;
    box-shadow: 0 10px 22px rgba(15, 31, 61, 0.18);
}

.student-public-profile-badge {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #ffcf61, #fb923c);
    border: 3px solid #fff;
    font-size: 13px;
}

.student-public-profile-main {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding-right: 96px;
}

.student-public-profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 6px;
}

.student-public-profile-name-row h1 {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 20px;
    line-height: 1.16;
    font-weight: 800;
    color: #111c36;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-public-profile-name-row span {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f4edff;
    color: #7c3aed;
    font-size: 12px;
    font-weight: 700;
}

.student-public-profile-main p {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 4px 0 0;
    color: #40506a;
    font-size: 13px;
    line-height: 1.35;
}

.student-public-profile-main p i {
    flex: 0 0 auto;
    color: #61708a;
}

.student-public-profile-main p span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-public-profile-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.student-public-profile-chip-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    max-width: 100%;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(210, 222, 238, 0.92);
    background: rgba(248, 250, 252, 0.88);
    color: #475569;
    font-size: 12px;
}

.student-public-profile-chip-row .student-public-profile-class-chip {
    max-width: min(100%, 190px);
}

.student-public-profile-chip-row .student-public-profile-class-chip b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-public-profile-chip-row b {
    font-weight: 700;
}

.student-public-profile-actions {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 2;
}

.student-public-profile-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-width: 96px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(25, 156, 97, 0.38);
    background: linear-gradient(135deg, #1da9f2, #25c4b5);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(40, 144, 173, 0.2);
}

.student-public-profile-follow.is-following {
    color: #176c8f;
    background: rgba(255, 255, 255, 0.96);
}

.student-public-profile-card {
    padding: 15px 16px;
    border-radius: 20px;
}

.student-public-profile-section-head,
.student-public-profile-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.student-public-profile-section-head h2,
.student-public-profile-title-row h2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #12213d;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.student-public-profile-section-head i {
    color: #2f7df6;
}

.student-public-profile-intro p {
    margin: 0;
    color: #334155;
    font-size: 14px;
    line-height: 1.7;
}

.student-public-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-public-profile-stat {
    min-width: 0;
    min-height: 82px;
    padding: 11px 8px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 7px;
}

.student-public-profile-stat span {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.student-public-profile-stat span.red { background: linear-gradient(135deg, #ff7a8d, #ef4444); }
.student-public-profile-stat span.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.student-public-profile-stat span.green { background: linear-gradient(135deg, #86efac, #22c55e); }

.student-public-profile-stat strong {
    min-width: 0;
    color: #12213d;
    font-size: 24px;
    line-height: 1.05;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-public-profile-stat small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.student-public-profile-section {
    min-width: 0;
}

.student-public-profile-post-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 1px 8px;
    scrollbar-width: none;
}

.student-public-profile-post-row::-webkit-scrollbar {
    display: none;
}

.student-public-profile-post {
    flex: 0 0 178px;
    min-width: 0;
    border-radius: 17px;
    overflow: hidden;
    color: #12213d;
    text-decoration: none;
}

.student-public-profile-post-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #dff3ff, #eef2ff);
    color: #2f7df6;
    font-size: 26px;
    overflow: hidden;
}

.student-public-profile-post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-public-profile-post-cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #0f172a;
}

.student-public-profile-video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: #0f172a;
}

.student-public-profile-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.42);
    font-size: 22px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.student-public-profile-video-play i {
    margin-left: 2px;
}

.student-public-profile-post strong {
    display: -webkit-box;
    margin: 9px 10px 0;
    min-height: 37px;
    color: #12213d;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-public-profile-post p {
    display: -webkit-box;
    margin: 5px 10px 0;
    min-height: 35px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-public-profile-post small {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 8px 10px 10px;
    color: #64748b;
    font-size: 12px;
}

.student-public-profile-post small span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.student-public-profile-growth-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.student-public-profile-growth {
    min-width: 0;
    text-align: center;
}

.student-public-profile-growth > span {
    width: 34px;
    height: 34px;
    margin: 0 auto 6px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.student-public-profile-growth > span.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.student-public-profile-growth > span.green { background: linear-gradient(135deg, #86efac, #22c55e); }
.student-public-profile-growth > span.purple { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); }
.student-public-profile-growth > span.orange { background: linear-gradient(135deg, #fcd34d, #f97316); }

.student-public-profile-growth small {
    display: block;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.student-public-profile-growth strong {
    display: block;
    margin-top: 4px;
    color: #12213d;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.student-public-profile-growth em {
    margin-left: 2px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: #64748b;
}

.student-public-profile-interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-public-profile-interest-list span {
    min-height: 32px;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff7ed, #ecfeff);
    color: #0f766e;
    font-size: 13px;
    font-weight: 800;
}

.student-public-profile-empty,
.student-public-profile-empty-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
}

.student-public-profile-empty {
    min-height: 220px;
    flex-direction: column;
    gap: 8px;
    border-radius: 22px;
    padding: 24px;
}

.student-public-profile-empty i {
    color: #94a3b8;
    font-size: 34px;
}

.student-public-profile-empty strong {
    color: #12213d;
    font-size: 18px;
}

.student-public-profile-empty-inline {
    min-height: 72px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.48);
    font-size: 13px;
}

body:has(#studentPublicProfilePage) .bottom-nav {
    min-height: 76px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    padding: 8px;
    border-radius: 24px;
}

body:has(#studentPublicProfilePage) .bottom-nav a {
    min-height: 56px;
    padding: 8px 0;
    border-radius: 18px;
    gap: 3px;
    font-size: 15px;
}

body:has(#studentPublicProfilePage) .bottom-nav i {
    font-size: 21px;
}

.student-class-members-page,
.student-class-members-page * {
    box-sizing: border-box;
}

.student-class-members-page {
    --class-members-ink: #14213d;
    --class-members-muted: #62708a;
    width: min(var(--mobile-shell-max-width), 100vw);
    max-width: var(--mobile-shell-max-width);
    min-height: 100vh;
    margin: -16px auto 0;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    color: var(--class-members-ink);
    background:
        radial-gradient(circle at 82% 7%, rgba(116, 207, 255, 0.28), transparent 24%),
        linear-gradient(180deg, #e7f7ff 0%, #f4fbff 54%, #eef8ff 100%);
}

.student-class-members-hero {
    position: relative;
    min-height: 224px;
    padding: 22px 16px 18px;
    overflow: hidden;
}

.student-class-members-hero::after {
    content: "";
    position: absolute;
    inset: auto -20px 0 -20px;
    height: 72px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.72));
    pointer-events: none;
}

.student-class-members-back {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #14213d;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 22px rgba(57, 107, 153, 0.16);
}

.student-class-members-back i {
    font-size: 24px;
}

.student-class-members-hero-art {
    position: absolute;
    right: 16px;
    top: 34px;
    width: 112px;
    height: 132px;
    border-radius: 38% 38% 44% 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d8fe3;
    background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(180,230,255,0.36));
    box-shadow: inset 0 -18px 34px rgba(65, 173, 221, 0.12);
    opacity: 0.9;
}

.student-class-members-hero-art i {
    font-size: 54px;
}

.student-class-members-title {
    position: relative;
    z-index: 2;
    width: calc(100% - 112px);
    margin-top: 38px;
}

.student-class-members-title h1 {
    margin: 0 0 12px;
    color: #14213d;
    font-size: clamp(30px, 8.8vw, 36px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: 0;
}

.student-class-members-title p {
    margin: 0;
    color: #4f5f78;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}

.student-class-members-body {
    display: grid;
    gap: 12px;
    padding: 0 14px;
}

.student-class-members-board,
.student-class-members-card,
.student-class-members-empty {
    border: 1px solid rgba(205, 229, 247, 0.88);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(45, 100, 145, 0.12);
}

.student-class-members-board,
.student-class-members-card {
    padding: 14px;
}

.student-class-members-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.student-class-members-section-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: #14213d;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 850;
}

.student-class-members-section-head h2 > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-class-members-section-head h2 i {
    color: #29b979;
    flex: 0 0 auto;
}

.student-class-members-section-head > span {
    flex: 0 0 auto;
    color: #71809a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.student-class-members-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.student-class-members-metric {
    min-width: 0;
    min-height: 104px;
    padding: 12px 8px 10px;
    border-radius: 18px;
    text-align: center;
    overflow: hidden;
}

.student-class-members-metric.green { background: linear-gradient(145deg, #e8fbf3, #f7fffb); }
.student-class-members-metric.blue { background: linear-gradient(145deg, #eaf4ff, #f8fbff); }
.student-class-members-metric.gold { background: linear-gradient(145deg, #fff5db, #fffaf1); }

.student-class-members-metric > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    color: #fff;
    font-size: 17px;
}

.student-class-members-metric.green > span { background: linear-gradient(135deg, #35d39a, #1ca96d); }
.student-class-members-metric.blue > span { background: linear-gradient(135deg, #5ab6ff, #2378e8); }
.student-class-members-metric.gold > span { background: linear-gradient(135deg, #ffc94d, #f59e0b); }

.student-class-members-metric small {
    display: block;
    margin-top: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.student-class-members-metric strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin-top: 6px;
    color: #14213d;
    line-height: 1;
}

.student-class-members-metric strong b {
    font-size: clamp(27px, 8vw, 32px);
    font-weight: 900;
}

.student-class-members-metric strong em {
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.student-class-members-metric.green strong { color: #18a970; }
.student-class-members-metric.blue strong { color: #2478e8; }
.student-class-members-metric.gold strong { color: #e98b08; }

.student-class-members-metric p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.student-class-members-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    color: #f5b51b !important;
    font-size: 12px !important;
}

.student-class-members-honors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.student-class-members-honor {
    position: relative;
    min-width: 0;
    min-height: 142px;
    padding: 10px 7px;
    border-radius: 18px;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #14213d;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(220, 232, 246, 0.8);
    background: #fff;
}

.student-class-members-honor.gold { background: linear-gradient(145deg, #fff7d9, #fff); }
.student-class-members-honor.blue { background: linear-gradient(145deg, #e8f2ff, #fff); }
.student-class-members-honor.purple { background: linear-gradient(145deg, #f2e8ff, #fff); }

.student-class-members-honor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
}

.student-class-members-honor.gold .student-class-members-honor-badge { background: linear-gradient(135deg, #ffd057, #f59e0b); }
.student-class-members-honor.blue .student-class-members-honor-badge { background: linear-gradient(135deg, #7fb9ff, #2563eb); }
.student-class-members-honor.purple .student-class-members-honor-badge { background: linear-gradient(135deg, #d7a8ff, #8b5cf6); }

.student-class-members-honor strong,
.student-class-members-honor em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-class-members-honor strong {
    font-size: 14px;
    font-weight: 900;
}

.student-class-members-honor img,
.student-class-members-honor-empty-avatar {
    width: 46px;
    height: 46px;
    margin-top: 8px;
    border-radius: 50%;
    object-fit: cover;
    background: #111c32;
    border: 3px solid #fff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.student-class-members-honor-empty-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7c8799;
    background: #edf2f7;
}

.student-class-members-honor em {
    margin-top: 6px;
    color: #14213d;
    font-size: 14px;
    font-style: normal;
    font-weight: 850;
}

.student-class-members-honor small {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
}

.student-class-members-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
}

.student-class-members-member {
    min-width: 0;
    min-height: 128px;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #14213d;
    text-align: center;
    text-decoration: none;
}

.student-class-members-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
}

.student-class-members-avatar-wrap img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #111c32;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.student-class-members-avatar-wrap i {
    position: absolute;
    right: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
}

.student-class-members-avatar-wrap i.is-active { background: #52d31f; }
.student-class-members-avatar-wrap i.is-quiet { background: #ff4545; }

.student-class-members-member strong {
    max-width: 100%;
    margin-top: 8px;
    color: #14213d;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-class-members-member small {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 5px;
    color: #4f92d5;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
}

.student-class-members-member small span {
    display: inline-flex;
    gap: 1px;
    min-width: 0;
    color: #f4bd25;
    font-size: 11px;
}

.student-class-members-actions {
    margin-bottom: 4px;
}

.student-class-members-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.student-class-members-action {
    min-width: 0;
    min-height: 72px;
    padding: 10px 8px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    color: #14213d;
    text-decoration: none;
}

.student-class-members-action.green { background: linear-gradient(135deg, #e6fbf3, #f6fffb); }
.student-class-members-action.gold { background: linear-gradient(135deg, #fff4d7, #fffaf0); }
.student-class-members-action.purple { background: linear-gradient(135deg, #f1e8ff, #fbf8ff); }

.student-class-members-action > i {
    font-size: 27px;
}

.student-class-members-action.green > i { color: #18a970; }
.student-class-members-action.gold > i { color: #f5a400; }
.student-class-members-action.purple > i { color: #7c5ce8; }

.student-class-members-action span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.student-class-members-action strong,
.student-class-members-action small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-class-members-action strong {
    font-size: 13px;
    font-weight: 900;
}

.student-class-members-action small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.student-class-members-empty,
.student-class-members-inline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
}

.student-class-members-empty {
    min-height: 220px;
    margin: 0 14px;
    padding: 24px;
    flex-direction: column;
    gap: 8px;
}

.student-class-members-empty i {
    color: #29b979;
    font-size: 36px;
}

.student-class-members-empty strong {
    color: #14213d;
    font-size: 19px;
}

.student-class-members-inline-empty {
    min-height: 76px;
    border-radius: 16px;
    background: rgba(241, 248, 252, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    font-size: 13px;
}

body:has(#studentClassMembersPage) .bottom-nav {
    min-height: 76px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    padding: 8px;
    border-radius: 24px;
}

body:has(#studentClassMembersPage) .bottom-nav a {
    min-height: 56px;
    padding: 8px 0;
    border-radius: 18px;
    gap: 3px;
    font-size: 15px;
}

body:has(#studentClassMembersPage) .bottom-nav i {
    font-size: 21px;
}

.student-class-members-week-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #71809a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.student-class-members-week-link i {
    font-size: 12px;
}

.student-class-members-honor-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #71809a;
    text-decoration: none;
    background: rgba(248, 251, 255, 0.84);
}

.student-class-members-honor-link i {
    font-size: 16px;
}

.student-class-weekly-page,
.student-class-weekly-page * {
    box-sizing: border-box;
}

.student-class-weekly-page {
    width: min(var(--mobile-shell-max-width), 100vw);
    max-width: var(--mobile-shell-max-width);
    min-height: 100vh;
    margin: -16px auto 0;
    padding: 18px 14px calc(112px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    color: #14213d;
    background-color: #edf8ff;
    background-image:
        linear-gradient(rgba(255,255,255,0.74) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.74) 1px, transparent 1px),
        radial-gradient(circle at 82% 5%, rgba(121, 208, 255, 0.28), transparent 28%),
        linear-gradient(180deg, #e9f8ff 0%, #f7fcff 58%, #eef8ff 100%);
    background-size: 22px 22px, 22px 22px, 100% 210px, auto;
}

.student-class-weekly-hero {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 86px;
    align-items: center;
    min-height: 124px;
    gap: 10px;
}

.student-class-weekly-back {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14213d;
    text-decoration: none;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 10px 22px rgba(57, 107, 153, 0.14);
}

.student-class-weekly-back i {
    font-size: 24px;
}

.student-class-weekly-title {
    min-width: 0;
    text-align: center;
}

.student-class-weekly-title h1 {
    margin: 0 0 8px;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 900;
    color: #14213d;
}

.student-class-weekly-title p {
    margin: 0;
    color: #60708a;
    font-size: 15px;
    font-weight: 700;
}

.student-class-weekly-art {
    width: 86px;
    height: 72px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2f91e8;
    background: linear-gradient(145deg, rgba(255,255,255,0.76), rgba(180,230,255,0.34));
    font-size: 42px;
}

.student-class-weekly-body {
    display: grid;
    gap: 12px;
}

.student-class-weekly-summary,
.student-class-weekly-card,
.student-class-weekly-empty {
    border: 1px solid rgba(205, 229, 247, 0.88);
    border-radius: 22px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 12px 28px rgba(45, 100, 145, 0.12);
}

.student-class-weekly-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 14px;
}

.student-class-weekly-summary-item {
    min-width: 0;
    min-height: 112px;
    padding: 11px 7px 9px;
    border-radius: 18px;
    text-align: center;
}

.student-class-weekly-summary-item.green { background: linear-gradient(145deg, #e8fbf3, #f7fffb); }
.student-class-weekly-summary-item.blue { background: linear-gradient(145deg, #eaf4ff, #f8fbff); }
.student-class-weekly-summary-item.gold { background: linear-gradient(145deg, #fff5db, #fffaf1); }

.student-class-weekly-summary-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #fff;
    font-size: 17px;
}

.student-class-weekly-summary-item.green > span { background: linear-gradient(135deg, #35d39a, #1ca96d); }
.student-class-weekly-summary-item.blue > span { background: linear-gradient(135deg, #5ab6ff, #2378e8); }
.student-class-weekly-summary-item.gold > span { background: linear-gradient(135deg, #ffc94d, #f59e0b); }

.student-class-weekly-summary-item small {
    display: block;
    margin-top: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.student-class-weekly-summary-item strong {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    margin-top: 7px;
    line-height: 1;
}

.student-class-weekly-summary-item strong b {
    font-size: clamp(27px, 8vw, 32px);
    font-weight: 900;
}

.student-class-weekly-summary-item strong em {
    font-size: 13px;
    font-style: normal;
    font-weight: 850;
}

.student-class-weekly-summary-item.green strong { color: #18a970; }
.student-class-weekly-summary-item.blue strong { color: #2478e8; }
.student-class-weekly-summary-item.gold strong { color: #e98b08; }

.student-class-weekly-summary-item p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.student-class-weekly-stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    color: #f5b51b !important;
    font-size: 12px !important;
}

.student-class-weekly-card {
    padding: 16px;
}

.student-class-weekly-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.student-class-weekly-section-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #14213d;
    font-size: 19px;
    line-height: 1.24;
    font-weight: 900;
}

.student-class-weekly-section-head h2 i {
    color: #2f86f6;
}

.student-class-weekly-section-head > span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.student-class-weekly-chart {
    width: 100%;
    overflow: hidden;
}

.student-class-weekly-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.weekly-chart-grid line {
    stroke: rgba(148, 163, 184, 0.24);
    stroke-width: 1;
}

.weekly-chart-grid text,
.weekly-chart-point text {
    fill: #60708a;
    font-size: 10px;
    text-anchor: middle;
}

.weekly-chart-grid text {
    text-anchor: end;
}

.weekly-chart-point circle {
    fill: #2f86f6;
    stroke: #fff;
    stroke-width: 2;
}

.weekly-chart-point .point-value {
    fill: #2378e8;
    font-size: 11px;
    font-weight: 800;
}

.student-class-weekly-type-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    gap: 12px;
}

.student-class-weekly-type-list {
    display: grid;
    gap: 11px;
    min-width: 0;
}

.student-class-weekly-type-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
}

.student-class-weekly-type-row span {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.student-class-weekly-type-row div {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.student-class-weekly-type-row div i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.student-class-weekly-type-row .green { background: #35c990; color: #20aa74; }
.student-class-weekly-type-row .blue { background: #4599ff; color: #2f86f6; }
.student-class-weekly-type-row .purple { background: #9b6cf1; color: #8b5cf6; }
.student-class-weekly-type-row .orange { background: #f59e0b; color: #e98b08; }

.student-class-weekly-type-row strong {
    font-size: 14px;
    font-weight: 900;
    text-align: right;
}

.student-class-weekly-donut {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.student-class-weekly-donut span {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #6aa7f5;
    background: #fff;
    font-size: 28px;
    box-shadow: inset 0 0 0 1px rgba(205, 229, 247, 0.7);
}

.student-class-weekly-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.student-class-weekly-compare-grid article {
    min-width: 0;
    padding: 0 8px;
    text-align: center;
    border-left: 1px solid #edf2f7;
}

.student-class-weekly-compare-grid article:first-child {
    border-left: none;
}

.student-class-weekly-compare-grid small {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-class-weekly-compare-grid strong {
    display: block;
    margin-top: 8px;
    color: #14213d;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
    white-space: nowrap;
}

.student-class-weekly-compare-grid span {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.student-class-weekly-compare-grid span.up { color: #18a970; }
.student-class-weekly-compare-grid span.down { color: #ef4444; }
.student-class-weekly-compare-grid span.flat { color: #94a3b8; }

.student-class-weekly-progress-list {
    border: 1px solid #edf2f7;
    border-radius: 14px;
    overflow: hidden;
}

.student-class-weekly-progress-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 62px 58px 34px;
    align-items: center;
    gap: 8px;
    min-height: 66px;
    padding: 10px;
    color: #14213d;
    text-decoration: none;
    border-top: 1px solid #edf2f7;
}

.student-class-weekly-progress-row:first-child {
    border-top: none;
}

.student-class-weekly-progress-row img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: #111c32;
}

.student-class-weekly-progress-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-class-weekly-progress-main strong {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.student-class-weekly-progress-main b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #14213d;
    font-size: 15px;
    font-weight: 900;
}

.student-class-weekly-progress-main em {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    color: #60708a;
    background: #eef2f7;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.student-class-weekly-progress-main small {
    color: #64748b;
    font-size: 12px;
}

.student-class-weekly-progress-metric {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.student-class-weekly-progress-metric small {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.student-class-weekly-progress-metric b {
    color: #e98b08;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.student-class-weekly-progress-row > i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #2f86f6;
    border: 1px solid rgba(47, 134, 246, 0.32);
    font-size: 16px;
}

.student-class-weekly-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    color: #94a3b8;
    font-size: 12px;
}

.student-class-weekly-empty,
.student-class-weekly-inline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
}

.student-class-weekly-empty {
    min-height: 220px;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.student-class-weekly-empty i {
    color: #2f86f6;
    font-size: 36px;
}

.student-class-weekly-empty strong {
    color: #14213d;
    font-size: 19px;
}

.student-class-weekly-inline-empty {
    min-height: 84px;
    border-radius: 16px;
    background: rgba(241, 248, 252, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    font-size: 13px;
}

body:has(#studentClassWeeklyPage) .bottom-nav {
    min-height: 76px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    padding: 8px;
    border-radius: 24px;
}

body:has(#studentClassWeeklyPage) .bottom-nav a {
    min-height: 56px;
    padding: 8px 0;
    border-radius: 18px;
    gap: 3px;
    font-size: 15px;
}

body:has(#studentClassWeeklyPage) .bottom-nav i {
    font-size: 21px;
}

.student-class-honor-page,
.student-class-honor-page * {
    box-sizing: border-box;
}

.student-class-honor-page {
    width: min(var(--mobile-shell-max-width), 100vw);
    max-width: var(--mobile-shell-max-width);
    min-height: 100vh;
    margin: -16px auto 0;
    padding: 22px 14px calc(112px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    color: #14213d;
    background-color: #edf8ff;
    background-image:
        linear-gradient(rgba(255,255,255,0.72) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.72) 1px, transparent 1px),
        radial-gradient(circle at 72% 4%, rgba(94, 193, 255, 0.24), transparent 30%),
        linear-gradient(180deg, #eaf8ff 0%, #f7fcff 58%, #eef8ff 100%);
    background-size: 22px 22px, 22px 22px, 100% 210px, auto;
}

.student-class-honor-topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 78px;
}

.student-class-honor-back {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #14213d;
    text-decoration: none;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 10px 22px rgba(57, 107, 153, 0.14);
}

.student-class-honor-back i {
    font-size: 22px;
}

.student-class-honor-topbar h1 {
    margin: 0;
    text-align: center;
    color: #14213d;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 900;
}

.student-class-honor-body {
    display: grid;
    gap: 12px;
}

.student-class-honor-hero {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    border-radius: 24px;
    padding: 26px 156px 20px 18px;
    background:
        radial-gradient(circle at 75% 28%, rgba(255, 215, 86, 0.42), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(210,239,255,0.88));
    box-shadow: 0 12px 28px rgba(45, 100, 145, 0.12);
    border: 1px solid rgba(205, 229, 247, 0.88);
}

.student-class-honor-hero::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -38px;
    width: 210px;
    height: 110px;
    border-radius: 80px 80px 0 0;
    background: linear-gradient(135deg, rgba(68, 150, 255, 0.58), rgba(25, 113, 215, 0.26));
}

.student-class-honor-hero h2 {
    margin: 0;
    color: #153064;
    font-size: clamp(30px, 8.4vw, 36px);
    line-height: 1.12;
    font-weight: 950;
}

.student-class-honor-hero p {
    margin: 14px 0 0;
    color: #60708a;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 750;
}

.student-class-honor-crown {
    position: absolute;
    right: 30px;
    top: 22px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 32px;
    color: #f4a60b;
    font-size: 70px;
    filter: drop-shadow(0 14px 20px rgba(245, 158, 11, 0.2));
}

.student-class-honor-stars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: -58px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

.student-class-honor-star {
    min-width: 0;
    min-height: 156px;
    padding: 12px 6px 10px;
    border-radius: 18px;
    display: grid;
    justify-items: center;
    align-content: start;
    color: #14213d;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(220, 232, 246, 0.84);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 10px 22px rgba(45, 100, 145, 0.1);
}

.student-class-honor-star.blue {
    min-height: 176px;
    margin-top: -26px;
    border-color: rgba(77, 158, 255, 0.36);
    background: linear-gradient(145deg, #eaf4ff, #fff);
}

.student-class-honor-star.gold { background: linear-gradient(145deg, #fff6d9, #fff); }
.student-class-honor-star.purple { background: linear-gradient(145deg, #f4eaff, #fff); }

.student-class-honor-ribbon {
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.student-class-honor-star.gold .student-class-honor-ribbon { background: linear-gradient(135deg, #ffc94d, #f59e0b); }
.student-class-honor-star.blue .student-class-honor-ribbon { background: linear-gradient(135deg, #67b7ff, #2378e8); }
.student-class-honor-star.purple .student-class-honor-ribbon { background: linear-gradient(135deg, #d3a5ff, #8b5cf6); }

.student-class-honor-star > i {
    margin-top: 7px;
    font-size: 26px;
}

.student-class-honor-star.gold > i { color: #f59e0b; }
.student-class-honor-star.blue > i { color: #2378e8; }
.student-class-honor-star.purple > i { color: #8b5cf6; }

.student-class-honor-star img,
.student-class-honor-empty-avatar {
    width: 46px;
    height: 46px;
    margin-top: 7px;
    border-radius: 50%;
    object-fit: cover;
    background: #111c32;
    border: 3px solid #fff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.student-class-honor-empty-avatar {
    display: grid;
    place-items: center;
    color: #7c8799;
    background: #edf2f7;
}

.student-class-honor-star strong,
.student-class-honor-star small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-class-honor-star strong {
    margin-top: 7px;
    color: #14213d;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
}

.student-class-honor-star small {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.25;
}

.student-class-honor-list-card,
.student-class-honor-encourage,
.student-class-honor-empty {
    border: 1px solid rgba(205, 229, 247, 0.88);
    border-radius: 22px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 12px 28px rgba(45, 100, 145, 0.12);
}

.student-class-honor-list-card {
    padding: 14px 12px;
}

.student-class-honor-tabs {
    display: grid;
    grid-template-columns: repeat(3, 58px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.student-class-honor-tabs a {
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #60708a;
    text-decoration: none;
    background: #f0f4f8;
    font-size: 14px;
    font-weight: 850;
}

.student-class-honor-tabs a.active {
    color: #fff;
    background: linear-gradient(135deg, #43b7ff, #2378e8);
    box-shadow: 0 8px 16px rgba(35, 120, 232, 0.22);
}

.student-class-honor-tabs > span {
    min-width: 0;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #71809a;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.student-class-honor-tabs > span b {
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-class-honor-tabs > span i {
    color: #2f86f6;
    font-size: 15px;
}

.student-class-honor-ranking {
    overflow: hidden;
    border: 1px solid #edf2f7;
    border-radius: 16px;
}

.student-class-honor-row {
    display: grid;
    grid-template-columns: 38px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 8px 10px;
    color: #14213d;
    text-decoration: none;
    border-top: 1px solid #edf2f7;
}

.student-class-honor-row:first-child {
    border-top: none;
}

.student-class-honor-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #64748b;
    font-size: 15px;
    font-weight: 900;
}

.student-class-honor-rank.top {
    color: #f59e0b;
}

.student-class-honor-rank i {
    font-size: 22px;
}

.student-class-honor-row > img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #111c32;
}

.student-class-honor-row-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.student-class-honor-row-main strong {
    min-width: 0;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #14213d;
    font-size: 16px;
    font-weight: 900;
}

.student-class-honor-row-main em {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.student-class-honor-row-main em.reading { color: #e98b08; background: #fff4d7; }
.student-class-honor-row-main em.interaction { color: #2378e8; background: #e8f2ff; }
.student-class-honor-row-main em.progress { color: #8b5cf6; background: #f2e8ff; }

.student-class-honor-row-metric {
    color: #4a5b75;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.student-class-honor-encourage {
    min-height: 104px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.student-class-honor-encourage > i {
    color: #f59e0b;
    font-size: 58px;
    filter: drop-shadow(0 10px 16px rgba(245, 158, 11, 0.18));
}

.student-class-honor-encourage span {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.student-class-honor-encourage strong {
    color: #14213d;
    font-size: 21px;
    font-weight: 900;
}

.student-class-honor-encourage small {
    color: #4a5b75;
    font-size: 14px;
    line-height: 1.45;
}

.student-class-honor-encourage b {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2f86f6;
    background: #e7f5ff;
    font-size: 30px;
}

.student-class-honor-empty,
.student-class-honor-inline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
}

.student-class-honor-empty {
    min-height: 220px;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.student-class-honor-empty i {
    color: #f59e0b;
    font-size: 38px;
}

.student-class-honor-empty strong {
    color: #14213d;
    font-size: 19px;
}

.student-class-honor-inline-empty {
    min-height: 90px;
    border-radius: 16px;
    background: rgba(241, 248, 252, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.42);
    font-size: 13px;
}

body:has(#studentClassHonorPage) .bottom-nav {
    min-height: 76px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    padding: 8px;
    border-radius: 24px;
}

body:has(#studentClassHonorPage) .bottom-nav a {
    min-height: 56px;
    padding: 8px 0;
    border-radius: 18px;
    gap: 3px;
    font-size: 15px;
}

body:has(#studentClassHonorPage) .bottom-nav i {
    font-size: 21px;
}

@media (max-width: 390px) {
    .student-class-weekly-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .student-class-weekly-hero {
        grid-template-columns: 44px minmax(0, 1fr) 74px;
        min-height: 116px;
    }

    .student-class-weekly-art {
        width: 74px;
        height: 64px;
        font-size: 36px;
    }

    .student-class-weekly-summary {
        gap: 7px;
        padding: 12px;
    }

    .student-class-weekly-summary-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .student-class-weekly-card {
        padding: 14px;
    }

    .student-class-weekly-type-wrap {
        grid-template-columns: minmax(0, 1fr) 90px;
        gap: 10px;
    }

    .student-class-weekly-donut {
        width: 90px;
        height: 90px;
    }

    .student-class-weekly-progress-row {
        grid-template-columns: 40px minmax(0, 1fr) 54px 52px 30px;
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .student-class-honor-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .student-class-honor-hero {
        min-height: 160px;
        padding-right: 132px;
    }

    .student-class-honor-crown {
        right: 22px;
        width: 92px;
        height: 92px;
        font-size: 62px;
    }

    .student-class-honor-stars {
        gap: 7px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .student-class-honor-star {
        min-height: 150px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .student-class-honor-tabs {
        grid-template-columns: repeat(3, 54px) minmax(0, 1fr);
        gap: 6px;
    }

    .student-class-honor-row {
        grid-template-columns: 34px 36px minmax(0, 1fr) auto;
        gap: 7px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .student-class-honor-row > img {
        width: 36px;
        height: 36px;
    }

    .student-class-honor-row-main strong {
        max-width: 78px;
    }

    .student-class-honor-row-metric {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .student-class-members-hero {
        min-height: 214px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .student-class-members-hero-art {
        right: 10px;
        width: 102px;
        height: 122px;
    }

    .student-class-members-title {
        width: calc(100% - 98px);
    }

    .student-class-members-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .student-class-members-board,
    .student-class-members-card {
        padding: 12px;
    }

    .student-class-members-metrics,
    .student-class-members-honors,
    .student-class-members-action-grid {
        gap: 7px;
    }

    .student-class-members-metric {
        min-height: 100px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .student-class-members-metric > span {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .student-class-members-honor {
        min-height: 138px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .student-class-members-grid {
        gap: 11px 8px;
    }

    .student-class-members-avatar-wrap,
    .student-class-members-avatar-wrap img {
        width: 60px;
        height: 60px;
    }

    .student-class-members-action {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 5px;
        min-height: 68px;
    }

    .student-class-members-action > i {
        font-size: 24px;
    }
}

@media (max-width: 390px) {
    .student-public-profile-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .student-public-profile-hero {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 14px;
    }

    .student-public-profile-avatar-wrap,
    .student-public-profile-avatar {
        width: 76px;
        height: 76px;
    }

    .student-public-profile-main {
        padding-right: 88px;
    }

    .student-public-profile-follow {
        min-width: 86px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    .student-public-profile-stat {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 6px;
        min-height: 76px;
    }

    .student-public-profile-stat span,
    .student-public-profile-growth > span {
        width: 30px;
        height: 30px;
        border-radius: 12px;
        font-size: 14px;
    }

    .student-public-profile-stat strong {
        font-size: 22px;
    }

.student-public-profile-post {
        flex-basis: 164px;
    }
}

/* Shared plain return control: student, parent and teacher secondary/detail pages. */
.app-back-button,
.front-round-back-btn,
.front-back-btn,
.teacher-back-icon-btn,
.teacher-point-ranking-back,
.student-reading-insight-modal-close,
.student-reading-task-overlay-back {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #1768f2 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.app-back-button::before,
.front-round-back-btn::before,
.front-back-btn::before,
.teacher-back-icon-btn::before,
.teacher-point-ranking-back::before,
.student-reading-insight-modal-close::before,
.student-reading-task-overlay-back::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: translateX(3px) rotate(45deg);
}

.app-back-button > i,
.app-back-button > span,
.front-round-back-btn > i,
.front-round-back-btn > span,
.front-back-btn > i,
.front-back-btn > span,
.teacher-back-icon-btn > i,
.teacher-back-icon-btn > span,
.teacher-point-ranking-back > i,
.teacher-point-ranking-back > span,
.student-reading-insight-modal-close > i,
.student-reading-insight-modal-close > span,
.student-reading-task-overlay-back > i,
.student-reading-task-overlay-back > span {
    display: none !important;
}

.app-back-button:focus-visible,
.front-round-back-btn:focus-visible,
.front-back-btn:focus-visible,
.teacher-back-icon-btn:focus-visible,
.teacher-point-ranking-back:focus-visible,
.student-reading-insight-modal-close:focus-visible,
.student-reading-task-overlay-back:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.45) !important;
    outline-offset: 2px;
}

.app-back-button-page {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 14px;
    z-index: 1040;
}

.student-own-works-page,
.student-own-work-detail-page {
    width: min(var(--mobile-shell-max-width), 100vw);
    min-height: 100vh;
    margin: -16px auto 0;
    padding: calc(78px + env(safe-area-inset-top)) 16px calc(122px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    color: #17213a;
    background: linear-gradient(180deg, #eef8ff 0%, #f8fcff 58%, #edf7ff 100%);
}

.student-own-works-page-head {
    margin-bottom: 18px;
}

.student-own-works-page-head h1,
.student-own-work-detail-copy h1 {
    margin: 0;
    color: #13203a;
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.2;
    font-weight: 850;
}

.student-own-works-page-head p {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
}

.student-own-works-list {
    display: grid;
    gap: 12px;
}

.student-own-work-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(207, 226, 242, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(38, 84, 126, 0.09);
}

.student-own-work-cover {
    width: 86px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    color: #3b82f6;
    background: #eaf4ff;
    font-size: 30px;
}

.student-own-work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-own-work-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-own-work-copy strong,
.student-own-work-copy span,
.student-own-work-copy small,
.student-own-work-copy time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-own-work-copy strong { font-size: 16px; }
.student-own-work-copy span { color: #2574cc; font-size: 13px; }
.student-own-work-copy small,
.student-own-work-copy time { color: #6b7a90; font-size: 12px; }

.student-own-work-open {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 12px;
    color: #176c8f;
    background: #edf8ff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.student-own-work-actions {
    display: grid;
    gap: 8px;
}

.student-own-work-delete-form,
.student-own-work-detail-delete-form {
    margin: 0;
}

.student-own-work-delete {
    min-height: 38px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid #fca5a5;
    border-radius: 12px;
    color: #b91c1c;
    background: #fff1f2;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.student-own-work-detail-delete-form {
    margin-top: 16px;
}

.student-me-post-delete-form {
    margin: 8px 0 0;
}

.student-me-post-delete {
    min-height: 36px;
    width: 100%;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    color: #b91c1c;
    background: #fff1f2;
    font-size: 13px;
    font-weight: 800;
}

.student-own-works-empty {
    min-height: 220px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 24px;
    border: 1px dashed rgba(148, 163, 184, 0.58);
    border-radius: 20px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.82);
    text-align: center;
}

.student-own-works-empty i { color: #3b82f6; font-size: 34px; }
.student-own-works-empty strong { color: #17213a; font-size: 18px; }

.student-own-work-detail-card {
    overflow: hidden;
    border: 1px solid rgba(207, 226, 242, 0.9);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(38, 84, 126, 0.1);
}

.student-own-work-detail-media {
    min-height: 220px;
    display: grid;
    place-items: center;
    background: #0f172a;
}

.student-own-work-detail-media img,
.student-own-work-detail-media video {
    width: 100%;
    max-height: min(62vh, 580px);
    object-fit: contain;
}

.student-own-work-detail-text-media {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #dbeafe;
    font-size: 15px;
}

.student-own-work-detail-text-media i {
    font-size: 44px;
}

.student-own-work-detail-copy { padding: 18px; }

.student-own-work-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
}

.student-own-work-detail-meta span,
.student-own-work-detail-meta time {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #52708e;
    background: #eff7ff;
    font-size: 12px;
}

.student-own-work-detail-copy p { margin: 0; color: #475569; line-height: 1.6; }
.student-own-work-detail-copy .student-own-work-reject { margin-top: 12px; color: #c2410c; }

/* Follow/member cards share this no-squeeze contract on phone widths. */
#studentFollowPage .student-follow-card {
    min-width: 0;
}

#studentFollowPage .student-follow-card-link,
#studentFollowPage .student-follow-card-info,
#studentFollowPage .student-follow-card-meta,
#studentFollowPage .student-follow-card-info small {
    min-width: 0;
}

#studentFollowPage .student-follow-card-info strong,
#studentFollowPage .student-follow-card-meta,
#studentFollowPage .student-follow-card-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-public-profile-main p > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 430px) {
    #studentFollowPage .student-follow-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    #studentFollowPage .student-follow-card-link {
        grid-template-columns: 70px minmax(0, 1fr) 20px;
        gap: 10px;
    }

    #studentFollowPage .student-follow-avatar-wrap,
    #studentFollowPage .student-follow-avatar {
        width: 70px;
        height: 70px;
    }

    #studentFollowPage .student-follow-status-form {
        position: static;
        justify-self: end;
    }

    #studentFollowPage .student-follow-status-btn {
        min-width: 88px;
        min-height: 44px;
    }

    .student-own-work-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .student-own-work-cover {
        width: 72px;
        height: 68px;
    }

    .student-own-work-actions {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 390px) {
    #studentFollowPage .student-follow-body {
        gap: 12px;
    }

    #studentFollowPage .student-follow-overview-card {
        padding: 14px 14px 12px;
    }

    #studentFollowPage .student-follow-overview-main {
        gap: 8px;
    }

    #studentFollowPage .student-follow-overview-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 20px;
    }

    #studentFollowPage .student-follow-overview-divider {
        height: 42px;
    }

    #studentFollowPage .student-follow-stat-item {
        grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr);
        gap: 5px;
    }

    #studentFollowPage .student-follow-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    #studentFollowPage .student-follow-stat-item:not(:first-child) {
        padding-left: 5px;
    }

    #studentFollowPage .student-follow-card {
        min-height: 116px;
        padding: 14px;
    }

    #studentFollowPage .student-follow-card-link {
        grid-template-columns: 70px minmax(0, 1fr) 20px;
        gap: 10px;
    }

    #studentFollowPage .student-follow-avatar-wrap,
    #studentFollowPage .student-follow-avatar {
        width: 70px;
        height: 70px;
    }

    #studentFollowPage .student-follow-status-form {
        position: static;
    }

    #studentFollowPage .student-follow-card-info {
        padding-right: 0;
    }

    #studentFollowPage .student-follow-status-btn {
        min-width: 88px;
        min-height: 38px;
        font-size: 15px;
    }

    #studentFollowPage .student-follow-discover-card {
        min-height: 136px;
    }
}

.member-card-link {
    text-decoration: none;
    color: var(--ink);
}

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

.member-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: rgba(255, 255, 255, 0.9);
}

.member-filter-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.member-filter-group .js-member-filter-btn.active {
    border-color: #0ea5e9;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
}

.member-filter-stat {
    font-size: 12px;
    color: #64748b;
}

.member-reminder-name-list {
    max-height: 86px;
    overflow: auto;
    border-radius: 10px;
    border: 1px dashed rgba(100, 116, 139, 0.45);
    background: rgba(248, 250, 252, 0.9);
    padding: 8px 10px;
    font-size: 12px;
    color: #334155;
    line-height: 1.5;
}

.teacher-reminder-modal .modal-content,
#memberReminderModal .modal-content {
    border-radius: 14px;
}

.teacher-reminder-textarea,
#memberReminderTextarea {
    min-height: 140px;
    resize: vertical;
}

#resourceEditModal {
    z-index: 1065;
}

#resourceEditModal .modal-dialog {
    max-width: min(920px, 94vw);
}

#resourceEditModal .modal-content {
    max-height: 86vh;
    overflow: hidden;
}

#resourceEditModal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#resourceEditModal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

.teacher-reminder-student-list,
.member-reminder-name-list {
    white-space: normal;
    word-break: break-word;
}

.student-message-entry {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}

.student-message-entry .btn {
    border-radius: 999px;
    position: relative;
    min-height: 40px;
    padding-right: 40px;
}

.student-message-badge {
    position: absolute;
    top: -6px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding: 0 4px;
    font-weight: 700;
}

.student-message-panel {
    width: min(680px, 92vw);
    max-width: 92vw;
}

.teacher-notification-panel {
    width: min(720px, 92vw);
    max-width: 92vw;
}

.teacher-notification-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.student-message-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.student-message-card {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
}

.student-message-card.unread {
    border-color: rgba(14, 165, 233, 0.45);
    background: rgba(240, 249, 255, 0.9);
}

.platform-notice-card {
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.055);
}

.platform-notice-type {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 2px 6px;
    background: #e8f2ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.platform-notice-type.type-URGENT {
    background: #fff0ef;
    color: #d94841;
}

.platform-notice-type.type-SYSTEM {
    background: #eef2ff;
    color: #5b53c9;
}

.platform-notice-type.type-WORK_HANDLE {
    background: #fff7e9;
    color: #b86a00;
}

.platform-notice-type.type-ACTIVITY_REMINDER {
    background: #e9fbf5;
    color: #0e8a68;
}

.platform-notice-attachment-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
    color: #58718d;
    font-size: 12px;
}

.platform-notice-attachment-hint i {
    color: #2776d2;
}

.student-message-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.student-message-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
}

.student-message-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.student-message-content {
    color: #334155;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.student-message-content.expanded {
    -webkit-line-clamp: initial;
    display: block;
}

.teacher-notification-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 18px;
    background: #fff;
}

.teacher-notification-card.unread {
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(240, 247, 255, 0.96);
}

.teacher-notification-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.teacher-notification-icon.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.teacher-notification-icon.green {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.teacher-notification-icon.amber {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.teacher-notification-icon.slate {
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
}

.teacher-notification-main {
    min-width: 0;
}

.teacher-notification-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #0f172a;
}

.teacher-notification-title-row strong {
    font-size: 15px;
    line-height: 1.5;
}

.teacher-notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    flex: 0 0 8px;
}

.teacher-notification-content {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
}

.teacher-notification-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

.teacher-notification-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-notification-link,
.teacher-notification-read-btn {
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: #fff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.teacher-notification-link:hover,
.teacher-notification-read-btn:hover {
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.teacher-notification-read-state {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.member-tile {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.member-avatar-link {
    position: relative;
    display: inline-flex;
    text-decoration: none;
}

.member-status-dot {
    position: absolute;
    right: -1px;
    top: -1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.24);
}

.member-status-dot.online {
    background: #84cc16;
}

.member-status-dot.offline {
    background: #ef4444;
}

.member-name {
    width: 100%;
    text-align: center;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

.member-level {
    font-size: 12px;
    color: #475569;
    text-align: center;
    line-height: 1.2;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.post-tile {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: var(--ink);
    padding: 12px;
    display: grid;
    align-content: space-between;
}

.post-tile strong {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.post-tile small {
    color: var(--muted);
}

.post-grid-preview .post-tile {
    aspect-ratio: auto;
}

.post-tile-preview {
    gap: 8px;
    align-content: start;
}

.post-tile-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, 0.18);
    background: #eaf3ff;
}

.post-tile-open {
    text-decoration: none;
    font-weight: 700;
    color: #0369a1;
}

.member-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 12px;
}

.member-dot.active { background: #22c55e; }
.member-dot.inactive { background: #cbd5e1; }

.bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(var(--mobile-shell-max-width), calc(100% - 24px));
    min-height: 76px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.34);
}

.bottom-nav a {
    color: rgba(248, 250, 252, 0.74);
    text-decoration: none;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 10px 0;
    border-radius: 16px;
}

.bottom-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.34), rgba(34, 197, 94, 0.28));
}

@container mobile-page (max-width: 480px) {
    .mobile-page-content { gap: 14px; }

    .mobile-topbar {
        padding: 16px;
        border-radius: 22px;
    }

    .student-home-hero-card {
        min-height: 114px;
        padding: 15px;
        border-radius: 18px;
    }

    .student-home-hero-main {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 11px;
        padding-right: 108px;
    }

    .student-home-hero-brand {
        font-size: 16px;
    }

    .student-home-hero-name {
        font-size: 13px;
    }

    .student-home-level-pill {
        top: 9px;
        right: 8px;
        width: 100px;
        height: 86px;
    }

    .student-home-level-full-icon { width: 100px; height: 86px; }

    .student-home-level-icon {
        width: 56px;
        height: 54px;
    }

    .student-home-level-label {
        max-width: 80px;
        font-size: 9px;
    }

    .student-home-quick-nav {
        gap: 6px;
        padding: 10px 6px 8px;
    }

    .student-home-quick-link span:last-child {
        font-size: 11px;
    }

    .student-home-feed-copy h2 {
        font-size: 18px;
    }

    .student-home-sort-pill {
        min-height: 31px;
        padding: 0 10px;
        font-size: 11px;
    }

    .teacher-home-hero-main {
        padding-right: 78px;
    }

    .teacher-home-switch-form {
        right: 12px;
        bottom: 10px;
    }

    .teacher-home-switch-link {
        min-height: 28px;
        padding: 0 9px;
        font-size: 11px;
    }

    .teacher-home-sort-panel {
        width: min(244px, calc(100vw - 34px));
    }

    .student-home-feed-card {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    .student-home-feed-media,
    .student-home-feed-media .feed-media-image,
    .student-home-feed-media .feed-media-video {
        min-height: 110px;
    }

    .student-home-feed-card h3 {
        font-size: 14px;
    }

    .channel-tabs a,
    .ranking-switch a,
    .profile-links a {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 13px;
    }

    .post-card,
    .empty-card,
    .rank-card,
    .profile-card,
    .member-card,
    .my-work-card {
        padding: 15px;
        border-radius: 20px;
    }

    .section-head h2 { font-size: 22px; }
    .section-head p { font-size: 13px; }

    .post-header,
    .post-actions,
    .comment-box,
    .member-card,
    .my-work-card,
    .profile-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .comment-box .btn,
    .comment-box .form-control {
        width: 100%;
    }

    .profile-home-main { align-items: flex-start; }
    .profile-home-text h2 { font-size: 30px; }

    .teacher-workbench-page {
        width: 100%;
        min-width: 0;
        gap: 14px;
        padding-bottom: 30px;
    }

    .teacher-workbench-page *,
    .teacher-workbench-page *::before,
    .teacher-workbench-page *::after {
        box-sizing: border-box;
        min-width: 0;
    }

    .teacher-workbench-titlebar { min-height: 44px; }
    .teacher-workbench-titlebar h1 { font-size: 26px; line-height: 1.2; }

    .teacher-workbench-notice-btn {
        right: 2px;
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .teacher-workbench-notice-btn i { font-size: 19px; }
    .teacher-workbench-notice-dot { right: 8px; top: 7px; width: 8px; height: 8px; }

    .teacher-workbench-hero {
        position: relative;
        min-height: 184px;
        padding: 18px 18px 20px;
        border-radius: 22px;
        display: block;
    }

    .teacher-workbench-hero-main {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }

    .teacher-workbench-hero-avatar {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
        border-width: 3px;
    }

    .teacher-workbench-hero-text { gap: 6px; }

    .teacher-workbench-hero-title {
        padding-right: 118px;
        font-size: 22px;
        line-height: 1.25;
    }

    .teacher-workbench-hero-name {
        font-size: 15px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .teacher-workbench-hero-meta {
        display: grid;
        gap: 6px;
        margin-top: 1px;
        font-size: 12px;
        line-height: 1.45;
    }

    .teacher-workbench-hero-meta span {
        gap: 4px;
        overflow-wrap: anywhere;
    }

    .teacher-workbench-hero-actions {
        position: absolute;
        top: 14px;
        right: 14px;
        gap: 8px;
    }

    .teacher-workbench-switch-btn {
        width: auto;
        min-height: 40px;
        padding: 0 15px;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap;
    }

    .teacher-workbench-top-stack {
        gap: 10px;
    }

    .teacher-point-hero-card {
        padding: 16px 18px 18px;
    }

    .teacher-point-hero-avatar {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .teacher-point-hero-text {
        gap: 8px;
        padding-right: 0;
    }

    .teacher-point-hero-name-row {
        padding-right: 112px;
    }

    .teacher-point-hero-name {
        font-size: 20px;
    }

    .teacher-point-hero-meta-grid,
    .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-hero-meta-line {
        font-size: 12px;
    }

    .teacher-point-hero-meta-line {
        align-items: flex-start;
        row-gap: 6px;
    }

    .teacher-point-summary-card {
        grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1fr);
        gap: 12px;
        padding: 16px 16px 16px 18px;
        border-radius: 18px;
    }

    .teacher-point-summary-side {
        gap: 8px;
        padding-left: 12px;
    }

    .teacher-point-summary-label {
        margin-bottom: 6px;
        font-size: 14px;
    }

    .teacher-point-summary-value-row strong {
        font-size: 44px;
    }

    .teacher-point-summary-star {
        width: 24px;
        height: 24px;
    }

    .teacher-point-ranking-entry {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 56px;
        padding: 4px 0;
    }

    .teacher-point-ranking-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .teacher-point-ranking-icon i {
        font-size: 20px;
    }

    .teacher-point-ranking-copy strong {
        font-size: 17px;
    }

    .teacher-point-ranking-copy small {
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .teacher-point-ranking-tail {
        width: 16px;
        height: 16px;
    }

    .teacher-point-notice-btn {
        top: auto;
        right: auto;
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
        font-size: 25px;
    }

    .teacher-point-notice-btn .teacher-page-notice-dot {
        top: 7px;
        right: 8px;
        width: 8px;
        height: 8px;
    }

    .teacher-workbench-quick-grid,
    .teacher-workbench-resource-grid {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-workbench-quick-card {
        width: 100%;
        min-height: 96px;
        padding: 12px 6px 10px;
        border-radius: 18px;
        gap: 7px;
        overflow: hidden;
        grid-template-columns: 1fr;
        align-items: start;
        justify-items: center;
        text-align: center;
    }

    .teacher-workbench-quick-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 14px;
        font-size: 17px;
    }

    .teacher-workbench-quick-text {
        gap: 2px;
        overflow: hidden;
        text-align: center;
        justify-items: center;
    }

    .teacher-workbench-quick-text strong {
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
        overflow-wrap: break-word;
    }

    .teacher-workbench-quick-text small {
        display: block;
        font-size: 10px;
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
    }

    .teacher-workbench-main-grid,
    .teacher-workbench-side-stack {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-workbench-card {
        width: 100%;
        padding: 16px 15px 18px;
        border-radius: 20px;
        gap: 13px;
    }

    .teacher-workbench-card-head { gap: 3px; }

    .teacher-workbench-card-head-inline {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 7px;
    }

    .teacher-workbench-card-head h2 { font-size: 17px; line-height: 1.3; }
    .teacher-workbench-card-head span { font-size: 11px; line-height: 1.4; }
    .teacher-workbench-period-badge { padding: 6px 9px; font-size: 11px; white-space: nowrap; }

    .teacher-workbench-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-workbench-stat-box,
    .teacher-workbench-status-item {
        min-height: 92px;
        padding: 11px 8px;
        border-radius: 14px;
        gap: 5px;
    }

    .teacher-workbench-stat-box span,
    .teacher-workbench-status-item span {
        font-size: 11px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .teacher-workbench-stat-box strong,
    .teacher-workbench-status-item strong {
        font-size: 18px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .teacher-workbench-progress-meta { font-size: 12px; }
    .teacher-workbench-progress-meta strong { font-size: 23px; }
    .teacher-workbench-progress-track { height: 10px; }

    .teacher-workbench-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-workbench-action-row .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
        white-space: nowrap;
    }

    .bottom-nav {
        bottom: max(10px, env(safe-area-inset-bottom));
        width: min(430px, calc(100% - 20px));
        padding: 8px;
        gap: 6px;
        border-radius: 22px;
    }

    .bottom-nav a {
        padding: 7px 0;
        gap: 2px;
        border-radius: 14px;
        font-size: 12px;
    }
}

@container mobile-page (max-width: 430px) {
    .teacher-point-hero-card {
        padding: 16px;
    }

    .teacher-point-hero-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .teacher-point-hero-name-row {
        gap: 8px;
        padding-right: 96px;
    }

    .teacher-point-hero-name {
        font-size: 17px;
    }

    .teacher-point-role-badge {
        min-height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }

    .teacher-point-hero-meta-grid,
    .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-hero-meta-line {
        font-size: 11px;
    }

    .teacher-point-summary-card {
        grid-template-columns: minmax(100px, 0.76fr) minmax(0, 1fr);
        gap: 10px;
        padding: 14px 15px;
    }

    .teacher-point-summary-side {
        gap: 8px;
        padding-left: 10px;
    }

    .teacher-point-ranking-entry {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 52px;
        padding: 4px 0;
    }

    .teacher-point-summary-value-row strong {
        font-size: 40px;
    }

    .teacher-point-notice-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 14px;
    }

    .teacher-point-ranking-icon {
        width: 38px;
        height: 38px;
    }

    .teacher-point-ranking-icon i {
        font-size: 18px;
    }

    .teacher-point-ranking-copy strong {
        font-size: 15px;
    }

    .teacher-point-ranking-copy small {
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .teacher-point-ranking-tail {
        width: 14px;
        height: 14px;
    }

    .teacher-workbench-quick-card {
        min-height: 94px;
        padding: 11px 5px 10px;
    }
}

@media (max-width: 768px) {
    .mobile-shell {
        width: min(100%, var(--mobile-shell-max-width));
        padding: max(14px, env(safe-area-inset-top)) 12px calc(var(--mobile-shell-bottom-space) + 6px);
    }
    .mobile-page-content { gap: 14px; }
    .mobile-topbar {
        padding: 16px;
        border-radius: 22px;
    }
    .channel-tabs a,
    .ranking-switch a,
    .profile-links a {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 13px;
    }
    .post-card,
    .empty-card,
    .rank-card,
    .profile-card,
    .member-card,
    .my-work-card {
        padding: 15px;
        border-radius: 20px;
    }
    .section-head h2 { font-size: 22px; }
    .section-head p { font-size: 13px; }
    .onboarding-hero h1 { font-size: 24px; }
    .hero-summary { grid-template-columns: 1fr; }
    .admin-view-switch-form { grid-template-columns: 1fr; }
    .post-header,
    .post-actions,
    .comment-box,
    .member-card,
    .my-work-card,
    .profile-card { align-items: flex-start; flex-direction: column; }
    .comment-box .btn,
    .comment-box .form-control { width: 100%; }
    .profile-home-main { align-items: flex-start; }
    .profile-home-text h2 { font-size: 30px; }
    .teacher-workbench-shell {
        padding-top: 18px;
        padding-bottom: calc(148px + env(safe-area-inset-bottom));
    }
    .teacher-workbench-titlebar h1 { font-size: 28px; }
    .teacher-workbench-hero {
        padding: 18px;
        border-radius: 22px;
        flex-direction: column;
        align-items: stretch;
    }
    .teacher-workbench-hero-main {
        align-items: flex-start;
    }
    .teacher-workbench-hero-avatar {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
    }
    .teacher-workbench-switch-btn {
        width: 100%;
        justify-content: center;
    }
    .teacher-workbench-profile-card {
        grid-template-columns: minmax(0, 1fr) 156px;
        padding: 16px;
        gap: 12px;
        align-items: stretch;
    }
    .teacher-workbench-profile-main {
        align-items: flex-start;
        min-width: 0;
    }
    .teacher-workbench-profile-name {
        font-size: 20px;
    }
    .teacher-workbench-score-panel {
        border-left: 1px solid rgba(148, 163, 184, 0.18);
        border-top: 0;
        padding: 4px 0 4px 12px;
        min-width: 0;
        align-content: center;
    }
    .teacher-workbench-quick-grid,
    .teacher-workbench-resource-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }
    .teacher-workbench-quick-card {
        min-height: 94px;
        padding: 10px 6px 10px;
        justify-items: center;
        align-content: center;
        gap: 8px;
    }
    .teacher-workbench-quick-text strong {
        font-size: 12px;
    }
    .teacher-workbench-main-grid {
        grid-template-columns: 1fr;
    }
    .teacher-workbench-quality-layout {
        grid-template-columns: 1fr;
    }
    .teacher-workbench-quality-ring {
        width: 148px;
        height: 148px;
    }
    .teacher-workbench-quality-score-line strong {
        font-size: 24px;
    }
}

@media (max-width: 620px) {
    .teacher-workbench-main-grid {
        grid-template-columns: 1fr;
    }
    .teacher-workbench-card {
        padding: 16px;
    }
    .teacher-workbench-card-head-inline {
        flex-direction: column;
    }
    .teacher-workbench-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .teacher-workbench-quick-grid,
    .teacher-workbench-resource-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    .teacher-workbench-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .teacher-workbench-progress-meta strong {
        font-size: 24px;
    }
    .teacher-workbench-task-main {
        flex-direction: column;
    }
    .teacher-workbench-task-cover {
        width: 100%;
        height: 160px;
        flex-basis: auto;
    }
    .member-entry-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .member-entry-card { font-size: 22px; padding: 14px 10px; }
    .member-entry-card i { font-size: 18px; }
    .member-card.member-card-link { flex-direction: row; align-items: center; }
    .ranking-podium-box { padding: 12px; }
    .podium-card .podium-crown { font-size: 16px; }
    .ranking-row-no { font-size: 20px; }
    .members-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
    .followed-item { padding: 11px 12px; }
    .followed-user-name { max-width: 130px; }
    .profile-avatar-ring.avatar-md { width: 78px; height: 78px; flex-basis: 78px; }
    .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .game-wall-preview-grid { grid-template-columns: 1fr; }
    #weeklyGameWallSection .student-weekly-preview-head,
    #weeklyGameWallSection .student-weekly-preview-main,
    #weeklyGameWallSection .student-weekly-question-head {
        grid-template-columns: minmax(0, 1fr);
    }
    #weeklyGameWallSection .student-weekly-preview-art,
    #weeklyGameWallSection .student-weekly-question-art {
        min-height: 58px;
    }
    #weeklyGameWallSection .student-weekly-preview-card {
        padding: 16px;
        gap: 12px;
    }
    #weeklyGameWallSection .student-weekly-preview-copy h3,
    #weeklyGameWallSection .student-weekly-question-copy h3 {
        font-size: 22px;
    }
    #weeklyGameWallSection .student-weekly-preview-title-row {
        gap: 7px;
    }
    #weeklyGameWallSection .student-weekly-preview-subtitle {
        font-size: 14px;
    }
    #weeklyGameWallSection .student-weekly-preview-period-tags {
        gap: 6px;
    }
    #weeklyGameWallSection .student-weekly-preview-period-tags span {
        min-height: 26px;
        padding: 0 9px;
        font-size: 12px;
    }
    #weeklyGameWallSection .student-weekly-preview-honor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #weeklyGameWallSection .student-weekly-preview-step {
        grid-template-columns: 22px 38px minmax(0, 1fr);
        min-height: 82px;
        padding: 10px;
    }
    #weeklyGameWallSection .student-weekly-preview-step-no {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    #weeklyGameWallSection .student-weekly-preview-step-icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        font-size: 17px;
    }
    #weeklyGameWallSection .student-weekly-preview-step-copy strong {
        font-size: 14px;
        line-height: 1.3;
    }
    #weeklyGameWallSection .student-weekly-preview-step-copy small {
        font-size: 12px;
    }
    #weeklyGameWallSection .student-weekly-preview-step-copy p {
        font-size: 12px;
        line-height: 1.4;
    }
    #weeklyGameWallSection .student-weekly-preview-reminder {
        padding: 10px 11px;
        font-size: 13px;
    }
    #weeklyGameWallSection .student-weekly-preview-footer {
        align-items: stretch;
    }
    #weeklyGameWallSection .student-weekly-preview-stats {
        gap: 8px;
    }
    #weeklyGameWallSection .student-weekly-preview-stats span {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }
    #weeklyGameWallSection .student-weekly-preview-footer .btn {
        width: 100%;
        min-height: 46px;
        font-size: 16px;
    }
    #weeklyGameWallSection .student-weekly-question-row {
        grid-template-columns: 88px minmax(0, 1fr);
        column-gap: 10px;
        padding: 10px 0;
    }
    #weeklyGameWallSection .student-weekly-question-tag {
        justify-content: center;
        width: 100%;
        min-height: 30px;
        padding: 0 8px;
        font-size: 12px;
    }
    #weeklyGameWallSection .student-weekly-question-tag i {
        font-size: 15px;
    }
    #weeklyGameWallSection .student-weekly-question-text {
        font-size: 14px;
        line-height: 1.6;
    }
    #weeklyGameWallSection .student-weekly-answer-meta,
    #weeklyGameWallSection .student-weekly-answer-head,
    #weeklyGameWallSection .student-weekly-featured-head {
        flex-direction: column;
        align-items: flex-start;
    }
    #weeklyGameWallSection .student-weekly-answer-tools {
        width: 100%;
        justify-content: space-between;
    }
    #weeklyGameWallSection .student-weekly-detail-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    #weeklyGameWallSection .student-weekly-featured-item {
        grid-template-columns: 42px minmax(0, 1fr) 44px;
    }
    #weeklyGameWallSection .student-weekly-featured-side span {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        font-size: 18px;
    }
    #weeklyGameWallSection .student-weekly-answer-list-page {
        gap: 10px;
        padding-bottom: calc(140px + env(safe-area-inset-bottom));
    }
    #weeklyGameWallSection .student-weekly-answer-filter {
        min-height: 34px;
        padding: 0 13px;
        font-size: 13px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-card,
    #weeklyGameWallSection .student-weekly-answer-thread-block {
        padding: 14px;
        border-radius: 18px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-head {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-side {
        grid-column: 2;
        justify-self: end;
        margin-top: -40px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-avatar,
    #weeklyGameWallSection .student-weekly-answer-thread-avatar {
        width: 42px;
        height: 42px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-line strong,
    #weeklyGameWallSection .student-weekly-answer-thread-line strong {
        font-size: 15px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-main small,
    #weeklyGameWallSection .student-weekly-answer-thread-line small,
    #weeklyGameWallSection .student-weekly-answer-thread-line span,
    #weeklyGameWallSection .student-weekly-answer-discussion-line span,
    #weeklyGameWallSection .student-weekly-answer-thread-reply-line small {
        font-size: 12px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-content {
        padding: 12px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-text,
    #weeklyGameWallSection .student-weekly-answer-thread-main p {
        font-size: 14px;
        line-height: 1.64;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-actions {
        align-items: stretch;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-stats {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-stat,
    #weeklyGameWallSection .student-weekly-answer-flow-action {
        min-height: 36px;
        font-size: 13px;
    }
    #weeklyGameWallSection .student-weekly-answer-flow-action {
        width: 100%;
    }
    #weeklyGameWallSection .student-weekly-answer-discussion-form {
        grid-template-columns: 1fr;
    }
    #weeklyGameWallSection .student-weekly-answer-thread-head {
        align-items: flex-start;
        flex-direction: column;
    }
    #weeklyGameWallSection .student-weekly-answer-thread-item {
        padding: 12px;
    }
    #weeklyGameWallSection .student-weekly-answer-thread-answer {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    #weeklyGameWallSection .student-weekly-answer-thread-reply,
    #weeklyGameWallSection .student-weekly-answer-flow-comment,
    #weeklyGameWallSection .student-weekly-answer-discussion-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
    }
    #weeklyGameWallSection .student-weekly-answer-thread-reply-avatar,
    #weeklyGameWallSection .student-weekly-answer-flow-comment-avatar,
    #weeklyGameWallSection .student-weekly-answer-discussion-avatar {
        width: 30px;
        height: 30px;
    }
    .dubbing-activity-list { grid-template-columns: 1fr; }
    .dubbing-detail-dialog {
        max-width: 94vw;
        margin: 0 auto;
    }
    .dubbing-detail-modal .modal-content {
        max-height: 86vh;
    }
    .dubbing-detail-body {
        max-height: calc(86vh - 132px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dubbing-detail-video {
        max-height: 220px;
    }
    .dubbing-recorder-lines,
    .dubbing-record-track {
        max-height: 210px;
    }
    .dubbing-recorder-controls {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dubbing-btn-start,
    .dubbing-btn-stop,
    .dubbing-btn-submit,
    .dubbing-btn-pause {
        grid-column: 1 / -1;
    }
    .dubbing-recorder-controls .btn {
        min-height: 44px;
        font-size: 14px;
    }
    .game-wall-empty { flex-direction: column; align-items: flex-start; }
    .feed-post { padding: 10px; }
    .feed-post .post-header { flex-direction: row; align-items: flex-start; }
    .featured-feed-card .post-header {
        gap: 6px;
    }
    .featured-feed-card .post-author-avatar {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }
    .featured-feed-card .post-author-line strong,
    .featured-feed-card .post-type-badge {
        font-size: 12px;
    }
    .work-feed-card .work-card-header {
        gap: 6px;
        align-items: center;
    }
    .work-feed-card .post-author-avatar {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }
    .work-feed-card .work-card-student {
        font-size: 13px;
    }
    .work-feed-card .work-card-type {
        max-width: 44%;
        font-size: 11px;
    }
    .work-feed-card .work-card-title {
        margin-top: 7px;
        font-size: 15px;
    }
    .feed-post .post-actions { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 6px; }
    .feed-post .feed-interact-btn {
        min-width: 52px;
        max-width: 64px;
        height: 28px;
        padding: 0 8px;
        font-size: 13px;
    }
    .feed-post .post-action-stats { gap: 5px; }
    .feed-post .post-action-stats .icon-btn {
        min-width: 38px;
        height: 28px;
        padding: 0 7px;
        border-radius: 14px;
        gap: 3px;
    }
    .feed-post .post-action-stats .icon-btn i {
        font-size: 15px;
    }
    .feed-post .post-action-stats .icon-btn span {
        font-size: 12px;
    }
    .feed-post .comment-box { flex-direction: row; align-items: center; }
    .feed-post .comment-box .btn { width: auto; }
    .feed-post .comment-box .form-control { width: 100%; min-width: 0; }
    .feed-sort-form { flex-direction: column; align-items: stretch; }
    .feed-sort-form .form-select,
    .feed-sort-form .btn { width: 100%; }
    .game-sort-form { flex-direction: column; align-items: stretch; }
    .game-sort-form .form-select,
    .game-sort-form .btn { width: 100%; }
    .game-filter-meta span { width: fit-content; }
    .game-sort-apply { margin-left: 0; }
    .game-only-followed-check { margin-left: 0; }
    .feed-post h3 { font-size: 16px; }
    .feed-post .post-text-brief { -webkit-line-clamp: 3; }
    .feed-media-image,
    .feed-media-video { max-height: 220px; }
    .student-home-hero-card {
        min-height: 110px;
        padding: 14px;
        border-radius: 17px;
    }
    .student-home-hero-main {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px;
        padding-right: 96px;
    }
    .student-home-hero-brand {
        font-size: 15px;
    }
    .student-home-hero-name {
        font-size: 13px;
    }
    .student-home-hero-meta {
        gap: 5px 10px;
        font-size: 10px;
    }
    .student-home-level-pill {
        top: 10px;
        right: 7px;
        width: 92px;
        height: 80px;
    }

    .student-home-level-full-icon { width: 92px; height: 80px; }

    .student-home-level-icon {
        width: 54px;
        height: 52px;
    }

    .student-home-level-label {
        max-width: 78px;
        min-height: 16px;
        font-size: 8px;
        line-height: 13px;
    }
    .student-home-quick-nav {
        gap: 4px;
        padding: 9px 5px 8px;
    }
    .student-home-quick-link {
        gap: 5px;
        padding: 5px 1px 10px;
    }
    .student-home-quick-icon {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        font-size: 16px;
    }
    .student-home-quick-link span:last-child {
        font-size: 10px;
    }
    .student-home-feed-toolbar {
        align-items: center;
    }
    .student-home-feed-copy h2 {
        font-size: 17px;
    }
    .student-home-feed-copy p {
        font-size: 11px;
    }
    .student-home-sort-panel {
        width: min(238px, calc(100vw - 30px));
        padding: 11px;
    }
    .student-home-feed-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }
    .student-home-feed-media,
    .student-home-feed-media .feed-media-image,
    .student-home-feed-media .feed-media-video {
        min-height: 104px;
    }
    .student-home-feed-type {
        max-width: 46%;
        padding: 4px 7px;
        font-size: 10px;
    }
    .student-home-feed-card h3 {
        font-size: 14px;
        line-height: 1.32;
    }
    .student-home-feed-meta {
        font-size: 10px;
    }
    .my-work-card .my-work-meta { width: 100%; }
    .level-rule-item { flex-direction: column; align-items: flex-start; }
    .student-message-entry {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
    .student-message-entry .btn {
        min-height: 40px;
    }
.student-message-panel {
        width: 92vw;
        max-width: 92vw;
    }
}

.admin-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-sub-tabs .nav-link {
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: #1e3a8a;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    background: #f8fbff;
}

.admin-sub-tabs .nav-link.active {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    border-color: transparent;
}

.ui-class-compare-board .compare-vs-wrap {
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px;
}

.compare-vs-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 12px;
}

.compare-side-title {
    font-weight: 800;
    color: #1d4ed8;
    font-size: 20px;
}

.compare-side-title.right {
    text-align: right;
    color: #0f766e;
}

.compare-vs-badge {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(37, 99, 235, 0.4);
    color: #1d4ed8;
    font-size: 32px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.compare-side-card {
    border-radius: 14px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    background: #fff;
    padding: 12px;
    height: 100%;
}

.compare-side-card.target {
    border-color: rgba(13, 148, 136, 0.25);
}

.compare-side-name {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.compare-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.compare-metrics .metric-box {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 8px;
    background: #f8fbff;
    text-align: center;
}

.compare-metrics .metric-box .label {
    font-size: 12px;
    color: #64748b;
}

.compare-metrics .metric-box .value {
    font-size: 24px;
    font-weight: 800;
    color: #1d4ed8;
}

.compare-side-card.target .compare-metrics .metric-box .value {
    color: #0f766e;
}

.dist-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}

.dist-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.dist-list {
    display: grid;
    gap: 4px;
}

.dist-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}

.dist-item strong {
    color: #1e293b;
}

.compare-table-card {
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 14px;
    overflow: hidden;
}

.compare-table-title {
    padding: 10px 14px;
    font-weight: 800;
    font-size: 24px;
    color: #1e3a8a;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(16, 185, 129, 0.1));
}

.compare-table thead th {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    text-align: center;
    font-weight: 700;
    border: 0;
}

.compare-table tbody td {
    text-align: center;
}

.compare-table tbody tr.row-base td:first-child,
.compare-table tbody tr.row-target td:first-child {
    font-weight: 700;
}

.compare-table tbody tr.row-base {
    background: rgba(37, 99, 235, 0.08);
}

.compare-table tbody tr.row-target {
    background: rgba(13, 148, 136, 0.08);
}

.feed-post .post-actions > form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.feed-post .post-actions .btn-outline-primary {
    white-space: nowrap;
}

.feed-post .post-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
}

.feed-post .post-actions > .js-open-feed-interact {
    justify-self: start;
}

.feed-post .post-actions > form,
.feed-post .post-actions > .icon-btn {
    justify-self: end;
}

@media (max-width: 640px) {
    .dubbing-detail-dialog {
        max-width: 94vw;
    }
    .dubbing-detail-modal .modal-content {
        max-height: 86vh;
    }
    .dubbing-detail-body {
        max-height: calc(86vh - 132px);
        overflow-x: hidden;
    }
    .dubbing-detail-section,
    .dubbing-recorder-header,
    .dubbing-recorder-line,
    .dubbing-record-track-item {
        padding: 9px;
    }
    .dubbing-line-text {
        font-size: 16px;
    }
    .dubbing-recorder-controls {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dubbing-btn-start,
    .dubbing-btn-stop,
    .dubbing-btn-submit {
        grid-column: 1 / -1;
    }
    .dubbing-btn-preview,
    .dubbing-btn-reset {
        grid-column: auto;
    }
    .dubbing-btn-pause {
        display: none !important;
    }
    .dubbing-record-audio,
    .dubbing-record-track-audio {
        width: 100%;
        max-width: 100%;
    }
}

@media (orientation: landscape) {
    .dubbing-detail-dialog {
        max-width: 96vw;
    }
    .dubbing-detail-modal .modal-content {
        max-height: 88vh;
    }
    .dubbing-detail-body {
        max-height: calc(88vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
    }
    .dubbing-workbench {
        grid-template-rows: auto 1fr auto auto;
        min-height: calc(88vh - 220px);
    }
    .dubbing-workbench-main {
        grid-template-columns: 40% 60%;
        align-items: stretch;
        min-height: 0;
        flex: 1;
    }
    .dubbing-workbench-left {
        max-height: none;
        min-height: 0;
        overflow-y: auto;
        padding-right: 4px;
    }
    .dubbing-workbench-right .dubbing-detail-media {
        height: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
    }
    .dubbing-workbench-video {
        max-height: 100%;
        height: auto;
        width: 100%;
        object-fit: contain;
    }
    .dubbing-workbench-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 2;
        border-top: 1px solid #e2e8f0;
        padding-top: 8px;
    }
    .dubbing-mini-timeline {
        border-top: 1px solid #e2e8f0;
        padding-top: 8px;
        max-height: 76px;
        align-items: stretch;
    }
    .dubbing-record-control-grid {
        position: sticky;
        bottom: 0;
        background: #f8fbff;
        padding-top: 8px;
    }
}

@media (orientation: portrait) {
    .dubbing-detail-dialog {
        max-width: 94vw;
    }
    .dubbing-detail-modal .modal-content {
        max-height: 88vh;
    }
    .dubbing-detail-body {
        max-height: calc(88vh - 132px);
        overflow-x: hidden;
    }
    .dubbing-workbench-main {
        grid-template-columns: 1fr;
    }
    .dubbing-workbench-footer {
        min-height: 70px;
    }
    .dubbing-workbench-video {
        width: 100%;
        max-height: 220px;
    }
    .dubbing-record-controls {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .dubbing-record-control-grid .btn:first-child,
    .dubbing-record-control-grid .btn:nth-child(2),
    .dubbing-record-control-grid .btn:last-child {
        grid-column: 1 / -1;
    }
    .dubbing-record-audio {
        width: 100%;
        max-width: 100%;
    }
}

.account-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 2147482900;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.account-profile-modal.is-open {
    display: flex;
}

.account-profile-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.account-profile-modal__dialog {
    position: relative;
    z-index: 2;
    width: min(760px, 92vw);
    max-height: 88vh;
}

.account-profile-modal__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 88vh;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
}

.account-profile-modal__header,
.account-profile-modal__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: #ffffff;
}

.account-profile-modal__header {
    border-bottom: 1px solid #e5e7eb;
}

.account-profile-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 18px;
    background: #f8fafc;
}

.account-profile-modal__section {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: 14px 16px;
}

.account-profile-modal__footer {
    border-top: 1px solid #e5e7eb;
}

/* Teacher assign modal interaction safety */
.teacher-assign-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: auto;
}

.teacher-assign-modal.is-open {
    display: flex;
}

.teacher-assign-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.45);
    pointer-events: auto;
}

.teacher-assign-dialog {
    position: relative;
    z-index: 2;
    width: min(1180px, 94vw);
    height: min(92vh, 860px);
    max-height: 92vh;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.teacher-assign-content {
    width: min(1180px, 94vw);
    height: 100%;
    max-height: 100%;
    background: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#teacherAssignForm {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    flex-direction: column;
}

.modal-teacher-assign__header,
.modal-teacher-assign__body,
.modal-teacher-assign__footer {
    background: #ffffff;
}

.teacher-assign-header,
.teacher-assign-body,
.teacher-assign-footer {
    background: #ffffff;
    opacity: 1 !important;
}

.teacher-assign-header,
.teacher-assign-footer {
    flex-shrink: 0;
}

.teacher-assign-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    min-height: 60px;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.teacher-assign-header-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.teacher-assign-header .modal-title {
    font-size: 1.28rem;
    font-weight: 700;
    color: #0f172a;
}

.teacher-assign-header-hint {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.teacher-assign-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teacher-assign-class-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.teacher-assign-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
}

.teacher-assign-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    padding: 14px 20px 16px;
    background: #f8fafc;
}

.teacher-assign-inline-alert {
    border-radius: 12px;
    margin-bottom: 16px;
}

.teacher-assign-summary-card,
.teacher-assign-section,
.teacher-assign-preview-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px 16px;
}

.teacher-assign-summary-card--compact {
    padding: 12px 14px;
}

.teacher-assign-summary-strip {
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 10px 14px;
}

.teacher-assign-summary-strip__title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.teacher-assign-summary-strip__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.teacher-assign-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.teacher-assign-summary-chip strong {
    color: #0f172a;
    font-weight: 700;
}

.teacher-assign-summary-chip--status {
    gap: 8px;
}

.teacher-assign-summary-strip__hint {
    margin-top: 8px;
    font-size: 12px;
    color: #64748b;
}

.teacher-assign-summary-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.teacher-assign-summary-title,
.teacher-assign-preview-title,
.teacher-assign-section-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.05rem;
}

.teacher-assign-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.teacher-assign-summary-grid--overview {
    margin-top: 12px;
}

.teacher-assign-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 12px;
    align-items: stretch;
    margin-top: 12px;
}

.teacher-assign-summary-item {
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    min-height: 60px;
}

.teacher-assign-summary-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #64748b;
}

.teacher-assign-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.teacher-assign-status-card {
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.teacher-assign-status-card__title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.teacher-assign-status-card__item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.teacher-assign-status-card__hint {
    font-size: 12px;
    color: #64748b;
}

.teacher-assign-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #94a3b8;
}

.teacher-assign-status-dot.is-success {
    background: #10b981;
}

.teacher-assign-status-dot.is-warning {
    background: #f59e0b;
}

.teacher-assign-status-card__item.is-empty .teacher-assign-status-dot.is-success,
.teacher-assign-status-card__item.is-empty .teacher-assign-status-dot.is-warning {
    background: #cbd5e1;
}

.teacher-assign-head-panel {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.teacher-assign-workspace {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.teacher-assign-head-inline {
    border: 1px solid #dcfce7;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
    padding: 12px;
    margin-bottom: 12px;
}

.teacher-assign-head-inline__current {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 10px;
}

.teacher-assign-head-inline__label {
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.teacher-assign-head-inline__name {
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.teacher-assign-head-inline__meta {
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
}

.teacher-assign-head-inline__controls {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.teacher-assign-head-inline__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    margin-bottom: 0;
}

.teacher-assign-head-inline__replace {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.teacher-assign-head-inline__replace .form-label {
    margin-bottom: 0;
    font-size: 12px;
    color: #64748b;
}

.teacher-assign-head-inline__replace .form-select {
    width: min(100%, 360px);
}

.teacher-assign-head-card {
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding: 16px;
}

.teacher-assign-head-card__label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

.teacher-assign-head-card__name {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.teacher-assign-head-card__meta {
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.teacher-assign-head-form {
    border: 1px solid #dcfce7;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfffd 100%);
    padding: 16px;
}

.teacher-assign-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.teacher-assign-head-warning {
    margin-top: 12px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 12px;
    background: rgba(255, 247, 237, 0.9);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 12px;
}

.teacher-assign-dialog input,
.teacher-assign-dialog select,
.teacher-assign-dialog button,
.teacher-assign-dialog label,
.teacher-assign-dialog table,
.teacher-assign-dialog tr,
.teacher-assign-dialog td,
.teacher-assign-dialog .table-responsive,
.teacher-assign-dialog .modal-content,
.teacher-assign-dialog .modal-body,
.teacher-assign-dialog .modal-footer {
    pointer-events: auto;
}

.teacher-assign-table-outer,
.teacher-assign-table-outer table,
.teacher-assign-table-outer tbody,
.teacher-assign-table-outer tr,
.teacher-assign-table-outer td {
    position: relative;
    pointer-events: auto;
}

.teacher-filter-panel {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.teacher-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.teacher-filter-bar + .teacher-filter-bar {
    margin-top: 8px;
}

.teacher-filter-item {
    min-width: 150px;
    flex: 0 0 auto;
}

.teacher-filter-search {
    min-width: 240px;
    flex: 1 1 240px;
}

.teacher-filter-item--pagesize {
    min-width: 110px;
}

.teacher-assign-workspace .form-control-sm,
.teacher-assign-workspace .form-select-sm {
    min-height: 36px;
}

.teacher-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.teacher-table-outer {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    position: relative;
}

.teacher-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
    max-height: min(46vh, 420px);
    min-height: 240px;
    scrollbar-width: thin;
    position: relative;
    overscroll-behavior: contain;
}

.teacher-table-scroll::-webkit-scrollbar {
    height: 10px;
    width: 8px;
}

.teacher-table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.teacher-table-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.teacher-assign-table-head th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.teacher-assign-table {
    min-width: 1520px;
    width: max-content;
    border-collapse: collapse;
}

.teacher-assign-table th,
.teacher-assign-table td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 12px 16px;
    box-sizing: border-box;
    position: relative;
}

.teacher-assign-table .teacher-name-cell {
    min-width: 140px;
    white-space: nowrap;
}

.teacher-assign-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-ellipsis {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-assign-name {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.teacher-assign-class-text {
    max-width: 220px;
}

.teacher-col-select {
    min-width: 70px;
}

.teacher-col-name {
    min-width: 140px;
}

.teacher-col-account {
    min-width: 150px;
}

.teacher-col-school {
    min-width: 190px;
}

.teacher-col-register {
    min-width: 220px;
}

.teacher-col-classes {
    min-width: 260px;
}

.teacher-col-role-status {
    min-width: 170px;
}

.teacher-col-operation {
    min-width: 260px;
}

.teacher-assign-table .operation-column {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: -8px 0 12px rgba(15, 23, 42, 0.06);
}

.teacher-assign-table th.operation-column {
    z-index: 4;
    background: #f8fafc;
}

.teacher-assign-role-chip,
.teacher-assign-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.teacher-assign-role-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.teacher-assign-role-chip {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.08);
}

.teacher-assign-status.is-head {
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
}

.teacher-assign-status.is-subject {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
}

.teacher-assign-status.is-empty {
    color: #64748b;
    background: #f1f5f9;
}

.teacher-assign-status.is-other {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
}

.teacher-assign-selected-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: flex-end;
    justify-content: flex-end;
}

.teacher-assign-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.teacher-assign-actions .btn {
    min-width: 104px;
    white-space: nowrap;
}

.teacher-assign-preview-list {
    margin-top: 8px;
    padding-left: 18px;
    color: #334155;
    font-size: 13px;
}

.teacher-assign-list tr.is-head-teacher {
    background: rgba(16, 185, 129, 0.06);
}

.teacher-assign-list tr.is-subject-teacher {
    background: rgba(59, 130, 246, 0.05);
}

#teacherAssignModal .teacher-assign-checkbox {
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.admin-modal-open {
    overflow: hidden;
}

.teacher-assign-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    position: relative;
    z-index: 30;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.06);
    pointer-events: auto;
}

.teacher-assign-footer-meta {
    font-size: 13px;
    color: #475569;
}

.teacher-assign-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    pointer-events: auto;
}

.teacher-assign-footer-actions .btn,
.teacher-assign-footer-meta {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

.teacher-assign-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
    padding-bottom: 4px;
}

.teacher-assign-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-list-section {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.teacher-table-wrap {
    flex: 1 1 auto;
    min-height: 240px;
    max-height: none;
}

.teacher-assign-table-scroll {
    position: relative;
    z-index: 1;
}

.teacher-page-jump-input {
    width: 72px;
    min-width: 72px;
}

@media (max-width: 768px) {
    .account-profile-modal {
        padding: 10px;
    }

    .account-profile-modal__dialog,
    .account-profile-modal__content {
        width: 96vw;
        max-height: 92vh;
    }

    .account-profile-modal__header,
    .account-profile-modal__body,
    .account-profile-modal__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .account-profile-modal__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-assign-modal {
        padding: 8px;
    }

    .teacher-assign-dialog {
        width: 96vw;
        height: 94vh;
        max-height: 94vh;
    }

    .teacher-assign-summary-grid {
        grid-template-columns: 1fr;
    }

    .teacher-assign-overview-layout,
    .teacher-assign-head-panel {
        grid-template-columns: 1fr;
    }

    .teacher-assign-head-inline__controls {
        grid-template-columns: 1fr;
    }

    .teacher-assign-section-head {
        flex-direction: column;
    }

    .teacher-table-scroll {
        max-height: 38vh;
        min-height: 200px;
    }

    .teacher-assign-header,
    .teacher-assign-body,
    .teacher-assign-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .teacher-assign-header {
        align-items: flex-start;
    }

    .teacher-assign-header-meta,
    .teacher-assign-summary-strip__items,
    .teacher-assign-head-inline__current {
        flex-wrap: wrap;
    }

    .teacher-assign-head-actions,
    .teacher-assign-selected-meta,
    .teacher-assign-footer {
        align-items: stretch;
    }

    .teacher-assign-footer {
        flex-direction: column;
    }

    .teacher-assign-footer-actions {
        width: 100%;
        justify-content: stretch;
    }

    .teacher-assign-footer-actions .btn {
        flex: 1 1 0;
    }

    .teacher-filter-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    .teacher-assign-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.student-growth-page .student-growth-summary-card {
    border: 1px solid #dce7ff;
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px 12px;
    height: 100%;
}

.student-growth-page .student-growth-summary-card .value {
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1.1;
    color: #0b3aa9;
    font-weight: 700;
}

.student-growth-page .card-header .fw-bold.fs-5 {
    font-size: 22px !important;
}

.student-growth-page .student-growth-panel {
    border: 1px solid #e3ecff;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(17, 45, 109, 0.06);
}

.student-growth-page .student-growth-summary-row > div {
    min-width: 0;
}

.student-growth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
    gap: 16px;
    align-items: stretch;
}

.student-growth-list-card,
.student-growth-badge-card,
.student-growth-side-col {
    min-width: 0;
    display: flex;
}

.student-growth-list-card .student-growth-panel,
.student-growth-badge-card .student-growth-panel {
    width: 100%;
}

.student-growth-side-col {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.student-growth-list-card {
    overflow: hidden;
}

.student-growth-table-wrap {
    overflow-x: hidden;
}

.student-growth-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 0;
}

.student-growth-table thead th {
    font-size: 14px;
    font-weight: 600;
    color: #1f2e52;
    padding: 10px 8px;
    white-space: nowrap;
}

.student-growth-table tbody td {
    font-size: 13px;
    color: #1f2e52;
    padding: 8px 8px;
    line-height: 1.35;
    vertical-align: middle;
}

.student-growth-table th,
.student-growth-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-growth-table .growth-col-check {
    width: 34px;
    min-width: 34px;
    text-align: center;
}

.student-growth-table .growth-col-student {
    width: 172px;
    min-width: 160px;
}

.student-growth-table .growth-col-class {
    width: 74px;
    min-width: 74px;
}

.student-growth-table .growth-col-progress {
    width: 106px;
    min-width: 106px;
}

.student-growth-table .growth-col-works {
    width: 54px;
    min-width: 54px;
    text-align: center;
}

.student-growth-table .growth-col-duration {
    width: 82px;
    min-width: 82px;
}

.student-growth-table .growth-col-badge {
    width: 72px;
    min-width: 72px;
}

.student-growth-table .growth-col-score {
    width: 58px;
    min-width: 58px;
    text-align: center;
    font-weight: 700;
}

.student-growth-table .growth-col-actions {
    width: 112px;
    min-width: 112px;
}

.student-growth-row {
    height: 48px;
}

.student-growth-table .student-growth-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #d8e2f8;
    background: #f3f6ff;
    flex-shrink: 0;
}

.student-growth-avatar.student-growth-avatar-lg {
    width: 56px;
    height: 56px;
}

.student-growth-table .student-name-cell {
    white-space: normal;
}

.student-growth-table .student-name-wrap {
    min-width: 0;
}

.student-growth-table .student-main-name {
    font-size: 13px;
    line-height: 1.2;
}

.student-growth-table .student-sub-line {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
}

.student-growth-table .student-class-cell {
    white-space: normal;
    line-height: 1.25;
    font-size: 12px;
}

.student-growth-table .student-class-cell .js-growth-class-name,
.student-growth-summary-grid .summary-class-value {
    display: inline-block;
    max-width: 82px;
    white-space: normal;
    line-height: 1.25;
    font-size: 12px;
}

.growth-progress-cell {
    width: 110px;
    min-width: 110px;
}

.growth-progress-value {
    line-height: 1.2;
}

.student-growth-progress {
    height: 6px;
    width: 90px;
    margin-top: 4px;
    background: #edf2ff;
}

.student-growth-progress .progress-bar {
    background: linear-gradient(90deg, #0d6efd, #2cb7ff);
}

.badge-mini-list {
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    align-items: center;
}

.student-growth-badge-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #0ea5e9);
    font-size: 10px;
    flex-shrink: 0;
}

.badge-mini-count {
    font-size: 11px;
    color: #5f6b7a;
    white-space: nowrap;
}

.student-growth-badge-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.student-growth-badge-option {
    border: 1px solid #d9e5ff;
    border-radius: 12px;
    padding: 8px;
    display: grid;
    grid-template-columns: 18px 28px 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    cursor: pointer;
    background: #fff;
}

.student-growth-badge-option:has(input:checked) {
    border-color: #0d6efd;
    background: #eef5ff;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.12);
}

.student-growth-badge-option:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.08);
}

.student-growth-badge-option .icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf3ff;
    color: #0d6efd;
}

.student-growth-badge-option .name {
    font-weight: 600;
    color: #1d2f57;
    font-size: 13px;
}

.student-growth-badge-option .score {
    grid-column: 2 / 4;
    font-size: 12px;
    color: #0a8f67;
    font-weight: 600;
}

.student-growth-score-preview {
    border: 1px solid #dce7ff;
    border-radius: 10px;
    background: #f7faff;
    padding: 8px 10px;
    display: grid;
    gap: 4px;
    font-size: 13px;
}

.student-growth-metric-box {
    border: 1px solid #dce8ff;
    border-radius: 10px;
    background: #f9fbff;
    padding: 10px;
    height: 100%;
}

.student-growth-metric-box .label {
    color: #5f6b7a;
    font-size: 12px;
}

.student-growth-metric-box .value {
    color: #0b3aa9;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 4px;
}

.student-growth-record-list {
    display: grid;
    gap: 6px;
}

.student-growth-record-mini-card .student-growth-panel {
    position: relative;
}

.student-growth-record-mini-list .student-growth-record-item {
    padding: 7px 9px;
}

.student-growth-record-item {
    border: 1px solid #e4ebfa;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}

.student-growth-filter-form .form-label {
    font-size: 13px;
}

.student-growth-filter-form .form-select,
.student-growth-filter-form .form-control,
.student-growth-filter-form .btn {
    font-size: 13px;
}

.student-growth-filter-form .form-select,
.student-growth-filter-form .form-control {
    min-height: 37px;
}

.student-growth-filter-form .btn {
    min-height: 37px;
}

.growth-actions-cell .btn {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.3;
}

.growth-actions-cell {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
}

.badge-issue-panel {
    position: sticky;
    top: 88px;
    z-index: 1;
    align-self: flex-start;
}

.badge-issue-panel .form-control-plaintext {
    border-color: #d8e5ff !important;
    background: #f7fbff;
    font-weight: 600;
    color: #1f2e52;
}

#studentGrowthBadgeForm {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#studentGrowthBadgeForm .student-growth-score-preview {
    margin-top: auto;
}

#studentGrowthBadgeForm .btn[type="submit"] {
    margin-top: 8px;
}

#growthIssueTip {
    margin-top: 8px !important;
    margin-bottom: 2px;
    line-height: 1.45;
    position: static;
    display: block;
}

.student-growth-record-mini-card {
    margin-top: 4px;
}

.student-growth-record-mini-card .student-growth-panel {
    position: relative;
    z-index: 0;
}

.student-growth-side-col .student-growth-badge-card + .student-growth-record-mini-card {
    margin-top: 16px;
}

.btn-demo-locked-action {
    opacity: 0.65;
    cursor: not-allowed;
    filter: grayscale(12%);
}

#growthIssueReason {
    min-height: 66px;
    max-height: 96px;
}

.student-growth-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.student-growth-detail-card,
.student-growth-record-card {
    min-width: 0;
}

.student-growth-detail-card {
    grid-column: 1 / -1;
}

.student-growth-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.student-growth-summary-grid .summary-item {
    border: 1px solid #dce8ff;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f9fbff;
}

.student-growth-summary-grid .summary-item .label {
    color: #5f6b7a;
    font-size: 12px;
}

.student-growth-summary-grid .summary-item .value {
    color: #0b3aa9;
    font-size: 14px;
    margin-top: 4px;
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 1400px) {
    .student-growth-layout {
        grid-template-columns: minmax(0, 1fr) 350px;
    }

    .student-growth-table .growth-col-duration {
        display: none;
    }
}

@media (max-width: 1200px) {
    .student-growth-layout {
        grid-template-columns: 1fr;
    }

    .badge-issue-panel {
        position: static;
        top: auto;
    }

    .student-growth-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .student-growth-badge-options {
        grid-template-columns: 1fr;
    }

    .student-growth-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-growth-table .growth-col-duration {
        display: none;
    }

}

.admin-sidebar-sub-link {
    margin-left: 14px;
    width: calc(100% - 14px);
    font-size: 13px;
    opacity: 0.92;
}

.admin-sidebar-menu-group {
    display: grid;
    gap: 4px;
}

.admin-sidebar-menu-group > .admin-sidebar-link:first-child.active::before {
    bottom: 4px;
}

.admin-sidebar-menu-group .admin-sidebar-sub-link {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #c7e6fb;
    background: rgba(4, 35, 67, 0.18);
}

.admin-sidebar-menu-group .admin-sidebar-sub-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.admin-sidebar-menu-group .admin-sidebar-sub-link.active::before {
    display: none;
}

.admin-sidebar-sub-link i {
    font-size: 12px;
}

.ui-point-mall-page .card-header .fw-bold.fs-5 {
    font-size: 22px;
}

.point-mall-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.point-mall-subtabs .nav-link {
    border-radius: 10px;
    border: 1px solid #d9e7ff;
    color: #2e4572;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 14px;
    background: #f7faff;
}

.point-mall-subtabs .nav-link.active {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #246bff 0%, #1f8dff 55%, #17b4a2 100%);
    box-shadow: 0 8px 18px rgba(36, 107, 255, 0.24);
}

.point-mall-filter-form .form-label {
    font-size: 13px;
}

.point-mall-filter-form .form-select,
.point-mall-filter-form .btn {
    min-height: 37px;
    font-size: 13px;
}

.point-mall-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dce8ff;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17, 45, 109, 0.06);
    padding: 10px 12px;
    min-height: 76px;
}

.point-mall-stat-card .icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(135deg, #2a7eff 0%, #1666f0 100%);
    flex-shrink: 0;
}

.point-mall-stat-card .icon.green {
    background: linear-gradient(135deg, #28b48e 0%, #16a66f 100%);
}

.point-mall-stat-card .icon.purple {
    background: linear-gradient(135deg, #7a67ff 0%, #9160ff 100%);
}

.point-mall-stat-card .icon.orange {
    background: linear-gradient(135deg, #ffa336 0%, #ff8223 100%);
}

.point-mall-stat-card .icon.yellow {
    background: linear-gradient(135deg, #f5b930 0%, #f29d0f 100%);
}

.point-mall-stat-card .icon.cyan {
    background: linear-gradient(135deg, #20b4b6 0%, #16a4ce 100%);
}

.point-mall-stat-card .label {
    font-size: 12px;
    color: #5f6b7a;
}

.point-mall-stat-card .value {
    margin-top: 7px;
    font-size: 1.55rem;
    line-height: 1.1;
    color: #0b3aa9;
    font-weight: 700;
}

.point-mall-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
}

.point-mall-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.point-mall-product-card {
    border: 1px solid #dbe8ff;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(17, 45, 109, 0.06);
    display: flex;
    flex-direction: column;
}

.point-mall-product-card .image-wrap {
    height: 130px;
    background: linear-gradient(180deg, #f7fbff 0%, #ecf5ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-mall-product-image-lg {
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e3ecff;
}

.point-mall-product-card .body {
    padding: 10px 10px 8px;
    display: grid;
    gap: 5px;
}

.point-mall-product-card .name {
    font-weight: 700;
    color: #183165;
    font-size: 14px;
}

.point-mall-product-card .category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #60708b;
    font-size: 12px;
}

.point-mall-product-card .status-badge {
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.2;
    font-size: 11px;
    font-weight: 700;
}

.point-mall-product-card .status-badge.on {
    color: #0d8c61;
    background: #dcf8ec;
}

.point-mall-product-card .status-badge.off {
    color: #6b7588;
    background: #edf2fb;
}

.point-mall-product-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.point-mall-product-card .points {
    color: #155ad1;
    font-weight: 700;
}

.point-mall-product-card .stock {
    color: #60708b;
}

.point-mall-product-card .desc {
    color: #6f7e95;
    font-size: 12px;
}

.point-mall-product-card .actions {
    margin-top: auto;
    border-top: 1px solid #edf3ff;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.point-mall-product-card .actions form {
    margin: 0;
}

.point-mall-empty {
    border: 1px dashed #d6e5ff;
    border-radius: 12px;
    background: #f8fbff;
    text-align: center;
    padding: 28px 10px;
    color: #71839f;
    font-size: 13px;
}

.point-mall-panel {
    border: 1px solid #e3ecff;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(17, 45, 109, 0.06);
}

.point-mall-table-wrap {
    overflow-x: hidden;
}

.point-mall-table {
    table-layout: fixed;
    width: 100%;
}

.point-mall-table th {
    font-size: 13px;
    white-space: nowrap;
}

.point-mall-table td {
    font-size: 13px;
    vertical-align: middle;
}

.point-mall-table th,
.point-mall-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.point-mall-product-image {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid #dde7fd;
    object-fit: cover;
    background: #f5f9ff;
    flex-shrink: 0;
}

.point-mall-product-form {
    border: 1px solid #dce8ff;
    border-radius: 10px;
    background: #f8fbff;
    padding: 10px;
}

.point-mall-product-modal .modal-dialog {
    max-width: 860px;
}

.point-mall-product-modal .modal-content {
    border: 1px solid #dce8ff;
    border-radius: 14px;
    box-shadow: 0 22px 54px rgba(16, 40, 92, 0.25);
}

.point-mall-product-modal .modal-header {
    border-bottom: 1px solid #e8efff;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.point-mall-product-modal .modal-title {
    font-weight: 700;
    color: #1f3768;
}

.point-mall-product-modal .modal-footer {
    border-top: 1px solid #e8efff;
    background: #fbfdff;
}

.point-mall-class-cell {
    white-space: normal !important;
    line-height: 1.25;
}

.point-mall-bottom-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr 0.9fr;
    gap: 14px;
}

.point-mall-rule-steps {
    display: grid;
    gap: 8px;
}

.point-mall-rule-steps .rule-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #2b3d67;
}

.point-mall-rule-steps .idx {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #2b7bff, #13b09d);
    flex-shrink: 0;
}

.point-mall-rule-note {
    font-size: 12px;
    color: #617089;
    border-top: 1px dashed #dce8ff;
    padding-top: 10px;
}

.point-mall-trend-chart {
    min-height: 210px;
}

.point-mall-share-list {
    display: grid;
    gap: 8px;
}

.point-mall-share-list .share-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 56px;
    gap: 8px;
    align-items: center;
}

.point-mall-share-list .name {
    font-size: 13px;
    color: #1f2e52;
}

.point-mall-share-list .bar {
    height: 8px;
    border-radius: 999px;
    background: #e9f0ff;
    overflow: hidden;
}

.point-mall-share-list .fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2b7bff, #13b09d);
}

.point-mall-share-list .ratio {
    text-align: right;
    font-size: 12px;
    color: #60708b;
}

@media (max-width: 1400px) {
    .point-mall-main-layout {
        grid-template-columns: 1fr;
    }

    .point-mall-bottom-layout {
        grid-template-columns: 1fr;
    }
}

.point-mall-entry-card {
    border: 1px solid #dbe9ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5f9ff 0%, #effbf9 100%);
}

.point-mall-user-page {
    padding-bottom: 96px;
}

.point-mall-user-summary-card {
    border: 1px solid #dbe9ff;
    border-radius: 14px;
    background: linear-gradient(145deg, #f6fbff 0%, #ebf6ff 100%);
    padding: 12px;
}

.point-mall-user-summary-card .summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.point-mall-user-summary-card .summary-score {
    font-size: 22px;
    color: #0f4ecb;
    font-weight: 700;
}

.point-mall-user-summary-card .summary-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.point-mall-user-summary-card .summary-item {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.point-mall-user-summary-card .summary-item span {
    font-size: 12px;
    color: #6f7b90;
}

.point-mall-user-summary-card .summary-item strong {
    font-size: 16px;
    color: #26385c;
}

.point-mall-user-filter-form {
    border: 1px solid #dfe9ff;
    border-radius: 14px;
    background: #fff;
}

.point-mall-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.point-mall-user-product-card {
    border: 1px solid #dfe9ff;
    border-radius: 12px;
    background: #fff;
    padding: 9px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 240px;
}

.point-mall-user-product-image {
    width: 100%;
    height: 126px;
    object-fit: cover;
    border-radius: 10px;
    background: #f4f8ff;
    border: 1px solid #e3ecff;
}

.point-mall-user-product-card .name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2f51;
    line-height: 1.35;
    min-height: 38px;
}

.point-mall-user-product-card .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #69768f;
}

.point-mall-user-product-card .points {
    color: #0f4ecb;
    font-size: 16px;
    font-weight: 700;
}

.point-mall-user-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #6e7a90;
}

.point-mall-user-pager .controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.point-mall-user-order-list {
    display: grid;
    gap: 8px;
}

.point-mall-user-order-list .order-item {
    border: 1px solid #e3ebff;
    border-radius: 10px;
    background: #fbfdff;
    padding: 8px 10px;
}

.point-mall-user-order-list .order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

@media (max-width: 520px) {
    .point-mall-user-grid {
        grid-template-columns: 1fr;
    }
}

.summer-subtabs .nav-link {
    border: 1px solid #c8d8f6;
    border-radius: 999px;
    background: #fff;
    color: #2f5fa8;
    font-weight: 600;
    padding: 8px 16px;
    line-height: 1.1;
}

.summer-subtabs .nav-link.active {
    background: linear-gradient(135deg, #1d71f2 0%, #11a0b8 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(27, 109, 217, 0.28);
}

.summer-subtabs .nav-link:hover {
    border-color: #8fb2ef;
    color: #1f4f96;
}

.summer-subtabs .nav-link.active:hover {
    color: #fff;
}

.summer-filter-form .form-label {
    color: #4e658d;
    font-weight: 600;
}

.summer-filter-form .form-select,
.summer-filter-form .form-control {
    border-color: #d5e2f7;
}

.summer-panel {
    background: #fff;
    border-color: #d9e4f4 !important;
    box-shadow: 0 6px 16px rgba(18, 75, 152, 0.06);
    border-radius: 14px;
}

.summer-book-thumb {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d9e4f5;
    background: #f3f8ff;
    flex-shrink: 0;
}

.summer-panel .form-select-sm,
.summer-panel .form-control-sm {
    border-color: #d6e4f8;
}

.summer-panel .form-select-sm:focus,
.summer-panel .form-control-sm:focus {
    border-color: #7fb0ff;
    box-shadow: 0 0 0 0.15rem rgba(34, 126, 255, 0.12);
}

.summer-books-dashboard {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.summer-process-strip {
    background: linear-gradient(135deg, #f9fcff 0%, #f2f8ff 100%);
    border: 1px solid #dce9f9;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(27, 88, 162, 0.08);
    padding: 22px 24px;
}

.summer-process-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.summer-process-title-wrap {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.summer-process-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d71f2 0%, #11a0b8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(27, 109, 217, 0.24);
    font-size: 24px;
}

.summer-process-heading {
    font-size: 28px;
    font-weight: 800;
    color: #183f7a;
    line-height: 1.2;
}

.summer-process-subtitle {
    color: #58709a;
    margin-top: 6px;
    font-size: 14px;
}

.summer-process-nodes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.summer-process-node {
    position: relative;
    background: #fff;
    border: 1px solid #dbe8f8;
    border-radius: 16px;
    padding: 16px 14px;
    min-height: 122px;
    box-shadow: 0 8px 20px rgba(22, 82, 158, 0.05);
}

.summer-process-node.is-current {
    border-color: #84b8ff;
    box-shadow: 0 14px 28px rgba(38, 110, 201, 0.16);
    background: linear-gradient(135deg, rgba(29, 113, 242, 0.05) 0%, rgba(17, 160, 184, 0.05) 100%);
}

.summer-process-arrow {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    color: #8eb1e4;
    font-size: 20px;
    z-index: 2;
}

.summer-process-node:last-child .summer-process-arrow {
    display: none;
}

.summer-process-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
    color: #1f5fb6;
    background: linear-gradient(135deg, #e6f1ff 0%, #dff7fb 100%);
}

.summer-process-node.is-current .summer-process-icon {
    color: #fff;
    background: linear-gradient(135deg, #1d71f2 0%, #11a0b8 100%);
}

.summer-process-title {
    font-size: 15px;
    font-weight: 800;
    color: #21497f;
    margin-bottom: 6px;
}

.summer-process-desc {
    font-size: 13px;
    color: #6880a6;
    line-height: 1.6;
}

.summer-books-toolbar {
    background: #fff;
    border: 1px solid #dbe6f7;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(18, 75, 152, 0.05);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.summer-books-toolbar-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    flex: 1 1 900px;
}

.summer-books-toolbar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.summer-books-toolbar-item label {
    font-size: 13px;
    font-weight: 700;
    color: #46648f;
}

.summer-books-toolbar-item .form-select,
.summer-books-toolbar-item .form-control {
    min-height: 44px;
    border-radius: 12px;
    border-color: #d4e2f7;
}

.summer-books-toolbar-keyword {
    min-width: 200px;
}

.summer-books-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.summer-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.summer-stat-card {
    background: #fff;
    border: 1px solid #dbe6f7;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(18, 75, 152, 0.06);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 126px;
}

.summer-stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.summer-stat-blue .summer-stat-icon {
    color: #1d71f2;
    background: linear-gradient(135deg, #edf5ff 0%, #dff0ff 100%);
}

.summer-stat-green .summer-stat-icon {
    color: #1ca06f;
    background: linear-gradient(135deg, #eefcf6 0%, #def7ec 100%);
}

.summer-stat-orange .summer-stat-icon {
    color: #eb7b2f;
    background: linear-gradient(135deg, #fff4ea 0%, #ffead9 100%);
}

.summer-stat-purple .summer-stat-icon {
    color: #6b52e1;
    background: linear-gradient(135deg, #f1ecff 0%, #ebe6ff 100%);
}

.summer-stat-label {
    font-size: 15px;
    font-weight: 800;
    color: #365685;
    margin-bottom: 6px;
}

.summer-stat-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.summer-stat-value strong {
    font-size: 38px;
    line-height: 1;
    color: #183f7a;
    font-weight: 800;
}

.summer-stat-value span {
    color: #6981a8;
    font-size: 15px;
    font-weight: 700;
}

.summer-stat-meta {
    color: #7b91b3;
    font-size: 13px;
}

.summer-books-content {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(420px, 0.98fr);
    gap: 18px;
    align-items: start;
}

.summer-books-main-card,
.summer-progress-card {
    background: #fff;
    border: 1px solid #dbe6f7;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(18, 75, 152, 0.05);
    padding: 20px 22px;
}

.summer-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.summer-inline-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e1ebf9;
    border-radius: 12px;
    background: #f9fcff;
}

.summer-inline-filter label {
    font-size: 12px;
    font-weight: 700;
    color: #6e86ab;
    white-space: nowrap;
}

.summer-inline-filter .form-select {
    min-width: 112px;
    min-height: 34px;
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    font-size: 13px;
    font-weight: 700;
    color: #365685;
}

.summer-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: #1c447b;
}

.summer-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #2c66bf;
    font-size: 13px;
    font-weight: 700;
}

.summer-view-toggle {
    display: inline-flex;
    gap: 8px;
}

.summer-view-toggle .btn {
    min-width: 92px;
    border-radius: 12px;
}

.summer-book-card {
    background: #fff;
    border: 1px solid #dbe6f7;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(18, 75, 152, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.summer-book-card-body {
    padding: 20px 20px 16px;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 242px;
    gap: 18px;
    align-items: stretch;
}

.summer-book-cover-wrap {
    flex: 0 0 122px;
}

.summer-book-cover-lg {
    width: 128px;
    height: 176px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #d8e4f8;
    background: linear-gradient(135deg, #eef5ff 0%, #f7fbff 100%);
}

.summer-book-card-content {
    min-width: 0;
}

.summer-book-title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
    color: #173f79;
    margin-bottom: 6px;
}

.summer-book-meta {
    color: #617ca4;
    font-size: 14px;
    margin-bottom: 4px;
}

.summer-book-statuses {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.summer-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.chip-gray {
    background: #edf1f7;
    color: #70819c;
}

.chip-green {
    background: #e8faf1;
    color: #1f9c69;
}

.chip-blue {
    background: #ebf4ff;
    color: #2f6de0;
}

.chip-purple {
    background: #f1ecff;
    color: #6a52df;
}

.chip-dark {
    background: #e8edf6;
    color: #4d617f;
}

.summer-book-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 14px 0;
}

.summer-book-detail-grid span {
    display: block;
    color: #7b91b3;
    font-size: 12px;
    margin-bottom: 4px;
}

.summer-book-detail-grid strong {
    display: block;
    color: #23497d;
    font-size: 14px;
    font-weight: 700;
}

.summer-book-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.summer-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #f3f7fd;
    border-radius: 999px;
    color: #5f789f;
    font-size: 12px;
    font-weight: 700;
}

.summer-book-reason {
    color: #47658f;
    font-size: 13px;
    line-height: 1.7;
    background: #f8fbff;
    border: 1px solid #e0eaf8;
    border-radius: 12px;
    padding: 10px 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.summer-book-reason.is-collapsed {
    -webkit-line-clamp: 4;
}

.summer-book-side-panel {
    min-width: 0;
    background: linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%);
    border: 1px solid #e3ecfa;
    border-radius: 16px;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.summer-book-side-label {
    font-size: 13px;
    font-weight: 800;
    color: #6c84aa;
    letter-spacing: 0.02em;
}

.summer-reason-toggle {
    align-self: flex-end;
    border: none;
    background: transparent;
    color: #2d6fda;
    font-size: 13px;
    font-weight: 700;
    padding: 0;
}

.summer-reason-toggle:hover {
    color: #1e59b7;
}

.summer-book-card-footer {
    padding: 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.summer-book-footer-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.summer-book-footer-item {
    min-width: 92px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f6f9fe;
    border: 1px solid #e1eaf7;
}

.summer-book-footer-item span {
    display: block;
    font-size: 11px;
    color: #8098ba;
    margin-bottom: 4px;
}

.summer-book-footer-item strong {
    display: block;
    font-size: 14px;
    color: #21497d;
    font-weight: 800;
}

.summer-book-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summer-book-card-actions .btn {
    border-radius: 10px;
    min-width: 88px;
    font-weight: 700;
}

.summer-books-table-view th,
.summer-books-table-view td {
    vertical-align: middle;
}

.summer-books-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e6eefb;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.summer-page-info {
    font-size: 14px;
    color: #607ca4;
    font-weight: 600;
}

.summer-page-size-select {
    min-width: 120px;
}

.summer-page-jump-input {
    width: 72px;
    min-width: 72px;
}

.summer-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.summer-page-nav-group,
.summer-page-jump-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.summer-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.summer-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid #d3e1f6;
    background: #fff;
    color: #4a688f;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.summer-page-btn:hover {
    border-color: #90b4ea;
    color: #2156a0;
    background: #f8fbff;
}

.summer-page-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #1d71f2 0%, #11a0b8 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(29, 113, 242, 0.22);
}

.summer-pagination-ellipsis {
    color: #87a0c3;
    font-size: 14px;
    font-weight: 700;
}

.summer-progress-table-wrap {
    border: 1px solid #e5edf9;
    border-radius: 16px;
    overflow: hidden;
}

.summer-progress-table-wrap .table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

.summer-progress-table-wrap th {
    font-size: 13px;
    color: #58709a;
    background: #f7faff;
    padding: 12px 10px;
}

.summer-progress-table-wrap td {
    font-size: 14px;
    color: #315786;
    padding: 13px 10px;
}

.summer-progress-table-wrap td:first-child,
.summer-progress-table-wrap th:first-child {
    width: 28%;
}

.summer-progress-table-wrap td:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summer-progress-table-wrap th:nth-child(2),
.summer-progress-table-wrap td:nth-child(2) {
    width: 16%;
}

.summer-progress-table-wrap th:nth-child(3),
.summer-progress-table-wrap td:nth-child(3),
.summer-progress-table-wrap th:nth-child(4),
.summer-progress-table-wrap td:nth-child(4),
.summer-progress-table-wrap th:nth-child(5),
.summer-progress-table-wrap td:nth-child(5),
.summer-progress-table-wrap th:nth-child(6),
.summer-progress-table-wrap td:nth-child(6) {
    width: 11%;
    text-align: center;
    white-space: nowrap;
}

.summer-progress-table-wrap th:nth-child(7),
.summer-progress-table-wrap td:nth-child(7) {
    width: 12%;
    text-align: center;
    white-space: nowrap;
}

.summer-progress-card .summer-books-footer {
    grid-template-columns: 1fr;
    gap: 12px;
}

.summer-progress-card .summer-footer-actions {
    justify-content: space-between;
}

.summer-progress-empty {
    min-height: 220px;
}

.summer-empty-state .btn {
    border-radius: 10px;
}

@media (max-width: 1600px) {
    .summer-books-content {
        grid-template-columns: 1fr;
    }

    .summer-books-toolbar-main {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    .summer-process-nodes,
    .summer-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summer-books-toolbar-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summer-book-cover-lg {
        width: 104px;
        height: 144px;
    }

    .summer-book-card-body {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .summer-book-side-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .summer-process-header {
        flex-direction: column;
    }

    .summer-process-nodes,
    .summer-stat-grid,
    .summer-books-toolbar-main,
    .summer-book-detail-grid {
        grid-template-columns: 1fr;
    }

    .summer-books-toolbar-actions,
    .summer-footer-actions {
        width: 100%;
    }

    .summer-books-footer {
        grid-template-columns: 1fr;
    }

    .summer-book-card-body {
        grid-template-columns: 1fr;
    }

    .summer-book-cover-wrap,
    .summer-book-cover-lg {
        width: 100%;
        height: auto;
        max-height: 220px;
    }

    .summer-book-card-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

.summer-task-card-item .badge {
    font-weight: 600;
}

/* =========================
   Summer Reading Books Redesign
   ========================= */

.summer-reading-books-redesign {
    gap: 16px;
}

.summer-reading-books-redesign .summer-process-strip {
    padding: 18px 22px;
    border-radius: 20px;
}

.summer-reading-books-redesign .summer-process-header {
    display: grid;
    grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.12fr);
    gap: 20px;
    align-items: center;
    margin-bottom: 0;
}

.summer-reading-books-redesign .summer-process-title-wrap {
    align-items: center;
    gap: 16px;
}

.summer-reading-books-redesign .summer-process-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
}

.summer-reading-books-redesign .summer-process-heading {
    font-size: 18px;
    line-height: 1.25;
}

.summer-reading-books-redesign .summer-process-subtitle {
    font-size: 13px;
    line-height: 1.7;
    margin-top: 4px;
}

.summer-reading-books-redesign .summer-process-nodes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.summer-reading-books-redesign .summer-process-node {
    min-height: 86px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.summer-reading-books-redesign .summer-process-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    margin-bottom: 0;
    font-size: 18px;
    flex-shrink: 0;
}

.summer-reading-books-redesign .summer-process-title {
    font-size: 14px;
    margin-bottom: 2px;
}

.summer-reading-books-redesign .summer-process-desc {
    font-size: 12px;
    line-height: 1.45;
}

.summer-reading-books-redesign .summer-process-arrow {
    right: -14px;
    font-size: 18px;
}

.summer-reading-books-redesign .summer-books-toolbar {
    padding: 16px 20px;
    flex-wrap: nowrap;
    gap: 16px;
}

.summer-reading-books-redesign .summer-books-toolbar-main {
    grid-template-columns: 150px 180px 150px 150px minmax(240px, 1fr);
    gap: 12px;
    flex: 1 1 auto;
}

.summer-reading-books-redesign .summer-books-toolbar-item .form-select,
.summer-reading-books-redesign .summer-books-toolbar-item .form-control {
    min-height: 40px;
}

.summer-reading-books-redesign .summer-books-toolbar-item label {
    font-size: 12px;
}

.summer-reading-books-redesign .summer-books-toolbar-keyword {
    min-width: 0;
}

.summer-reading-books-redesign .summer-books-toolbar-actions {
    flex: 0 0 auto;
    gap: 10px;
    flex-wrap: nowrap;
}

.summer-reading-books-redesign .summer-books-toolbar-actions .btn {
    min-width: 88px;
    min-height: 40px;
    border-radius: 12px;
    font-weight: 700;
}

.summer-reading-books-redesign .summer-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.summer-reading-books-redesign .summer-stat-card {
    min-height: 108px;
    padding: 16px 18px;
    border-radius: 18px;
    gap: 14px;
}

.summer-reading-books-redesign .summer-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 26px;
}

.summer-reading-books-redesign .summer-stat-label {
    font-size: 14px;
    margin-bottom: 4px;
}

.summer-reading-books-redesign .summer-stat-value strong {
    font-size: 32px;
}

.summer-reading-books-redesign .summer-stat-meta {
    font-size: 12px;
}

.summer-reading-books-redesign .summer-books-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(420px, 0.9fr);
    gap: 20px;
    align-items: start;
}

.summer-reading-books-redesign .summer-books-main-card,
.summer-reading-books-redesign .summer-progress-card {
    padding: 18px 18px 16px;
    border-radius: 20px;
}

.summer-reading-books-redesign .summer-card-title-row {
    margin-bottom: 14px;
}

.summer-reading-books-redesign .summer-card-title {
    font-size: 18px;
}

.summer-reading-books-redesign .summer-count-badge {
    padding: 3px 10px;
    font-size: 12px;
}

.summer-reading-books-redesign .summer-card-tools {
    margin-left: auto;
}

.summer-reading-books-redesign .summer-inline-filter {
    padding: 6px 10px;
    border-radius: 12px;
}

.summer-reading-books-redesign .summer-inline-filter .form-select {
    min-width: 96px;
    min-height: 30px;
}

.summer-reading-books-redesign .summer-view-toggle .btn {
    min-width: 84px;
    border-radius: 10px;
}

.summer-reading-books-redesign .summer-book-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.summer-reading-books-redesign .summer-empty-state {
    grid-column: 1 / -1;
    min-height: 220px;
}

.summer-reading-books-redesign .summer-book-compact-card {
    background: #fff;
    border: 1px solid #dbe6f7;
    border-radius: 18px;
    box-shadow: 0 10px 22px rgba(18, 75, 152, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summer-reading-books-redesign .summer-book-compact-cover-wrap {
    position: relative;
    padding: 14px 14px 0;
}

.summer-reading-books-redesign .summer-book-compact-cover {
    width: 100%;
    height: 172px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #dbe6f7;
    background: linear-gradient(135deg, #eef5ff 0%, #f7fbff 100%);
}

.summer-reading-books-redesign .summer-book-corner-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ff944d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.summer-reading-books-redesign .summer-book-corner-tag.is-green {
    background: #1ca06f;
}

.summer-reading-books-redesign .summer-book-corner-tag.is-purple {
    background: #6b52e1;
}

.summer-reading-books-redesign .summer-book-compact-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

.summer-reading-books-redesign .summer-book-compact-title {
    font-size: 18px;
    font-weight: 800;
    color: #173f79;
    line-height: 1.35;
}

.summer-reading-books-redesign .summer-book-compact-meta {
    font-size: 13px;
    color: #617ca4;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summer-reading-books-redesign .summer-book-compact-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 28px;
    margin-top: 4px;
}

.summer-reading-books-redesign .summer-book-compact-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #6d86ab;
    margin-top: 2px;
}

.summer-reading-books-redesign .summer-book-compact-labels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.summer-reading-books-redesign .summer-book-compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.summer-reading-books-redesign .summer-book-compact-actions .btn {
    min-width: 84px;
    border-radius: 10px;
    font-weight: 700;
}

.summer-reading-books-redesign .summer-progress-card .table {
    table-layout: fixed;
    width: 100%;
}

.summer-reading-books-redesign .summer-progress-table-wrap {
    overflow: hidden;
}

.summer-reading-books-redesign .summer-progress-table-wrap th,
.summer-reading-books-redesign .summer-progress-table-wrap td {
    font-size: 13px;
    padding: 11px 8px;
}

.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(1),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(1) {
    width: 32%;
}

.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(2),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(2) {
    width: 18%;
}

.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(3),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(3),
.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(4),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(4),
.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(5),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(5),
.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(6),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(6) {
    width: 10%;
    text-align: center;
}

.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(7),
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(7) {
    width: 10%;
    text-align: center;
}

.summer-reading-books-redesign .summer-progress-table-wrap td:first-child,
.summer-reading-books-redesign .summer-progress-table-wrap td:nth-child(2),
.summer-reading-books-redesign .summer-progress-table-wrap th:first-child,
.summer-reading-books-redesign .summer-progress-table-wrap th:nth-child(2) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summer-reading-books-redesign .summer-books-footer {
    padding-top: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
}

.summer-reading-books-redesign .summer-footer-actions {
    justify-content: flex-end;
    gap: 10px;
}

.summer-reading-books-redesign .summer-progress-card .summer-footer-actions {
    justify-content: flex-end;
}

.summer-reading-books-redesign .summer-page-nav-group {
    gap: 6px;
}

.summer-reading-books-redesign .summer-page-jump-group {
    gap: 6px;
}

.summer-reading-books-redesign .summer-pagination {
    gap: 6px;
}

.summer-reading-books-redesign .summer-page-btn {
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
}

.summer-reading-books-redesign .summer-page-size-select {
    min-width: 108px;
}

.summer-reading-books-redesign .summer-page-jump-input {
    width: 58px;
    min-width: 58px;
}

@media (max-width: 1600px) {
    .summer-reading-books-redesign .summer-books-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .summer-reading-books-redesign .summer-book-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .summer-reading-books-redesign .summer-process-header {
        grid-template-columns: 1fr;
    }

    .summer-reading-books-redesign .summer-process-nodes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summer-reading-books-redesign .summer-books-toolbar {
        flex-wrap: wrap;
    }

    .summer-reading-books-redesign .summer-books-toolbar-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .summer-reading-books-redesign .summer-books-toolbar-main,
    .summer-reading-books-redesign .summer-stat-grid,
    .summer-reading-books-redesign .summer-book-card-grid {
        grid-template-columns: 1fr;
    }
}

.summer-task-card-item textarea {
    resize: vertical;
}

.summer-placeholder-wrap .table th,
.summer-placeholder-wrap .table td {
    font-size: 13px;
}

#summerWorksTypeFilter {
    min-width: 118px;
}

#summerWorksBookFilter,
#summerWorksTaskFilter,
#summerWorksWeekFilter,
#summerWorksReviewFilter,
#summerWorksExcellentFilter,
#summerWorksStartDateFilter,
#summerWorksEndDateFilter {
    min-width: 118px;
}

#summerWorksKeywordFilter {
    min-width: 180px;
}

.summer-work-detail-card {
    background: #fbfdff;
    border: 1px solid #d7e4f7 !important;
    border-radius: 14px;
}

.summer-work-preview-wrap {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f7fbff;
    overflow: hidden;
}

.summer-work-preview-wrap img,
.summer-work-preview-wrap video {
    max-width: 100%;
    max-height: 320px;
    border-radius: 10px;
    object-fit: contain;
}

.summer-works-page {
    background: linear-gradient(180deg, rgba(244, 249, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-radius: 24px;
    padding: 6px 0 4px;
}

.summer-works-process-strip {
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 20px 48px rgba(31, 86, 169, 0.08);
}

.summer-process-badge.is-works {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    font-size: 24px;
}

.summer-filter-form.summer-works-toolbar {
    margin-top: 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce7fb;
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(31, 86, 169, 0.06);
}

.summer-filter-form.summer-works-toolbar .form-label {
    color: #4c628d;
    font-weight: 700;
}

.summer-filter-form.summer-works-toolbar .form-select,
.summer-filter-form.summer-works-toolbar .form-control {
    min-height: 42px;
    border-radius: 14px;
    border-color: #d7e3f7;
    box-shadow: none;
}

.summer-filter-actions.is-works {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.summer-filter-actions.is-works .btn {
    min-width: 112px;
    min-height: 42px;
    border-radius: 14px;
    font-weight: 700;
}

.summer-works-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    gap: 16px;
    width: 100%;
}

.summer-works-stat-card {
    min-width: 0;
    min-height: 108px;
    border: 1px solid #e4eefc;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(31, 86, 169, 0.08);
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.summer-works-stat-copy {
    min-width: 0;
}

.summer-works-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #4c628d;
    margin-bottom: 10px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}

.summer-works-stat-value-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}

.summer-works-stat-value {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #17356e;
    white-space: nowrap;
}

.summer-works-stat-unit {
    font-size: 14px;
    color: #59709a;
    font-weight: 600;
    padding-bottom: 5px;
}

.summer-works-stat-trend {
    font-size: 12px;
    color: #5d77a6;
    min-height: 18px;
    white-space: nowrap;
}

.summer-works-stat-trend.positive {
    color: #2563eb;
}

.summer-works-stat-trend.negative {
    color: #f97316;
}

.summer-works-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.summer-works-stat-card-blue .summer-works-stat-icon {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.12);
}

.summer-works-stat-card-green .summer-works-stat-icon {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

.summer-works-stat-card-orange .summer-works-stat-icon {
    color: #f97316;
    background: rgba(249, 115, 22, 0.12);
}

.summer-works-stat-card-cyan .summer-works-stat-icon {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.12);
}

.summer-works-stat-card-purple .summer-works-stat-icon {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.12);
}

.summer-works-stat-card-indigo .summer-works-stat-icon {
    color: #2563eb;
    background: rgba(99, 102, 241, 0.12);
}

.summer-works-page .summer-panel {
    border: 1px solid #dce7fb !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(31, 86, 169, 0.06);
}

.summer-works-advanced .form-select,
.summer-works-advanced .form-control {
    min-height: 42px;
    border-radius: 14px;
    border-color: #d7e3f7;
    box-shadow: none;
}

.summer-reading-works-redesign .table-responsive {
    overflow-x: auto;
}

.summer-works-time-hint {
    border: none;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(224, 240, 255, 0.96) 0%, rgba(236, 246, 255, 0.96) 100%);
    color: #2563eb;
}

.summer-works-table thead th {
    font-size: 13px;
    color: #4c628d;
    font-weight: 700;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.summer-works-table tbody td {
    vertical-align: middle;
    color: #203c72;
}

.summer-works-table .summer-works-title-cell,
.summer-works-table .summer-works-book-cell,
.summer-works-table .summer-works-task-cell,
.summer-works-table .summer-works-school-cell {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summer-works-table .summer-works-student {
    font-weight: 700;
    color: #14356d;
}

.summer-works-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.summer-works-badge.pending {
    color: #c97706;
    background: rgba(251, 191, 36, 0.12);
}

.summer-works-badge.approved {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

.summer-works-badge.rejected {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.12);
}

.summer-works-badge.ai-done {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.12);
}

.summer-works-badge.ai-pending {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.10);
}

.summer-works-table .summer-works-excellent {
    color: #f59e0b;
    font-size: 15px;
}

.summer-works-table .btn {
    --bs-btn-padding-y: .28rem;
    --bs-btn-padding-x: .62rem;
    --bs-btn-font-size: .74rem;
    border-radius: 10px;
}

.summer-works-pager .form-select,
.summer-works-pager .form-control {
    min-height: 36px;
    border-radius: 12px;
}

.summer-works-pager #summerWorksPageSize {
    width: 112px;
}

.summer-works-pager #summerWorksPageJump {
    width: 70px !important;
}

@media (max-width: 1600px) {
    .summer-works-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .summer-filter-actions.is-works {
        flex-wrap: wrap;
    }

    .summer-works-summary-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .summer-works-summary-grid {
        grid-template-columns: repeat(1, minmax(160px, 1fr));
    }

    .summer-work-ai-grid {
        grid-template-columns: 1fr;
    }

    .summer-works-table .summer-works-title-cell,
    .summer-works-table .summer-works-book-cell,
    .summer-works-table .summer-works-task-cell,
    .summer-works-table .summer-works-school-cell {
        max-width: 110px;
    }

    .summer-filter-form.summer-works-toolbar {
        padding: 16px;
    }
}

.summer-process-badge.is-summary {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #fff;
    font-size: 24px;
}

.summer-filter-form.summer-summary-toolbar {
    margin-top: 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce7fb;
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(31, 86, 169, 0.06);
}

.summer-filter-form.summer-summary-toolbar .form-label {
    color: #4c628d;
    font-weight: 700;
}

.summer-filter-form.summer-summary-toolbar .form-select,
.summer-filter-form.summer-summary-toolbar .form-control {
    min-height: 42px;
    border-radius: 14px;
    border-color: #d7e3f7;
    box-shadow: none;
}

.summer-filter-actions.is-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.summer-filter-actions.is-summary .btn {
    min-width: 112px;
    min-height: 42px;
    border-radius: 14px;
    font-weight: 700;
}

.summer-summary-page {
    background: linear-gradient(180deg, rgba(244, 249, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-radius: 24px;
    padding: 6px 0 8px;
}

.summer-summary-process-strip {
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 20px 48px rgba(31, 86, 169, 0.08);
}

.summer-summary-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    gap: 16px;
}

.summer-summary-stat-card {
    min-height: 110px;
    border-radius: 22px;
    border: 1px solid #e4eefc;
    box-shadow: 0 18px 40px rgba(31, 86, 169, 0.08);
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.summer-summary-stat-copy {
    min-width: 0;
}

.summer-summary-stat-label {
    color: #4c628d;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    white-space: nowrap;
}

.summer-summary-stat-value {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

.summer-summary-stat-value span {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #17356e;
}

.summer-summary-stat-value em {
    font-style: normal;
    font-size: 14px;
    color: #59709a;
    font-weight: 600;
    padding-bottom: 4px;
}

.summer-summary-stat-trend {
    min-height: 18px;
    font-size: 12px;
    color: #5d77a6;
    white-space: nowrap;
}

.summer-summary-stat-trend.positive {
    color: #2563eb;
}

.summer-summary-stat-trend.negative {
    color: #f97316;
}

.summer-summary-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.summer-summary-stat-card.is-blue .summer-summary-stat-icon {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.12);
}

.summer-summary-stat-card.is-green .summer-summary-stat-icon {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
}

.summer-summary-stat-card.is-purple .summer-summary-stat-icon {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.12);
}

.summer-summary-stat-card.is-orange .summer-summary-stat-icon {
    color: #f97316;
    background: rgba(249, 115, 22, 0.12);
}

.summer-summary-stat-card.is-indigo .summer-summary-stat-icon {
    color: #2563eb;
    background: rgba(99, 102, 241, 0.12);
}

.summer-summary-stat-card.is-cyan .summer-summary-stat-icon {
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.12);
}

.summer-summary-middle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
}

.summer-summary-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.85fr) minmax(320px, 1fr);
    gap: 16px;
    align-items: start;
}

.summer-summary-aside {
    display: grid;
    gap: 16px;
}

.summer-summary-module {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce7fb;
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(31, 86, 169, 0.06);
    padding: 18px 18px 16px;
    min-width: 0;
}

.summer-summary-module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.summer-summary-module-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #183a73;
}

.summer-summary-module-header p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #7d92b3;
}

.summer-summary-more-btn {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.summer-summary-chart-wrap {
    min-height: 320px;
}

.summer-summary-trend-svg {
    width: 100%;
    max-height: 320px;
}

.summer-summary-ranking-list {
    display: grid;
    gap: 12px;
}

.summer-summary-ranking-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(90px, 1fr) 48px;
    align-items: center;
    gap: 10px;
    background: #f8fbff;
    border: 1px solid #e1ebfb;
    border-radius: 16px;
    padding: 10px 12px;
    text-align: left;
    color: #203c72;
}

.summer-summary-ranking-rank {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.summer-summary-ranking-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.summer-summary-ranking-bar {
    height: 10px;
    border-radius: 999px;
    background: #e6eefc;
    overflow: hidden;
}

.summer-summary-ranking-bar em {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7fb0ff);
    border-radius: inherit;
}

.summer-summary-ranking-value {
    font-weight: 700;
    color: #17356e;
    text-align: right;
}

.summer-summary-distribution-wrap {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.summer-summary-donut {
    --summer-summary-donut-bg: #e8eefb;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--summer-summary-donut-bg);
    position: relative;
}

.summer-summary-donut::after {
    content: "";
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(220, 231, 251, 0.9);
}

.summer-summary-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.summer-summary-donut-center strong {
    font-size: 34px;
    color: #17356e;
    line-height: 1;
}

.summer-summary-donut-center span {
    margin-top: 6px;
    font-size: 13px;
    color: #7d92b3;
}

.summer-summary-legend {
    display: grid;
    gap: 10px;
}

.summer-summary-legend-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #4e6488;
}

.summer-summary-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.summer-summary-legend-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summer-summary-legend-value {
    color: #17356e;
    font-weight: 700;
}

.summer-summary-books-table thead th,
.summer-summary-table thead th {
    color: #4c628d;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.summer-summary-books-table tbody td,
.summer-summary-table tbody td {
    color: #203c72;
    vertical-align: middle;
}

.summer-summary-book-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.summer-summary-rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.summer-summary-table-footer {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.summer-summary-table-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.summer-summary-table-pager .scpg-select {
    min-width: 110px;
    min-height: 36px;
    border-radius: 12px;
}

.summer-summary-page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.summer-summary-excellent-list {
    display: grid;
    gap: 12px;
}

.summer-summary-excellent-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid #e1ebfb;
    background: #f8fbff;
    text-align: left;
    color: #203c72;
}

.summer-summary-excellent-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff9f43;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.summer-summary-excellent-thumb {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #ddebff 0%, #eef5ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.summer-summary-excellent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summer-summary-excellent-placeholder,
.summer-summary-excellent-audio {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    gap: 6px;
}

.summer-summary-excellent-audio i,
.summer-summary-excellent-placeholder i {
    font-size: 22px;
}

.summer-summary-excellent-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.summer-summary-excellent-body strong,
.summer-summary-excellent-body em,
.summer-summary-excellent-body span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summer-summary-excellent-body strong {
    color: #17356e;
    font-size: 14px;
}

.summer-summary-excellent-body em {
    font-style: normal;
    color: #4e6488;
    font-size: 12px;
}

.summer-summary-excellent-body span {
    color: #7d92b3;
    font-size: 12px;
}

.summer-summary-ai-list {
    display: grid;
    gap: 12px;
}

.summer-summary-ai-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #e1ebfb;
    background: #f8fbff;
    padding: 12px 14px;
}

.summer-summary-ai-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.summer-summary-ai-copy strong {
    display: block;
    color: #17356e;
    font-size: 14px;
    margin-bottom: 4px;
}

.summer-summary-ai-copy p {
    margin: 0;
    color: #6d83a7;
    font-size: 12px;
    line-height: 1.6;
}

.summer-summary-ai-count {
    color: #17356e;
    font-size: 20px;
    font-weight: 800;
}

.summer-summary-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8ca1bf;
    text-align: center;
}

@media (max-width: 1600px) {
    .summer-summary-stats-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .summer-summary-middle-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .summer-summary-bottom-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1200px) {
    .summer-summary-stats-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .summer-summary-distribution-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .summer-summary-stats-grid {
        grid-template-columns: repeat(1, minmax(160px, 1fr));
    }

    .summer-filter-form.summer-summary-toolbar {
        padding: 16px;
    }

    .summer-summary-excellent-item {
        grid-template-columns: 84px minmax(0, 1fr);
    }
}

.summer-work-preview-wrap audio {
    width: 100%;
}

.summer-work-detail-text {
    min-height: 220px;
    line-height: 1.8;
    color: #35537d;
    white-space: pre-line;
    background: #f8fbff;
    border: 1px solid #d7e4f7;
    border-radius: 12px;
    padding: 14px 16px;
}

.summer-work-ai-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summer-work-ai-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.summer-work-ai-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 165, 233, 0.18));
    color: #1d4ed8;
    font-weight: 700;
}

.summer-work-ai-section {
    padding: 14px 16px;
    background: #f8fbff;
    border: 1px solid #d7e4f7;
    border-radius: 14px;
}

.summer-work-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.summer-work-ai-section-title {
    margin-bottom: 8px;
    color: #1e3a68;
    font-size: 13px;
    font-weight: 700;
}

.summer-work-ai-overall,
.summer-work-ai-encouragement,
.summer-work-ai-note {
    color: #35537d;
    line-height: 1.8;
    white-space: pre-line;
}

.summer-work-ai-list {
    margin: 0;
    padding-left: 18px;
    color: #35537d;
    line-height: 1.7;
}

.summer-work-ai-list li + li {
    margin-top: 6px;
}

.summer-work-ai-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summer-work-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.summer-work-ai-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
}

.summer-work-ai-tag.is-muted {
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
}

.summer-empty-state {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f8fbff;
    border: 1px dashed #c7d9f4;
    border-radius: 12px;
}

.summer-empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: #264f86;
    margin-bottom: 6px;
}

.summer-task-card-item {
    background: #fbfdff;
    border-color: #d5e3f7 !important;
}

.summer-task-preview-meta {
    min-height: 72px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f9fcff 0%, #f4f8ff 100%);
    border: 1px solid #d8e4f7;
    border-radius: 12px;
}

.summer-task-preview-sheet {
    padding: 16px;
    background: #fbfdff;
    border: 1px solid #d5e3f7;
    border-radius: 14px;
}

.summer-task-preview-text {
    color: #35537d;
    line-height: 1.7;
    white-space: pre-line;
}

.summer-placeholder-wrap .admin-overview-card {
    background: #fff;
}

.reading-theme-page .card-header {
    border-bottom: 1px solid #e6eefb;
}

.reading-theme-page .form-label {
    color: #4e658d;
    font-weight: 600;
}

.reading-theme-page .form-select,
.reading-theme-page .form-control {
    border-color: #d5e2f7;
}

.reading-theme-page .admin-overview-card {
    background: #fff;
    border: 1px solid #dbe6f7;
    box-shadow: 0 6px 16px rgba(18, 75, 152, 0.06);
}

.reading-theme-page .table-responsive {
    border: 1px solid #e5edf9;
    border-radius: 16px;
}

.reading-theme-page .table th {
    font-size: 13px;
    color: #587099;
    white-space: nowrap;
}

.reading-theme-page .table td {
    font-size: 13px;
    vertical-align: middle;
}

.reading-theme-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e3a8a;
}

.reading-theme-submit-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.reading-theme-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.reading-theme-list-cover {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dbe7fb;
    background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 100%);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reading-theme-list-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reading-theme-list-cover.is-empty {
    color: #6b7fa5;
    font-size: 11px;
    font-weight: 600;
}

.reading-theme-list-text {
    min-width: 0;
}

.reading-theme-detail-visual {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 100%);
    border: 1px solid #dbe7fb;
    min-height: 220px;
    padding: 18px;
    display: flex;
    align-items: flex-end;
}

.reading-theme-detail-banner {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #dfefff 0%, #f8fbff 100%);
}

.reading-theme-detail-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reading-theme-detail-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.45) 100%);
}

.reading-theme-detail-banner.is-empty::after {
    background: linear-gradient(180deg, rgba(219, 231, 251, 0.12) 0%, rgba(219, 231, 251, 0.22) 100%);
}

.reading-theme-detail-banner-placeholder,
.reading-theme-detail-cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7fa5;
    font-size: 13px;
    font-weight: 600;
    padding: 12px;
    text-align: center;
}

.reading-theme-detail-cover {
    position: relative;
    z-index: 1;
    width: 148px;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 34px rgba(31, 78, 149, 0.18);
    background: #ffffff;
}

.reading-theme-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reading-theme-detail-cover.is-empty {
    background: rgba(255, 255, 255, 0.9);
}

.reading-theme-detail-cover.is-empty .reading-theme-detail-cover-placeholder {
    position: static;
    min-height: 100%;
}

.reading-theme-image-upload {
    border: 1px solid #dbe7fb;
    border-radius: 14px;
    background: #f8fbff;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.reading-theme-image-preview {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #edf4ff 0%, #f8fbff 100%);
    border: 1px dashed #c9daf8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reading-theme-image-preview-cover {
    aspect-ratio: 1 / 1;
    min-height: 260px;
    max-width: 260px;
    width: 100%;
    justify-self: start;
}

.reading-theme-image-preview-banner {
    aspect-ratio: 16 / 5;
    min-height: 120px;
}

.reading-theme-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reading-theme-image-preview.is-empty img {
    display: none;
}

.reading-theme-image-placeholder,
.reading-theme-image-error {
    padding: 0 16px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7fa5;
}

.reading-theme-image-error {
    color: #c2410c;
}

.reading-theme-image-meta {
    display: grid;
    gap: 4px;
}

.reading-theme-image-status {
    font-size: 13px;
    font-weight: 600;
    color: #183b70;
    word-break: break-all;
}

.reading-theme-image-hint {
    font-size: 12px;
    color: #6b7fa5;
}

.reading-theme-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reading-theme-detail-list {
    display: grid;
    gap: 10px;
}

.reading-theme-detail-item,
.reading-theme-work-card {
    border: 1px solid #e6edf9;
    border-radius: 12px;
    background: #fbfdff;
    padding: 10px 12px;
}

.reading-theme-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.reading-theme-detail-label {
    color: #5c7397;
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 auto;
}

.reading-theme-detail-value {
    color: #183b70;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

.reading-theme-work-title {
    color: #183b70;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.reading-theme-work-meta {
    color: #6a7f9e;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .reading-theme-detail-visual {
        min-height: 180px;
        padding: 14px;
    }

    .reading-theme-detail-cover {
        width: 108px;
    }
}

.reading-theme-summary-box {
    min-height: 96px;
    border: 1px dashed #d6e4f8;
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px 14px;
    line-height: 1.7;
}

#readingThemeDetailStats .admin-overview-card {
    border-radius: 14px;
}

#readingThemeWorksTableBody td {
    min-width: 88px;
}

/* =========================
   Summer Books Layout Polish
   ========================= */

/* --- 主内容左右布局：左1.2fr / 右至少520px --- */
.summer-reading-books-redesign .summer-books-main-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(520px, 0.95fr);
}

/* --- 书目卡片改为每行2张 --- */
.summer-reading-books-redesign .summer-book-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- 书目封面固定120×160，居中展示，不随列宽拉伸 --- */
.summer-reading-books-redesign .summer-book-compact-cover-wrap {
    display: flex;
    justify-content: center;
    padding: 14px 14px 0;
}

.summer-reading-books-redesign .summer-book-compact-cover {
    width: 120px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #dbe6f7;
    background: linear-gradient(135deg, #eef5ff 0%, #f7fbff 100%);
    flex-shrink: 0;
}

/* --- 右侧确认情况表格：禁止横向滚动 --- */
.summer-reading-books-redesign .summer-progress-table-wrap {
    overflow: hidden;
}

.summer-reading-books-redesign .summer-confirm-panel,
.summer-reading-books-redesign .summer-progress-card {
    min-width: 0;
    overflow: hidden;
}

/* --- 紧凑分页组件 .summer-clean-pagination / .admin-pagination --- */
.summer-clean-pagination,
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid #eef3fb;
    flex-wrap: nowrap;
}

.summer-clean-pagination .page-right,
.admin-pagination .page-right,
.admin-pagination-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.admin-pagination-info {
    color: #6b7b92;
    font-size: 13px;
}

/* 每页条数下拉 */
.summer-clean-pagination .scpg-select,
.admin-pagination .scpg-select,
.scpg-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d3e1f6;
    border-radius: 8px;
    background: #fff;
    color: #18345d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

/* 跳页输入框 */
.summer-clean-pagination .scpg-jump-input,
.admin-pagination .scpg-jump-input,
.scpg-jump-input {
    width: 48px;
    height: 32px;
    padding: 0 6px;
    border: 1px solid #d3e1f6;
    border-radius: 8px;
    background: #fff;
    color: #18345d;
    font-size: 13px;
    text-align: center;
    outline: none;
}

/* 翻页/跳转按钮 */
.summer-clean-pagination .scpg-btn,
.admin-pagination .scpg-btn,
.scpg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d3e1f6;
    border-radius: 8px;
    background: #fff;
    color: #4a688f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
}

.summer-clean-pagination .scpg-btn:hover,
.admin-pagination .scpg-btn:hover,
.scpg-btn:hover {
    border-color: #90b4ea;
    color: #1d71f2;
    background: #f4f8ff;
    text-decoration: none;
}

.summer-clean-pagination .scpg-btn.disabled,
.summer-clean-pagination .scpg-btn:disabled,
.admin-pagination .scpg-btn.disabled,
.admin-pagination .scpg-btn:disabled,
.scpg-btn.disabled,
.scpg-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    color: #97a6ba;
    background: #f7f9fc;
}

/* 让 summer-pagination 在新分页容器里保持 inline-flex */
.summer-clean-pagination .summer-pagination,
.admin-pagination .summer-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 在新分页组件中，激活页按钮样式 */
.summer-clean-pagination .summer-page-btn,
.admin-pagination .summer-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 13px;
}

.summer-clean-pagination .summer-page-btn.is-active,
.admin-pagination .summer-page-btn.is-active {
    background: linear-gradient(135deg, #1d71f2 0%, #11a0b8 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px rgba(29, 113, 242, 0.22);
}

@media (max-width: 1200px) {
    .summer-clean-pagination,
    .admin-pagination,
    .table-pager {
        flex-wrap: wrap;
    }

    .summer-clean-pagination .page-right,
    .admin-pagination .page-right,
    .table-pager .page-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* --- 响应式：小于1440px才单列，1920宽屏保持双列 --- */
@media (max-width: 1440px) {
    .summer-reading-books-redesign .summer-books-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 覆盖旧的1600px断点（让它失效） */
@media (min-width: 1441px) and (max-width: 1600px) {
    .summer-reading-books-redesign .summer-books-main-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(480px, 0.95fr);
    }
    .summer-reading-books-redesign .summer-book-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Summer Books – List View Table & Pagination Fix (patch2)
   ========================= */

/* --- 列表视图容器（替代旧 table-responsive） --- */
.summer-book-list-view {
    width: 100%;
    overflow: hidden;
}

/* --- 列表视图表格 --- */
.summer-book-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.summer-book-table th,
.summer-book-table td {
    padding: 13px 12px;
    border-bottom: 1px solid #eef3fb;
    color: #18345d;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summer-book-table th {
    background: #f6f9fe;
    font-weight: 700;
    font-size: 13px;
    color: #4a688f;
    white-space: nowrap;
}

.summer-book-table td {
    font-size: 13px;
}

.summer-book-table .book-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.summer-book-table .book-thumb {
    width: 44px;
    height: 58px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(24, 52, 93, 0.12);
}

.summer-book-table .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.summer-book-table .action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.summer-book-table .action-group .btn {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 7px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- 修复紧凑分页布局（覆盖可能的宽展问题） --- */
.summer-reading-books-redesign .summer-clean-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    margin-top: 12px;
    border-top: 1px solid #eef3fb;
    flex-wrap: nowrap;
    min-height: 44px;
}

.summer-reading-books-redesign .summer-clean-pagination .page-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.summer-reading-books-redesign .summer-clean-pagination .scpg-select {
    width: auto;
    max-width: 96px;
    height: 30px;
    padding: 0 6px;
    font-size: 12px;
    flex-shrink: 0;
}

.summer-reading-books-redesign .summer-clean-pagination .scpg-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    flex-shrink: 0;
}

.summer-reading-books-redesign .summer-clean-pagination .scpg-jump-input {
    width: 44px;
    height: 28px;
    font-size: 12px;
    flex-shrink: 0;
}

/* --- 隐藏旧式 summer-footer-actions、summer-page-nav-group 等（防旧残留） --- */
.summer-books-page .summer-books-footer {
    display: none !important;
}

.summer-books-page .summer-footer-actions {
    display: none !important;
}

/* --- 右侧确认情况表格：列宽与对齐 --- */
.summer-reading-books-redesign .summer-progress-table-wrap .table th:nth-child(1),
.summer-reading-books-redesign .summer-progress-table-wrap .table td:nth-child(1) {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summer-reading-books-redesign .summer-progress-table-wrap .table th:nth-child(n+3),
.summer-reading-books-redesign .summer-progress-table-wrap .table td:nth-child(n+3) {
    text-align: center;
}

.summer-reading-books-redesign .summer-progress-table-wrap .table th:last-child,
.summer-reading-books-redesign .summer-progress-table-wrap .table td:last-child {
    width: 72px;
    text-align: center;
}

/* =========================
   Summer Books – Confirm Panel Pagination Fix (patch3)
   ========================= */

/* 右侧确认情况紧凑分页：防止 select 撑满整行 */
.summer-confirm-panel .summer-clean-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #eef3fb;
    flex-wrap: nowrap;
    min-height: 44px;
    overflow: hidden;
}

.summer-confirm-panel .summer-clean-pagination .page-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.summer-confirm-panel .summer-clean-pagination .scpg-select {
    width: 82px !important;
    max-width: 82px;
    min-width: 0;
    height: 30px;
    flex-shrink: 0;
}

.summer-confirm-panel .summer-clean-pagination .scpg-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    flex-shrink: 0;
}

.summer-confirm-panel .summer-clean-pagination .scpg-jump-input {
    width: 40px;
    height: 28px;
    flex-shrink: 0;
}

/* 确保左侧书目分页 select 也不撑满 */
#summerBooksCleanPager .scpg-select {
    width: 82px !important;
    max-width: 82px;
    height: 30px;
    flex-shrink: 0;
}

/* 兜底：隐藏任何可能残留的旧分页结构 */
.summer-books-page .summer-confirm-panel .summer-books-footer,
.summer-books-page .summer-confirm-panel .summer-footer-actions,
.summer-books-page .summer-confirm-panel .summer-page-nav-group:not(.d-none) + :not(.summer-pagination),
.summer-books-page .summer-book-list-panel .summer-books-footer,
.summer-books-page .summer-book-list-panel .summer-footer-actions {
    display: none !important;
}

/* =========================
   样书预览页 (SPV) 专属样式
   ========================= */

/* 标题区 */
.spv-title-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.spv-breadcrumb { font-size:15px; color:#4a688f; font-weight:600; }
.spv-breadcrumb-current { color:#1677ff; }

/* 统计卡片 */
.spv-stat-card {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:18px 20px;
    background:#fff; border-radius:16px;
    box-shadow:0 6px 20px rgba(15,23,42,.07);
    border:1px solid #e8eef8;
    min-height:88px;
}
.spv-stat-body { min-width:0; }
.spv-stat-label { font-size:13px; color:#6b7c97; font-weight:500; margin-bottom:4px; }
.spv-stat-num { font-size:24px; line-height:1.2; font-weight:800; }
.spv-stat-num strong { color:#18345d; }
.spv-stat-num span { font-size:14px; color:#6b7c97; font-weight:500; margin-left:2px; }
.spv-stat-sub { font-size:12px; margin-top:3px; }
.spv-stat-blue .spv-stat-sub { color:#2563eb; }
.spv-stat-green .spv-stat-sub { color:#16a34a; }
.spv-stat-orange .spv-stat-sub { color:#d97706; }
.spv-stat-purple .spv-stat-sub { color:#7c3aed; }
.spv-stat-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.spv-icon-blue { background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1d4ed8; }
.spv-icon-green { background:linear-gradient(135deg,#dcfce7,#bbf7d0); color:#15803d; }
.spv-icon-orange { background:linear-gradient(135deg,#fef9c3,#fde68a); color:#b45309; }
.spv-icon-purple { background:linear-gradient(135deg,#ede9fe,#ddd6fe); color:#6d28d9; }

/* 主体左右布局 */
.spv-main-grid {
    display:grid;
    grid-template-columns: 320px minmax(0,1fr);
    gap:20px; align-items:start;
}
@media (max-width:1200px) {
    .spv-main-grid { grid-template-columns:minmax(0,1fr); }
}

/* 通用面板卡片 */
.spv-panel-card {
    background:#fff; border-radius:16px; border:1px solid #e2eaf8;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
    padding:18px;
}
.spv-panel-hd {
    font-size:15px; font-weight:700; color:#18345d;
    padding-bottom:12px; margin-bottom:14px;
    border-bottom:1px solid #eef3fb;
}
.spv-viewer-card { display:flex; flex-direction:column; gap:0; }

/* 左栏：书目信息卡 */
.spv-book-info-card {
    display:flex; gap:12px; align-items:flex-start;
    background:#f6f9fe; border-radius:12px; padding:12px;
    border:1px solid #dce8fb;
}
.spv-book-cover-area { flex-shrink:0; position:relative; }
.spv-book-cover-img { width:72px; height:96px; object-fit:cover; border-radius:8px; border:1px solid #dce8fb; }
.spv-book-cover-placeholder {
    width:72px; height:96px; border-radius:8px; border:1px solid #dce8fb;
    background:#eef3fb; display:flex; align-items:center; justify-content:center;
}
.spv-book-status-badge { position:absolute; top:-6px; left:-4px; }
.spv-book-text-area { min-width:0; flex:1; }
.spv-book-title { font-size:14px; font-weight:700; color:#18345d; line-height:1.4; margin-bottom:4px; }
.spv-book-meta { font-size:12px; color:#6b7c97; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.6; }
.spv-book-progress-row { display:flex; align-items:center; gap:4px; margin-top:6px; }
.spv-progress-label { font-size:12px; color:#6b7c97; }
.spv-progress-num { font-size:12px; font-weight:700; color:#1d4ed8; }
.spv-progress-track { height:6px; border-radius:3px; background:#e2eaf8; overflow:hidden; margin-top:4px; }
.spv-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#1d71f2,#22c55e); transition:width .3s; }
.spv-progress-pct { font-size:11px; color:#6b7c97; margin-top:2px; text-align:right; }

/* 空态 */
.spv-empty-hint {
    text-align:center; padding:16px; background:#f6f9fe;
    border-radius:12px; border:1px dashed #c5d6f0;
    display:flex; flex-direction:column; align-items:center; gap:6px;
}

/* 上传区 */
.spv-upload-section { border-top:1px solid #eef3fb; padding-top:14px; margin-top:2px; }
.spv-upload-label { font-size:13px; font-weight:600; color:#18345d; margin-bottom:10px; }
.spv-dropzone {
    border:2px dashed #b8ccf0; border-radius:12px; padding:18px 12px;
    text-align:center; cursor:pointer; transition:border-color .18s, background .18s;
}
.spv-dropzone:hover { border-color:#1d71f2; background:#f0f6ff; }
.spv-link { color:#1d71f2; text-decoration:underline; }
.x-small { font-size:11px; }

/* 右栏：工具栏 */
.spv-viewer-toolbar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #eef3fb;
}
.spv-viewer-title-text { font-size:14px; font-weight:700; color:#18345d; flex-shrink:0; }
.spv-viewer-meta-row { flex:1; min-width:0; }
.spv-viewer-btns { display:flex; gap:8px; flex-shrink:0; }

/* 大图区域 */
.spv-viewer-body {
    display:flex; align-items:center; gap:8px;
    min-height:420px; position:relative; overflow:hidden;
}
.spv-main-img-wrap {
    flex:1; min-height:380px; display:flex; align-items:center; justify-content:center;
    background:#f6f9fe; border-radius:12px; overflow:hidden;
}
.spv-main-img { max-width:100%; max-height:420px; object-fit:contain; border-radius:8px; }
.spv-viewer-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:320px; width:100%; color:#94a3b8;
}
.spv-nav-btn {
    width:44px; height:44px; flex-shrink:0; border-radius:50%;
    background:#fff; border:1px solid #d0deef;
    color:#3a6097; font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(15,23,42,.1); transition:all .18s;
    line-height:1;
}
.spv-nav-btn:hover:not(:disabled) { background:#1d71f2; color:#fff; border-color:transparent; }
.spv-nav-btn:disabled { opacity:.35; cursor:not-allowed; }

/* 页码信息 */
.spv-page-info-bar {
    text-align:center; font-size:13px; color:#6b7c97;
    padding:8px 0 4px;
}

/* 缩略图条 */
.spv-thumbs-strip {
    display:flex; gap:8px; overflow-x:auto; padding:10px 0 4px;
    scrollbar-width:thin; scrollbar-color:#c5d6f0 transparent;
}
.spv-thumbs-strip::-webkit-scrollbar { height:4px; }
.spv-thumbs-strip::-webkit-scrollbar-track { background:transparent; }
.spv-thumbs-strip::-webkit-scrollbar-thumb { background:#c5d6f0; border-radius:2px; }
.spv-thumb-item {
    flex-shrink:0; cursor:pointer; border-radius:8px; overflow:hidden;
    border:2px solid transparent; transition:border-color .18s;
    position:relative; width:64px;
}
.spv-thumb-item:hover { border-color:#90b4ea; }
.spv-thumb-item.active { border-color:#1d71f2; }
.spv-thumb-img { width:64px; height:80px; object-fit:cover; display:block; }
.spv-thumb-label {
    text-align:center; font-size:11px; color:#6b7c97; padding:2px 0;
    background:#f6f9fe;
}
.spv-thumb-item.active .spv-thumb-label { color:#1d71f2; font-weight:700; }

.spv-fs-backdrop {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15, 23, 42, 0.72);
    z-index:3990;
}

.spv-fs-modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:4000;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.spv-fs-dialog {
    position:relative;
    width:min(92vw, 1180px);
    max-height:92vh;
    background:#fff;
    border-radius:18px;
    box-shadow:0 24px 80px rgba(0,0,0,.28);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.spv-fs-close {
    position:absolute;
    top:14px;
    right:16px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(15,23,42,.08);
    color:#18345d;
    font-size:24px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
}

.spv-fs-close:hover {
    background:rgba(29,113,242,.12);
    color:#1d71f2;
}

.spv-fs-header {
    padding:18px 24px 12px;
    border-bottom:1px solid #eef3fb;
}

.spv-fs-title {
    font-size:18px;
    font-weight:700;
    color:#18345d;
}

.spv-fs-page {
    margin-top:4px;
    font-size:13px;
    color:#6b7c97;
}

.spv-fs-body {
    padding:16px 24px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
}

.spv-fs-img {
    max-width:100%;
    max-height:68vh;
    object-fit:contain;
    border-radius:12px;
    background:#f6f9fe;
}

.spv-fs-nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 24px rgba(15,23,42,.18);
    color:#18345d;
    font-size:28px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:2;
}

.spv-fs-nav:hover:not(:disabled) {
    background:#fff;
    color:#1d71f2;
}

.spv-fs-nav:disabled {
    opacity:.45;
    cursor:not-allowed;
}

.spv-fs-nav-prev { left:20px; }
.spv-fs-nav-next { right:20px; }

.spv-fs-actions {
    padding:12px 24px 20px;
    display:flex;
    justify-content:flex-end;
}

/* 学校进度统计表 */
.spv-school-section {
    background:#fff; border-radius:16px; border:1px solid #e2eaf8;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
    padding:18px;
}
.spv-school-hd { font-size:15px; font-weight:700; color:#18345d; margin-bottom:14px; }
.spv-progress-table {
    width:100%; table-layout:fixed; border-collapse:collapse;
}
.spv-progress-table th {
    background:#f6f9fe; color:#4a688f; font-size:13px; font-weight:600;
    padding:10px 10px; border-bottom:2px solid #dce8fb;
    text-align:center; white-space:nowrap;
}
.spv-progress-table th:first-child { text-align:left; }
.spv-progress-table td {
    padding:11px 10px; border-bottom:1px solid #eef3fb;
    font-size:13px; color:#18345d;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-align:center;
}
.spv-progress-table td:first-child { text-align:left; }
.spv-td-green { color:#16a34a; font-weight:600; }
.spv-small-cell { font-size:12px; color:#6b7c97; }

/* 完成率进度条 */
.spv-pct-cell { display:flex; align-items:center; gap:6px; }
.spv-mini-bar { flex:1; height:6px; border-radius:3px; background:#e2eaf8; overflow:hidden; }
.spv-mini-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#22c55e,#16a34a); }
.spv-pct-text { font-size:12px; color:#16a34a; font-weight:600; white-space:nowrap; min-width:36px; }

/* =========================
   Summer Book Multiselect Dropdown
   ========================= */
.summer-book-multi-select {
    position: relative;
}

.summer-book-multi-toggle {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d7e1f2;
    border-radius: 10px;
    background: #fff;
    color: #18345d;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    cursor: pointer;
}

.summer-book-multi-toggle:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.summer-book-multi-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid #d7e1f2;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
    padding: 10px;
}

.summer-book-multi-select.is-open .summer-book-multi-dropdown {
    display: block;
}

.summer-book-multi-search-wrap {
    margin-bottom: 8px;
}

.summer-book-multi-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.summer-book-multi-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2eaf8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.summer-book-multi-option:hover {
    border-color: #90b4ea;
    background: #f8fbff;
}

/* Class teacher workbench: phone-first layout, verified at 390px. */
@media (max-width: 480px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mobile-shell.teacher-workbench-shell {
        width: min(100%, 430px);
        max-width: 430px;
        padding: max(12px, env(safe-area-inset-top)) 12px calc(148px + env(safe-area-inset-bottom));
    }

    .teacher-workbench-page {
        width: 100%;
        min-width: 0;
        gap: 14px;
        padding-bottom: 30px;
    }

    .teacher-workbench-page *,
    .teacher-workbench-page *::before,
    .teacher-workbench-page *::after {
        box-sizing: border-box;
        min-width: 0;
    }

    .teacher-workbench-titlebar { min-height: 44px; }
    .teacher-workbench-titlebar h1 { font-size: 26px; line-height: 1.2; }

    .teacher-workbench-notice-btn {
        right: 2px;
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }

    .teacher-workbench-notice-btn i { font-size: 19px; }
    .teacher-workbench-notice-dot { right: 8px; top: 7px; width: 8px; height: 8px; }

    .teacher-workbench-hero {
        position: relative;
        min-height: 184px;
        padding: 18px 18px 20px;
        border-radius: 22px;
        display: block;
    }

    .teacher-workbench-hero-main {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
    }

    .teacher-workbench-hero-avatar {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
        border-width: 3px;
    }

    .teacher-workbench-hero-text { gap: 6px; }

    .teacher-workbench-hero-title {
        padding-right: 118px;
        font-size: 22px;
        line-height: 1.25;
    }

    .teacher-workbench-hero-name {
        font-size: 15px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .teacher-workbench-hero-meta {
        display: grid;
        gap: 6px;
        margin-top: 1px;
        font-size: 12px;
        line-height: 1.45;
    }

    .teacher-workbench-hero-meta span {
        gap: 4px;
        overflow-wrap: anywhere;
    }

    .teacher-workbench-hero-actions {
        position: absolute;
        top: 14px;
        right: 14px;
        gap: 8px;
    }

    .teacher-workbench-switch-btn {
        width: auto;
        min-height: 40px;
        padding: 0 15px;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap;
    }

    .teacher-workbench-top-stack {
        gap: 10px;
    }

    .teacher-point-hero-card {
        padding: 16px 18px 18px;
    }

    .teacher-point-hero-avatar {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .teacher-point-hero-text {
        gap: 8px;
        padding-right: 0;
    }

    .teacher-point-hero-name-row {
        padding-right: 112px;
    }

    .teacher-point-hero-name {
        font-size: 20px;
    }

    .teacher-point-hero-meta-grid,
    .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-hero-meta-line {
        font-size: 12px;
    }

    .teacher-point-hero-meta-line {
        align-items: flex-start;
        row-gap: 6px;
    }

    .teacher-point-summary-card {
        grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1fr);
        gap: 12px;
        padding: 16px 16px 16px 18px;
        border-radius: 18px;
    }

    .teacher-point-summary-side {
        gap: 8px;
        padding-left: 12px;
    }

    .teacher-point-summary-label {
        margin-bottom: 6px;
        font-size: 14px;
    }

    .teacher-point-summary-value-row strong {
        font-size: 44px;
    }

    .teacher-point-summary-star {
        width: 24px;
        height: 24px;
    }

    .teacher-point-ranking-entry {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 56px;
        padding: 4px 0;
    }

    .teacher-point-ranking-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .teacher-point-ranking-icon i {
        font-size: 20px;
    }

    .teacher-point-ranking-copy strong {
        font-size: 17px;
    }

    .teacher-point-ranking-copy small {
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .teacher-point-ranking-tail {
        width: 16px;
        height: 16px;
    }

    .teacher-point-notice-btn {
        top: auto;
        right: auto;
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
        font-size: 25px;
    }

    .teacher-point-notice-btn .teacher-page-notice-dot {
        top: 7px;
        right: 8px;
        width: 8px;
        height: 8px;
    }

    .teacher-point-ranking-board {
        padding: 14px;
        border-radius: 22px;
        gap: 14px;
    }

    .teacher-point-ranking-topbar {
        min-height: 40px;
        padding: 0 2px;
    }

    .teacher-point-ranking-hero {
        min-height: 152px;
        padding: 14px;
        border-radius: 18px;
    }

    .teacher-point-ranking-hero .teacher-workbench-hero-main {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-point-ranking-hero .teacher-workbench-hero-avatar,
    .teacher-point-ranking-hero .teacher-point-hero-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-name {
        font-size: 20px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-name-row {
        padding-right: 92px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-meta-grid,
    .teacher-point-ranking-hero .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-ranking-hero .teacher-point-hero-meta-line {
        font-size: 12px;
    }

    .teacher-point-ranking-hero .teacher-point-switch-btn {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
    }

    .teacher-point-ranking-main-tab,
    .teacher-point-ranking-range-tab {
        min-height: 42px;
        font-size: 15px;
    }

    .teacher-point-class-overview-card {
        grid-template-columns: minmax(0, 1fr) 84px;
        padding: 16px;
    }

    .teacher-point-class-overview-main {
        gap: 10px;
    }

    .teacher-point-class-overview-label {
        font-size: 13px;
    }

    .teacher-point-class-overview-value-row strong {
        font-size: 36px;
    }

    .teacher-point-change {
        font-size: 16px;
    }

    .teacher-point-trophy-illustration {
        width: 80px;
        height: 74px;
    }

    .teacher-point-trophy-illustration i {
        font-size: 56px;
    }

    .teacher-point-class-table-head,
    .teacher-point-class-row {
        grid-template-columns: 60px minmax(0, 1fr) 96px 84px;
    }

    .teacher-point-teacher-table-head,
    .teacher-point-teacher-row {
        grid-template-columns: 60px minmax(0, 1.2fr) 92px 84px 78px;
    }

    .teacher-point-class-row,
    .teacher-point-teacher-row {
        min-height: 78px;
        padding: 0 14px;
    }

    .teacher-point-class-copy strong {
        font-size: 16px;
    }

    .teacher-point-class-copy small {
        font-size: 12px;
    }

    .teacher-point-rule-grid,
    .teacher-point-teacher-bottom-grid {
        grid-template-columns: 1fr;
    }

    .teacher-point-action-row {
        grid-template-columns: 1fr;
    }

    .teacher-point-teacher-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-point-teacher-metric-card {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px;
        height: 94px;
    }

    .teacher-point-teacher-metric-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .teacher-point-teacher-metric-copy strong {
        font-size: 12px;
    }

    .teacher-point-teacher-metric-value {
        font-size: 21px;
    }

    .teacher-point-teacher-rank-inline small {
        font-size: 13px;
    }

    .teacher-point-teacher-metric-subline {
        font-size: 11px;
    }

    .teacher-point-source-item {
        grid-template-columns: minmax(0, 1fr) 110px 56px;
    }

    .teacher-workbench-profile-card {
        padding: 16px;
        border-radius: 22px;
        gap: 14px;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .teacher-workbench-profile-main {
        gap: 14px;
        align-items: flex-start;
        min-width: 0;
    }

    .teacher-workbench-profile-main .profile-avatar-ring.avatar-md {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
        border-width: 3px;
    }

    .teacher-workbench-profile-text { gap: 6px; }
    .teacher-workbench-profile-name { gap: 8px; font-size: 25px; line-height: 1.25; }

    .teacher-workbench-role-badge {
        min-height: 24px;
        padding: 0 10px;
        font-size: 12px;
    }

    .teacher-workbench-profile-line {
        gap: 6px;
        font-size: 14px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .teacher-workbench-score-panel {
        min-width: 0;
        padding: 12px 0 0;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
        border-left: none;
        display: grid;
        align-content: start;
        gap: 10px;
    }

    .teacher-workbench-score-head {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .teacher-workbench-score-label { font-size: 13px; white-space: nowrap; }
    .teacher-workbench-score-value {
        gap: 8px;
        font-size: 48px;
        line-height: 1;
        flex-wrap: nowrap;
    }
    .teacher-workbench-score-value i { font-size: 22px; }

    .teacher-workbench-notice-inline {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 12px;
    }

    .teacher-workbench-score-link {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
        white-space: nowrap;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .teacher-workbench-quick-grid,
    .teacher-workbench-resource-grid {
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-workbench-quick-card {
        width: 100%;
        min-height: 96px;
        padding: 12px 6px 10px;
        border-radius: 18px;
        gap: 7px;
        overflow: hidden;
        grid-template-columns: 1fr;
        align-items: start;
        justify-items: center;
        text-align: center;
    }

    .teacher-workbench-quick-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 14px;
        font-size: 17px;
    }

    .teacher-workbench-quick-text {
        gap: 2px;
        overflow: hidden;
        text-align: center;
        justify-items: center;
    }

    .teacher-workbench-quick-text strong {
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
        overflow-wrap: break-word;
    }

    .teacher-workbench-quick-text small {
        display: block;
        font-size: 10px;
        writing-mode: horizontal-tb !important;
        word-break: normal !important;
    }

    .teacher-workbench-main-grid,
    .teacher-workbench-side-stack {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-workbench-card {
        width: 100%;
        padding: 16px 15px 18px;
        border-radius: 20px;
        gap: 13px;
    }

    .teacher-workbench-card-head { gap: 3px; }

    .teacher-workbench-card-head-inline {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 7px;
    }

    .teacher-workbench-card-head-inline > * {
        min-width: 0;
    }

    .teacher-workbench-card-head h2 { font-size: 17px; line-height: 1.3; }
    .teacher-workbench-card-head span { font-size: 11px; line-height: 1.4; }
    .teacher-workbench-password-form { gap: 9px; }
    .teacher-workbench-password-form label { gap: 4px; }
    .teacher-workbench-password-form span { font-size: 12px; }

    .teacher-workbench-password-form .form-control {
        min-height: 42px;
        padding: 8px 11px;
        font-size: 13px;
        border-radius: 12px;
    }

    .teacher-workbench-primary-btn,
    .teacher-workbench-outline-btn {
        min-height: 42px;
        font-size: 13px;
    }

    .teacher-workbench-period-badge { padding: 6px 9px; font-size: 11px; white-space: nowrap; }

    .teacher-workbench-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-workbench-stat-box,
    .teacher-workbench-status-item {
        min-height: 92px;
        padding: 11px 8px;
        border-radius: 14px;
        gap: 5px;
    }

    .teacher-workbench-stat-box span,
    .teacher-workbench-status-item span {
        font-size: 11px;
        line-height: 1.3;
        white-space: normal;
    }

    .teacher-workbench-stat-box strong,
    .teacher-workbench-status-item strong {
        font-size: 18px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .teacher-workbench-metric-number {
        font-size: 27px;
    }

    .teacher-workbench-metric-number.secondary {
        font-size: 22px;
    }

    .teacher-workbench-metric-unit,
    .teacher-workbench-metric-separator {
        font-size: 12px;
    }

    .teacher-workbench-metric-value.compact .teacher-workbench-metric-number {
        font-size: 22px;
    }

    .teacher-workbench-metric-value.compact .teacher-workbench-metric-unit,
    .teacher-workbench-metric-value.compact .teacher-workbench-metric-separator {
        font-size: 11px;
    }

    .teacher-workbench-progress-meta { font-size: 12px; }
    .teacher-workbench-progress-meta strong { font-size: 23px; }
    .teacher-workbench-progress-track { height: 10px; }

    .teacher-workbench-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-workbench-action-row .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
        white-space: normal;
        line-height: 1.3;
    }

    .teacher-workbench-quality-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-workbench-quality-ring {
        width: 132px;
        height: 132px;
        padding: 11px;
    }

    .teacher-workbench-quality-ring-inner strong { font-size: 25px; }
    .teacher-workbench-quality-ring-inner span { font-size: 11px; }
    .teacher-workbench-quality-meta { gap: 10px; }

    .teacher-workbench-quality-score-line {
        justify-content: center;
        gap: 6px;
    }

    .teacher-workbench-quality-score-line span { font-size: 12px; }
    .teacher-workbench-quality-score-line strong { font-size: 19px; }

    .teacher-workbench-quality-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .teacher-workbench-quality-item {
        grid-template-columns: 9px 1fr auto;
        gap: 6px;
        padding: 9px;
        border-radius: 12px;
        font-size: 11px;
    }

    .teacher-workbench-quality-item .dot { width: 8px; height: 8px; }
    .teacher-workbench-quality-note { font-size: 11px; line-height: 1.55; }

    .teacher-workbench-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-workbench-status-item small { font-size: 11px; }
    .teacher-workbench-link-btn { font-size: 11px; line-height: 1.4; }

    .teacher-workbench-empty-state,
    .teacher-workbench-empty-state.compact {
        min-height: 112px;
        padding: 14px;
        border-radius: 16px;
        gap: 5px;
    }

    .teacher-workbench-empty-state i { font-size: 23px; }
    .teacher-workbench-empty-state div { font-size: 13px; }
    .teacher-workbench-empty-state p { font-size: 11px; line-height: 1.5; }
    .teacher-workbench-task-main { gap: 10px; }
    .teacher-workbench-task-cover { height: 128px; border-radius: 16px; }
    .teacher-workbench-task-title { font-size: 15px; }

    .teacher-workbench-task-desc,
    .teacher-workbench-task-line { font-size: 11px; }

    .teacher-workbench-task-line,
    .teacher-reminder-task-trigger-meta {
        white-space: normal;
    }

    .teacher-workbench-resource-item {
        min-height: 98px;
        padding: 12px 8px;
        border-radius: 16px;
        gap: 6px;
    }

    .teacher-workbench-resource-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
        font-size: 19px;
    }

    .teacher-workbench-resource-item strong { font-size: 13px; line-height: 1.3; white-space: nowrap; }
    .teacher-workbench-resource-item small { font-size: 10px; line-height: 1.35; }

    .teacher-account-settings-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .teacher-account-settings-item,
    .teacher-account-settings-upload-label,
    .teacher-account-settings-logout-btn {
        min-height: 100px;
        border-radius: 18px;
    }

    .bottom-nav {
        bottom: max(10px, env(safe-area-inset-bottom));
        width: min(430px, calc(100% - 20px));
        padding: 8px;
        gap: 6px;
        border-radius: 22px;
    }

    .bottom-nav a {
        padding: 7px 0;
        gap: 2px;
        border-radius: 14px;
        font-size: 12px;
    }
}

@media (max-width: 430px) {
    .teacher-workbench-hero {
        min-height: 168px;
        padding: 16px;
        border-radius: 20px;
    }

    .teacher-workbench-hero-main {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-workbench-hero-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .teacher-workbench-hero-text { gap: 5px; }

    .teacher-workbench-hero-title {
        padding-right: 88px;
        font-size: 19px;
    }

    .teacher-workbench-hero-name {
        font-size: 13px;
        line-height: 1.55;
    }

    .teacher-workbench-hero-meta {
        gap: 4px;
        font-size: 11px;
    }

    .teacher-workbench-switch-btn {
        min-height: 34px;
        padding: 0 11px;
        gap: 5px;
        font-size: 12px;
    }

    .teacher-workbench-hero-actions {
        top: 12px;
        right: 12px;
        gap: 6px;
    }

    .teacher-point-hero-card {
        padding: 16px;
    }

    .teacher-point-hero-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .teacher-point-hero-name-row {
        gap: 8px;
        padding-right: 96px;
    }

    .teacher-point-hero-name {
        font-size: 17px;
    }

    .teacher-point-hero-text {
        padding-right: 0;
    }

    .teacher-point-role-badge {
        min-height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }

    .teacher-point-hero-meta-grid,
    .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-hero-meta-line {
        font-size: 11px;
    }

    .teacher-point-summary-card {
        grid-template-columns: minmax(100px, 0.76fr) minmax(0, 1fr);
        gap: 10px;
        padding: 14px 15px;
    }

    .teacher-point-summary-side {
        gap: 8px;
        padding-left: 10px;
    }

    .teacher-point-ranking-entry {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 52px;
        padding: 4px 0;
    }

    .teacher-point-summary-value-row strong {
        font-size: 40px;
    }

    .teacher-point-notice-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 14px;
    }

    .teacher-point-ranking-icon {
        width: 38px;
        height: 38px;
    }

    .teacher-point-ranking-icon i {
        font-size: 18px;
    }

    .teacher-point-ranking-copy strong {
        font-size: 15px;
    }

    .teacher-point-ranking-copy small {
        font-size: 11px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .teacher-point-ranking-tail {
        width: 14px;
        height: 14px;
    }

    .teacher-point-ranking-board {
        padding: 12px;
        border-radius: 20px;
    }

    .teacher-point-ranking-topbar {
        min-height: 40px;
        padding: 0 2px;
    }

    .teacher-point-ranking-back,
    .teacher-back-icon-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .teacher-point-ranking-hero {
        min-height: 148px;
        padding: 13px 14px;
        border-radius: 18px;
    }

    .teacher-point-ranking-hero .teacher-workbench-hero-main {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-point-ranking-hero .teacher-workbench-hero-avatar,
    .teacher-point-ranking-hero .teacher-point-hero-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-name {
        font-size: 18px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-name-row {
        padding-right: 86px;
    }

    .teacher-point-ranking-hero .teacher-point-hero-meta-grid,
    .teacher-point-ranking-hero .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
    .teacher-point-ranking-hero .teacher-point-hero-meta-line {
        font-size: 11px;
    }

    .teacher-point-ranking-hero .teacher-point-switch-btn {
        min-height: 32px;
        padding: 0 10px;
        font-size: 11px;
    }

    .teacher-workbench-quick-card {
        min-height: 94px;
        padding: 11px 5px 10px;
    }

    .teacher-point-ranking-main-tab,
    .teacher-point-ranking-range-tab {
        min-height: 38px;
        font-size: 14px;
    }

    .teacher-point-class-overview-card {
        grid-template-columns: minmax(0, 1fr) 78px;
        padding: 15px;
        min-height: 104px;
    }

    .teacher-point-class-overview-main {
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-point-class-overview-label {
        font-size: 13px;
    }

    .teacher-point-class-overview-value-row strong {
        font-size: 28px;
    }

    .teacher-point-class-overview-card .teacher-point-class-overview-metric:first-child strong {
        font-size: 32px;
    }

    .teacher-point-class-overview-art {
        justify-content: flex-end;
        min-height: 70px;
        min-width: 78px;
    }

    .teacher-point-trophy-illustration {
        width: 72px;
        height: 68px;
    }

    .teacher-point-trophy-illustration i {
        font-size: 52px;
    }

    .teacher-point-ranking-table-head {
        display: none;
    }

    .teacher-point-class-row,
    .teacher-point-teacher-row {
        gap: 8px;
        min-height: 74px;
        padding: 12px;
    }

    .teacher-point-class-row {
        grid-template-columns: 42px minmax(0, 1fr) auto auto;
    }

    .teacher-point-teacher-row {
        grid-template-columns: 42px minmax(0, 1fr) auto auto auto;
    }

    .teacher-point-class-score-cell,
    .teacher-point-teacher-score-cell,
    .teacher-point-class-change-cell,
    .teacher-point-teacher-student-cell {
        justify-self: start;
        font-size: 13px;
    }

    .teacher-point-class-info-cell,
    .teacher-point-teacher-info-cell {
        gap: 10px;
    }

    .teacher-point-class-avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .teacher-point-class-copy strong {
        font-size: 14px;
    }

    .teacher-point-class-copy small {
        font-size: 11px;
    }

    .teacher-point-teacher-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-point-rule-board {
        padding: 12px;
    }

    .teacher-point-rule-board-title,
    .teacher-point-source-board-head span {
        font-size: 17px;
    }

    .teacher-point-rule-item {
        grid-template-columns: 36px minmax(0, 1fr) 72px;
        align-items: center;
        min-height: 56px;
    }

    .teacher-point-rule-score {
        width: 72px;
        grid-column: auto;
        align-self: center;
        justify-self: end;
        font-size: 15px;
    }

    .teacher-point-teacher-metric-card {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 6px;
        padding: 12px 8px;
        height: 90px;
    }

    .teacher-point-teacher-metric-value {
        font-size: 20px;
    }

    .teacher-point-teacher-rank-inline small {
        font-size: 12px;
    }

    .teacher-point-teacher-metric-copy strong {
        font-size: 12px;
    }

    .teacher-point-teacher-metric-subline {
        font-size: 10px;
    }

    .teacher-point-source-board {
        padding: 12px;
    }

    .teacher-point-source-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .teacher-point-source-copy {
        align-items: center;
    }

    .teacher-point-source-points {
        font-size: 13px;
    }

    .teacher-point-inline-link-btn {
        justify-self: start;
        font-size: 13px;
    }

    .teacher-point-primary-btn,
    .teacher-point-secondary-btn {
        min-height: 48px;
        border-radius: 16px;
        font-size: 15px;
    }

    .teacher-point-rule-modal-item {
        grid-template-columns: 24px minmax(0, 1fr) 64px;
    }

    .teacher-point-rule-modal-score {
        width: 64px;
        grid-column: auto;
    }

    .teacher-workbench-profile-card {
        padding: 14px;
        border-radius: 20px;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .teacher-workbench-profile-main {
        gap: 11px;
    }

    .teacher-workbench-profile-main .profile-avatar-ring.avatar-md {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }

    .teacher-workbench-profile-text { gap: 4px; }
    .teacher-workbench-profile-name { gap: 7px; font-size: 20px; }

    .teacher-workbench-role-badge {
        min-height: 22px;
        padding: 0 8px;
        font-size: 11px;
    }

    .teacher-workbench-profile-line {
        gap: 5px;
        font-size: 12px;
    }

    .teacher-workbench-score-panel {
        padding: 12px 0 0;
        gap: 8px;
    }

    .teacher-workbench-score-head {
        align-items: flex-start;
        gap: 8px;
    }

    .teacher-workbench-score-label { font-size: 12px; }

    .teacher-workbench-score-value {
        gap: 6px;
        font-size: 34px;
    }

    .teacher-workbench-score-value i { font-size: 18px; }

    .teacher-workbench-notice-inline {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .teacher-workbench-score-link {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .teacher-workbench-quick-grid,
    .teacher-workbench-resource-grid {
        gap: 8px;
    }

    .teacher-workbench-quick-card {
        min-height: 84px;
        padding: 10px 4px 8px;
        border-radius: 16px;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .teacher-workbench-quick-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 15px;
    }

    .teacher-workbench-quick-text strong { font-size: 10px; line-height: 1.15; }
    .teacher-workbench-quick-text small { font-size: 9px; }

    .teacher-account-settings-grid {
        grid-template-columns: 1fr;
    }

    .teacher-account-password-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-role-home-page .teacher-theme-class-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .teacher-role-home-page .teacher-theme-class-row-side {
        min-width: 0;
        align-items: flex-start;
    }

    .teacher-role-home-page .teacher-theme-class-row-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .teacher-role-home-page .teacher-campus-style-grid {
        grid-template-columns: 1fr;
    }
}

.summer-book-multi-option .form-check-input {
    margin-top: 2px;
}

.teacher-portal-page .app-nav,
.teacher-homework-page .app-nav {
    background:
        linear-gradient(115deg, rgba(8, 47, 73, 0.94) 0%, rgba(13, 148, 136, 0.94) 50%, rgba(2, 132, 199, 0.94) 100%),
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18), transparent 28%);
    box-shadow: 0 14px 36px rgba(10, 30, 53, 0.25);
}

.teacher-portal-nav-btn {
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.teacher-portal-nav-btn-accent {
    border: none;
    color: #132238;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.24);
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-style-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border-radius: 20px;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-thumb {
    width: 118px;
    height: 88px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef5ff;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-main {
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-main strong {
    margin-bottom: 0;
    font-size: 17px;
    line-height: 1.35;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    line-height: 1.45;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-meta-stats {
    color: #6d7b95;
}

.teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-action {
    margin-top: 0;
    align-self: flex-start;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(61, 126, 255, 0.24);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
}

@media (max-width: 1024px) {
    .teacher-campus-detail-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .teacher-campus-works-head {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-campus-summary-media {
        width: 96px;
        min-height: 128px;
    }

    .teacher-campus-summary-media img,
    .teacher-campus-summary-media .teacher-cover-placeholder {
        width: 96px;
        height: 96px;
    }

    .teacher-campus-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-campus-detail-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-campus-detail-filter-grid .teacher-primary-btn,
    .teacher-campus-detail-filter-grid .teacher-primary-btn.block {
        grid-column: 1 / -1;
    }

    .teacher-campus-class-row {
        grid-template-columns: 120px minmax(0, 1fr) 86px;
        gap: 10px;
        padding: 12px;
    }

    .teacher-campus-class-previews {
        grid-template-columns: repeat(2, 52px);
        width: 112px;
    }

    .teacher-campus-class-preview-item,
    .teacher-campus-class-preview-empty {
        width: 52px;
    }

    .teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-thumb {
        width: 108px;
        height: 84px;
    }

    .teacher-campus-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .teacher-campus-page {
        padding-bottom: calc(130px + env(safe-area-inset-bottom));
    }

    .teacher-campus-works-head h2 {
        font-size: 18px;
    }

    .teacher-campus-summary-shell {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 124px;
    }

    .teacher-campus-summary-media {
        width: 88px;
        min-height: 124px;
    }

    .teacher-campus-summary-media img,
    .teacher-campus-summary-media .teacher-cover-placeholder {
        width: 88px;
        height: 88px;
    }

    .teacher-campus-summary-title {
        font-size: 17px;
    }

    .teacher-campus-detail-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-campus-class-row {
        grid-template-columns: 112px minmax(0, 1fr) 84px;
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
    }

    .teacher-campus-class-previews {
        grid-template-columns: repeat(2, 50px);
        width: 108px;
        gap: 6px;
    }

    .teacher-campus-class-preview-item,
    .teacher-campus-class-preview-empty {
        width: 50px;
    }

    .teacher-campus-class-name {
        font-size: 14px;
    }

    .teacher-campus-class-count {
        font-size: 17px;
    }

    .teacher-campus-class-metrics {
        font-size: 11px;
    }

    .teacher-campus-class-action.teacher-outline-btn {
        min-width: 82px;
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .teacher-role-home-page .teacher-home-campus-panel .teacher-campus-card-thumb {
        width: 100px;
        height: 80px;
    }

    .teacher-campus-work-grid {
        gap: 10px;
    }
}

.teacher-portal-main,
.teacher-homework-main {
    padding-top: 28px;
    padding-bottom: 40px;
}

.teacher-portal-alert {
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.teacher-portal-hero,
.teacher-homework-hero {
    position: relative;
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px 26px;
    overflow: hidden;
    border: 1px solid rgba(13, 148, 136, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 25%),
        linear-gradient(135deg, rgba(10, 61, 78, 0.96) 0%, rgba(13, 148, 136, 0.94) 55%, rgba(14, 165, 233, 0.88) 100%);
    color: #effcf9;
    box-shadow: 0 20px 44px rgba(8, 47, 73, 0.22);
}

.teacher-portal-hero::after,
.teacher-homework-hero::after {
    content: "";
    position: absolute;
    inset: auto -70px -100px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.teacher-portal-hero {
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
    align-items: stretch;
}

.teacher-homework-hero {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
}

.teacher-portal-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-family: var(--font-family-display);
    font-size: 12px;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
}

.teacher-portal-hero-main,
.teacher-homework-hero-main {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.teacher-portal-hero-main h1,
.teacher-homework-hero-main h1 {
    margin: 0;
    font-family: var(--font-family-display);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: 0.3px;
}

.teacher-portal-hero-main h1 {
    display: grid;
    gap: 8px;
}

.teacher-portal-hero-main h1 small {
    font-family: var(--font-family-base);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(239, 252, 249, 0.8);
}

.teacher-portal-hero-main p,
.teacher-homework-hero-main p {
    margin: 0;
    max-width: 680px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(239, 252, 249, 0.84);
}

.teacher-portal-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.teacher-portal-chip-row.compact {
    justify-content: flex-end;
}

.teacher-portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    font-size: 13px;
}

.teacher-portal-chip strong {
    color: #ffffff;
}

.teacher-portal-hero-side,
.teacher-homework-hero-tips {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
}

.teacher-portal-hero-badge {
    display: grid;
    gap: 6px;
    align-content: center;
    min-height: 180px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(10px);
}

.teacher-portal-hero-badge span,
.teacher-portal-hero-badge small {
    color: rgba(239, 252, 249, 0.8);
}

.teacher-portal-hero-badge strong {
    font-family: var(--font-family-display);
    font-size: 60px;
    line-height: 1;
    color: #ffffff;
}

.teacher-portal-hero-btn {
    border: none;
    border-radius: 16px;
    padding: 14px 18px;
    color: #0f3d4b;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(7, 89, 133, 0.18);
}

.teacher-homework-hero-tips {
    align-content: end;
}

.teacher-homework-hero-tips span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
}

.teacher-portal-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.teacher-portal-metric-card {
    display: grid;
    gap: 8px;
    padding: 20px 22px;
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.teacher-portal-metric-card span,
.teacher-portal-metric-card small {
    color: var(--muted);
}

.teacher-portal-metric-card strong {
    font-family: var(--font-family-display);
    font-size: 40px;
    line-height: 1;
    color: var(--ink);
}

.teacher-portal-metric-card.warn strong {
    color: #c2410c;
}

.teacher-portal-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 18px;
    margin-bottom: 22px;
}

.teacher-portal-panel,
.teacher-homework-card {
    overflow: hidden;
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.teacher-portal-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.teacher-portal-panel-head-tight {
    margin-bottom: 0;
}

.teacher-portal-panel-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.teacher-portal-panel-subtitle {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
}

.teacher-portal-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: #0f766e;
    background: rgba(13, 148, 136, 0.09);
    border: 1px solid rgba(13, 148, 136, 0.16);
}

.teacher-portal-form-grid label,
.teacher-homework-page .form-label {
    font-weight: 700;
    color: #334155;
}

.teacher-portal-primary-btn {
    border: none;
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.18);
}

.teacher-portal-soft-btn {
    border-radius: 14px;
}

.teacher-portal-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 18px;
    color: #92400e;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.92));
}

.teacher-portal-rule i {
    font-size: 18px;
}

.teacher-portal-table-wrap {
    padding: 6px 6px 0;
}

.teacher-portal-table {
    margin-bottom: 0;
}

.teacher-portal-table > :not(caption) > * > * {
    padding: 18px 16px;
    border-bottom-color: rgba(148, 163, 184, 0.18);
    vertical-align: top;
}

.teacher-portal-table thead th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(241, 245, 249, 0.92);
}

.teacher-portal-work-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.teacher-portal-work-meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

.teacher-portal-score-cell {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-portal-score-cell strong {
    font-family: var(--font-family-display);
    font-size: 30px;
    line-height: 1;
}

.teacher-portal-review-form {
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(13, 148, 136, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(247, 250, 252, 0.9), rgba(255, 255, 255, 0.94));
}

.teacher-portal-field-label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #475467;
}

.teacher-portal-checkbox-wrap {
    padding-top: 28px;
}

.teacher-portal-empty {
    font-size: 14px;
}

.teacher-portal-footer {
    padding: 18px 22px 22px;
}

.teacher-homework-card .card-header {
    padding: 18px 22px;
    font-size: 16px;
}

.teacher-homework-tabs {
    gap: 10px;
    border-bottom: none;
}

.teacher-homework-tabs .nav-link {
    border: 1px solid rgba(13, 148, 136, 0.12);
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    color: #475467;
    background: rgba(255, 255, 255, 0.82);
}

.teacher-homework-tabs .nav-link.active {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(120deg, #0d9488, #0ea5e9);
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.18);
}

@media (max-width: 991.98px) {
    .teacher-portal-hero,
    .teacher-homework-hero,
    .teacher-portal-top-grid {
        grid-template-columns: 1fr;
    }

    .teacher-portal-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teacher-portal-panel-head,
    .teacher-portal-chip-row.compact {
        flex-direction: column;
        align-items: flex-start;
    }

    .teacher-portal-review-form {
        padding: 14px;
    }

    .teacher-portal-checkbox-wrap {
        padding-top: 0;
    }
}

@media (max-width: 767.98px) {
    .teacher-portal-main,
    .teacher-homework-main {
        padding-top: 20px;
    }

    .teacher-portal-nav .container {
        gap: 10px;
    }

    .teacher-portal-hero,
    .teacher-homework-hero {
        padding: 20px 18px;
        border-radius: 24px;
    }

    .teacher-portal-hero-badge {
        min-height: auto;
    }

    .teacher-portal-hero-badge strong {
        font-size: 48px;
    }

    .teacher-portal-metric-grid {
        grid-template-columns: 1fr;
    }

    .teacher-portal-metric-card {
        padding: 18px;
    }

    .teacher-portal-panel,
    .teacher-homework-card {
        border-radius: 22px;
    }

    .teacher-portal-table > :not(caption) > * > * {
        padding: 0;
        border-bottom: none;
    }

    .teacher-portal-table thead {
        display: none;
    }

    .teacher-portal-table,
    .teacher-portal-table tbody,
    .teacher-portal-table tr,
    .teacher-portal-table td {
        display: block;
        width: 100%;
    }

    .teacher-portal-table tbody {
        padding: 10px 12px 18px;
    }

    .teacher-portal-table tr {
        padding: 16px;
        border: 1px solid rgba(13, 148, 136, 0.12);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    }

    .teacher-portal-table tr + tr {
        margin-top: 14px;
    }

    .teacher-portal-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0;
    }

    .teacher-portal-table td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .teacher-portal-table td[colspan] {
        display: block;
        text-align: center;
        padding: 30px 18px;
    }

    .teacher-portal-table td[colspan]::before {
        display: none;
    }

    .teacher-portal-work-title {
        font-size: 17px;
    }

    .teacher-portal-review-form {
        padding: 12px;
    }

    .teacher-homework-tabs .nav-link {
        width: 100%;
        text-align: left;
    }
}

/*
 * Ranking page mobile hard overrides.
 * These selectors intentionally sit at the end of the stylesheet to beat older
 * mobile media rules that previously collapsed the summary areas into single
 * columns on phones.
 */
.teacher-point-ranking-panel .teacher-point-ranking-shell,
.teacher-point-ranking-panel .teacher-point-ranking-board,
.teacher-point-ranking-panel .teacher-point-ranking-view,
.teacher-point-ranking-panel .teacher-point-class-overview-card,
.teacher-point-ranking-panel .teacher-point-class-overview-main,
.teacher-point-ranking-panel .teacher-point-teacher-metric-grid,
.teacher-point-ranking-panel .teacher-point-teacher-metric-card,
.teacher-point-ranking-panel .teacher-point-teacher-metric-copy,
.teacher-point-ranking-panel .teacher-point-class-copy,
.teacher-point-ranking-panel .teacher-point-class-info-cell,
.teacher-point-ranking-panel .teacher-point-teacher-info-cell {
    min-width: 0;
}

.teacher-point-ranking-panel .teacher-point-ranking-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;
}

.teacher-point-ranking-panel .teacher-point-ranking-topbar {
    min-height: 40px;
    padding: 0 2px;
}

.teacher-point-ranking-panel .teacher-point-ranking-board {
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero {
    min-height: 152px;
    padding: 14px;
    border-radius: 20px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-workbench-hero-main {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-workbench-hero-avatar,
.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-avatar {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-name-row {
    gap: 8px;
    padding-right: 88px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-name {
    font-size: 21px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-role-badge {
    min-height: 22px;
    padding: 0 8px;
    font-size: 11px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-meta-grid,
.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-meta-grid .teacher-point-hero-meta-item,
.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-meta-line {
    font-size: 13px;
}

.teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-switch-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
}

.teacher-point-ranking-panel .teacher-point-class-overview-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    padding: 14px;
    min-height: 112px;
    border-radius: 16px;
    overflow: hidden;
}

.teacher-point-ranking-panel .teacher-point-class-overview-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px;
    row-gap: 0;
}

.teacher-point-ranking-panel .teacher-point-class-overview-metric {
    gap: 6px;
}

.teacher-point-ranking-panel .teacher-point-class-overview-label {
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}

.teacher-point-ranking-panel .teacher-point-class-overview-value-row {
    gap: 4px;
}

.teacher-point-ranking-panel .teacher-point-class-overview-value-row strong {
    font-size: clamp(26px, 8vw, 32px);
    line-height: 34px;
    white-space: nowrap;
}

.teacher-point-ranking-panel .teacher-point-class-overview-card .teacher-point-class-overview-metric:first-child strong {
    font-size: clamp(28px, 8.4vw, 34px);
}

.teacher-point-ranking-panel .teacher-point-class-overview-unit,
.teacher-point-ranking-panel .teacher-point-change {
    font-size: 12px;
    line-height: 16px;
}

.teacher-point-ranking-panel .teacher-point-class-overview-art {
    width: 72px;
    min-width: 72px;
    min-height: 72px;
    align-items: center;
    justify-content: center;
}

.teacher-point-ranking-panel .teacher-point-trophy-illustration {
    width: 68px;
    height: 68px;
}

.teacher-point-ranking-panel .teacher-point-trophy-illustration i {
    font-size: 50px;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-card {
    height: 96px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    border-radius: 12px;
    overflow: hidden;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
    border-radius: 10px;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-copy {
    gap: 4px;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-copy strong {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-ranking-panel .teacher-point-teacher-metric-value {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 28px;
    white-space: nowrap;
}

.teacher-point-ranking-panel .teacher-point-teacher-rank-inline {
    gap: 4px;
}

.teacher-point-ranking-panel .teacher-point-teacher-rank-inline small,
.teacher-point-ranking-panel .teacher-point-teacher-metric-subline {
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
}

.teacher-point-ranking-panel .teacher-point-class-row,
.teacher-point-ranking-panel .teacher-point-teacher-row {
    min-height: 70px;
    padding: 10px 12px;
}

.teacher-point-ranking-panel .teacher-point-class-table-head,
.teacher-point-ranking-panel .teacher-point-class-row {
    grid-template-columns: 42px minmax(0, 1fr) 58px 42px;
}

.teacher-point-ranking-panel .teacher-point-teacher-table-head,
.teacher-point-ranking-panel .teacher-point-teacher-row {
    grid-template-columns: 42px minmax(0, 1fr) 58px 42px 48px;
}

.teacher-point-ranking-panel .teacher-point-class-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.teacher-point-ranking-panel .teacher-point-class-copy strong {
    font-size: 14px;
    line-height: 18px;
    -webkit-line-clamp: 1;
}

.teacher-point-ranking-panel .teacher-point-teacher-info-cell .teacher-point-class-copy {
    gap: 2px;
}

.teacher-point-ranking-panel .teacher-point-teacher-info-cell .teacher-point-class-copy strong,
.teacher-point-ranking-panel .teacher-point-teacher-info-cell .teacher-point-class-copy small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-ranking-panel .teacher-point-teacher-info-cell .teacher-point-class-copy strong {
    font-size: 13px;
    line-height: 17px;
    -webkit-line-clamp: 1;
}

.teacher-point-ranking-panel .teacher-point-teacher-info-cell .teacher-point-class-copy small {
    font-size: 11px;
    line-height: 15px;
}

.teacher-point-ranking-panel .teacher-point-class-copy small,
.teacher-point-ranking-panel .teacher-point-class-score-cell em,
.teacher-point-ranking-panel .teacher-point-class-score-cell,
.teacher-point-ranking-panel .teacher-point-teacher-score-cell,
.teacher-point-ranking-panel .teacher-point-teacher-student-cell,
.teacher-point-ranking-panel .teacher-point-class-change-cell {
    font-size: 12px;
}

.teacher-point-ranking-panel .teacher-point-class-copy small:empty {
    display: none;
}

.teacher-point-ranking-panel .teacher-point-class-score-cell,
.teacher-point-ranking-panel .teacher-point-teacher-score-cell,
.teacher-point-ranking-panel .teacher-point-teacher-student-cell,
.teacher-point-ranking-panel .teacher-point-class-change-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.teacher-point-ranking-panel .teacher-point-class-change-cell {
    font-weight: 700;
}

.teacher-point-ranking-panel .teacher-point-rule-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
}

.teacher-point-ranking-panel .teacher-point-rule-item {
    grid-template-columns: 40px minmax(0, 1fr) 72px !important;
    gap: 10px;
    min-height: 60px;
    align-items: center !important;
    padding: 0;
}

.teacher-point-ranking-panel .teacher-point-rule-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.teacher-point-ranking-panel .teacher-point-rule-copy strong {
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-ranking-panel .teacher-point-rule-copy small {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-ranking-panel .teacher-point-rule-score {
    width: 72px;
    align-self: center;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    justify-self: end;
    text-align: right;
}

.teacher-point-ranking-panel .teacher-point-source-board {
    padding: 14px;
    gap: 12px;
}

.teacher-point-ranking-panel .teacher-point-source-board-head span {
    font-size: 17px;
}

.teacher-point-ranking-panel .teacher-point-source-board-head small {
    font-size: 12px;
}

.teacher-point-ranking-panel .teacher-point-source-list {
    gap: 10px;
}

.teacher-point-ranking-panel .teacher-point-source-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.teacher-point-ranking-panel .teacher-point-source-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.teacher-point-ranking-panel .teacher-point-source-top strong {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-point-ranking-panel .teacher-point-source-top small,
.teacher-point-ranking-panel .teacher-point-source-points {
    font-size: 12px;
}

.teacher-point-ranking-panel .teacher-point-source-bar {
    height: 8px;
}

.teacher-point-ranking-panel .teacher-point-source-total {
    font-size: 14px;
}

.teacher-point-ranking-panel .teacher-point-action-row {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.teacher-point-ranking-panel .teacher-point-rule-page-card {
    padding: 14px;
    border-radius: 20px;
}

.teacher-point-ranking-panel .teacher-point-rule-page-head h2 {
    font-size: 18px;
}

.teacher-point-ranking-panel .teacher-point-rule-page-head p,
.teacher-point-ranking-panel .teacher-point-rule-modal-note {
    font-size: 12px;
}

.teacher-point-ranking-panel .teacher-point-inline-link-btn {
    justify-self: start;
    min-height: 34px;
    font-size: 14px;
}

.teacher-point-ranking-panel .teacher-point-primary-btn,
.teacher-point-ranking-panel .teacher-point-secondary-btn {
    min-height: 46px;
    border-radius: 16px;
    font-size: 15px;
}

@media (max-width: 390px) {
    .teacher-point-ranking-panel .teacher-point-ranking-shell {
        gap: 10px;
    }

    .teacher-point-ranking-panel .teacher-point-ranking-hero {
        min-height: 148px;
        padding: 13px 14px;
    }

    .teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-workbench-hero-main {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
    }

    .teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-workbench-hero-avatar,
    .teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    .teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-name {
        font-size: 19px;
    }

    .teacher-point-ranking-panel .teacher-point-ranking-hero .teacher-point-hero-name-row {
        padding-right: 84px;
    }
}

@media (max-width: 360px) {
    .teacher-point-ranking-panel .teacher-point-ranking-board {
        padding: 12px;
        gap: 12px;
    }

    .teacher-point-ranking-panel .teacher-point-class-overview-card {
        grid-template-columns: minmax(0, 1fr) 58px !important;
        padding: 12px 10px;
        min-height: 104px;
    }

    .teacher-point-ranking-panel .teacher-point-class-overview-main {
        column-gap: 6px;
    }

    .teacher-point-ranking-panel .teacher-point-class-overview-label {
        font-size: 12px;
    }

    .teacher-point-ranking-panel .teacher-point-class-overview-value-row strong {
        font-size: 28px;
        line-height: 32px;
    }

    .teacher-point-ranking-panel .teacher-point-class-overview-art {
        width: 58px;
        min-width: 58px;
        min-height: 58px;
    }

    .teacher-point-ranking-panel .teacher-point-trophy-illustration {
        width: 56px;
        height: 56px;
    }

    .teacher-point-ranking-panel .teacher-point-trophy-illustration i {
        font-size: 42px;
    }

    .teacher-point-ranking-panel .teacher-point-teacher-metric-grid {
        gap: 6px !important;
    }

    .teacher-point-ranking-panel .teacher-point-teacher-metric-card {
        height: 90px !important;
        padding: 8px 6px !important;
        gap: 6px !important;
    }

    .teacher-point-ranking-panel .teacher-point-teacher-metric-copy strong {
        font-size: 11px;
    }

    .teacher-point-ranking-panel .teacher-point-teacher-metric-value {
        font-size: 20px;
        line-height: 24px;
    }

    .teacher-point-ranking-panel .teacher-point-teacher-rank-inline small,
    .teacher-point-ranking-panel .teacher-point-teacher-metric-subline {
        font-size: 10px;
        line-height: 13px;
    }

    .teacher-point-ranking-panel .teacher-point-rule-item {
        grid-template-columns: 34px minmax(0, 1fr) 64px !important;
        gap: 8px;
        min-height: 54px;
    }

    .teacher-point-ranking-panel .teacher-point-rule-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .teacher-point-ranking-panel .teacher-point-rule-copy strong {
        font-size: 14px;
    }

    .teacher-point-ranking-panel .teacher-point-rule-copy small {
        font-size: 11px;
    }

    .teacher-point-ranking-panel .teacher-point-rule-score {
        width: 64px;
        font-size: 13px;
    }

    .teacher-task-detail-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .teacher-task-detail-toolbar .teacher-outline-btn {
        min-height: 48px;
        padding: 0 14px;
    }

    .teacher-task-submission-group-head,
    .teacher-task-submission-group.collapsed {
        min-height: 48px;
        padding: 10px 12px;
    }

    .teacher-task-submission-group-head strong,
    .teacher-task-submission-group.collapsed strong {
        font-size: 16px;
    }

    .teacher-task-submission-group-head span {
        display: none;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending {
        gap: 8px;
        padding: 10px 12px;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-head {
        flex-direction: row;
        align-items: center;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-meta div {
        padding: 8px 9px;
        border-radius: 10px;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-meta strong,
    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-meta span {
        font-size: 11px;
    }

    .teacher-task-submission-group-body .teacher-review-submission-card.is-pending .teacher-review-submission-actions {
        flex-direction: row;
        align-items: center;
    }
}

.student-me-top-stack {
    display: grid;
    gap: 12px;
}

.student-me-page {
    display: grid;
    gap: 12px;
    align-content: start;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.student-me-subpage {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
}

.student-me-hero-card {
    display: grid;
    gap: 10px;
    padding: 17px 14px 15px;
    border-radius: 18px;
}

.student-me-hero-top {
    --student-me-action-gap: 6px;
    --student-me-action-tile-width: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.student-me-hero-main {
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 12px;
}

.student-me-hero-copy {
    min-width: 0;
    gap: 0;
    padding-top: 3px;
}

.student-me-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%),
        linear-gradient(135deg, #0877dd 0%, #00a98b 100%);
}

.student-me-avatar-wrap,
.student-me-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
}

.student-me-avatar-wrap {
    border-width: 3px;
    box-shadow: 0 10px 20px rgba(9, 56, 118, 0.24);
}

.student-me-info {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 1px;
}

.student-me-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: nowrap;
}

.student-me-name {
    min-width: 84px;
    flex: 1 1 auto;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
}

.student-me-role-badge {
    flex: 0 0 auto;
    min-height: 18px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8fff2;
    color: #079455;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: none;
}

.student-me-meta-grid {
    gap: 0;
    margin-top: 7px;
}

.student-me-school-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
}

.student-me-school-row {
    margin-top: 6px;
}

.student-me-school-row i {
    font-size: 11px;
    opacity: 0.92;
}

.student-me-school {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-me-class-number-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 12px;
    padding-left: 70px;
    padding-right: 2px;
    color: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    line-height: 1.35;
}

.student-me-class-text-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: none;
    min-width: 0;
}

.student-me-class-text-wrap i {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: 0.92;
}

.student-me-class-text {
    flex: 0 0 auto;
    white-space: nowrap;
}

.student-me-divider {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.62);
}

.student-me-class-number-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.student-me-number-prefix {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.78);
}

.student-me-student-number {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.student-me-number {
    display: inline-block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-me-copy-btn {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
}

.student-me-actions,
.student-me-quick-grid {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--student-me-action-gap);
    width: auto;
    flex: 0 0 auto;
    margin-left: 8px;
}

.student-me-hero-top.has-admin-console .student-me-actions {
    flex-wrap: wrap;
    width: calc((var(--student-me-action-tile-width) * 2) + var(--student-me-action-gap));
    row-gap: 6px;
}

.student-me-admin-console-btn {
    flex: 0 0 100%;
    min-height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #075985;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.student-me-admin-console-btn i {
    font-size: 12px;
    line-height: 1;
}

.student-me-quick-tile {
    width: var(--student-me-action-tile-width);
    min-width: var(--student-me-action-tile-width);
    height: 54px;
    min-height: 54px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    color: #143463;
    text-decoration: none;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.student-me-quick-icon {
    width: 17px;
    height: 17px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.18));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 10px;
}

.student-me-quick-text {
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 414px) {
    .student-me-hero-top {
        --student-me-action-gap: 4px;
        --student-me-action-tile-width: 42px;
        gap: 6px;
    }

    .student-me-actions {
        margin-left: 4px;
    }

    .student-me-quick-tile {
        min-height: 52px;
        height: 52px;
        border-radius: 11px;
    }

    .student-me-quick-text {
        font-size: 8.5px;
    }

    .student-me-hero-top.has-admin-console .student-me-actions {
        row-gap: 5px;
    }

    .student-me-admin-console-btn {
        min-height: 25px;
        padding: 4px 6px;
        font-size: 10.5px;
    }

    .student-me-class-number-row {
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 6px;
        padding-left: 66px;
    }

    .student-me-class-text-wrap {
        flex: 0 0 100%;
    }

    .student-me-class-number-divider {
        display: none;
    }
}

.student-me-hero-toolbar {
    margin-top: 4px;
}

.student-me-points-card {
    padding: 9px 12px;
}

.student-me-points-star {
    width: 18px;
    height: 18px;
    background: #f5b832;
    color: #fff;
    box-shadow: none;
}

.student-me-toolbar-actions {
    align-items: stretch;
}

.student-me-ranking-entry {
    border-radius: 14px;
    border-color: rgba(222, 231, 244, 0.96);
    background: rgba(255, 255, 255, 0.96);
    min-height: 62px;
    padding: 0 10px;
}

.student-me-ranking-entry .teacher-point-ranking-copy {
    gap: 1px;
}

.student-me-ranking-entry .teacher-point-ranking-copy strong {
    font-size: 14px;
}

.student-me-ranking-entry .teacher-point-ranking-copy small {
    color: #7c8ea8;
    font-size: 10px;
    line-height: 1.15;
}

.student-me-notice-btn {
    width: 56px;
    min-width: 56px;
    min-height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(222, 231, 244, 0.96);
    background: rgba(255, 255, 255, 0.94);
    color: #16396d;
}

.student-me-notice-btn i {
    font-size: 22px;
}

.student-me-stats-row {
    display: grid;
    grid-template-columns: minmax(84px, 0.74fr) minmax(0, 1.26fr);
    gap: 7px;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    align-items: stretch;
}

.student-me-stats-row .student-point-summary-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 7px;
    align-items: stretch;
    min-width: 0;
}

.student-me-stat-card {
    height: 58px;
    min-height: 58px;
    border: 1px solid rgba(222, 231, 244, 0.96);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

.student-me-score-card {
    text-align: left;
}

.student-me-score-card .score-label {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    color: #253a5c;
}

.student-me-score-card .score-value-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.student-me-score-card .score-value {
    font-size: 23px;
    line-height: 1;
    font-weight: 900;
    color: #10233f;
    letter-spacing: 0;
}

.student-me-rank-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
}

.student-me-rank-card .rank-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.student-me-rank-card .rank-icon i {
    font-size: 18px;
}

.student-me-rank-card .rank-copy {
    min-width: 0;
}

.student-me-rank-card .rank-title {
    min-width: 0;
    font-size: 12px;
    line-height: 1.15;
    color: #10233f;
    font-weight: 800;
    white-space: nowrap;
}

.student-me-rank-card .rank-subtitle {
    display: block;
    white-space: nowrap;
    font-size: 9px;
}

.student-me-rank-card .rank-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: #6b7a90;
}

.student-me-notice-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.student-me-notice-card .notice-icon {
    width: 20px;
    height: 20px;
    color: #176bff;
}

.student-me-section-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
}

.student-me-section-head {
    margin-bottom: 0;
}

.student-me-section-head-inline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.student-me-section-head-inline > div {
    min-width: 0;
}

.student-me-section-head h2 {
    margin-bottom: 4px;
}

.student-me-section-head p {
    margin-bottom: 0;
}

.student-me-section-link {
    flex: 0 0 auto;
    border: 1px solid rgba(210, 221, 237, 0.9);
    border-radius: 999px;
    background: #fff;
    color: #5c6f8c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.student-me-section-link i {
    font-size: 12px;
}

.student-reading-task-module {
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    scroll-margin-bottom: calc(108px + env(safe-area-inset-bottom));
}

.student-reading-task-loading,
.student-reading-task-error,
.student-reading-task-empty {
    border-radius: 20px;
    padding: 16px 15px;
    background: linear-gradient(180deg, rgba(243, 249, 255, 0.98), rgba(232, 244, 255, 0.92));
    color: #4f6584;
    font-size: 13px;
    line-height: 1.65;
}

.student-reading-task-error {
    color: #c2410c;
    background: rgba(255, 247, 237, 0.96);
}

.student-reading-task-empty {
    display: grid;
    gap: 5px;
    justify-items: start;
}

.student-reading-task-empty::before {
    content: "\F4CA";
    font-family: bootstrap-icons, sans-serif;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.10);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.student-reading-task-empty strong {
    color: #173a78;
    font-size: 15px;
}

.student-reading-task-list {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.student-reading-task-card {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    border-radius: 22px;
    border: 1px solid rgba(163, 198, 255, 0.44);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 36px rgba(27, 71, 149, 0.12);
    overflow: hidden;
    box-sizing: border-box;
}

.student-reading-task-card-main {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}

.student-reading-task-cover-wrap {
    position: relative;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    height: 112px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #edf6ff 0%, #dfefff 100%);
    border: 1px solid rgba(191, 219, 254, 0.88);
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.10);
    flex-shrink: 0;
}

.student-reading-task-cover {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0;
    object-fit: cover;
    display: block;
    background: #edf6ff;
}

.student-reading-task-detail-cover-wrap.is-fallback .student-reading-task-detail-cover,
.student-reading-task-cover-wrap.is-fallback .student-reading-task-cover {
    opacity: 0.18;
}

.student-reading-task-cover-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #5373a3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.student-reading-task-detail-cover-wrap.is-fallback .student-reading-task-cover-fallback,
.student-reading-task-cover-wrap.is-fallback .student-reading-task-cover-fallback {
    display: flex;
}

.student-reading-task-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: start;
}

.student-reading-task-copy-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.student-reading-task-copy-head strong {
    color: #173a78;
    font-size: 18px;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.student-reading-task-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    max-width: 100%;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-reading-task-badge.is-progress {
    background: rgba(22, 163, 74, 0.14);
    color: #15803d;
}

.student-reading-task-badge.is-wait {
    background: rgba(37, 99, 235, 0.14);
    color: #2563eb;
}

.student-reading-task-badge.is-submitted,
.student-reading-task-badge.is-completed {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

.student-reading-task-badge.is-expired {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

.student-reading-task-meta,
.student-reading-task-detail-meta {
    display: grid;
    gap: 6px;
    color: #5d7391;
    font-size: 13px;
    min-width: 0;
}

.student-reading-task-meta span,
.student-reading-task-detail-meta span {
    display: block;
    min-width: 0;
}

.student-reading-task-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.student-reading-task-progress-meta {
    color: #3360b4;
    font-size: 13px;
    font-weight: 700;
}

.student-reading-task-progress-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(221, 226, 236, 0.96);
    overflow: hidden;
}

.student-reading-task-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #28d7a1, #377dff);
}

.student-reading-task-progress span {
    color: #377dff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-reading-task-info-line,
.student-reading-task-deadline {
    color: #47617e;
    font-size: 13px;
    line-height: 1.6;
}

.student-reading-task-guide {
    display: grid;
    gap: 6px;
    border-radius: 16px;
    padding: 12px 13px;
    background: linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(233, 243, 255, 0.92));
    color: #183153;
    font-size: 13px;
    line-height: 1.6;
}

.student-reading-task-guide strong {
    color: #2d5aa8;
    font-weight: 800;
}

.student-reading-task-guide p {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.student-reading-task-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.student-reading-task-actions > button:only-child,
.student-reading-task-actions > button:last-child:nth-child(3),
.student-reading-task-actions > button:last-child:nth-child(4) {
    grid-column: 1 / -1;
}

.student-reading-task-inline-detail {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin-top: 2px;
    padding: 14px 0 2px;
    border-top: 1px solid rgba(191, 219, 254, 0.76);
    scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom));
}

.student-reading-task-inline-detail-body {
    min-width: 0;
}

.student-reading-task-inline-detail-actions {
    display: grid;
    gap: 6px;
}

.student-reading-task-inline-detail-action-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
}

.student-reading-task-inline-detail-action-row > button:only-child {
    grid-column: 1 / -1;
}

.student-reading-task-inline-detail-link {
    justify-self: center;
    color: #4d6f9c;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

.student-reading-task-secondary-btn,
.student-reading-task-primary-btn,
.student-reading-task-view-btn,
.student-reading-task-disabled-btn,
.student-reading-task-overlay-secondary,
.student-reading-task-overlay-primary,
.student-reading-task-overlay-disabled {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border-radius: 16px;
    border: 1px solid transparent;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.student-reading-task-secondary-btn,
.student-reading-task-view-btn,
.student-reading-task-overlay-secondary {
    background: #fff;
    color: #2251a7;
    border: 1px solid rgba(55, 125, 255, 0.22);
    box-shadow: 0 10px 20px rgba(35, 84, 165, 0.08);
}

.student-reading-task-primary-btn,
.student-reading-task-overlay-primary {
    background: linear-gradient(135deg, #2f7dff, #2254f4);
    color: #fff;
    box-shadow: 0 14px 28px rgba(34, 84, 244, 0.24);
}

.student-reading-task-disabled-btn,
.student-reading-task-overlay-disabled {
    background: rgba(226, 232, 240, 0.88);
    color: #7b8a9f;
    border-color: rgba(203, 213, 225, 0.94);
    box-shadow: none;
}

.student-reading-task-steps {
    border-radius: 16px;
    padding: 12px 13px;
    background: rgba(221, 246, 235, 0.92);
    display: grid;
    gap: 8px;
    overflow: hidden;
}

.student-reading-task-steps-title {
    color: #169b6b;
    font-size: 13px;
    font-weight: 800;
}

.student-reading-task-steps-flow,
.student-reading-task-detail-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #295476;
    font-size: 13px;
    font-weight: 700;
}

.student-reading-task-steps-flow span,
.student-reading-task-detail-steps span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
}

.student-reading-task-steps-flow i,
.student-reading-task-detail-steps i {
    color: #76a4ce;
    font-size: 12px;
}

html.student-reading-task-overlay-open,
body.student-reading-task-overlay-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.student-reading-task-overlay-open .bottom-nav {
    display: none;
}

.student-reading-task-overlay {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 2147483200;
    overflow: hidden;
    overscroll-behavior: none;
}

.student-reading-task-overlay-mask {
    position: absolute;
    inset: 0;
    background: rgba(232, 244, 255, 0.76);
    backdrop-filter: blur(8px);
}

.student-reading-task-overlay-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: 100%;
    max-width: min(100%, var(--mobile-shell-max-width));
    height: 100%;
    min-height: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f5faff 0%, #edf6ff 100%);
    box-shadow: 0 18px 54px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.student-reading-task-overlay-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    background: rgba(245, 250, 255, 0.96);
    border-bottom: 1px solid rgba(185, 210, 239, 0.78);
    backdrop-filter: blur(10px);
}

.student-reading-task-overlay-back,
.student-reading-task-overlay-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #204ea0;
    box-shadow: 0 10px 20px rgba(28, 61, 126, 0.08);
}

.student-reading-task-overlay-head-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-reading-task-overlay-head-copy strong {
    color: #173a78;
    font-size: 18px;
}

.student-reading-task-overlay-head-copy small {
    color: #6680a1;
    font-size: 12px;
}

.student-reading-task-overlay-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 12px 16px 20px;
    display: block;
}

.student-reading-task-overlay-actions {
    flex: 0 0 auto;
    display: grid;
    gap: 5px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(185, 210, 239, 0.78);
    backdrop-filter: blur(10px);
}

.student-reading-task-overlay-action-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
}

.student-reading-task-overlay-action-row > button:only-child {
    grid-column: 1 / -1;
}

.student-reading-task-overlay-link {
    justify-self: center;
    color: #4d6f9c;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}

.student-reading-task-detail-loading {
    border-radius: 18px;
    padding: 22px 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #48607d;
    text-align: center;
}

.student-reading-task-detail-loading.is-error {
    color: #c2410c;
}

.student-reading-detail-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.student-reading-detail-hero,
.student-reading-detail-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 28px rgba(29, 78, 216, 0.08);
}

.student-reading-detail-hero {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.student-reading-detail-hero-main {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.student-reading-detail-cover-wrap {
    position: relative;
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    height: 104px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #edf6ff 0%, #dfefff 100%);
    border: 1px solid rgba(191, 219, 254, 0.88);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

.student-reading-detail-cover {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0;
    object-fit: cover;
    display: block;
    background: #edf6ff;
}

.student-reading-detail-hero-copy {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.student-reading-detail-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.student-reading-detail-hero-head strong {
    color: #173a78;
    font-size: 17px;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.student-reading-detail-hero-book,
.student-reading-detail-hero-meta {
    color: #5c7392;
    font-size: 13px;
    line-height: 1.55;
}

.student-reading-detail-hero-book {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.student-reading-detail-hero-meta {
    display: grid;
    gap: 2px;
}

.student-reading-detail-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.student-reading-detail-progress span {
    color: #377dff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.student-reading-detail-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 6px;
    height: 48px;
    border-radius: 999px;
    background: #eef6ff;
    box-sizing: border-box;
}

.student-reading-detail-tab {
    flex: 1 1 0;
    width: auto;
    height: 36px;
    min-height: 36px;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #59708f;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-reading-detail-tab.is-active {
    background: #ffffff;
    color: #1f65e8;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.12);
}

.student-reading-detail-panel,
.student-reading-detail-stack,
.student-reading-detail-support-list {
    display: grid;
    gap: 10px;
}

.student-reading-detail-card {
    padding: 12px;
}

.student-reading-detail-focus-card {
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.98), rgba(236, 245, 255, 0.94));
}

.student-reading-detail-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.student-reading-detail-card-head strong {
    color: #173a78;
    font-size: 16px;
}

.student-reading-detail-card-head span {
    color: #6982a1;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.student-reading-detail-card-copy,
.student-reading-detail-mini-card p,
.student-reading-detail-week-note,
.student-reading-detail-support-empty {
    margin: 0;
    color: #314a67;
    font-size: 14px;
    line-height: 1.6;
}

.student-reading-detail-scope-shell {
    display: grid;
    gap: 10px;
}

.student-reading-detail-scope-shell.is-compact {
    margin-top: 4px;
}

.student-reading-detail-scope-empty {
    margin: 0;
    padding: 12px 13px;
    border-radius: 16px;
    background: rgba(243, 248, 255, 0.92);
    color: #5f7692;
    font-size: 14px;
    line-height: 1.6;
}

.student-reading-detail-scope-intro {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(47, 125, 255, 0.10);
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.student-reading-detail-scope-list {
    display: grid;
    gap: 10px;
}

.student-reading-detail-scope-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 13px;
    border-radius: 18px;
    border: 1px solid rgba(191, 219, 254, 0.84);
    background: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(239, 246, 255, 0.95));
    box-shadow: 0 12px 24px rgba(29, 78, 216, 0.06);
}

.student-reading-detail-scope-index {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.student-reading-detail-scope-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-reading-detail-scope-copy strong {
    color: #173a78;
    font-size: 14px;
    line-height: 1.58;
}

.student-reading-detail-scope-copy small {
    color: #536b88;
    font-size: 13px;
    line-height: 1.58;
}

.student-reading-detail-question-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.student-reading-detail-question-list li {
    position: relative;
    padding-left: 14px;
    color: #314a67;
    font-size: 14px;
    line-height: 1.58;
}

.student-reading-detail-question-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f7dff;
}

.student-reading-detail-inline-grid {
    display: grid;
    gap: 8px;
}

.student-reading-detail-mini-card {
    display: grid;
    gap: 7px;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(243, 248, 255, 0.98);
    border: 1px solid rgba(211, 226, 245, 0.92);
}

.student-reading-detail-mini-card label {
    color: #2b5dad;
    font-size: 13px;
    font-weight: 800;
}

.student-reading-detail-week-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.student-reading-detail-week-strip::-webkit-scrollbar {
    display: none;
}

.student-reading-detail-week-card {
    flex: 0 0 min(72vw, 260px);
    max-width: 260px;
    display: grid;
    gap: 4px;
    align-content: start;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(189, 211, 243, 0.88);
    background: rgba(248, 251, 255, 0.98);
    scroll-snap-align: start;
    text-align: left;
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.06);
}

.student-reading-detail-week-card.is-current {
    border-color: rgba(47, 125, 255, 0.54);
    background: linear-gradient(180deg, rgba(235, 244, 255, 0.98), rgba(246, 250, 255, 0.96));
}

.student-reading-detail-week-card.is-submitted {
    border-color: rgba(22, 163, 74, 0.28);
    background: rgba(236, 253, 245, 0.98);
}

.student-reading-detail-week-card.is-upcoming {
    border-color: rgba(147, 197, 253, 0.62);
    background: rgba(239, 246, 255, 0.98);
}

.student-reading-detail-week-card.is-expired {
    border-color: rgba(203, 213, 225, 0.9);
    background: rgba(248, 250, 252, 0.98);
}

.student-reading-detail-week-card-index {
    color: #2b5dad;
    font-size: 12px;
    font-weight: 800;
}

.student-reading-detail-week-card strong {
    color: #173a78;
    font-size: 16px;
    line-height: 1.3;
}

.student-reading-detail-week-card small,
.student-reading-detail-week-card em {
    color: #6b7f9d;
    font-size: 12px;
    font-style: normal;
}

.student-reading-detail-support-card {
    display: grid;
    gap: 8px;
    padding: 12px 13px;
    border-radius: 18px;
    background: rgba(246, 249, 255, 0.96);
    border: 1px solid rgba(214, 228, 247, 0.9);
}

.student-reading-detail-support-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.student-reading-detail-support-head strong {
    color: #173a78;
    font-size: 15px;
}

.student-reading-detail-support-toggle {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #2f7dff;
    font-size: 12px;
    font-weight: 800;
}

.student-reading-detail-support-text {
    margin: 0;
    color: #415872;
    font-size: 14px;
    line-height: 1.58;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.student-reading-detail-support-text.is-expanded {
    display: block;
}

@media (max-width: 480px) {
    .student-reading-task-module {
        gap: 14px;
    }

    .student-reading-task-card,
    .student-reading-detail-card,
    .student-reading-detail-hero {
        border-radius: 20px;
    }

    .student-reading-task-card {
        padding: 14px;
    }

    .student-reading-task-cover-wrap,
    .student-reading-detail-cover-wrap {
        width: 82px;
        min-width: 82px;
        max-width: 82px;
        height: 108px;
    }

    .student-reading-task-copy-head strong,
    .student-reading-detail-hero-head strong {
        font-size: 17px;
    }

    .student-reading-task-overlay-body {
        padding: 12px 12px 16px;
    }

    .student-reading-task-overlay-actions {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 414px) {
    .student-reading-task-card-main,
    .student-reading-detail-hero-main {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .student-reading-task-cover-wrap,
    .student-reading-detail-cover-wrap {
        width: 78px;
        min-width: 78px;
        max-width: 78px;
        height: 104px;
    }

    .student-reading-task-copy-head strong,
    .student-reading-detail-hero-head strong {
        font-size: 16px;
    }

    .student-reading-detail-week-strip {
        gap: 8px;
    }

    .student-reading-task-guide,
    .student-reading-task-steps {
        padding-left: 12px;
        padding-right: 12px;
    }

    .student-reading-detail-scope-item {
        gap: 9px;
        padding: 11px 12px;
    }

    .student-reading-detail-scope-index {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 375px) {
    .student-reading-task-card {
        padding: 13px;
    }

    .student-reading-task-card-main,
    .student-reading-detail-hero-main {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
    }

    .student-reading-task-cover-wrap,
    .student-reading-detail-cover-wrap {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
        height: 96px;
    }

    .student-reading-task-meta,
    .student-reading-task-progress-meta,
    .student-reading-task-guide,
    .student-reading-task-info-line,
    .student-reading-task-deadline {
        font-size: 12px;
    }

    .student-reading-task-secondary-btn,
    .student-reading-task-primary-btn,
    .student-reading-task-disabled-btn,
    .student-reading-task-overlay-secondary,
    .student-reading-task-overlay-primary,
    .student-reading-task-overlay-disabled {
        min-height: 40px;
        font-size: 14px;
    }

    .student-reading-detail-tabs {
        gap: 6px;
        height: 46px;
        padding: 5px;
    }

    .student-reading-detail-tab {
        min-height: 34px;
        height: 34px;
        font-size: 12px;
    }

    .student-reading-detail-week-card {
        flex-basis: min(74vw, 248px);
        min-height: 98px;
        padding: 11px 12px;
    }

    .student-reading-detail-week-card strong {
        font-size: 15px;
    }

    .student-reading-task-steps-flow,
    .student-reading-task-detail-steps {
        gap: 6px;
    }

    .student-reading-detail-scope-item {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 11px;
    }

    .student-reading-detail-scope-index {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .student-reading-detail-scope-copy strong,
    .student-reading-detail-scope-copy small {
        font-size: 12px;
    }
}

.student-me-member-entry-row {
    gap: 10px;
}

.student-me-member-entry-card {
    min-height: 88px;
    padding: 16px 10px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 800;
    gap: 8px;
}

.student-me-member-entry-card i {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: rgba(14, 165, 233, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.student-me-posts-card,
.student-me-dubbing-card {
    overflow: hidden;
}

.student-me-post-grid {
    gap: 12px;
}

.student-me-post-tile {
    border-radius: 18px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.student-me-empty-card {
    margin: 0;
}

/* Student work revision loop: calm status hierarchy with focused guidance. */
.student-work-center {
    display: grid;
    gap: 14px;
    overflow: hidden;
}

.student-work-center-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
}

.student-work-center-head h2 {
    margin: 0;
}

.student-work-center-head p {
    margin: 6px 0 0;
    color: #6b7a90;
    font-size: 13px;
    line-height: 1.55;
}

.student-work-create-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 38px;
    color: #078f87;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.student-work-filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 4px;
    border: 1px solid #d9e6f2;
    border-radius: 18px;
    background: #f8fbfe;
}

.student-work-filter-tabs button {
    min-width: 0;
    min-height: 42px;
    padding: 0 6px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #24364f;
    font-size: 13px;
    font-weight: 850;
}

.student-work-filter-tabs button.is-active {
    background: linear-gradient(135deg, #0799c7 0%, #0dbb8b 100%);
    color: #fff;
    box-shadow: 0 7px 18px rgba(7, 154, 170, 0.2);
}

.student-work-status-list {
    display: grid;
    gap: 12px;
}

.student-work-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #dce6f1;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(39, 76, 119, 0.06);
}

.student-work-status-card.is-needs-revision {
    padding-top: 52px;
    border-color: #ffd49f;
    background: linear-gradient(135deg, #fffdf9 0%, #fffaf4 100%);
    box-shadow: 0 10px 26px rgba(224, 132, 37, 0.09);
}

.student-work-status-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 19px 0 16px 0;
    background: #fff1df;
    color: #ed7900;
    font-size: 13px;
    font-weight: 900;
}

.student-work-status-cover {
    width: 92px;
    height: 112px;
    display: grid;
    place-items: center;
    align-self: start;
    overflow: hidden;
    border-radius: 13px;
    background: #eaf4ff;
    color: #2f78d1;
    font-size: 30px;
}

.student-work-status-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-work-status-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 8px;
}

.student-work-status-main > strong {
    overflow: hidden;
    color: #17243d;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 900;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.student-work-status-topline,
.student-work-status-meta,
.student-work-status-actions,
.student-work-reason-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.student-work-status-topline {
    justify-content: space-between;
}

.student-work-status-topline > span,
.student-work-status-topline > em {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.student-work-status-topline > span {
    color: #078f75;
    background: #eafaf4;
}

.student-work-status-topline > em {
    color: #2472cf;
    background: #edf6ff;
}

.student-work-status-topline > em.is-revision {
    color: #e87500;
    background: #fff0dc;
}

.student-work-status-topline > em.is-approved {
    color: #16834f;
    background: #eaf8ef;
}

.student-work-status-meta {
    color: #7b8798;
    font-size: 12px;
}

.student-work-status-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.student-work-reason-chips span {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #ffdcb1;
    border-radius: 999px;
    color: #d96d00;
    background: #fff6ea;
    font-size: 11px;
    font-weight: 800;
}

.student-work-status-actions {
    margin-top: 3px;
}

.student-work-status-actions a {
    min-height: 39px;
    flex: 1 1 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.student-work-status-actions .is-secondary {
    border: 1px solid #079a9a;
    color: #078c8b;
    background: #fff;
}

.student-work-status-actions .is-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0799c7 0%, #0dbb8b 100%);
    box-shadow: 0 7px 16px rgba(7, 154, 170, 0.18);
}

.student-work-row-open {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: #5d718b;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.student-work-center-note,
.student-work-center-more,
.student-work-filter-empty {
    margin: 0;
    color: #6b7a90;
    font-size: 12px;
    text-align: center;
}

.student-work-center-note i {
    margin-right: 4px;
}

.student-work-center-more {
    color: #3575bd;
    font-weight: 800;
    text-decoration: none;
}

.student-work-filter-empty {
    padding: 24px 12px;
    border: 1px dashed #d7e3ef;
    border-radius: 16px;
    background: #f9fcff;
}

.student-own-work-continue {
    color: #fff;
    background: linear-gradient(135deg, #0799c7 0%, #0dbb8b 100%);
}

.student-own-work-feedback {
    display: grid;
    gap: 11px;
    margin-top: 16px;
    padding: 15px;
    border: 1px solid #ffd49f;
    border-radius: 16px;
    background: #fffaf3;
}

.student-own-work-feedback > strong {
    color: #d86d00;
    font-size: 15px;
}

.student-own-work-feedback > p {
    color: #5d6675;
    white-space: pre-wrap;
}

.student-own-work-continue-detail {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #0799c7 0%, #0dbb8b 100%);
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.student-publish-revision-feedback {
    display: grid;
    gap: 11px;
    padding: 15px 17px;
    border: 1px solid #ffd49f;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffdf8 0%, #fff8ed 100%);
    box-shadow: 0 9px 24px rgba(224, 132, 37, 0.08);
}

.student-publish-revision-feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-publish-revision-feedback-head span {
    color: #d86d00;
    font-size: 15px;
    font-weight: 900;
}

.student-publish-revision-feedback-head strong {
    color: #6f7d90;
    font-size: 12px;
}

.student-publish-revision-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.student-publish-revision-reasons span {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #ffdcb1;
    border-radius: 999px;
    color: #d96d00;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.student-publish-revision-feedback > p {
    margin: 0;
    color: #566477;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.student-publish-page.is-revision-mode .student-publish-task-section .student-publish-filter-trigger,
.student-publish-page.is-revision-mode .student-publish-filter-chips {
    display: none;
}

.student-publish-page.is-revision-mode .student-publish-task-card:not(.is-selected) {
    display: none;
}

@media (max-width: 414px) {
    .student-me-section-head-inline {
        align-items: stretch;
    }

    .student-me-section-link {
        padding: 9px 11px;
        font-size: 11px;
    }

    .student-work-center-head {
        align-items: center;
    }

    .student-work-center-head p {
        font-size: 12px;
    }

    .student-work-create-link {
        font-size: 12px;
    }

    .student-work-filter-tabs button {
        min-height: 40px;
        font-size: 12px;
    }

    .student-work-status-card,
    .student-work-status-card.is-needs-revision {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .student-work-status-card.is-needs-revision {
        padding-top: 48px;
    }

    .student-work-status-cover {
        width: 78px;
        height: 98px;
    }

    .student-work-status-actions {
        grid-column: 1 / -1;
        margin-left: -88px;
        padding-top: 2px;
    }

    .student-work-status-actions a {
        min-height: 42px;
        flex-basis: 112px;
        padding: 0 8px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .student-work-center {
        gap: 12px;
    }

    .student-work-filter-tabs {
        gap: 2px;
        padding: 3px;
    }

    .student-work-filter-tabs button {
        padding: 0 3px;
        font-size: 11px;
    }

    .student-work-status-topline {
        align-items: flex-start;
    }

    .student-work-status-topline > span,
    .student-work-status-topline > em {
        padding: 0 7px;
        font-size: 10px;
    }
}

@media (max-width: 375px) {
    .student-work-create-link span {
        display: none;
    }

    .student-work-status-card,
    .student-work-status-card.is-needs-revision {
        grid-template-columns: 70px minmax(0, 1fr);
        padding-right: 10px;
        padding-left: 10px;
    }

    .student-work-status-cover {
        width: 70px;
        height: 92px;
    }

    .student-work-status-actions {
        margin-left: -80px;
    }
}

.student-me-subpage-title-block h2 {
    margin-bottom: 4px;
}

.student-me-subpage-title-block p {
    max-width: 320px;
    margin: 0 auto;
}

.student-me-subpage-card {
    display: grid;
    gap: 18px;
    padding: 18px 16px;
    border-radius: 24px;
}

.student-me-profile-page,
.student-me-security-page {
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.student-me-profile-avatar-block {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}

.student-me-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}

.student-me-profile-avatar-copy {
    display: grid;
    justify-items: center;
    gap: 4px;
    text-align: center;
}

.student-me-profile-avatar-copy strong {
    font-size: 17px;
    color: #10233f;
}

.student-me-profile-avatar-copy span {
    font-size: 12px;
    color: #71829c;
}

.student-me-profile-form,
.student-me-security-form {
    display: grid;
    gap: 14px;
}

.student-me-field {
    display: grid;
    gap: 8px;
}

.student-me-field span {
    font-size: 13px;
    font-weight: 700;
    color: #16396d;
}

.student-me-field .form-control {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    background: #f8fbff;
    box-shadow: none;
}

.student-me-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.student-me-readonly-item {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(219, 230, 244, 0.92);
}

.student-me-readonly-item span {
    font-size: 12px;
    color: #7b8ba3;
}

.student-me-readonly-item strong {
    font-size: 14px;
    line-height: 1.35;
    color: #10233f;
    word-break: break-word;
}

.student-me-inline-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.student-me-inline-copy strong {
    min-width: 0;
    flex: 1;
}

.student-me-inline-copy-btn {
    flex: 0 0 auto;
}

.student-me-profile-note,
.student-me-security-note {
    font-size: 12px;
    line-height: 1.6;
    color: #71829c;
}

.student-me-save-btn {
    min-height: 46px;
    border-radius: 18px;
    font-size: 15px;
    font-weight: 800;
}

.student-profile-hero-card {
    position: relative;
    overflow: hidden;
    padding: 18px 18px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0d7ae8 0%, #14b8a6 100%);
    box-shadow: 0 18px 32px rgba(14, 116, 215, 0.22);
}

.student-profile-hero-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.student-profile-hero-avatar {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.student-profile-hero-copy {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: #fff;
}

.student-profile-hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.student-profile-hero-name-row strong {
    min-width: 0;
    font-size: 28px;
    line-height: 1.08;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-profile-hero-role {
    flex: 0 0 auto;
    min-height: 20px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(236, 255, 242, 0.96);
    color: #16a34a;
    font-size: 11px;
    line-height: 16px;
    font-weight: 800;
}

.student-profile-hero-school,
.student-profile-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.35;
}

.student-profile-hero-school {
    font-weight: 600;
}

.student-profile-hero-meta span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-profile-hero-decor {
    position: absolute;
    pointer-events: none;
    opacity: 0.9;
}

.student-profile-hero-decor-star {
    right: 76px;
    top: 18px;
    width: 56px;
    height: 56px;
    background:
        radial-gradient(circle at 16px 16px, rgba(255, 255, 255, 0.88) 0 3px, transparent 3.5px),
        radial-gradient(circle at 36px 22px, rgba(250, 250, 210, 0.9) 0 2.5px, transparent 3px),
        radial-gradient(circle at 28px 38px, rgba(255, 255, 255, 0.75) 0 2px, transparent 2.5px);
}

.student-profile-hero-decor-book {
    right: 10px;
    bottom: 6px;
    width: 88px;
    height: 56px;
    border-radius: 18px 18px 22px 22px;
    background:
        linear-gradient(180deg, rgba(255, 244, 188, 0.98), rgba(255, 227, 138, 0.98)) right 0 top 14px / 22px 32px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 247, 255, 0.98)) left 0 top 14px / 56px 32px no-repeat;
    opacity: 0.9;
}

.student-profile-edit-section {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(250, 243, 186, 0.24), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
    border: 1px solid rgba(221, 232, 246, 0.92);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.student-profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.student-profile-section-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
    color: #16396d;
}

.student-profile-section-head p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #71829c;
}

.student-profile-avatar-panel {
    gap: 14px;
}

.student-profile-avatar-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.student-me-avatar-form {
    margin: 0;
}

.student-me-profile-avatar {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
    padding: 4px;
    margin: 0;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.student-profile-avatar-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-profile-avatar-copy strong {
    font-size: 16px;
    color: #10233f;
}

.student-profile-avatar-copy span {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7a90;
}

.student-profile-avatar-action {
    min-width: 104px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(165, 198, 243, 0.96);
    background: rgba(255, 255, 255, 0.98);
    color: #2469e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.student-profile-editor-form {
    gap: 16px;
}

.student-profile-inline-field .form-control,
.student-profile-archive-row .archive-input {
    min-height: 48px;
}

.student-profile-intro-box {
    position: relative;
    display: block;
}

.student-profile-intro-input {
    min-height: 118px !important;
    padding: 14px 14px 36px !important;
    resize: none;
    line-height: 1.7;
}

.student-profile-intro-count {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 12px;
    color: #94a3b8;
}

.student-profile-archive-list {
    display: grid;
    gap: 10px;
}

.student-profile-archive-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(221, 232, 246, 0.95);
    background: rgba(255, 255, 255, 0.96);
}

.student-profile-archive-row.is-motto {
    align-items: start;
}

.student-profile-archive-row .archive-label {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    color: #16396d;
}

.student-profile-archive-row .archive-input {
    padding-left: 0;
    padding-right: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #10233f;
    font-size: 14px;
}

.student-profile-archive-row .archive-input:focus {
    outline: none;
}

.student-profile-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-profile-tag-pill {
    position: relative;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(216, 226, 239, 0.96);
    background: rgba(255, 255, 255, 0.94);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}

.student-profile-tag-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.student-profile-tag-pill.is-selected {
    border-color: rgba(71, 85, 255, 0.28);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(16, 185, 129, 0.14));
    color: #1d4ed8;
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12);
}

.student-profile-identity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-profile-identity-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(216, 228, 244, 0.94);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.student-profile-identity-item span {
    font-size: 12px;
    color: #7b8ba3;
}

.student-profile-identity-item strong {
    font-size: 14px;
    line-height: 1.4;
    color: #10233f;
}

.student-profile-identity-item.is-disabled {
    opacity: 0.92;
}

.student-profile-identity-select {
    min-height: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    color: #10233f;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none !important;
}

.student-profile-readonly-grid {
    margin-top: 2px;
}

.student-profile-submit-btn {
    min-height: 52px;
    border: none;
    background: linear-gradient(90deg, #1d4ed8 0%, #7c3aed 100%);
    box-shadow: 0 18px 30px rgba(74, 99, 255, 0.24);
}

.student-member-home-page {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}

.student-member-home-card {
    padding: 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(255, 241, 193, 0.34), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
    border: 1px solid rgba(221, 232, 246, 0.92);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.student-member-home-card .profile-home-main {
    align-items: flex-start;
}

.student-member-home-card .profile-avatar-ring {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
}

.student-member-home-card .profile-home-text {
    min-width: 0;
    flex: 1 1 auto;
}

.student-member-home-card .profile-home-text h2 {
    margin-bottom: 10px;
}

.student-member-home-card .profile-level-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.student-member-home-card .profile-level-line .badge {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
}

.student-member-home-card .profile-level-line .text-bg-warning {
    color: #9a6700 !important;
    background: rgba(255, 244, 210, 0.96) !important;
    border: 1px solid rgba(255, 218, 119, 0.8);
}

.student-member-home-card .profile-level-line .text-bg-light {
    color: #334155 !important;
    background: rgba(241, 245, 249, 0.98) !important;
    border: 1px solid rgba(220, 230, 242, 0.92);
}

.student-member-home-card .profile-home-text p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.student-member-home-card .profile-home-text p + p {
    margin-top: 4px;
}

.student-member-home-card .profile-rank-link {
    margin-top: 12px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.94);
    background: rgba(239, 246, 255, 0.96);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.student-member-home-intro-card {
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(221, 232, 246, 0.92);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.student-member-home-intro-card h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
    color: #10233f;
}

.student-member-home-intro-card p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.75;
}

.student-member-home-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.student-member-home-card-head h3 {
    margin: 0;
}

.student-member-home-card-head span {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
}

#studentPublishPage,
#studentPublishPage * {
    box-sizing: border-box;
}

#studentPublishPage {
    --publish-primary: #2f7cf6;
    --publish-green: #12b76a;
    --publish-text: #10213f;
    --publish-muted: #667085;
    --publish-card-radius: 22px;
    overflow-x: clip;
}

.student-publish-page {
    position: relative;
    overflow-x: clip;
    padding: 12px 0 calc(228px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at top center, rgba(189, 220, 255, 0.56), transparent 34%),
        linear-gradient(180deg, #f4f9ff 0%, #eef6ff 42%, #f8fbff 100%);
}

.student-publish-shell {
    display: grid;
    gap: 12px;
}

.student-publish-shell > * {
    min-width: 0;
}

.student-publish-mobile-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 6px;
}

.student-publish-head-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #183867;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.student-publish-head-copy {
    min-width: 0;
    text-align: center;
}

.student-publish-head-copy h1 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
    color: #13386a;
}

.student-publish-head-copy p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #7388a7;
}

.student-publish-head-spacer {
    width: 40px;
    height: 40px;
    display: block;
}

.student-publish-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.student-publish-method-card {
    position: relative;
    min-width: 0;
    min-height: 102px;
    padding: 15px 14px;
    border-radius: var(--publish-card-radius);
    border: 1.5px solid rgba(216, 228, 244, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    text-align: left;
}

.student-publish-method-card.is-active {
    border-color: rgba(46, 123, 255, 0.72);
    box-shadow: 0 18px 30px rgba(59, 130, 246, 0.14);
}

.student-publish-method-art {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 12px 22px rgba(59, 130, 246, 0.14);
}

.student-publish-method-art.is-task {
    background: linear-gradient(135deg, rgba(229, 238, 255, 0.98), rgba(209, 226, 255, 0.96));
    color: #2563eb;
}

.student-publish-method-art.is-free {
    background: linear-gradient(135deg, rgba(231, 255, 245, 0.98), rgba(214, 251, 232, 0.96));
    color: #10b981;
}

.student-publish-method-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-right: 30px;
}

.student-publish-method-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.24;
    font-weight: 900;
    color: #12396c;
}

.student-publish-method-copy small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
    color: #5d7190;
}

.student-publish-method-check {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1.5px solid rgba(212, 221, 235, 0.96);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-method-card.is-active .student-publish-method-check {
    border-color: rgba(46, 123, 255, 0.72);
    background: #2f7cff;
    color: #fff;
}

.student-publish-stage-card,
.student-publish-task-section,
.student-publish-linked-card,
.student-publish-info-card,
.student-publish-free-card,
.student-publish-form-panel {
    padding: 16px;
    border-radius: var(--publish-card-radius);
    background:
        radial-gradient(circle at top right, rgba(240, 248, 255, 0.88), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
    border: 1px solid rgba(222, 232, 246, 0.92);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}

.student-publish-stage-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.student-publish-stage-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.student-publish-stage-item > div {
    min-width: 0;
}

.student-publish-stage-index {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #e8eef8;
    color: #6b7d99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
}

.student-publish-stage-item.is-current .student-publish-stage-index {
    background: linear-gradient(135deg, #2f7cff, #1ea6ff);
    color: #fff;
}

.student-publish-stage-item.is-complete .student-publish-stage-index {
    background: rgba(224, 239, 255, 0.98);
    color: #2f7cff;
    box-shadow: inset 0 0 0 1px rgba(47, 124, 255, 0.18);
}

.student-publish-stage-item.is-current strong,
.student-publish-stage-item.is-complete strong {
    color: #1f5fca;
}

.student-publish-stage-item.is-ready strong,
.student-publish-stage-item.is-ready small {
    color: #8da0bb;
}

.student-publish-stage-item.is-submit-ready strong,
.student-publish-stage-item.is-submit-ready small {
    color: #4a6fa5;
}

.student-publish-stage-item.is-submit-ready .student-publish-stage-index {
    background: rgba(236, 244, 255, 0.98);
    color: #2f7cff;
    box-shadow: inset 0 0 0 1px rgba(47, 124, 255, 0.16);
}

.student-publish-stage-item strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: #2d4670;
}

.student-publish-stage-item small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: #8090a8;
}

.student-publish-stage-arrow {
    color: #9db2cf;
    font-size: 14px;
}

.student-publish-panel-head,
.student-publish-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.student-publish-panel-head > *,
.student-publish-section-head > * {
    min-width: 0;
}

.student-publish-panel-head h2,
.student-publish-section-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 900;
    color: #153868;
}

.student-publish-inline-pill {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f7cff, #1ea6ff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
}

.student-publish-filter-trigger {
    border: none;
    background: transparent;
    color: #2877ff;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.student-publish-filter-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.student-publish-filter-chips::-webkit-scrollbar {
    display: none;
}

.student-publish-filter-chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(221, 230, 242, 0.94);
    background: rgba(255, 255, 255, 0.95);
    color: #556b88;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.student-publish-filter-chip.is-active {
    border-color: rgba(56, 126, 255, 0.6);
    background: rgba(239, 246, 255, 0.98);
    color: #2563eb;
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12);
}

.student-publish-task-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 14px 4px 4px 2px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.student-publish-task-scroller::-webkit-scrollbar {
    display: none;
}

.student-publish-task-card {
    flex: 0 0 164px;
    min-width: 164px;
    min-height: 206px;
    padding: 10px;
    border-radius: 20px;
    border: 1.5px solid rgba(225, 233, 245, 0.98);
    background: #fff;
    display: grid;
    gap: 8px;
    text-align: left;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.05);
    scroll-snap-align: start;
}

.student-publish-task-card.is-selected {
    border-color: rgba(46, 123, 255, 0.72);
    box-shadow: 0 16px 26px rgba(59, 130, 246, 0.14);
}

.student-publish-task-card.is-readonly {
    border-style: dashed;
}

.student-publish-task-cover-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 78px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: grid;
    place-items: center;
    padding: 8px;
}

.student-publish-task-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.student-publish-task-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
}

.student-publish-task-picked {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #2f7cff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-task-card-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-publish-task-card-copy strong {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
    color: #173c70;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.student-publish-task-card-copy span {
    font-size: 11px;
    line-height: 1.45;
    color: #6d809b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-publish-task-card-foot {
    display: flex;
    align-items: center;
    min-width: 0;
}

.student-publish-task-status {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.78);
    color: #475569;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
}

.student-publish-task-status.is-in_progress {
    background: rgba(220, 252, 231, 0.95);
    color: #15803d;
}

.student-publish-task-status.is-submitted {
    background: rgba(219, 234, 254, 0.98);
    color: #2563eb;
}

.student-publish-task-status.is-not_started,
.student-publish-task-status.is-not-started {
    background: rgba(241, 245, 249, 0.96);
    color: #64748b;
}

.student-publish-task-status.is-expired {
    background: rgba(255, 237, 213, 0.96);
    color: #ea580c;
}

.student-publish-empty {
    margin-top: 14px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(248, 250, 255, 0.96);
    color: #7b8ba3;
    text-align: center;
    font-size: 13px;
}

.student-publish-linked-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.student-publish-linked-card,
.student-publish-info-card {
    min-width: 0;
}

.student-publish-linked-task,
.student-publish-linked-book {
    margin-top: 14px;
}

.student-publish-linked-row,
.student-publish-book-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(224, 233, 245, 0.94);
    background: rgba(255, 255, 255, 0.98);
}

.student-publish-linked-row img,
.student-publish-book-row img {
    width: 76px;
    border-radius: 14px;
    object-fit: cover;
    background: #e8eef8;
}

.student-publish-linked-row img {
    height: 64px;
}

.student-publish-book-row img {
    height: 98px;
}

.student-publish-linked-copy,
.student-publish-book-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.student-publish-linked-tag {
    color: #16a34a;
    font-size: 12px;
    font-weight: 900;
}

.student-publish-linked-copy strong,
.student-publish-book-copy strong {
    font-size: 16px;
    line-height: 1.38;
    color: #173c70;
    font-weight: 900;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.student-publish-linked-copy small,
.student-publish-book-copy small,
.student-publish-book-copy span {
    font-size: 12px;
    line-height: 1.55;
    color: #6b7f9b;
    overflow-wrap: anywhere;
}

.student-publish-book-empty {
    min-height: 132px;
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(180, 202, 231, 0.94);
    background: rgba(249, 251, 255, 0.98);
    color: #6d819c;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 10px;
}

.student-publish-book-empty i {
    font-size: 24px;
    color: #2f7cff;
}

.student-publish-info-tabs {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.student-publish-info-tabs::-webkit-scrollbar {
    display: none;
}

.student-publish-info-tab {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(220, 228, 241, 0.94);
    background: rgba(248, 250, 255, 0.95);
    color: #5d7190;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.student-publish-info-tab.is-active {
    border-color: rgba(46, 123, 255, 0.66);
    background: linear-gradient(135deg, #2f7cff, #1ea6ff);
    color: #fff;
}

.student-publish-info-body {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(225, 233, 246, 0.94);
    background: rgba(255, 255, 255, 0.98);
    min-height: 0;
}

.student-publish-info-body p {
    margin: 0;
    color: #365175;
    font-size: 14px;
    line-height: 1.68;
    overflow-wrap: anywhere;
}

.student-publish-info-empty {
    color: #6b809b;
    font-size: 13px;
    line-height: 1.65;
}

.student-publish-info-rich {
    display: grid;
    gap: 12px;
}

.student-publish-info-rich-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(224, 233, 246, 0.94);
    background: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(242, 247, 255, 0.95));
}

.student-publish-info-rich-section.is-scope {
    background: linear-gradient(180deg, rgba(245, 250, 255, 0.99), rgba(236, 245, 255, 0.96));
}

.student-publish-info-rich-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.student-publish-info-rich-head strong {
    color: #1d4f9c;
    font-size: 14px;
    font-weight: 800;
}

.student-publish-info-rich-head span {
    color: #6b7f9c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.student-publish-info-rich-copy {
    color: #365175;
    font-size: 14px;
    line-height: 1.68;
}

.student-publish-info-rich-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-publish-info-rich-steps span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #2357ab;
    font-size: 13px;
    font-weight: 700;
}

.student-publish-info-scope-intro {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(47, 124, 255, 0.10);
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.student-publish-info-scope-list {
    display: grid;
    gap: 10px;
}

.student-publish-info-scope-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background: rgba(255, 255, 255, 0.86);
}

.student-publish-info-scope-index {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.student-publish-info-scope-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-publish-info-scope-copy strong {
    color: #173a78;
    font-size: 14px;
    line-height: 1.55;
}

.student-publish-info-scope-copy small {
    color: #54708f;
    font-size: 13px;
    line-height: 1.58;
}

.student-publish-info-footer {
    margin-top: 12px;
    color: #4b6692;
    font-size: 13px;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

.student-publish-free-card p {
    margin: 12px 0 0;
    color: #48617f;
    font-size: 13px;
    line-height: 1.72;
}

.student-publish-form-context {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(47, 124, 255, 0.22);
    border-left: 3px solid #2f7cff;
    border-radius: 12px;
    background: #f7faff;
}

.student-publish-form-context-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8f0ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.student-publish-form-context > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.student-publish-form-context strong {
    color: #12396c;
    font-size: 14px;
    line-height: 1.4;
}

.student-publish-form-context small {
    color: #617794;
    font-size: 12px;
    line-height: 1.5;
}

.student-publish-form-context.is-theme {
    border-left-color: #0891b2;
}

.student-publish-form-context.is-theme .student-publish-form-context-icon {
    background: #e8f8fb;
    color: #087f9a;
}

.student-publish-form-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.student-publish-field {
    display: grid;
    gap: 8px;
}

.student-publish-field-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.student-publish-field-head span {
    min-width: 0;
}

.student-publish-field-head span:first-child {
    color: #173c70;
    font-size: 14px;
    font-weight: 900;
}

.student-publish-field-head em {
    color: #ef4444;
    font-style: normal;
}

.student-publish-field-head small {
    color: #7a8da8;
    font-size: 12px;
    font-weight: 600;
}

.student-publish-upload-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.student-publish-upload-head-copy {
    min-width: 0;
}

.student-publish-upload-head-copy h4 {
    margin: 0;
    color: #143868;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
}

#studentPublishModeHint {
    margin: 8px 0 0;
    color: #6f84a2;
    font-size: 13px;
    line-height: 1.45;
}

.student-publish-upload-head-art {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.student-publish-upload-head-art img {
    width: min(100%, 116px);
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(91, 127, 196, 0.12));
}

.student-publish-field .form-control,
.student-publish-field .form-select {
    min-height: 46px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(216, 228, 243, 0.96);
    background: #fbfdff;
    box-shadow: none;
    color: #183867;
    font-size: 14px;
}

.student-publish-field textarea.form-control {
    min-height: 168px;
    resize: none;
    line-height: 1.65;
}

.student-publish-field .form-control[readonly] {
    background: rgba(243, 247, 255, 0.98);
    color: #456385;
}

.student-publish-field-tip {
    color: #7d90ab;
    font-size: 12px;
    line-height: 1.6;
}

.student-publish-media-section {
    display: grid;
    gap: 12px;
}

.student-publish-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-publish-upload-mode {
    position: relative;
    min-width: 0;
    min-height: 114px;
    padding: 14px 10px 12px;
    border-radius: 20px;
    border: 1.5px solid rgba(224, 232, 245, 0.95);
    background: rgba(255, 255, 255, 0.98);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.05);
}

.student-publish-upload-mode.is-mode-mixed {
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.student-publish-upload-mode.is-mode-image {
    background: linear-gradient(180deg, rgba(242, 252, 247, 0.98), rgba(255, 255, 255, 0.98));
}

.student-publish-upload-mode.is-mode-video {
    background: linear-gradient(180deg, rgba(255, 246, 241, 0.98), rgba(255, 255, 255, 0.98));
}

.student-publish-upload-mode.is-active {
    border-color: rgba(46, 123, 255, 0.72);
    background: linear-gradient(180deg, rgba(240, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 12px 20px rgba(59, 130, 246, 0.12);
}

.student-publish-upload-mode-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1.5px solid rgba(211, 223, 240, 0.98);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.student-publish-upload-mode.is-active .student-publish-upload-mode-check {
    border-color: rgba(46, 123, 255, 0.72);
    background: #2f7cff;
    color: #fff;
}

.student-publish-upload-mode-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.student-publish-upload-mode.is-mode-mixed .student-publish-upload-mode-icon {
    background: linear-gradient(135deg, rgba(228, 239, 255, 0.98), rgba(213, 228, 255, 0.96));
    color: #2563eb;
}

.student-publish-upload-mode.is-mode-image .student-publish-upload-mode-icon {
    background: linear-gradient(135deg, rgba(221, 255, 235, 0.98), rgba(208, 245, 223, 0.96));
    color: #22c55e;
}

.student-publish-upload-mode.is-mode-video .student-publish-upload-mode-icon {
    background: linear-gradient(135deg, rgba(255, 238, 224, 0.98), rgba(255, 226, 204, 0.96));
    color: #fb923c;
}

.student-publish-upload-mode-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.student-publish-upload-mode-copy strong {
    color: #173c70;
    font-size: 16px;
    font-weight: 900;
}

.student-publish-upload-mode-copy small {
    color: #778aa6;
    font-size: 12px;
    line-height: 1.4;
}

.student-publish-upload-box {
    width: 100%;
    min-height: 170px;
    padding: 18px 16px;
    border-radius: 22px;
    border: 1.5px dashed rgba(158, 193, 241, 0.94);
    background: linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(255, 255, 255, 0.98));
    color: #275997;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.student-publish-upload-box.is-disabled {
    border-style: solid;
    border-color: rgba(226, 232, 240, 0.94);
    color: #90a2ba;
    cursor: not-allowed;
}

.student-publish-upload-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(233, 242, 255, 0.96);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.student-publish-upload-box strong {
    color: #173c70;
    font-size: 17px;
    font-weight: 900;
}

.student-publish-upload-box small {
    color: #7a8da8;
    font-size: 13px;
    line-height: 1.55;
}

.student-publish-upload-standard {
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(240, 247, 255, 0.98);
    border: 1px solid rgba(211, 226, 247, 0.96);
    color: #5c7394;
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.student-publish-media-preview {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(221, 232, 246, 0.94);
    background: rgba(255, 255, 255, 0.98);
    align-items: start;
}

.student-publish-preview-thumb {
    position: relative;
    width: 78px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    background: #eef5ff;
    border: 1px solid rgba(211, 224, 243, 0.94);
}

.student-publish-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-publish-preview-thumb.is-video-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #dcefff 0%, #eef6ff 100%);
}

.student-publish-preview-video-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 10px 8px;
    text-align: center;
    color: #1d4f91;
}

.student-publish-preview-video-empty i {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(29, 79, 145, 0.86);
    font-size: 16px;
}

.student-publish-preview-video-empty strong {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.student-publish-preview-video-empty small {
    color: #5f7d9f;
    font-size: 11px;
    line-height: 1.45;
}

.student-publish-preview-play {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.64);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-preview-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.student-publish-preview-copy strong {
    color: #173c70;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.student-publish-preview-copy span {
    color: #7386a1;
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.student-publish-preview-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.student-publish-cropper-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(221, 232, 246, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.99));
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.student-publish-cropper-card-head h5 {
    margin: 0;
    color: #173c70;
    font-size: 17px;
    font-weight: 900;
}

.student-publish-cropper-card-head p {
    margin: 6px 0 0;
    color: #6f84a2;
    font-size: 12px;
    line-height: 1.6;
}

.student-publish-cropper-stage {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(221, 232, 246, 0.94);
}

.student-publish-cropper-gesture {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
}

.student-publish-cropper-gesture img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.student-publish-cropper-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(82%, 320px);
    aspect-ratio: 3 / 4;
    transform: translate(-50%, -50%);
    border-radius: 22px;
    border: 2px solid rgba(47, 124, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88), 0 18px 30px rgba(47, 124, 255, 0.14);
    pointer-events: none;
}

.student-publish-cropper-bottom {
    display: grid;
    gap: 12px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
}

.student-publish-cropper-note {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(240, 247, 255, 0.98);
    color: #587295;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid rgba(214, 226, 244, 0.94);
}

.student-publish-cropper-zoom {
    display: grid;
    gap: 8px;
    color: #173c70;
    font-size: 13px;
    font-weight: 800;
}

.student-publish-cropper-zoom input[type="range"] {
    width: 100%;
}

.student-publish-cropper-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-publish-video-cover-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(221, 232, 246, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.99));
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.student-publish-video-cover-head h5 {
    margin: 0;
    color: #173c70;
    font-size: 17px;
    font-weight: 900;
}

.student-publish-video-cover-head p {
    margin: 6px 0 0;
    color: #6f84a2;
    font-size: 12px;
    line-height: 1.6;
}

.student-publish-video-cover-stage {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(221, 232, 246, 0.94);
    background: linear-gradient(180deg, rgba(231, 242, 255, 0.96), rgba(245, 250, 255, 0.98));
}

.student-publish-video-cover-player {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: linear-gradient(180deg, rgba(220, 236, 255, 0.98), rgba(245, 250, 255, 0.98));
}

.student-publish-video-cover-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #587295;
    font-size: 12px;
    font-weight: 800;
}

.student-publish-video-cover-range {
    display: grid;
    gap: 8px;
    color: #173c70;
    font-size: 13px;
    font-weight: 800;
}

.student-publish-video-cover-range input[type="range"] {
    width: 100%;
}

.student-publish-video-cover-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-publish-video-cover-preview {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.student-publish-video-cover-preview-thumb {
    position: relative;
    width: 82px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(211, 224, 243, 0.94);
    background: linear-gradient(180deg, rgba(220, 236, 255, 0.98), rgba(245, 250, 255, 0.98));
}

.student-publish-video-cover-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-publish-video-cover-preview-empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 10px 8px;
    text-align: center;
    color: #1d4f91;
}

.student-publish-video-cover-preview-empty span {
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.student-publish-video-cover-preview-empty small {
    color: #5f7d9f;
    font-size: 11px;
    line-height: 1.45;
}

.student-publish-video-cover-preview-copy {
    min-width: 0;
    padding: 4px 0;
    color: #587295;
    font-size: 12px;
    line-height: 1.6;
}

.student-publish-task-hint {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(233, 252, 239, 0.98), rgba(244, 255, 248, 0.98));
    border: 1px solid rgba(197, 239, 207, 0.96);
    min-width: 0;
}

.student-publish-task-hint-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #36d36e, #17b65a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-task-hint-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.student-publish-task-hint-copy strong,
.student-publish-task-hint-copy span {
    color: #25734d;
    font-size: 13px;
    line-height: 1.45;
}

.student-publish-task-hint-copy span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-publish-task-hint-action {
    border: none;
    background: transparent;
    color: #22a05b;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.student-publish-showcase-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid rgba(225, 233, 246, 0.94);
    background: rgba(255, 255, 255, 0.98);
}

.student-publish-showcase-head {
    align-items: flex-start;
}

.student-publish-showcase-head-copy {
    min-width: 0;
}

.student-publish-showcase-head p {
    margin: 2px 0 0;
    color: #7a8da8;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.student-publish-showcase-body,
.student-publish-showcase-preview,
.student-publish-showcase-copy {
    min-width: 0;
}

.student-publish-showcase-empty {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(236, 241, 250, 0.98);
    background: rgba(250, 252, 255, 0.98);
}

.student-publish-showcase-empty-cover {
    width: 84px;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(232, 240, 255, 0.98), rgba(245, 249, 255, 0.98));
    border: 1px dashed rgba(191, 208, 235, 0.96);
}

.student-publish-showcase-empty-copy {
    display: grid;
    gap: 10px;
    align-content: center;
    min-width: 0;
}

.student-publish-showcase-empty-copy p {
    margin: 0;
    color: #7386a1;
    font-size: 13px;
    line-height: 1.55;
}

.student-publish-showcase-empty-line {
    display: block;
    height: 10px;
    width: 72%;
    border-radius: 999px;
    background: rgba(229, 237, 249, 0.98);
}

.student-publish-showcase-empty-line.is-long {
    width: 88%;
}

.student-publish-showcase-empty-icon {
    justify-self: end;
    width: 24px;
    height: 24px;
    border-radius: 10px;
    background: rgba(239, 244, 255, 0.98);
    color: #9bb2d7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.student-publish-showcase-preview {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(236, 241, 250, 0.98);
    background: rgba(250, 252, 255, 0.98);
}

.student-publish-showcase-media {
    position: relative;
    width: 84px;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    background: #eef5ff;
}

.student-publish-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: center center;
}

.student-publish-showcase-play {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.64);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.student-publish-showcase-copy {
    display: grid;
    gap: 8px;
}

.student-publish-showcase-meta,
.student-publish-showcase-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.student-publish-showcase-tag {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(233, 244, 255, 0.98);
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
}

.student-publish-showcase-user,
.student-publish-showcase-stats {
    color: #7386a1;
    font-size: 12px;
}

.student-publish-showcase-copy strong {
    color: #173c70;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 900;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.student-publish-showcase-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.student-publish-showcase-notice {
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 251, 235, 0.98);
    color: #b45309;
    font-size: 12px;
    line-height: 1.55;
    border: 1px solid rgba(253, 230, 138, 0.92);
}

.student-publish-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.student-publish-dialog-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(4px);
}

.student-publish-dialog-panel {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 420px;
    margin: 0 auto;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.99));
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(224, 233, 246, 0.96);
}

.student-publish-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(244, 247, 253, 0.98);
    color: #5b6f8e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.student-publish-dialog-copy {
    padding-right: 40px;
}

.student-publish-dialog-copy h3 {
    margin: 0;
    color: #143868;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 900;
}

.student-publish-dialog-body {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.student-publish-dialog-body p {
    margin: 0;
    color: #5d7190;
    font-size: 14px;
    line-height: 1.65;
}

.student-publish-dialog-actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.student-publish-dialog-actions-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-publish-cover-preview {
    margin-top: 14px;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: #edf5ff;
}

.student-publish-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-publish-cover-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 251, 235, 0.98);
    color: #b45309;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid rgba(253, 230, 138, 0.92);
}

html.student-publish-dialog-open,
body.student-publish-dialog-open {
    overflow: hidden;
}

.student-publish-server-status {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(241, 245, 249, 0.98);
    color: #43566f;
    font-size: 13px;
    line-height: 1.6;
}

.student-publish-server-status.is-success {
    background: rgba(220, 252, 231, 0.95);
    color: #166534;
}

.student-publish-server-status.is-error {
    background: rgba(254, 226, 226, 0.95);
    color: #b91c1c;
}

.student-publish-bottom-actions {
    position: sticky;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.24fr);
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(244, 249, 255, 0.92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

.student-publish-secondary-btn,
.student-publish-primary-btn {
    min-height: 52px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 900;
    border: none;
}

.student-publish-secondary-btn {
    background: #fff;
    color: #2563eb;
    border: 1.5px solid rgba(105, 154, 243, 0.82);
    box-shadow: 0 14px 24px rgba(59, 130, 246, 0.08);
}

.student-publish-primary-btn {
    background: linear-gradient(90deg, #56d981 0%, #1593ff 100%);
    color: #fff;
    box-shadow: 0 18px 28px rgba(30, 132, 255, 0.24);
}

.student-publish-secondary-btn:disabled,
.student-publish-primary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (min-width: 768px) {
    .student-publish-linked-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-publish-mode-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .student-publish-page {
        padding-bottom: calc(232px + env(safe-area-inset-bottom));
    }

    .student-publish-stage-card,
    .student-publish-task-section,
    .student-publish-linked-card,
    .student-publish-info-card,
    .student-publish-free-card,
    .student-publish-form-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .student-publish-panel-head h2,
    .student-publish-section-head h3 {
        font-size: 16px;
    }

    .student-publish-form-context {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }

    .student-publish-form-context-icon {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .student-publish-upload-head {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .student-publish-upload-head-copy h4 {
        font-size: 22px;
    }

    .student-publish-task-card {
        flex-basis: 160px;
        min-width: 160px;
    }

    .student-publish-info-body p {
        font-size: 14px;
    }

    #studentPublishModeHint {
        width: 100%;
    }

    .student-publish-upload-box {
        min-height: 160px;
    }

    .student-publish-media-preview {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .student-publish-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-publish-showcase-media,
    .student-publish-showcase-empty-cover {
        width: 80px;
    }

    .student-publish-showcase-empty,
    .student-publish-showcase-preview {
        grid-template-columns: 80px minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    .student-publish-page {
        padding-bottom: calc(236px + env(safe-area-inset-bottom));
    }

    .student-publish-form-context small {
        font-size: 11px;
    }

    .student-publish-shell {
        gap: 10px;
    }

    .student-publish-method-grid {
        gap: 10px;
    }

    .student-publish-method-card {
        min-height: 96px;
        padding: 14px 12px;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .student-publish-method-art {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .student-publish-method-copy {
        padding-right: 24px;
    }

    .student-publish-method-copy strong {
        font-size: 14px;
    }

    .student-publish-method-copy small {
        font-size: 12px;
        line-height: 1.35;
    }

    .student-publish-stage-list {
        grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr);
        gap: 6px;
    }

    .student-publish-stage-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 6px;
    }

    .student-publish-stage-index {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .student-publish-stage-item strong {
        font-size: 13px;
    }

    .student-publish-stage-item small {
        display: none;
    }

    .student-publish-task-card {
        flex-basis: 156px;
        min-width: 156px;
        min-height: 198px;
    }

    .student-publish-upload-head {
        grid-template-columns: minmax(0, 1fr) 84px;
        gap: 8px;
    }

    .student-publish-upload-head-copy h4 {
        font-size: 21px;
    }

    .student-publish-mode-grid {
        gap: 8px;
    }

    .student-publish-linked-row,
    .student-publish-book-row {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
    }

    .student-publish-linked-row img,
    .student-publish-book-row img {
        width: 72px;
    }

    .student-publish-linked-row img {
        height: 60px;
    }

    .student-publish-book-row img {
        height: 94px;
    }

    .student-publish-field .form-control,
    .student-publish-field .form-select {
        min-height: 44px;
    }

    .student-publish-field textarea.form-control {
        min-height: 156px;
    }

    .student-publish-upload-mode {
        min-height: 106px;
        padding: 12px 8px 10px;
        border-radius: 18px;
    }

    .student-publish-upload-mode-icon {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .student-publish-upload-mode-copy strong {
        font-size: 15px;
    }

    .student-publish-upload-mode-copy small {
        font-size: 11px;
    }

    .student-publish-upload-box {
        min-height: 148px;
        padding: 16px 14px;
    }

    .student-publish-task-hint {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .student-publish-task-hint-action {
        grid-column: 2;
        justify-self: end;
    }

    .student-publish-preview-thumb {
        width: 72px;
    }

    .student-publish-showcase-head {
        display: grid;
        gap: 4px;
    }

    .student-publish-showcase-head p {
        text-align: left;
    }

    .student-publish-bottom-actions {
        bottom: calc(92px + env(safe-area-inset-bottom));
        padding: 10px;
    }

    .student-publish-secondary-btn,
    .student-publish-primary-btn {
        min-height: 50px;
        font-size: 15px;
    }

    .student-publish-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-publish-cropper-card {
        padding: 14px;
    }

    .student-publish-video-cover-card {
        padding: 14px;
    }

    .student-publish-cropper-stage {
        min-height: 360px;
    }

    .student-publish-cropper-frame {
        width: min(84%, 280px);
    }

    .student-publish-video-cover-preview {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .student-publish-video-cover-preview-thumb {
        width: 72px;
    }

    .student-publish-video-cover-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .student-publish-method-grid,
    .student-publish-bottom-actions {
        grid-template-columns: 1fr;
    }

    .student-publish-bottom-actions {
        bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .student-publish-preview-actions {
        grid-template-columns: 1fr;
    }

    .student-publish-cropper-actions {
        grid-template-columns: 1fr;
    }

    .student-publish-video-cover-preview {
        grid-template-columns: 1fr;
    }
}

.student-member-home-archive-list {
    display: grid;
    gap: 10px;
}

.student-member-home-archive-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(227, 235, 247, 0.92);
}

.student-member-home-archive-row .label {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.student-member-home-archive-row strong {
    color: #10233f;
    font-size: 14px;
    line-height: 1.55;
}

.student-member-home-more-btn {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.94);
    background: rgba(255, 255, 255, 0.98);
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.student-member-home-post-grid {
    gap: 12px;
}

.student-member-home-post-card {
    padding: 12px;
    border-radius: 20px;
}

.student-member-home-post-card.is-collapsed {
    display: none;
}

.student-member-home-post-grid.is-expanded .student-member-home-post-card.is-collapsed {
    display: grid;
}

.student-member-home-post-media {
    aspect-ratio: 1 / 0.78;
}

.student-member-home-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.student-member-home-post-card strong {
    -webkit-line-clamp: 2;
    font-size: 15px;
    line-height: 1.4;
    color: #10233f;
}

.student-member-home-post-card small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.6;
}

.student-member-home-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11px;
    color: #94a3b8;
}

.student-member-home-growth-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.student-member-home-growth-card {
    min-width: 0;
    padding: 14px 10px 12px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
    border: 1px solid rgba(220, 231, 246, 0.92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 4px;
}

.student-member-home-growth-card .icon {
    width: 38px;
    height: 38px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(16, 185, 129, 0.14));
    color: #2563eb;
    font-size: 18px;
}

.student-member-home-growth-card strong {
    font-size: 14px;
    line-height: 1.2;
    color: #10233f;
}

.student-member-home-growth-card small,
.student-member-home-growth-card .trend {
    font-size: 11px;
    line-height: 1.5;
    color: #71829c;
}

.student-member-home-growth-card .value-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.student-member-home-growth-card .value {
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    color: #10233f;
}

.student-member-home-growth-card .unit {
    font-size: 13px;
    font-weight: 800;
    color: #2563eb;
}

.student-member-home-interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.student-member-home-interest-pill {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.34), rgba(220, 252, 231, 0.48));
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}

.student-member-home-empty-text {
    color: #71829c;
    font-size: 13px;
    line-height: 1.7;
}

.student-member-home-recent-link {
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.student-member-home-recent-link p {
    margin: 0;
}

.student-member-home-recent-link span {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
}

.student-member-home-recent-link.is-static span {
    display: none;
}

@media (max-width: 430px) {
    .student-profile-hero-main {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 12px;
    }

    .student-profile-hero-avatar {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    .student-profile-hero-name-row strong {
        font-size: 24px;
    }

    .student-profile-hero-school,
    .student-profile-hero-meta {
        font-size: 12px;
    }

    .student-profile-avatar-row {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .student-profile-avatar-action {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .student-profile-identity-grid {
        grid-template-columns: 1fr;
    }

    .student-member-home-card .profile-home-main {
        flex-wrap: wrap;
    }

    .student-member-home-card .profile-avatar-ring {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .student-member-home-card .d-flex.flex-column.gap-2.ms-auto {
        width: 100%;
        margin-left: 0 !important;
        flex-direction: row !important;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .student-member-home-archive-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 390px) {
    .student-profile-hero-card,
    .student-profile-edit-section,
    .student-member-home-card,
    .student-member-home-intro-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .student-profile-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .student-profile-archive-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .student-member-home-growth-grid {
        grid-template-columns: 1fr;
    }
}

.student-me-security-tip {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(191, 219, 254, 0.9);
}

.student-me-security-tip-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.16), rgba(20, 184, 166, 0.16));
    color: #2563eb;
    font-size: 20px;
}

.student-me-security-tip-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-me-security-tip-copy strong {
    font-size: 15px;
    color: #16396d;
}

.student-me-security-tip-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}

.student-point-summary-card {
    display: grid;
    grid-template-columns: minmax(118px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 14px;
}

.student-point-summary-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.student-point-summary-detail-btn {
    min-height: 100%;
    border: 1px solid rgba(189, 210, 241, 0.96);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    color: #2469e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    padding: 0 12px;
}

.student-point-ranking-panel .teacher-point-ranking-shell,
.student-point-ranking-panel .teacher-point-ranking-board,
.student-point-ranking-panel .student-point-ranking-view,
.student-point-ranking-panel .student-point-podium-board,
.student-point-ranking-panel .student-point-podium-grid,
.student-point-ranking-panel .student-point-table-head,
.student-point-ranking-panel .student-point-table-body,
.student-point-ranking-panel .student-point-row,
.student-point-ranking-panel .student-point-main-cell,
.student-point-ranking-panel .student-point-name-copy,
.student-point-ranking-panel .student-point-detail-list,
.student-point-ranking-panel .student-point-detail-item {
    min-width: 0;
}

.student-point-ranking-panel .teacher-point-rule-page {
    padding-top: 0;
}

.student-point-ranking-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    padding: 0 2px;
}

.student-point-subpage-back-row {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 2px;
    justify-content: flex-start;
}

.student-point-ranking-back {
    flex: 0 0 auto;
}

.student-point-ranking-title {
    font-size: 21px;
    line-height: 1.1;
    font-weight: 900;
    color: #132f64;
    white-space: nowrap;
}

.student-point-ranking-view-chip {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(84, 228, 176, 0.16);
    color: #159a62;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.student-point-ranking-mode-pill {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(239, 245, 255, 0.96);
    color: #2469e8;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(209, 224, 248, 0.96);
}

.student-point-ranking-hero .teacher-point-hero-name-row {
    padding-right: 100px;
}

.student-point-summary-grid {
    margin-top: 2px;
}

.student-point-summary-grid .teacher-point-teacher-metric-card {
    min-width: 0;
}

.student-point-summary-grid .teacher-point-teacher-metric-copy {
    min-width: 0;
}

.student-point-summary-grid .teacher-point-teacher-metric-copy strong {
    display: block;
    min-width: 0;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-point-summary-grid .teacher-point-teacher-metric-value {
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.15;
}

.student-point-podium-board {
    padding: 14px 14px 4px;
    border-radius: 22px;
    border: 1px solid rgba(224, 234, 247, 0.92);
    background:
        radial-gradient(circle at top, rgba(255, 235, 173, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 255, 0.98) 100%);
    box-shadow: 0 10px 24px rgba(21, 66, 126, 0.06);
}

.student-point-podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
}

.student-point-podium-item {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}

.student-point-podium-item.rank-1 {
    order: 2;
}

.student-point-podium-item.rank-2 {
    order: 1;
}

.student-point-podium-item.rank-3 {
    order: 3;
}

.student-point-podium-avatar-wrap {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(180deg, #fff6d7 0%, #ffe29c 100%);
    box-shadow: 0 12px 24px rgba(252, 190, 61, 0.22);
}

.student-point-podium-item.rank-2 .student-point-podium-avatar-wrap,
.student-point-podium-item.rank-3 .student-point-podium-avatar-wrap {
    width: 66px;
    height: 66px;
    background: linear-gradient(180deg, #eff4ff 0%, #dfeaff 100%);
    box-shadow: 0 8px 20px rgba(166, 184, 221, 0.18);
}

.student-point-podium-item.rank-3 .student-point-podium-avatar-wrap {
    background: linear-gradient(180deg, #fff1ea 0%, #ffd7c7 100%);
}

.student-point-podium-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #edf5ff;
}

.student-point-podium-rank {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(180deg, #ffbf2b 0%, #f57c00 100%);
}

.student-point-podium-item.rank-2 .student-point-podium-rank {
    background: linear-gradient(180deg, #c8d4ea 0%, #8898b9 100%);
}

.student-point-podium-item.rank-3 .student-point-podium-rank {
    background: linear-gradient(180deg, #ffb185 0%, #ef6c00 100%);
}

.student-point-podium-stage {
    width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 10px 8px 12px;
    text-align: center;
    min-width: 0;
}

.student-point-podium-item.rank-1 .student-point-podium-stage {
    min-height: 124px;
    background: linear-gradient(180deg, #fff5d9 0%, #ffe8b0 100%);
}

.student-point-podium-item.rank-2 .student-point-podium-stage {
    min-height: 96px;
    background: linear-gradient(180deg, #edf3ff 0%, #dce8ff 100%);
}

.student-point-podium-item.rank-3 .student-point-podium-stage {
    min-height: 86px;
    background: linear-gradient(180deg, #fff0e8 0%, #ffd9ca 100%);
}

.student-point-podium-stage strong,
.student-point-podium-stage span,
.student-point-podium-stage small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-point-podium-stage strong {
    font-size: 18px;
    line-height: 1.2;
    color: #203d70;
    font-weight: 900;
}

.student-point-podium-item.rank-2 .student-point-podium-stage strong,
.student-point-podium-item.rank-3 .student-point-podium-stage strong {
    font-size: 16px;
}

.student-point-podium-stage span {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    color: #ef6c00;
}

.student-point-podium-item.rank-2 .student-point-podium-stage span {
    color: #256fe8;
}

.student-point-podium-item.rank-3 .student-point-podium-stage span {
    color: #f97316;
}

.student-point-podium-stage small {
    margin-top: 4px;
    font-size: 12px;
    color: #7a8ca8;
}

.student-point-ranking-table-card {
    overflow: hidden;
}

.student-point-table-head,
.student-point-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.4fr) 72px 50px 44px;
    align-items: center;
    column-gap: 6px;
}

.student-point-table-head {
    padding: 0 14px 10px;
    color: #8190a9;
    font-size: 13px;
    font-weight: 700;
}

.student-point-table-body {
    display: grid;
}

.student-point-row {
    min-height: 72px;
    padding: 10px 14px;
    border-top: 1px solid rgba(237, 242, 249, 0.96);
}

.student-point-row.current {
    background: linear-gradient(180deg, rgba(238, 247, 255, 0.92) 0%, rgba(241, 253, 249, 0.92) 100%);
    box-shadow: inset 0 0 0 1px rgba(179, 229, 214, 0.9);
}

.student-point-rank-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #43557a;
}

.student-point-main-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-point-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 40px;
    border: 2px solid rgba(207, 230, 255, 0.95);
    background: #edf5ff;
}

.student-point-name-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.student-point-name-copy strong,
.student-point-name-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-point-name-copy strong {
    font-size: 14px;
    line-height: 18px;
    color: #1f4178;
    font-weight: 800;
}

.student-point-name-copy small {
    font-size: 11px;
    line-height: 15px;
    color: #8b97ad;
}

.student-point-class-cell,
.student-point-score-cell,
.student-point-change-cell {
    font-size: 13px;
    color: #203d70;
    font-weight: 700;
}

.student-point-class-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-point-score-cell,
.student-point-change-cell {
    justify-self: end;
    white-space: nowrap;
}

.student-point-ranking-panel.student-scope-class .student-point-table-head,
.student-point-ranking-panel.student-scope-class .student-point-row {
    grid-template-columns: 34px minmax(0, 1fr) 50px 44px;
}

.student-point-ranking-panel.student-scope-class .student-point-class-head,
.student-point-ranking-panel.student-scope-class .student-point-class-cell {
    display: none;
}

.student-point-ranking-panel.student-scope-class .student-point-name-copy small {
    display: none;
}

.student-point-ranking-panel.student-scope-class .student-point-row {
    min-height: 64px;
}

.student-point-bottom-grid {
    align-items: start;
}

.student-point-bottom-grid .teacher-point-rule-board {
    padding: 14px;
}

.student-point-bottom-grid .teacher-point-rule-grid {
    gap: 10px;
}

.student-point-bottom-grid .teacher-point-rule-item {
    grid-template-columns: 36px minmax(0, 1fr) 84px !important;
    min-height: 58px;
}

.student-point-bottom-grid .teacher-point-rule-copy small {
    font-size: 11px;
}

.student-point-bottom-grid .teacher-point-rule-score {
    width: 84px;
    font-size: 14px;
    line-height: 18px;
}

.student-point-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-point-detail-page-card {
    gap: 12px;
}

.student-point-detail-total {
    font-size: 15px;
    font-weight: 800;
    color: #2469e8;
}

.student-point-detail-list {
    display: grid;
    gap: 10px;
}

.student-point-detail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid rgba(233, 240, 248, 0.92);
}

.student-point-detail-item:first-child {
    border-top: none;
    padding-top: 0;
}

.student-point-detail-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.student-point-detail-copy strong,
.student-point-detail-copy span,
.student-point-detail-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-point-detail-copy strong {
    font-size: 14px;
    line-height: 18px;
    color: #203d70;
    font-weight: 800;
}

.student-point-detail-copy span {
    font-size: 12px;
    line-height: 16px;
    color: #7384a0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.student-point-detail-copy small {
    font-size: 11px;
    line-height: 15px;
    color: #98a2b3;
    white-space: nowrap;
}

.student-point-detail-score {
    align-self: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    white-space: nowrap;
}

.student-point-detail-score.positive {
    color: #ff4d4f;
}

.student-point-detail-score.negative {
    color: #16a34a;
}

.student-point-detail-score.neutral {
    color: #98a2b3;
}

@media (max-width: 390px) {
    .student-me-hero-card {
        padding: 16px 12px 13px;
    }

    .student-me-hero-top {
        --student-me-action-gap: 4px;
        --student-me-action-tile-width: 40px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .student-me-avatar-wrap,
    .student-me-avatar {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .student-me-name {
        font-size: 17px;
        min-width: 76px;
        max-width: none;
    }

    .student-me-quick-tile {
        height: 50px;
        min-height: 50px;
    }

    .student-me-role-badge {
        margin-left: 4px;
        padding: 1px 6px;
    }

    .student-me-school-row {
        font-size: 10.5px;
        gap: 4px;
    }

    .student-me-class-number-row {
        padding-left: 66px;
        font-size: 11px;
    }

    .student-me-student-number {
        flex: 1 1 auto;
        min-width: 0;
    }

    .student-me-actions {
        margin-left: 4px;
    }

    .student-me-stats-row {
        grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.28fr);
        gap: 6px;
    }

    .student-me-stats-row .student-point-summary-side {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 6px;
    }

    .student-me-stat-card,
    .student-me-score-card,
    .student-me-ranking-entry,
    .student-me-notice-btn {
        min-height: 56px;
        height: 56px;
    }

    .student-me-score-card {
        padding: 8px 9px;
    }

    .student-me-score-card .score-value {
        font-size: 21px;
    }

    .student-me-ranking-entry {
        padding: 0 7px;
    }

    .student-me-ranking-entry .teacher-point-ranking-copy strong,
    .student-me-rank-card .rank-title {
        font-size: 11px;
    }

    .student-me-ranking-entry .teacher-point-ranking-copy small,
    .student-me-rank-card .rank-subtitle {
        font-size: 9px;
    }

    .student-me-notice-btn {
        width: 44px;
        min-width: 0;
    }

    .student-me-member-entry-card {
        min-height: 82px;
        font-size: 15px;
    }

    .student-me-readonly-grid {
        grid-template-columns: 1fr;
    }

    .student-point-ranking-title {
        font-size: 18px;
    }

    .student-point-ranking-mode-pill {
        padding: 0 10px;
        font-size: 11px;
    }

    .student-point-ranking-hero .teacher-point-hero-name-row {
        padding-right: 88px;
    }

    .student-point-podium-avatar-wrap {
        width: 72px;
        height: 72px;
    }

    .student-point-podium-item.rank-2 .student-point-podium-avatar-wrap,
    .student-point-podium-item.rank-3 .student-point-podium-avatar-wrap {
        width: 60px;
        height: 60px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-copy strong {
        font-size: 12px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-card {
        padding: 10px 7px;
        gap: 6px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-subline {
        font-size: 11px;
    }

    .student-point-podium-stage strong {
        font-size: 16px;
    }

    .student-point-podium-item.rank-2 .student-point-podium-stage strong,
    .student-point-podium-item.rank-3 .student-point-podium-stage strong {
        font-size: 14px;
    }

    .student-point-table-head,
    .student-point-row {
        grid-template-columns: 32px minmax(0, 1.32fr) 66px 48px 42px;
        column-gap: 5px;
    }

    .student-point-ranking-panel.student-scope-class .student-point-table-head,
    .student-point-ranking-panel.student-scope-class .student-point-row {
        grid-template-columns: 32px minmax(0, 1fr) 48px 42px;
    }
}

@media (max-width: 360px) {
    .student-me-hero-top {
        --student-me-action-gap: 3px;
        --student-me-action-tile-width: 38px;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .student-me-name {
        font-size: 16px;
        min-width: 70px;
        max-width: none;
    }

    .student-me-quick-text {
        font-size: 8px;
    }

    .student-me-admin-console-btn {
        min-height: 24px;
        padding: 4px 5px;
        font-size: 10px;
    }

    .student-me-quick-tile {
        height: 48px;
        min-height: 48px;
    }

    .student-me-class-number-row {
        padding-left: 64px;
        font-size: 10.5px;
    }

    .student-me-stats-row {
        grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1.3fr);
        gap: 5px;
    }

    .student-me-stats-row .student-point-summary-side {
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 5px;
    }

    .student-me-stat-card,
    .student-me-score-card,
    .student-me-ranking-entry,
    .student-me-notice-btn {
        min-height: 54px;
        height: 54px;
    }

    .student-me-score-card .score-value {
        font-size: 20px;
    }

    .student-me-ranking-entry .teacher-point-ranking-copy small,
    .student-me-rank-card .rank-subtitle {
        display: none;
    }

    .student-me-rank-card {
        gap: 6px;
    }

    .student-me-notice-btn {
        width: 42px;
        min-width: 0;
    }

    .student-me-member-entry-row {
        grid-template-columns: 1fr;
    }

    .student-me-member-entry-card {
        min-height: 74px;
    }

    .student-point-summary-card {
        grid-template-columns: minmax(106px, 0.82fr) minmax(0, 1.18fr);
    }

    .student-point-summary-side {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .student-point-summary-detail-btn {
        min-height: 44px;
    }

    .student-point-ranking-topbar {
        display: flex;
    }

    .student-point-ranking-mode-pill {
        display: none;
    }

    .student-point-ranking-title-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .student-point-podium-grid {
        gap: 6px;
    }

    .student-point-podium-stage strong {
        font-size: 15px;
    }

    .student-point-table-head,
    .student-point-row {
        grid-template-columns: 30px minmax(0, 1.25fr) 60px 44px 38px;
        column-gap: 4px;
    }

    .student-point-row {
        min-height: 68px;
        padding: 10px 10px;
    }

    .student-point-ranking-panel.student-scope-class .student-point-table-head,
    .student-point-ranking-panel.student-scope-class .student-point-row {
        grid-template-columns: 30px minmax(0, 1fr) 44px 38px;
    }

    .student-point-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .student-point-name-copy strong {
        font-size: 13px;
    }

    .student-point-name-copy small,
    .student-point-class-cell,
    .student-point-score-cell,
    .student-point-change-cell {
        font-size: 12px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-copy strong {
        font-size: 11px;
    }

    .student-point-summary-grid .teacher-point-teacher-metric-subline {
        font-size: 10px;
    }

    .student-point-bottom-grid .teacher-point-rule-item {
        grid-template-columns: 34px minmax(0, 1fr) 74px !important;
        column-gap: 8px;
        min-height: 56px;
    }

    .student-point-bottom-grid .teacher-point-rule-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .student-point-bottom-grid .teacher-point-rule-copy strong {
        font-size: 14px;
    }

    .student-point-bottom-grid .teacher-point-rule-copy small {
        font-size: 10px;
    }

    .student-point-bottom-grid .teacher-point-rule-score {
        width: 74px;
        font-size: 13px;
    }

.student-point-podium-stage strong {
        font-size: 14px;
    }
}

.student-reading-insight-module {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 20px 16px;
    background:
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(196, 181, 253, 0.16), transparent 30%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid rgba(191, 219, 254, 0.72);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.student-reading-insight-module,
.student-reading-insight-module * {
    box-sizing: border-box;
}

html,
body.student-reading-insight-page,
body.student-reading-insight-page .mobile-shell,
body.student-reading-insight-page .mobile-page-shell,
body.student-reading-insight-page .mobile-page-content {
    overflow-x: hidden;
}

body.student-reading-insight-page .mobile-shell.app-home-shell {
    width: 100%;
    max-width: 430px;
}

body.student-reading-insight-page .mobile-page-content.student-reading-insight-page-content {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

.student-reading-insight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.student-reading-insight-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.student-reading-insight-head-title {
    line-height: 1.35;
}

.student-reading-insight-head-desc {
    margin-top: 8px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.student-reading-insight-score {
    flex-shrink: 0;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.9);
    color: #0f172a;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.14);
}

.student-reading-insight-loading,
.student-reading-insight-empty {
    border-radius: 20px;
    padding: 18px 16px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(191, 219, 254, 0.9);
    color: #64748b;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

.student-reading-insight-content {
    display: grid;
    gap: 16px;
}

.student-reading-insight-content > .student-reading-insight-block:last-child {
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
}

.student-reading-insight-block {
    width: 100%;
    max-width: 100%;
    border-radius: 22px;
    padding: 18px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.82));
    border: 1px solid rgba(219, 234, 254, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
}

.student-reading-insight-block.keyword-cloud {
    background:
        radial-gradient(circle at 15% 84%, rgba(191, 219, 254, 0.24), transparent 18%),
        radial-gradient(circle at 85% 18%, rgba(253, 224, 71, 0.14), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.86));
}

.student-reading-insight-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.student-reading-insight-block-head.growth-head {
    margin-bottom: 12px;
}

.student-reading-insight-growth-header {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

.student-reading-insight-growth-header-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 18px;
}

.student-reading-insight-growth-header-title {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #10233f;
    white-space: nowrap;
}

.student-reading-insight-growth-header-desc {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 400;
    color: #6b7a90;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-reading-insight-block-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}

.student-reading-insight-block-title i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(16, 185, 129, 0.12));
    color: #2563eb;
    font-size: 16px;
}

.student-reading-insight-block-subtitle,
.student-reading-insight-side-note {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.student-reading-insight-side-note {
    flex-shrink: 0;
    text-align: right;
}

.student-reading-insight-growth-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
}

.student-reading-insight-growth-track::-webkit-scrollbar,
.student-reading-insight-review-strip::-webkit-scrollbar {
    display: none;
}

.student-reading-insight-growth-card {
    position: relative;
    min-width: 0;
    max-width: 100%;
    border-radius: 14px;
    padding: 10px 8px;
    border: 1px solid rgba(226, 232, 240, 0.88);
    box-shadow: 0 10px 20px rgba(148, 163, 184, 0.12);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.student-reading-insight-growth-card.green {
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(220, 252, 231, 0.92));
}

.student-reading-insight-growth-card.blue {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
}

.student-reading-insight-growth-card.purple {
    background: linear-gradient(180deg, rgba(250, 245, 255, 0.98), rgba(237, 233, 254, 0.92));
}

.student-reading-insight-growth-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    background: rgba(255, 255, 255, 0.78);
    color: #2563eb;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.student-reading-insight-growth-card.green .student-reading-insight-growth-icon {
    color: #16a34a;
}

.student-reading-insight-growth-card.purple .student-reading-insight-growth-icon {
    color: #7c3aed;
}

.student-reading-insight-growth-title {
    color: #0f172a;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.student-reading-insight-growth-label {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.student-reading-insight-growth-value {
    margin-top: 6px;
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    text-align: center;
}

.student-reading-insight-growth-card.green .student-reading-insight-growth-value {
    color: #15803d;
}

.student-reading-insight-growth-card.blue .student-reading-insight-growth-value {
    color: #2563eb;
}

.student-reading-insight-growth-card.purple .student-reading-insight-growth-value {
    color: #7c3aed;
}

.student-reading-insight-growth-value span {
    margin-left: 3px;
    font-size: 12px;
    font-weight: 700;
}

.student-reading-insight-growth-trend {
    margin-top: 5px;
    color: #475569;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.student-reading-insight-keyword-cloud {
    display: grid;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 8px;
    padding: 18px 10px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 50%, rgba(219, 234, 254, 0.34), transparent 52%),
        radial-gradient(circle at 12% 80%, rgba(191, 219, 254, 0.18), transparent 18%),
        radial-gradient(circle at 88% 16%, rgba(254, 240, 138, 0.18), transparent 16%);
}

.student-reading-insight-keyword-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px 12px;
    min-width: 0;
}

.student-reading-insight-keyword-row.is-top,
.student-reading-insight-keyword-row.is-bottom {
    gap: 6px 14px;
}

.student-reading-insight-keyword-row.is-core {
    gap: 10px;
}

.student-reading-insight-keyword {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: min(100%, 8.5em);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.student-reading-insight-keyword.is-hero {
    font-weight: 900;
    letter-spacing: 0.03em;
}

.student-reading-insight-keyword.is-xl {
    font-weight: 900;
}

.student-reading-insight-keyword.is-lg {
    font-weight: 800;
}

.student-reading-insight-keyword.tone-blue {
    color: #2563eb;
}

.student-reading-insight-keyword.tone-green {
    color: #16a34a;
}

.student-reading-insight-keyword.tone-purple {
    color: #7c3aed;
}

.student-reading-insight-keyword.tone-orange {
    color: #ea580c;
}

.student-reading-insight-keyword-empty,
.student-reading-insight-review-empty {
    border-radius: 20px;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px dashed rgba(191, 219, 254, 0.92);
    color: #64748b;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

.student-reading-insight-review-empty.featured {
    margin-bottom: 10px;
}

.student-reading-insight-featured-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 20px;
    padding: 16px 14px;
    background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.34), transparent 22%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
    border: 1px solid rgba(191, 219, 254, 0.9);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.10);
}

.student-reading-insight-featured-topline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.10);
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.student-reading-insight-featured-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.student-reading-insight-robot-wrap {
    min-width: 0;
}

.student-reading-insight-robot {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.26));
    color: #2563eb;
    font-size: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.student-reading-insight-featured-work-main {
    flex: 1;
    min-width: 0;
}

.student-reading-insight-featured-title {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.student-reading-insight-featured-meta {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-reading-insight-featured-score {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 6px 8px;
    border-radius: 12px;
    text-align: center;
    background: rgba(226, 232, 240, 0.58);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.student-reading-insight-featured-score span {
    display: block;
    font-size: 10px;
    line-height: 1.1;
}

.student-reading-insight-featured-score strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.1;
}

.student-reading-insight-feedback-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-top: 12px;
}

.student-reading-insight-feedback-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.student-reading-insight-feedback-label i {
    font-size: 13px;
}

.student-reading-insight-feedback-label.success {
    color: #059669;
}

.student-reading-insight-feedback-label.warning {
    color: #ea580c;
}

.student-reading-insight-feedback-text {
    color: #1e293b;
    font-size: 12px;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.student-reading-insight-detail-btn {
    margin-top: 16px;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-size: 14px;
    font-weight: 800;
}

.student-reading-insight-review-strip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 10px;
}

.student-reading-insight-review-strip-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.student-reading-insight-review-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 4px 0 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.student-reading-insight-review-chip {
    flex: 0 0 142px;
    width: 142px;
    min-width: 142px;
    max-width: 142px;
    border-radius: 14px;
    border: 1px solid rgba(219, 234, 254, 0.92);
    background: rgba(255, 255, 255, 0.88);
    padding: 10px 10px;
    text-align: left;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.12);
    scroll-snap-align: start;
    overflow: hidden;
}

.student-reading-insight-review-chip.is-active {
    border-color: rgba(37, 99, 235, 0.88);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.16);
}

.student-reading-insight-review-chip-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    min-height: 34px;
}

.student-reading-insight-review-chip-title-main,
.student-reading-insight-review-chip-title-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.student-reading-insight-review-chip-title-sub {
    color: #334155;
    margin-top: 2px;
}

.student-reading-insight-review-chip-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: 12px;
}

.student-reading-insight-review-chip-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 7px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 900;
    background: rgba(226, 232, 240, 0.58);
    color: #64748b;
}

.student-reading-insight-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.student-reading-insight-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
}

.student-reading-insight-modal-panel {
    position: absolute;
    left: 50%;
    top: max(10px, env(safe-area-inset-top));
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(94vw, 520px);
    max-height: none;
    overflow-y: auto;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    padding: 20px 16px 18px;
}

.student-reading-insight-modal-close {
    position: absolute;
    top: 14px;
    left: 12px;
}

.student-reading-insight-modal-close i {
    font-size: 22px;
    line-height: 1;
}

.student-reading-insight-modal-close span {
    display: block;
    font-size: 30px;
    line-height: 1;
    font-weight: 300;
    transform: translateY(-1px);
}

.student-reading-insight-modal-body {
    padding-top: 28px;
}

.student-reading-insight-modal-title {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 900;
    padding-right: 12px;
}

.student-reading-insight-modal-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: #64748b;
    font-size: 13px;
}

.student-reading-insight-modal-score {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.58);
    color: #64748b;
    font-weight: 800;
}

.score-excellent {
    --student-reading-score-color: #159a5b;
    --student-reading-score-bg: rgba(22, 163, 74, 0.14);
}

.score-good {
    --student-reading-score-color: #1d77d0;
    --student-reading-score-bg: rgba(59, 130, 246, 0.14);
}

.score-improve {
    --student-reading-score-color: #d97706;
    --student-reading-score-bg: rgba(251, 191, 36, 0.20);
}

.score-low {
    --student-reading-score-color: #7c3aed;
    --student-reading-score-bg: rgba(167, 139, 250, 0.18);
}

.score-unrated {
    --student-reading-score-color: #64748b;
    --student-reading-score-bg: rgba(226, 232, 240, 0.58);
}

.student-reading-insight-featured-score.score-excellent,
.student-reading-insight-featured-score.score-good,
.student-reading-insight-featured-score.score-improve,
.student-reading-insight-featured-score.score-low,
.student-reading-insight-featured-score.score-unrated,
.student-reading-insight-review-chip-score.score-excellent,
.student-reading-insight-review-chip-score.score-good,
.student-reading-insight-review-chip-score.score-improve,
.student-reading-insight-review-chip-score.score-low,
.student-reading-insight-review-chip-score.score-unrated,
.student-reading-insight-modal-score.score-excellent,
.student-reading-insight-modal-score.score-good,
.student-reading-insight-modal-score.score-improve,
.student-reading-insight-modal-score.score-low,
.student-reading-insight-modal-score.score-unrated {
    background: var(--student-reading-score-bg);
    color: var(--student-reading-score-color);
}

.student-reading-insight-featured-score.score-excellent strong,
.student-reading-insight-featured-score.score-good strong,
.student-reading-insight-featured-score.score-improve strong,
.student-reading-insight-featured-score.score-low strong,
.student-reading-insight-featured-score.score-unrated strong {
    color: var(--student-reading-score-color);
}

.student-reading-insight-modal-keywords {
    margin-top: 16px;
}

.student-reading-insight-modal-keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.student-reading-insight-modal-keyword {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.student-reading-insight-modal-summary {
    margin-top: 16px;
    border-radius: 20px;
    padding: 14px 14px 12px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.86);
}

.student-reading-insight-modal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #059669;
    font-size: 13px;
    font-weight: 800;
}

.student-reading-insight-modal-label.warning {
    color: #ea580c;
}

.student-reading-insight-modal-summary p,
.student-reading-insight-modal-detail p {
    margin: 10px 0 0;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.8;
}

.student-reading-insight-modal-detail {
    margin-top: 18px;
}

.student-reading-insight-modal-detail-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

body.reading-insight-modal-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .student-reading-insight-head {
        align-items: flex-start;
    }

    .student-reading-insight-head-main {
        width: 100%;
        padding-right: 2px;
    }

    .student-reading-insight-head-title {
        font-size: 16px;
    }

    .student-reading-insight-head-desc {
        font-size: 13px;
        line-height: 1.65;
    }

    .student-reading-insight-score {
        font-size: 14px;
        max-width: calc(100vw - 90px);
    }

    .student-reading-insight-block {
        padding: 16px 14px;
        border-radius: 22px;
    }

    .student-reading-insight-block-head {
        gap: 8px;
    }

    .student-reading-insight-side-note {
        font-size: 12px;
        white-space: nowrap;
    }

    .student-reading-insight-growth-header-title {
        font-size: 15px;
    }

    .student-reading-insight-growth-track {
        gap: 8px;
    }

    .student-reading-insight-growth-card {
        padding: 10px 7px;
    }

    .student-reading-insight-growth-value {
        font-size: 22px;
    }

    .student-reading-insight-keyword-cloud {
        padding: 16px 8px;
        gap: 7px;
    }

    .student-reading-insight-keyword-row {
        gap: 7px 10px;
    }

    .student-reading-insight-featured-header {
        gap: 10px;
    }

    .student-reading-insight-featured-title {
        font-size: 15px;
    }

    .student-reading-insight-feedback-text {
        font-size: 12px;
    }

    .student-reading-insight-review-chip {
        flex-basis: 142px;
        width: 142px;
        min-width: 142px;
        max-width: 142px;
    }

    .student-reading-insight-modal-panel {
        width: calc(100vw - 20px);
        border-radius: 24px;
        padding: 20px 16px 18px;
    }

    .student-reading-insight-modal-title {
        font-size: 18px;
    }

    .student-reading-insight-modal-summary p,
    .student-reading-insight-modal-detail p {
        font-size: 13px;
        line-height: 1.72;
    }
}

@media (max-width: 389px) {
    .student-reading-insight-head-title {
        font-size: 15px;
    }

    .student-reading-insight-score {
        font-size: 13px;
        padding: 7px 10px;
    }

    .student-reading-insight-growth-header-desc {
        font-size: 11px;
    }

    .student-reading-insight-growth-title {
        font-size: 12px;
    }

    .student-reading-insight-growth-label,
    .student-reading-insight-growth-trend {
        font-size: 11px;
    }

    .student-reading-insight-growth-value {
        font-size: 21px;
    }
}

/* ===== 学生端 账号安全 子页面 ===== */
.student-account-security-page {
    padding: 12px 16px 40px;
}
.student-account-security-header {
    position: relative;
    text-align: center;
    padding: 8px 0 4px;
    min-height: 44px;
}
.student-account-security-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    color: #334155;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.student-account-security-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}
.student-account-security-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #94a3b8;
}
.student-account-security-id-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(120deg, #2f7df6 0%, #2bb6d6 100%);
    box-shadow: 0 10px 24px rgba(43, 130, 214, 0.28);
    overflow: hidden;
}
.student-account-security-avatar-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: rgba(255, 255, 255, 0.85);
    flex: 0 0 auto;
}
.student-account-security-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.student-account-security-id-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}
.student-account-security-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.student-account-security-role-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
}
.student-account-security-shield {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 56px;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.student-account-security-form {
    margin: 0;
}
.student-account-security-password-card {
    margin-top: 18px;
    padding: 20px 18px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.student-account-security-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.student-account-security-lock {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e8f0fe;
    color: #2f7df6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.student-account-security-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.student-account-security-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: #f6f8fb;
    border: 1px solid #eef2f7;
}
.student-account-security-field-label {
    flex: 0 0 76px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.student-account-security-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    padding: 2px 0;
}
.student-account-security-input::placeholder {
    color: #aab4c2;
}
.student-account-security-eye {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.student-account-security-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 2px 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
}
.student-account-security-hint i {
    margin-top: 1px;
    flex: 0 0 auto;
}
.student-account-security-save-btn {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(120deg, #2f7df6 0%, #2bb6d6 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(43, 130, 214, 0.3);
}
.student-account-security-save-btn:active {
    transform: translateY(1px);
}
.student-account-security-tip {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translate(-50%, -12px);
    z-index: 3000;
    max-width: 80vw;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.student-account-security-tip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ===== 学生端 修改资料 子页面 ===== */
.student-profile-edit-page {
    padding: 10px 14px 24px;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.student-profile-edit-header {
    position: relative;
    text-align: center;
    padding: 8px 0 4px;
    min-height: 44px;
}
.student-profile-edit-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    color: #334155;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.student-profile-edit-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
}
.student-profile-edit-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #94a3b8;
}
.student-profile-edit-id-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(120deg, #7fb4ff 0%, #a9cdff 55%, #bfe0ff 100%);
    box-shadow: 0 10px 24px rgba(79, 134, 214, 0.22);
    overflow: hidden;
}
.student-profile-edit-avatar-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    flex: 0 0 auto;
    z-index: 1;
}
.student-profile-edit-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.student-profile-edit-id-info {
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}
.student-profile-edit-id-namerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.student-profile-edit-name {
    font-size: 19px;
    font-weight: 700;
    color: #1e3a5f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.student-profile-edit-role-badge {
    flex: 0 0 auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #16a34a;
    font-size: 11px;
    font-weight: 600;
}
.student-profile-edit-id-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #2c5282;
    line-height: 1.7;
    min-width: 0;
}
.student-profile-edit-id-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.student-profile-edit-card {
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}
.student-profile-edit-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.student-profile-edit-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}
.student-profile-edit-card-icon.blue { background: #e8f0fe; color: #2f7df6; }
.student-profile-edit-card-icon.green { background: #e6f7ee; color: #16a34a; }
.student-profile-edit-card-icon.orange { background: #fdf0e2; color: #f08a24; }
.student-profile-edit-card-icon.purple { background: #f0ebfe; color: #8b5cf6; }
.student-profile-edit-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}
.student-profile-edit-card-sub {
    font-size: 12px;
    color: #94a3b8;
}
.student-profile-edit-row2 {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}
.student-profile-edit-row2 > .student-profile-edit-card {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}
.student-profile-edit-page .student-profile-edit-gender-options {
    display: flex;
    gap: 10px;
}
.student-profile-edit-page .student-profile-edit-gender-tile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    border: 1.5px solid #eef2f7;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    min-height: 44px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.student-profile-edit-page .student-profile-edit-gender-tile.is-active {
    border-color: #2f7df6;
    background: #eaf2ff;
    color: #2f7df6;
    font-weight: 600;
}
.student-profile-edit-page .student-profile-edit-gender-tile:active {
    transform: scale(0.98);
}

.student-profile-edit-page .student-profile-edit-appearance-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(143, 188, 255, 0.22);
    box-shadow: 0 8px 22px rgba(56, 105, 165, 0.08);
}

.student-profile-edit-page .student-profile-edit-avatar-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 14px;
    padding: 13px;
    border-radius: 15px;
    background: linear-gradient(135deg, #eef8ff 0%, #edf9f4 100%);
}

.student-profile-edit-page .student-profile-edit-avatar-choice,
.student-profile-edit-page .student-profile-edit-avatar-preview-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.student-profile-edit-page .student-profile-edit-avatar-label {
    width: 100%;
    color: #52647a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.student-profile-edit-page .student-profile-edit-default-avatar {
    position: relative;
    width: 82px;
    height: 82px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 5px 14px rgba(47, 125, 246, 0.11);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.student-profile-edit-page .student-profile-edit-default-avatar:hover,
.student-profile-edit-page .student-profile-edit-default-avatar:focus-visible,
.student-profile-edit-page .student-profile-edit-default-avatar.is-selected {
    border-color: #2f7df6;
    box-shadow: 0 6px 16px rgba(47, 125, 246, 0.2);
    outline: none;
}

.student-profile-edit-page .student-profile-edit-default-avatar:active {
    transform: scale(0.97);
}

.student-profile-edit-page .student-profile-edit-default-avatar img,
.student-profile-edit-page .student-profile-edit-avatar-preview img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    display: block;
}

.student-profile-edit-page .student-profile-edit-default-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2f7df6;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.student-profile-edit-page .student-profile-edit-default-avatar.is-selected .student-profile-edit-default-check {
    opacity: 1;
    transform: scale(1);
}

.student-profile-edit-page .student-profile-edit-avatar-preview {
    width: 78px;
    height: 78px;
    padding: 3px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 14px rgba(35, 85, 135, 0.13);
}

.student-profile-edit-page .student-profile-edit-avatar-choice small,
.student-profile-edit-page .student-profile-edit-avatar-preview-wrap small {
    width: 100%;
    color: #7a8ca2;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-profile-edit-page .student-profile-edit-upload-row {
    margin: 12px 0 0;
}

.student-profile-edit-page .student-profile-edit-upload-btn {
    width: 100%;
    min-height: 52px;
    padding: 8px 11px;
    border: 1px solid #e8eef7;
    border-radius: 14px;
    background: #fff;
    color: #28384e;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.student-profile-edit-page .student-profile-edit-upload-btn:hover,
.student-profile-edit-page .student-profile-edit-upload-btn:focus-visible {
    border-color: #9fc6ff;
    background: #f8fbff;
    outline: none;
}

.student-profile-edit-page .student-profile-edit-upload-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #eaf2ff;
    color: #2f7df6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.student-profile-edit-page .student-profile-edit-upload-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.student-profile-edit-page .student-profile-edit-upload-copy strong,
.student-profile-edit-page .student-profile-edit-upload-copy small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-profile-edit-page .student-profile-edit-upload-copy strong {
    font-size: 13px;
    font-weight: 700;
}

.student-profile-edit-page .student-profile-edit-upload-copy small {
    color: #8a9aaf;
    font-size: 10px;
}

.student-profile-edit-page .student-profile-edit-upload-arrow {
    color: #9aa9bc;
    font-size: 13px;
    flex: 0 0 auto;
}

@media (max-width: 430px) {
    .student-profile-edit-page .student-profile-edit-appearance-card {
        padding: 13px;
    }

    .student-profile-edit-page .student-profile-edit-avatar-picker {
        gap: 9px;
        padding: 12px 9px;
    }
}

@media (max-width: 360px) {
    .student-profile-edit-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .student-profile-edit-page .student-profile-edit-appearance-card {
        justify-self: stretch;
    }

    .student-profile-edit-page .student-profile-edit-gender-options {
        gap: 7px;
    }

    .student-profile-edit-page .student-profile-edit-default-avatar {
        width: 72px;
        height: 72px;
        border-radius: 19px;
    }

    .student-profile-edit-page .student-profile-edit-avatar-preview {
        width: 68px;
        height: 68px;
    }

    .student-profile-edit-page .student-profile-edit-upload-copy small {
        display: none;
    }
}
.student-profile-edit-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.student-profile-edit-avatar-mini {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
    cursor: pointer;
}
.student-profile-edit-avatar-mini img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.student-profile-edit-avatar-cam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2f7df6;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.student-profile-edit-avatar-side {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.student-profile-edit-avatar-btn {
    align-self: flex-start;
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(120deg, #2f7df6 0%, #2bb6d6 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.student-profile-edit-avatar-side small {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}
.student-profile-edit-intro-wrap {
    position: relative;
}
.student-profile-edit-intro {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 14px 24px;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
}
.student-profile-edit-intro::placeholder {
    color: #aab4c2;
}
.student-profile-edit-intro-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 12px;
    color: #94a3b8;
}
.student-profile-edit-archive {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.student-profile-edit-archive-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.student-profile-edit-archive-row i {
    flex: 0 0 auto;
    font-size: 15px;
}
.student-profile-edit-archive-row .arc-heart { color: #ef4f7a; }
.student-profile-edit-archive-row .arc-mark { color: #8b5cf6; }
.student-profile-edit-archive-row .arc-star { color: #2f7df6; }
.student-profile-edit-archive-row .arc-sun { color: #f59e0b; }
.student-profile-edit-archive-label {
    flex: 0 0 96px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.student-profile-edit-archive-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    text-align: right;
}
.student-profile-edit-archive-input::placeholder {
    color: #aab4c2;
}
.student-profile-edit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.student-profile-edit-tag {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1.5px solid #eef2f7;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
}
.student-profile-edit-tag.is-active {
    border-color: #2bb6d6;
    background: linear-gradient(120deg, #eaf2ff 0%, #e3f7fb 100%);
    color: #1d76a8;
    font-weight: 600;
}
.student-profile-edit-identity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.student-profile-edit-identity-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.student-profile-edit-identity-label {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    min-width: 36px;
}
.student-profile-edit-identity-readonly {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 36px 10px 12px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.student-profile-edit-identity-lock {
    position: absolute;
    right: 12px;
    color: #cbd5e1;
    font-size: 13px;
}
.student-profile-edit-identity-grid {
    display: flex;
    gap: 12px;
}
.student-profile-edit-identity-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-profile-edit-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #f8fafc;
    color: #1e293b;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.student-profile-edit-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(120deg, #2f7df6 0%, #2bb6d6 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(43, 130, 214, 0.3);
}
.student-profile-edit-save-btn:active {
    transform: translateY(1px);
}

@media (max-width: 390px) {
    #weeklyGameWallSection.student-home-page {
        padding-bottom: calc(152px + env(safe-area-inset-bottom));
    }

    #weeklyGameWallSection .student-weekly-preview-card {
        padding: 14px;
        gap: 11px;
    }

    #weeklyGameWallSection .student-weekly-preview-head {
        gap: 8px;
    }

    #weeklyGameWallSection .student-weekly-preview-copy h3,
    #weeklyGameWallSection .student-weekly-question-copy h3 {
        font-size: 21px;
    }

    #weeklyGameWallSection .student-weekly-preview-subtitle,
    #weeklyGameWallSection .student-weekly-preview-direction,
    #weeklyGameWallSection .student-weekly-preview-reminder,
    #weeklyGameWallSection .student-weekly-preview-step-copy p,
    #weeklyGameWallSection .student-weekly-question-text {
        font-size: 13px;
    }

    #weeklyGameWallSection .student-weekly-preview-period-tags span {
        min-height: 25px;
        padding: 0 8px;
        font-size: 11px;
    }

    #weeklyGameWallSection .student-weekly-preview-step {
        grid-template-columns: 22px 42px minmax(0, 1fr);
        min-height: 70px;
        padding: 10px;
    }

    #weeklyGameWallSection .student-weekly-preview-step-no {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    #weeklyGameWallSection .student-weekly-preview-step-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    #weeklyGameWallSection .student-weekly-preview-step-copy strong {
        font-size: 14px;
    }

    #weeklyGameWallSection .student-weekly-preview-honor-item {
        min-height: 58px;
        padding: 9px 10px;
    }

    #weeklyGameWallSection .student-weekly-preview-honor-item strong {
        font-size: 13px;
    }

    #weeklyGameWallSection .student-weekly-preview-honor-item span {
        font-size: 11px;
    }

    #weeklyGameWallSection .student-weekly-preview-stats span {
        font-size: 12px;
        padding: 0 11px;
    }

    #weeklyGameWallSection .student-weekly-preview-footer .btn {
        min-height: 44px;
        font-size: 15px;
    }
}

/* 老师当前任务详情：以手机端参考图的紧凑表格为准。 */
.teacher-task-detail-subtitle {
    margin: -2px 0 0;
    color: #718096;
    font-size: 14px;
    line-height: 1.45;
}

.teacher-task-detail-quick-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: center;
}

.teacher-task-table-row {
    display: grid;
    grid-template-columns: 28px minmax(190px, 1fr) 82px 128px 72px;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    background: #fff;
}

.teacher-task-table-row:last-child {
    border-bottom: 0;
}

.teacher-task-table-row .teacher-task-student-check {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: transparent;
}

.teacher-task-table-row .teacher-task-student-check span {
    width: 18px;
    height: 18px;
}

.teacher-task-table-row .teacher-review-student {
    gap: 9px;
}

.teacher-task-table-row .teacher-review-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.teacher-task-table-row .teacher-review-student strong {
    font-size: 15px;
}

.teacher-task-table-row .teacher-review-student span,
.teacher-task-table-reminder {
    font-size: 11px;
    line-height: 1.4;
    color: #64748b;
}

.teacher-task-table-row .teacher-review-status-pill {
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
}

.teacher-task-table-row .teacher-outline-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .teacher-task-detail-summary-card,
    .teacher-task-detail-page .teacher-task-detail-summary-card {
        padding: 14px;
    }

    .teacher-task-detail-title-with-icon {
        gap: 7px;
    }

    .teacher-task-detail-title-with-icon > i {
        font-size: 20px;
    }

    .teacher-task-detail-task-meta h3 {
        font-size: 18px;
        line-height: 1.35;
    }

    .teacher-task-detail-subtitle {
        font-size: 12px;
    }

    .teacher-task-detail-task-badges {
        gap: 6px;
    }

    .teacher-task-detail-task-badges span {
        min-height: 26px;
        padding: 0 8px;
        font-size: 11px;
    }

    .teacher-task-detail-reminder-card {
        grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.5fr);
        gap: 10px;
        padding: 14px;
    }

    .teacher-task-detail-reminder-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .teacher-task-detail-reminder-stats div {
        padding: 9px 5px;
    }

    .teacher-task-detail-reminder-stats span {
        font-size: 9px;
        overflow-wrap: anywhere;
    }

    .teacher-task-detail-reminder-stats strong {
        font-size: 17px;
    }

    .teacher-task-detail-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .teacher-task-detail-search,
    .teacher-task-detail-search-submit {
        min-height: 46px;
    }

    .teacher-task-detail-search-submit {
        padding: 0 12px;
    }

    .teacher-task-detail-quick-filters {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
    }

    .teacher-task-detail-inline-select,
    .teacher-task-detail-quick-filters .teacher-outline-btn {
        min-width: 0;
        min-height: 36px;
        padding: 0 4px;
        border-radius: 10px;
        font-size: 9px;
        white-space: nowrap;
    }

    .teacher-task-detail-quick-filters .teacher-outline-btn i {
        display: none;
    }

    .teacher-task-submission-group-head,
    .teacher-task-submission-group.collapsed {
        min-height: 46px;
        padding: 9px 10px;
    }

    .teacher-task-submission-group-head strong,
    .teacher-task-submission-group.collapsed strong {
        font-size: 15px;
    }

    .teacher-task-submission-group-head span {
        display: none;
    }

    .teacher-task-table-row {
        grid-template-columns: 20px minmax(0, 1fr) 50px 54px 42px;
        gap: 4px;
        min-height: 58px;
        padding: 7px 8px;
    }

    .teacher-task-table-row .teacher-task-student-check,
    .teacher-task-table-row .teacher-task-student-check span {
        width: 16px;
        height: 16px;
    }

    .teacher-task-table-row .teacher-review-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .teacher-task-table-row .teacher-review-student {
        gap: 5px;
    }

    .teacher-task-table-row .teacher-review-student strong {
        font-size: 12px;
    }

    .teacher-task-table-row .teacher-review-student span,
    .teacher-task-table-reminder {
        font-size: 9px;
        line-height: 1.25;
    }

    .teacher-task-table-row .teacher-review-status-pill {
        min-height: 24px;
        padding: 0 4px;
        font-size: 9px;
    }

    .teacher-task-table-row .teacher-outline-btn {
        min-height: 25px;
        padding: 0 3px;
        border-radius: 7px;
        font-size: 9px;
    }

    .teacher-review-content-layout {
        grid-template-columns: 1fr;
    }
}

/* 老师当前任务详情：批量提醒与作品信息保持紧凑且可读。 */
.teacher-task-group-batch-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(226, 232, 240, 0.92);
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    background: #f8fbff;
}

.teacher-task-group-batch-actions .teacher-outline-btn,
.teacher-task-group-batch-actions .teacher-primary-btn {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.teacher-review-readonly-grid-rich .teacher-review-reflection-row {
    display: block;
    grid-column: 1 / -1;
    min-height: 0;
}

.teacher-review-reflection-row > span {
    display: block;
    margin-bottom: 8px;
}

.teacher-review-reflection-shell,
.teacher-review-reflection-shell strong {
    display: block;
    width: 100%;
    max-width: none;
}

.teacher-review-readonly-grid-rich .teacher-review-reflection-shell {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.teacher-review-reflection-shell strong {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .teacher-task-detail-quick-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .teacher-task-group-batch-actions {
        justify-content: stretch;
        padding: 7px 8px;
    }

    .teacher-task-group-batch-actions .teacher-outline-btn,
    .teacher-task-group-batch-actions .teacher-primary-btn {
        flex: 1;
        min-width: 0;
        min-height: 30px;
        padding: 0 6px;
        border-radius: 8px;
        font-size: 10px;
        white-space: nowrap;
    }

    .teacher-review-overview-head {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .teacher-review-overview-head .teacher-review-student {
        flex: 1;
        min-width: 0;
    }

    .teacher-review-overview-head .teacher-review-avatar.lg {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .teacher-review-overview-head .teacher-review-student strong {
        font-size: 18px;
    }

    .teacher-review-overview-head .teacher-review-student span {
        font-size: 11px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .teacher-review-overview-head .teacher-review-top-badges {
        width: auto;
        max-width: 88px;
        align-items: flex-end;
    }

    .teacher-review-overview-head .teacher-review-top-badges .teacher-review-mini-badge:nth-child(n + 2) {
        display: none;
    }

    .teacher-review-readonly-grid-rich .teacher-review-reflection-row {
        padding: 10px 12px;
    }

    .teacher-review-reflection-row > span {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .teacher-review-reflection-shell strong {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* 作品心得是正文，不再沿用标签列 / 内容列布局。 */
.teacher-review-work-details {
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 16px;
    background: #fff;
}

.teacher-review-work-details .teacher-review-readonly-grid-rich {
    border: 0;
    border-radius: 0;
}

.teacher-review-reflection-card {
    display: block;
    padding: 14px;
    border-top: 1px solid rgba(226, 232, 240, 0.96);
    border-bottom: 1px solid rgba(226, 232, 240, 0.96);
    background: #fff;
}

.teacher-review-reflection-card > span {
    display: block;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
}

.teacher-review-reflection-card .teacher-review-reflection-shell,
.teacher-review-reflection-card .teacher-review-reflection-shell strong {
    display: block;
    width: 100%;
    max-width: none;
}

.teacher-review-reflection-card .teacher-review-reflection-shell strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.teacher-review-score-detail {
    display: grid;
    grid-template-columns: minmax(98px, 0.72fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
}

.teacher-review-score-detail span {
    color: #64748b;
    font-size: 12px;
}

.teacher-review-score-detail strong {
    color: #0f172a;
    font-size: 14px;
}

@media (max-width: 768px) {
    .teacher-review-reflection-card {
        padding: 10px 12px;
    }

    .teacher-review-reflection-card > span,
    .teacher-review-score-detail span {
        font-size: 11px;
    }

    .teacher-review-reflection-card .teacher-review-reflection-shell strong {
        font-size: 13px;
        line-height: 1.7;
    }

    .teacher-review-score-detail {
        grid-template-columns: minmax(68px, 0.72fr) minmax(0, 1.18fr);
        min-height: 48px;
        padding: 9px 8px;
        gap: 6px;
    }

    .teacher-review-score-detail strong {
        font-size: 11px;
    }
}

@container mobile-page (max-width: 480px) {
    .student-reading-level-page {
        gap: 10px;
        padding: 7px;
        border-radius: 24px;
    }

    .student-reading-level-stage {
        grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
        min-height: 194px;
        padding: 9px 6px;
        border-radius: 19px;
    }

    .student-reading-level-stage-item { grid-template-rows: 23px 122px 30px; }

    .student-reading-level-stage-art {
        width: min(150px, 100%);
        height: 122px;
    }

    .student-reading-level-stage-plaque { min-height: 29px; padding-top: 5px; font-size: 14px; }

    .student-reading-level-progress-card,
    .student-reading-level-guide-card,
    .student-reading-level-rule-card { padding: 14px 12px; }
    .student-reading-level-progress-summary > strong { font-size: 33px; }
    .student-reading-level-rail-art { width: min(64px, 100%); height: 46px; }
    .student-reading-level-rail-plaque { width: min(42px, 100%); font-size: 9px; }
    .student-reading-level-rail-name { font-size: 9px; }
    .student-reading-level-rule-list article { grid-template-columns: 74px minmax(0, 1fr) 78px; min-height: 68px; }
    .student-reading-level-rule-art { width: 70px; height: 62px; }
}

@media (max-width: 380px) {
    .student-reading-level-page-header {
        grid-template-columns: 54px minmax(0, 1fr) 54px;
        min-height: 45px;
    }

    .student-reading-level-page-header h1 { font-size: 21px; }
    .student-reading-level-back { padding-left: 3px; font-size: 12px; }
    .student-reading-level-back i { font-size: 18px; }
    .student-reading-level-stage { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); min-height: 169px; }
    .student-reading-level-stage-item { grid-template-rows: 22px 106px 27px; }
    .student-reading-level-stage-arrow { width: 28px; height: 28px; font-size: 16px; }
    .student-reading-level-stage-art { width: min(132px, 100%); height: 106px; }
    .student-reading-level-stage-plaque { min-height: 26px; padding: 4px 5px 3px; font-size: 12px; }
    .student-reading-level-stage-kicker { padding: 2px 7px; font-size: 10px; }
    .student-reading-level-progress-summary > strong { font-size: 30px; }
    .student-reading-level-progress-summary > span,
    .student-reading-level-quality-summary > span { font-size: 11px; }
    .student-reading-level-guide-grid { gap: 6px; }
    .student-reading-level-guide-item { padding: 8px 6px; }
    .student-reading-level-guide-item strong { font-size: 11px; }
    .student-reading-level-guide-item span { font-size: 9px; }
    .student-reading-level-rail { grid-auto-columns: calc((100% - 16px) / 5); }
    .student-reading-level-rail-item { grid-template-rows: 41px 17px 16px; min-height: 74px; }
    .student-reading-level-rail-art { width: min(58px, 100%); height: 41px; }
    .student-reading-level-rail-plaque { width: min(39px, 100%); min-height: 16px; padding: 2px 1px; font-size: 8px; }
    .student-reading-level-rail-name { font-size: 8px; }
    .student-reading-level-rule-list article { grid-template-columns: 64px minmax(0, 1fr) 70px; min-height: 62px; gap: 6px; padding: 6px 7px; }
    .student-reading-level-rule-art { width: 60px; height: 54px; }
    .student-reading-level-rule-copy strong { font-size: 12px; }
    .student-reading-level-rule-copy span { font-size: 9px; }
    .student-reading-level-rule-threshold { font-size: 10px; }
}

/* Teacher "Me" identity card: keep credentials grouped beneath the teacher name. */
@media (max-width: 520px) {
    .teacher-me-identity-card {
        min-height: 184px;
        padding-bottom: 18px;
    }

    .teacher-me-identity-card .teacher-workbench-hero-main {
        align-self: flex-start;
    }

    .teacher-me-identity-card .teacher-point-hero-name-row {
        padding-right: 104px;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-grid {
        position: static;
        display: grid;
        gap: 5px;
        width: 100%;
        padding: 0 104px 0 0;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-grid > .teacher-point-hero-meta-item {
        max-width: 100%;
        line-height: 1.35;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-grid > .teacher-point-hero-meta-item > span {
        overflow-wrap: anywhere;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 0;
    }

    .teacher-me-identity-card .teacher-point-hero-separator {
        display: none;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-line > .teacher-point-hero-meta-item {
        width: 100%;
        min-height: 20px;
    }

    .teacher-me-identity-card .teacher-point-hero-meta-id {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 22px;
        gap: 5px;
    }

    .teacher-me-identity-card #teacherPointClassIdValue {
        overflow: hidden;
        font-variant-numeric: tabular-nums;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .teacher-me-identity-card .teacher-point-copy-btn {
        width: 22px;
        height: 22px;
        justify-self: end;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 380px) {
    .teacher-me-identity-card .teacher-point-hero-meta-grid {
        padding-right: 96px;
    }
}
.task-share-modal-dialog{width:min(94vw,460px);margin-inline:auto}
.task-share-modal-panel{overflow:hidden;border:1px solid #d9e1ed;border-radius:0;background:#fff;box-shadow:0 18px 45px rgba(23,32,51,.16)}
.task-share-modal-header{align-items:flex-start;padding:20px 20px 16px;border-bottom:1px solid #d9e1ed}
.task-share-modal-header small{display:block;margin-bottom:5px;color:#002fa7;font-size:12px;font-weight:700}
.task-share-modal-header h5{color:#172033;font-size:20px;line-height:1.35}
.task-share-modal-header p{margin:5px 0 0;color:#667085;font-size:12px}
.task-share-modal-body{padding:18px 20px calc(20px + env(safe-area-inset-bottom))}
.task-share-poster-wrap{display:grid;min-height:260px;max-height:50vh;place-items:center;overflow:hidden;border:1px solid #d9e1ed;background:#f7f7f8}
.task-share-poster-wrap img{display:block;width:100%;max-height:50vh;object-fit:contain}
.task-share-poster-wrap img:not([src]){visibility:hidden}
.task-share-modal-status{min-height:42px;padding:12px 0 8px;color:#667085;font-size:12px;line-height:1.6}
.task-share-modal-status.is-success{color:#075e54}.task-share-modal-status.is-error{color:#b42318}
.task-share-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.task-share-modal-actions a,.task-share-modal-actions button{display:flex;min-height:46px;align-items:center;justify-content:center;gap:7px;border:1px solid #002fa7;border-radius:0;font-size:14px;font-weight:700;text-decoration:none}
.task-share-modal-primary{background:#002fa7;color:#fff}.task-share-modal-actions button{background:#fff;color:#002fa7}
.task-share-modal-rotate{display:block;margin:15px auto 0;border:0;background:transparent;color:#667085;font-size:11px;text-decoration:underline}
.task-share-modal-security{display:flex;gap:7px;margin:14px 0 0;color:#667085;font-size:11px;line-height:1.6}.task-share-modal-security i{color:#002fa7}
.teacher-reminder-quick-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:600px){.teacher-reminder-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:414px){.task-share-modal-dialog{width:calc(100vw - 20px)}.task-share-modal-header{padding:16px}.task-share-modal-body{padding:14px 16px calc(18px + env(safe-area-inset-bottom))}.task-share-poster-wrap{min-height:220px}.task-share-modal-actions{grid-template-columns:1fr}}