/* ==========================================================================
   智学网风格浅色主题（覆盖 app.css 的深色视觉）
   只作用于 Blazor 工作台，官网首页 index.html 使用独立内联样式。
   ========================================================================== */

:root {
    --bg-0: #f3f6fb;
    --bg-1: #eaf2ff;
    --bg-2: #f8fbff;
    --panel: #ffffff;
    --panel-2: #f8faff;
    --panel-solid: #ffffff;
    --line: #e6ecf5;
    --line-strong: #d3dfef;
    --text: #1d2b45;
    --muted: #6b7f9a;
    --dim: #96a5ba;
    --teal: #2f6fed;
    --teal-2: #1e56c9;
    --sky: #2f7cf6;
    --gold: #f0a020;
    --green: #16a34a;
    --red: #e5484d;
    --amber: #d97706;
    --violet: #7c5cff;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 10px 30px rgba(35, 70, 130, .08);
}

html, body { background-color: var(--bg-0); color: var(--text); }

body {
    background-image:
        radial-gradient(90% 60% at 50% -10%, rgba(47, 124, 246, .10), transparent 62%),
        radial-gradient(60% 40% at 100% 100%, rgba(22, 163, 74, .05), transparent 60%),
        linear-gradient(180deg, #f5f8fd 0%, #f3f6fb 100%);
    background-attachment: fixed;
}

body::before { display: none; }

/* ---------- 顶栏 ---------- */
.app-bar {
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid #e8eef7;
    box-shadow: 0 2px 12px rgba(31, 63, 112, .05);
    backdrop-filter: blur(16px);
}

.brand, .brand:hover { color: var(--text); }
.brand-mark {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 16px rgba(47, 111, 237, .24);
}
.brand-text strong { color: #1d2b45; }
.brand-text small { color: #2f6fed; }

.nav-link { color: #5b6f8c; }
.nav-link:hover { color: #2f6fed; background: #f2f7ff; }
.nav-link.active {
    color: #2f6fed;
    background: #eef5ff;
    box-shadow: inset 0 -2px 0 #2f6fed;
}

.exam-chip { color: #6b7f9a; border-color: #e4ecf7; background: #f8fbff; }
.mode-chip.demo { color: #b77900; border-color: #f5dca8; background: #fff8e8; }
.mode-chip.live { color: #12834a; border-color: #b8e8cf; background: #eefaf4; }
.user-chip { border-color: #e4ecf7; background: #f8fbff; }
.avatar {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.user-meta strong { color: #1d2b45; }
.user-meta small { color: #8496ae; }
.menu-toggle { border-color: #e4ecf7; color: #33465f; background: #fff; }

/* ---------- 页面与标题 ---------- */
.page-head h1 { color: #17263f; }
.page-head p { color: #6b7f9a; }
.eyebrow { color: #2f6fed; }
.page-head-icon {
    background: linear-gradient(160deg, #eef5ff, #f8fbff);
    border-color: #dce8f8;
    box-shadow: 0 6px 18px rgba(47, 111, 237, .08);
}

.section-title h2 { color: #1d2b45; }
.section-title p { color: #8496ae; }
.muted { color: #6b7f9a; }
.dim { color: #96a5ba; }

/* ---------- 面板与卡片 ---------- */
.panel {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 8px 26px rgba(31, 63, 112, .06);
}
.panel-head {
    background: #fbfcff;
    border-bottom-color: #eef2f8;
}
.panel-head h2 { color: #1d2b45; }
.panel-head .sub { color: #96a5ba; }

.card {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 8px 24px rgba(31, 63, 112, .06);
}
.card h3 { color: #1d2b45; }
.card p { color: #6b7f9a; }
.card.hoverable:hover { border-color: #bcd4f7; box-shadow: 0 16px 36px rgba(31, 63, 112, .12); }

.stat-card {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 8px 24px rgba(31, 63, 112, .06);
}
.stat-card::after { background: radial-gradient(circle, rgba(47, 124, 246, .10), transparent 70%); }
.stat-label { color: #6b7f9a; }
.stat-value { color: #17263f; }
.stat-hint { color: #96a5ba; }
.stat-card.green .stat-value { color: #12834a; }
.stat-card.gold .stat-value { color: #b77900; }
.stat-card.blue .stat-value { color: #245fce; }
.stat-card.violet .stat-value { color: #6d4be0; }

/* ---------- 按钮 ---------- */
.btn {
    --btn-bg: #fff;
    --btn-border: #dbe4f0;
    --btn-color: #33465f;
    box-shadow: 0 1px 2px rgba(31, 63, 112, .03);
}
.btn:hover {
    color: #2f6fed;
    border-color: #9fc0f5;
    background: #f7fbff;
}
.btn-primary {
    --btn-bg: linear-gradient(135deg, #3b82f6, #2563eb);
    --btn-border: #2f6fed;
    --btn-color: #fff;
    box-shadow: 0 8px 18px rgba(47, 111, 237, .22);
}
.btn-primary:hover { box-shadow: 0 12px 24px rgba(47, 111, 237, .3); }
.btn-gold {
    --btn-bg: linear-gradient(135deg, #f7b955, #e79a12);
    --btn-border: #e79a12;
    --btn-color: #3b2603;
}
.btn-ghost { --btn-bg: transparent; --btn-border: #dbe4f0; }
.btn-danger { --btn-bg: linear-gradient(135deg, #ef5350, #d9363e); --btn-border: #d9363e; }
.btn-success { --btn-bg: linear-gradient(135deg, #22b573, #12834a); --btn-border: #12834a; }

/* ---------- 表单 ---------- */
.field > label { color: #5b6f8c; }
.field .hint { color: #96a5ba; }
.input, .select, .textarea {
    background: #f8faff;
    border-color: #dfe7f3;
    color: #1d2b45;
}
.input::placeholder, .textarea::placeholder { color: #9aa9bd; }
.input:focus, .select:focus, .textarea:focus {
    border-color: #6aa5ff;
    box-shadow: 0 0 0 3px rgba(47, 124, 246, .12);
    background: #fff;
}
.select { background-color: #f8faff; }
.search-box::before { color: #96a5ba; }

/* ---------- 徽标 / 进度 / 表格 ---------- */
.badge.green { color: #12834a; background: #eefaf4; border-color: #b8e8cf; }
.badge.blue { color: #245fce; background: #eef5ff; border-color: #cfe2ff; }
.badge.gold { color: #b77900; background: #fff8e8; border-color: #f5dca8; }
.badge.red { color: #c92a30; background: #fff1f1; border-color: #f6c9cb; }
.badge.gray { color: #6b7f9a; background: #f5f8fc; border-color: #e4ecf7; }
.badge.violet { color: #6d4be0; background: #f2eeff; border-color: #ddd2ff; }

.progress-bar { background: #e9eff9; }
.progress-bar span { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.progress.green .progress-bar span { background: linear-gradient(90deg, #22b573, #45cf8d); }
.progress.gold .progress-bar span { background: linear-gradient(90deg, #f0a020, #f7c35c); }
.progress.red .progress-bar span { background: linear-gradient(90deg, #e5484d, #f28b8f); }
.progress-label { color: #6b7f9a; }

.table-wrap { border-color: #e6ecf5; background: #fff; }
.table { color: #33465f; }
.table thead th {
    background: #f7faff;
    color: #6b7f9a;
    border-bottom-color: #e6ecf5;
}
.table tbody td { border-bottom-color: #f0f4fa; }
.table tbody tr:hover td { background: #f5f9ff; }
.table .strong { color: #17263f; }
.table .clickable:hover td { background: #eef6ff; }
.rank-badge { background: #f2f6fc; border-color: #e0e9f5; color: #5b6f8c; }
.rank-badge.top1 { background: linear-gradient(135deg, #f7c35c, #e79a12); color: #3b2603; }
.rank-badge.top2 { background: linear-gradient(135deg, #e6ebf2, #b7c3d4); color: #33465f; }
.rank-badge.top3 { background: linear-gradient(135deg, #e8bd91, #c98b54); color: #3b2603; }

/* ---------- 筛选 / 选择 ---------- */
.filter-bar { background: #fff; border-color: #e6ecf5; box-shadow: 0 4px 14px rgba(31, 63, 112, .04); }
.choice-item { background: #fbfcff; border-color: #e6ecf5; }
.choice-item:hover { border-color: #9fc0f5; background: #f3f8ff; }
.choice-item.selected { border-color: #2f6fed; background: #eef5ff; box-shadow: 0 0 0 3px rgba(47, 124, 246, .08); }
.choice-item strong { color: #1d2b45; }
.choice-item span { color: #8496ae; }
.choice-item .choice-mark { color: #2f6fed; }

/* ---------- 登录页 ---------- */
.login-page {
    background:
        radial-gradient(70% 70% at 10% 10%, rgba(47, 124, 246, .10), transparent 60%),
        radial-gradient(60% 60% at 90% 90%, rgba(22, 163, 74, .06), transparent 60%),
        linear-gradient(135deg, #eef5ff 0%, #f8fbff 55%, #eef8ff 100%);
    position: relative;
    padding-top: 54px;
}

.login-topbar {
    position: absolute;
    top: 18px;
    left: clamp(18px, 4vw, 54px);
    right: clamp(18px, 4vw, 54px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}

.login-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4f6a8e;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #dce8f8;
    border-radius: 999px;
    padding: 7px 13px;
    box-shadow: 0 4px 12px rgba(31, 63, 112, .05);
}
.login-back:hover { color: #2f6fed; border-color: #bcd4f7; }

.login-mode {
    font-size: 11.5px;
    color: #6b7f9a;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #e4ecf7;
    border-radius: 999px;
    padding: 6px 12px;
}

.login-hero {
    background: linear-gradient(135deg, #2f6fed 0%, #4a8bf7 55%, #63b3ff 100%);
    border-radius: 28px;
    padding: clamp(28px, 3.4vw, 48px);
    color: #fff;
    box-shadow: 0 24px 60px rgba(47, 111, 237, .24);
}

/* 左侧为登录表单做背景衬托：低饱和渐变、缓慢漂浮的色块与细线，不再抢主视觉。 */
.login-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 520px;
    padding: clamp(28px, 3.1vw, 40px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .8);
    background:
        radial-gradient(110% 120% at 8% 4%, rgba(125, 177, 255, .30), transparent 56%),
        linear-gradient(150deg, #f5f9ff 0%, #eaf4ff 46%, #f5f1ff 100%);
    box-shadow:
        0 28px 70px rgba(47, 111, 237, .12),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.visual-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.visual-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(47, 111, 237, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 111, 237, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 76%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 76%);
}
.visual-blob {
    position: absolute;
    border-radius: 50%;
    opacity: .8;
    animation: visual-drift 20s ease-in-out infinite alternate;
    will-change: transform;
}
.blob-one {
    width: 430px;
    height: 430px;
    top: -160px;
    left: -140px;
    background: radial-gradient(circle at 34% 34%, rgba(83, 151, 255, .52), rgba(83, 151, 255, 0) 68%);
}
.blob-two {
    width: 390px;
    height: 390px;
    top: 18%;
    right: -170px;
    background: radial-gradient(circle at 40% 40%, rgba(174, 143, 255, .42), rgba(174, 143, 255, 0) 68%);
    animation-delay: -7s;
}
.blob-three {
    width: 330px;
    height: 330px;
    bottom: -170px;
    left: 18%;
    background: radial-gradient(circle at 50% 50%, rgba(98, 220, 197, .38), rgba(98, 220, 197, 0) 70%);
    animation-delay: -13s;
}
.visual-ring {
    position: absolute;
    border: 1px solid rgba(47, 111, 237, .13);
    border-radius: 50%;
}
.ring-one {
    width: 470px;
    height: 470px;
    top: -150px;
    right: -190px;
}
.ring-two {
    width: 650px;
    height: 650px;
    top: -240px;
    right: -280px;
    border-color: rgba(132, 111, 224, .09);
}
.visual-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5b9df8;
    box-shadow: 0 0 0 6px rgba(91, 157, 248, .10);
    opacity: .7;
}
.dot-one { top: 18%; right: 16%; }
.dot-two { top: 30%; left: 78%; width: 6px; height: 6px; background: #9b8cf0; box-shadow: 0 0 0 5px rgba(155, 140, 240, .10); }
.dot-three { bottom: 17%; right: 24%; width: 5px; height: 5px; background: #4fc9b6; box-shadow: 0 0 0 4px rgba(79, 201, 182, .10); }

.visual-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 440px;
}
.visual-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.visual-logo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    background: linear-gradient(145deg, #4f8ff7, #2f6fed);
    box-shadow: 0 10px 22px rgba(47, 111, 237, .25);
}
.visual-brand strong {
    display: block;
    color: #17263f;
    font-size: 15px;
    letter-spacing: .04em;
}
.visual-brand div > span {
    display: block;
    margin-top: 3px;
    color: #7e91ab;
    font-size: 9.5px;
    letter-spacing: .16em;
}

.visual-copy {
    max-width: 420px;
    margin-top: clamp(36px, 6vh, 54px);
}
.visual-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(47, 111, 237, .14);
    background: rgba(255, 255, 255, .62);
    color: #3f6fae;
    font-size: 10.5px;
    letter-spacing: .08em;
}
.visual-kicker .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4d8ff2;
    box-shadow: 0 0 0 4px rgba(77, 143, 242, .12);
}
.visual-copy h1 {
    margin: 12px 0 10px;
    color: #14243c;
    font-size: clamp(27px, 2.9vw, 38px);
    line-height: 1.2;
    font-weight: 760;
    letter-spacing: -.02em;
    white-space: pre-line;
}
.visual-copy p {
    max-width: 100%;
    margin-top: 40px;
    overflow: hidden;
    color: #5b7090;
    font-size: 13.5px;
    line-height: 1.85;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.visual-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    color: #8496ae;
    font-size: 11.5px;
}
.visual-line {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, #6b9ff0, rgba(107, 159, 240, .1));
}
.visual-motif {
    display: none;
    position: absolute;
    right: -30px;
    bottom: -20px;
    width: 360px;
    height: 220px;
    opacity: .6;
    pointer-events: none;
}

/* ---------- 角色主题：管理员保持蓝紫底色 ---------- */
.login-visual.role-marker {
    background:
        radial-gradient(110% 120% at 12% 0%, rgba(52, 211, 153, .27), transparent 56%),
        linear-gradient(150deg, #f2fbf8 0%, #e8f8f2 48%, #f1fbff 100%);
}
.role-marker .blob-one {
    left: auto;
    right: -140px;
    top: -150px;
    background: radial-gradient(circle at 34% 34%, rgba(45, 212, 191, .46), rgba(45, 212, 191, 0) 68%);
}
.role-marker .blob-two {
    left: -150px;
    right: auto;
    top: 24%;
    background: radial-gradient(circle at 40% 40%, rgba(125, 211, 252, .38), rgba(125, 211, 252, 0) 68%);
}
.role-marker .blob-three {
    left: 24%;
    bottom: -170px;
    background: radial-gradient(circle at 50% 50%, rgba(190, 242, 100, .30), rgba(190, 242, 100, 0) 70%);
}
.role-marker .visual-art::before {
    background-image:
        linear-gradient(rgba(16, 185, 129, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, .06) 1px, transparent 1px);
}
.role-marker .visual-ring { border-color: rgba(16, 185, 129, .15); }
.role-marker .visual-logo {
    background: linear-gradient(145deg, #34d399, #0f9f7a);
    box-shadow: 0 10px 22px rgba(16, 185, 129, .26);
}
.role-marker .visual-kicker { color: #0e8064; border-color: rgba(16, 185, 129, .22); }
.role-marker .visual-kicker .dot { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.role-marker .visual-line { background: linear-gradient(90deg, #34d399, rgba(52, 211, 153, .1)); }
.role-marker .visual-motif {
    display: block;
    background: repeating-linear-gradient(135deg, rgba(16, 185, 129, .16) 0 1px, transparent 1px 18px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.login-visual.role-designer {
    background:
        radial-gradient(110% 120% at 10% 0%, rgba(244, 114, 182, .24), transparent 56%),
        linear-gradient(150deg, #fff6fb 0%, #f6f0ff 48%, #f2f7ff 100%);
}
.role-designer .blob-one {
    left: auto;
    right: -150px;
    top: -140px;
    background: radial-gradient(circle at 36% 36%, rgba(244, 114, 182, .42), rgba(244, 114, 182, 0) 68%);
}
.role-designer .blob-two {
    left: -160px;
    right: auto;
    top: 18%;
    background: radial-gradient(circle at 40% 40%, rgba(167, 139, 250, .40), rgba(167, 139, 250, 0) 68%);
}
.role-designer .blob-three {
    left: auto;
    right: 12%;
    bottom: -170px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 200, 154, .34), rgba(255, 200, 154, 0) 70%);
}
.role-designer .visual-art::before {
    background-image:
        linear-gradient(rgba(168, 85, 247, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .06) 1px, transparent 1px);
}
.role-designer .visual-ring { border-color: rgba(168, 85, 247, .14); }
.role-designer .visual-logo {
    background: linear-gradient(145deg, #f472b6, #8b5cf6);
    box-shadow: 0 10px 22px rgba(139, 92, 246, .24);
}
.role-designer .visual-kicker { color: #8752a8; border-color: rgba(168, 85, 247, .20); }
.role-designer .visual-kicker .dot { background: #a855f7; box-shadow: 0 0 0 4px rgba(168, 85, 247, .12); }
.role-designer .visual-line { background: linear-gradient(90deg, #c084fc, rgba(192, 132, 252, .1)); }
.role-designer .visual-motif {
    display: block;
    width: 300px;
    height: 210px;
    background-image:
        repeating-linear-gradient(90deg, rgba(168, 85, 247, .15) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(168, 85, 247, .13) 0 1px, transparent 1px 30px);
    -webkit-mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, transparent 72%);
}

.login-visual.role-teacher {
    background:
        radial-gradient(110% 120% at 12% 0%, rgba(245, 158, 11, .24), transparent 56%),
        linear-gradient(150deg, #fffaf0 0%, #f6f8ff 48%, #fff7e8 100%);
}
.role-teacher .blob-one {
    left: -150px;
    top: auto;
    bottom: -160px;
    background: radial-gradient(circle at 36% 36%, rgba(245, 158, 11, .40), rgba(245, 158, 11, 0) 68%);
}
.role-teacher .blob-two {
    right: -140px;
    top: -140px;
    background: radial-gradient(circle at 40% 40%, rgba(96, 165, 250, .36), rgba(96, 165, 250, 0) 68%);
}
.role-teacher .blob-three {
    left: 36%;
    bottom: -170px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 179, 138, .28), rgba(255, 179, 138, 0) 70%);
}
.role-teacher .visual-art::before {
    background-image:
        linear-gradient(rgba(245, 158, 11, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, .06) 1px, transparent 1px);
}
.role-teacher .visual-ring { border-color: rgba(245, 158, 11, .15); }
.role-teacher .visual-logo {
    background: linear-gradient(145deg, #fbbf24, #ea8a1a);
    box-shadow: 0 10px 22px rgba(245, 158, 11, .24);
}
.role-teacher .visual-kicker { color: #a16207; border-color: rgba(245, 158, 11, .22); }
.role-teacher .visual-kicker .dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .13); }
.role-teacher .visual-line { background: linear-gradient(90deg, #fbbf24, rgba(251, 191, 36, .1)); }
.role-teacher .visual-motif {
    display: block;
    right: 16px;
    bottom: 24px;
    width: 230px;
    height: 150px;
    opacity: .65;
    background-image:
        linear-gradient(to top, rgba(245, 158, 11, .22) 0 42%, transparent 42%),
        linear-gradient(to top, rgba(59, 130, 246, .16) 0 66%, transparent 66%),
        linear-gradient(to top, rgba(245, 158, 11, .14) 0 52%, transparent 52%);
    background-size: 44px 100%, 44px 100%, 44px 100%;
    background-position: 0 100%, 54px 100%, 108px 100%;
    background-repeat: no-repeat;
}

.login-visual.role-student {
    background:
        radial-gradient(110% 120% at 12% 0%, rgba(34, 211, 238, .23), transparent 56%),
        linear-gradient(150deg, #f0fcff 0%, #ecfaff 48%, #f2fff8 100%);
}
.role-student .blob-one {
    left: 20%;
    top: -170px;
    background: radial-gradient(circle at 36% 36%, rgba(34, 211, 238, .40), rgba(34, 211, 238, 0) 68%);
}
.role-student .blob-two {
    right: -140px;
    top: 22%;
    background: radial-gradient(circle at 40% 40%, rgba(127, 224, 176, .38), rgba(127, 224, 176, 0) 68%);
}
.role-student .blob-three {
    left: -140px;
    bottom: -160px;
    background: radial-gradient(circle at 50% 50%, rgba(169, 201, 255, .34), rgba(169, 201, 255, 0) 70%);
}
.role-student .visual-art::before {
    background-image:
        linear-gradient(rgba(6, 182, 212, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, .055) 1px, transparent 1px);
}
.role-student .visual-ring { border-color: rgba(6, 182, 212, .14); }
.role-student .visual-logo {
    background: linear-gradient(145deg, #22d3ee, #0ea5a0);
    box-shadow: 0 10px 22px rgba(8, 145, 178, .24);
}
.role-student .visual-kicker { color: #0e7490; border-color: rgba(6, 182, 212, .20); }
.role-student .visual-kicker .dot { background: #06b6d4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .12); }
.role-student .visual-line { background: linear-gradient(90deg, #22d3ee, rgba(34, 211, 238, .1)); }
.role-student .visual-motif {
    display: block;
    width: 340px;
    height: 240px;
    background-image: radial-gradient(rgba(6, 182, 212, .35) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, transparent 72%);
}

@keyframes visual-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(24px, -18px, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .visual-blob { animation: none; }
}

.hero-badge {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .3);
}
.hero-title {
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
    white-space: pre-line;
    text-shadow: 0 8px 26px rgba(13, 48, 120, .18);
}
.hero-sub { color: rgba(255, 255, 255, .84); }
.hero-divider { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
.hero-feature {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}
.hero-feature strong { color: #fff; }
.hero-feature div span { color: rgba(255, 255, 255, .78); }
.hero-feature .icon {
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 6px 16px rgba(11, 53, 130, .18);
}
.hero-stat strong { color: #fff; }
.hero-stat span { color: rgba(255, 255, 255, .68); }

.module-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
}
.module-preview-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px rgba(9, 40, 100, .26);
}
.module-preview strong { display: block; font-size: 16px; color: #fff; }
.module-preview div span { display: block; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .8); }

.login-card {
    background: #fff;
    border-color: #e6eef9;
    box-shadow: 0 26px 70px rgba(35, 70, 130, .16);
}
.login-card::before { background: linear-gradient(90deg, #2f6fed, #6aa9ff); }
.login-card.role-marker::before { background: linear-gradient(90deg, #10b981, #6ee7b7); }
.login-card.role-designer::before { background: linear-gradient(90deg, #a855f7, #f472b6); }
.login-card.role-teacher::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.login-card.role-student::before { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.login-card > h2 { color: #17263f; }
.login-sub, .login-card .login-sub { color: #6b7f9a; }

.login-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef2f8;
    margin-bottom: 18px;
}
.login-card-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 27px;
    background: #f4f8ff;
    border: 1px solid #dbe8ff;
    box-shadow: 0 8px 20px rgba(47, 111, 237, .16);
}
.login-card-head h2 { margin: 0; font-size: 19px; color: #17263f; }
.login-card-head p { margin: 5px 0 0; font-size: 12px; color: #8496ae; }

.step-head h2 { font-size: 20px; color: #17263f; }
.step-head p { margin-top: 6px; font-size: 12.5px; color: #6b7f9a; }

.role-tabs { background: #f3f7fd; border-color: #e4ecf7; }
.role-tab { color: #6b7f9a; }
.role-tab:hover { color: #2f6fed; }
.role-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 6px 14px rgba(47, 111, 237, .22);
}

.login-form .input { background: #f8faff; border-color: #dfe7f3; }
.login-form .input:focus { background: #fff; }

.login-meta { color: #8496ae; }
.link-button { color: #2f6fed; }
.form-alert { background: #fff1f1; border-color: #f6c9cb; color: #c92a30; }

/* ---------- 阅卷工作台 ---------- */
.grading-page { background: transparent; }
.grading-bar {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 6px 18px rgba(31, 63, 112, .06);
}
.grading-title strong { color: #17263f; }
.grading-title span { color: #8496ae; }
.grading-index { color: #245fce; background: #eef5ff; border-color: #cfe2ff; }

.image-stage {
    background:
        radial-gradient(circle at 50% 40%, rgba(47, 124, 246, .05), transparent 70%),
        #e9eef7;
    border-color: #dfe8f4;
}
.image-stage .paper { box-shadow: 0 18px 50px rgba(31, 63, 112, .18); }
.image-toolbar {
    background: rgba(255, 255, 255, .96);
    border-color: #dfe8f4;
    box-shadow: 0 8px 20px rgba(31, 63, 112, .1);
}
.image-toolbar .zoom-label { color: #6b7f9a; }

.score-panel .panel { background: #fff; }
.question-tab {
    background: #f7faff;
    border-color: #e2eaf6;
    color: #5b7191;
}
.question-tab:hover { color: #2f6fed; border-color: #9fc0f5; }
.question-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: transparent;
}
.question-tab .q-score { opacity: .9; }

.current-score {
    background: #eef6ff;
    border-color: #d3e6ff;
}
.current-score .label { color: #2f6fed; }
.current-score .value { color: #1677ff; }
.current-score .max { color: #8496ae; }

.score-key {
    background: #fff;
    border-color: #e0e8f4;
    color: #1d2b45;
}
.score-key:hover { border-color: #8fbcff; background: #eef5ff; color: #245fce; }
.score-key.full { color: #12834a; border-color: #b8e8cf; background: #eefaf4; }
.score-key.zero { color: #c92a30; border-color: #f6c9cb; background: #fff1f1; }
.score-key.more { color: #b77900; border-color: #f5dca8; background: #fff8e8; }

.score-input-row .input { background: #f8faff; }
.mark-btn { background: #fff; border-color: #e0e8f4; color: #33465f; }
.mark-btn:hover { background: #eef5ff; }
.mark-btn.active { color: #b77900; border-color: #f0a020; background: #fff8e8; }

.record-pill {
    background: #f7faff;
    border-color: #e2eaf6;
    color: #6b7f9a;
}
.record-pill.current { color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb); border-color: transparent; }
.record-pill.done { color: #12834a; border-color: #b8e8cf; background: #eefaf4; }
.record-pill.question { color: #c92a30; border-color: #f6c9cb; background: #fff1f1; }

.keyboard-hint { color: #96a5ba; }
.kbd { border-color: #dbe4f0; background: #f7faff; color: #5b6f8c; }

/* ---------- 图表 / 统计 ---------- */
.bar-track { background: #e9eff9; }
.bar-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bar-row .val { color: #6b7f9a; }
.donut::after { background: #fff; }
.donut-legend { color: #6b7f9a; }
.kv-row { border-bottom-color: #f0f4fa; }
.kv-row span { color: #8496ae; }
.kv-row strong { color: #33465f; }
.timeline-item .dot-col i { background: #3b82f6; box-shadow: 0 0 0 4px rgba(47, 124, 246, .12); }
.timeline-item .dot-col em { background: #e6ecf5; }

/* ---------- 弹层 / 提示 ---------- */
.modal-backdrop { background: rgba(21, 42, 74, .42); }
.modal {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 30px 80px rgba(21, 42, 74, .22);
}
.modal h3 { color: #17263f; }
.dialog-icon { background: #eef5ff; color: #245fce; }
.dialog.danger .dialog-icon { background: #fff1f1; color: #c92a30; }
.dialog.warning .dialog-icon { background: #fff8e8; color: #b77900; }
.dialog.success .dialog-icon { background: #eefaf4; color: #12834a; }
.dialog-message { color: #6b7f9a; }

.toast {
    background: #fff;
    border-color: #e6ecf5;
    box-shadow: 0 16px 36px rgba(21, 42, 74, .14);
}
.toast-icon { background: #eef5ff; color: #245fce; }
.toast.success .toast-icon { background: #eefaf4; color: #12834a; }
.toast.warning .toast-icon { background: #fff8e8; color: #b77900; }
.toast.error .toast-icon { background: #fff1f1; color: #c92a30; }
.toast-body strong { color: #17263f; }
.toast-body span { color: #6b7f9a; }
.toast-close { color: #96a5ba; }

.busy-card { background: #fff; border-color: #e6ecf5; color: #5b7191; box-shadow: 0 16px 40px rgba(21, 42, 74, .14); }
.busy-overlay { background: rgba(245, 249, 255, .6); }
.spinner { border-color: #dbe7fa; border-top-color: #2f6fed; }

#blazor-error-ui { background: #fff1f1; color: #c92a30; border-color: #f6c9cb; }
#blazor-error-ui .reload { color: #c92a30; }

.empty-state { color: #6b7f9a; }
.empty-state h2 { color: #1d2b45; }

/* ---------- 制卷人 / 制作答卷 ---------- */
.design-step {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #2f6fed;
    background: #eef5ff;
    border: 1px solid #d8e7ff;
    margin-bottom: 12px;
}

/* ---------- 响应式 ---------- */
/* 移动端断点保留：≤1024 隐藏左侧视觉、表单居中；≤680 收紧边距与顶部工具栏。 */
@media (max-width: 1024px) {
    .login-page { max-width: 460px; padding-top: 64px; }
    .login-visual { display: none; }
}

@media (max-width: 680px) {
    .login-page { padding-top: 58px; }
    .login-topbar { top: 14px; left: 14px; right: 14px; }
    .login-hero { padding: 24px 20px; }
    .login-visual { display: none; }
    .hero-feature { background: rgba(255, 255, 255, .14); }
    .module-preview { width: 100%; }
}

/* ---------- 工作台细节（浅色） ---------- */
.subject-code {
    color: #245fce;
    background: #eef5ff;
    border-color: #d8e7ff;
}
.subject-stats div {
    background: #f6f9fe;
    border-color: #e8eff9;
}
.subject-stats strong { color: #1d2b45; }
.subject-stats span { color: #8496ae; }
.subject-card .subject-sub { color: #8496ae; }

.quick-card {
    background: #fff;
    border-color: #e6ecf5;
    color: #33465f;
}
.quick-card:hover {
    background: #f7fbff;
    border-color: #bcd4f7;
    color: #245fce;
}
.quick-card .q-icon { background: #eef5ff; }
.quick-card strong { color: #1d2b45; }
.quick-card span { color: #8496ae; }

.subject-card .btn-ghost { background: #fff; }

/* ---------- 启动屏（避免浅色页面先闪深色） ---------- */
.boot-screen {
    background: radial-gradient(80% 60% at 50% 40%, #eaf3ff, #f7fbff 72%);
}
.boot-logo {
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb 60%, #60a5fa);
    box-shadow: 0 18px 44px rgba(47, 111, 237, .24);
}
.boot-title { color: #17263f; }
.boot-sub { color: #8496ae; }
.boot-bar { background: #e4ecf7; }
.boot-bar span { background: linear-gradient(90deg, #3b82f6, #60a5fa); }