:root {
    --ui-bg: #f5f6f8;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #f8f9fb;
    --ui-text: #20242a;
    --ui-muted: #68707c;
    --ui-border: #e2e5e9;
    --ui-border-strong: #cfd4da;
    --ui-primary: #2867d7;
    --ui-primary-hover: #1f55b8;
    --ui-primary-soft: #edf3ff;
    --ui-success: #23845b;
    --ui-success-soft: #eaf7f1;
    --ui-warning: #b86b12;
    --ui-warning-soft: #fff6e8;
    --ui-danger: #c43d4b;
    --ui-danger-soft: #fff0f1;
    --ui-shadow: 0 1px 2px rgba(20, 28, 38, 0.05), 0 5px 18px rgba(20, 28, 38, 0.04);
}

html { background: var(--ui-bg); }

body[data-page] {
    color: var(--ui-text);
    background: var(--ui-bg);
    font-family: Inter, "Noto Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    line-height: 1.5;
}

body[data-page] *, body[data-page] *::before, body[data-page] *::after { letter-spacing: 0; }
body[data-page] button,
body[data-page] input,
body[data-page] select,
body[data-page] textarea { font: inherit; }

body[data-page] button,
body[data-page] a,
body[data-page] [onclick] { -webkit-tap-highlight-color: transparent; }

body[data-page] :focus-visible {
    outline: 3px solid rgba(40, 103, 215, 0.22);
    outline-offset: 2px;
}

/* Shared application chrome */
body[data-page] .header,
body[data-page] .teacher-header {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border);
    box-shadow: 0 1px 8px rgba(20, 28, 38, 0.04) !important;
}

body[data-page] .header h1,
body[data-page] .teacher-header h1 { color: var(--ui-text); font-weight: 700; }

body[data-page] .header a { color: var(--ui-muted) !important; }
body[data-page] .header a:hover { color: var(--ui-primary) !important; }

body[data-page] .header .logout-btn,
body[data-page] .header .back-btn,
body[data-page] .teacher-header .logout-btn {
    background: var(--ui-surface-subtle) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 6px !important;
}

body[data-page] .header .logout-btn:hover,
body[data-page] .header .back-btn:hover,
body[data-page] .teacher-header .logout-btn:hover {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    border-color: #b9cdf4 !important;
}

/* Surfaces */
body[data-page] .card,
body[data-page] .student-info,
body[data-page] .subject-card,
body[data-page] .main-content,
body[data-page] .sidebar,
body[data-page] .category-panel,
body[data-page] .nav-tree,
body[data-page] .content-area,
body[data-page] .settings-panel,
body[data-page] .practice-area,
body[data-page] .overview-card,
body[data-page] .login-form,
body[data-page] .login-container {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow) !important;
}

body[data-page] .card h2,
body[data-page] .card h3,
body[data-page] .card h4 { color: var(--ui-text); }

/* Controls */
body[data-page] input:not([type="radio"]):not([type="checkbox"]),
body[data-page] select,
body[data-page] textarea {
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

body[data-page] input:not([type="radio"]):not([type="checkbox"]):focus,
body[data-page] select:focus,
body[data-page] textarea:focus {
    border-color: var(--ui-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 103, 215, 0.12) !important;
}

body[data-page] .btn,
body[data-page] .submit-btn,
body[data-page] .action-btn,
body[data-page] .batch-download-btn,
body[data-page] .btn-download,
body[data-page] button {
    border-radius: 6px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
    transform: none !important;
}

body[data-page] .btn-primary,
body[data-page] .submit-btn,
body[data-page] .action-btn,
body[data-page] .batch-download-btn,
body[data-page] .btn-start {
    background: var(--ui-primary) !important;
    color: #fff !important;
    border: 1px solid var(--ui-primary) !important;
    box-shadow: none !important;
}

body[data-page] .btn-primary:hover,
body[data-page] .submit-btn:hover,
body[data-page] .action-btn:hover,
body[data-page] .batch-download-btn:hover,
body[data-page] .btn-start:hover { background: var(--ui-primary-hover) !important; opacity: 1 !important; }

body[data-page] .btn-outline,
body[data-page] .btn-secondary,
body[data-page] .btn-cancel {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border-strong) !important;
}

body[data-page] .btn-success,
body[data-page] .btn-download { background: var(--ui-success) !important; color: #fff !important; border: 1px solid var(--ui-success) !important; }
body[data-page] .btn-warning,
body[data-page] .btn-orange { background: var(--ui-warning) !important; color: #fff !important; border: 1px solid var(--ui-warning) !important; }
body[data-page] .btn-danger { background: var(--ui-danger) !important; color: #fff !important; border: 1px solid var(--ui-danger) !important; }
body[data-page] button:disabled { background: #e5e7eb !important; color: #969da7 !important; border-color: #e5e7eb !important; }

/* Tables and state */
body[data-page] table { color: var(--ui-text); }
body[data-page] th {
    background: var(--ui-surface-subtle) !important;
    color: #444b55 !important;
    font-size: 13px;
}
body[data-page] th,
body[data-page] td { border-bottom-color: var(--ui-border) !important; }
body[data-page] tr:hover { background: #f8faff !important; }
body[data-page] .table-container { border: 1px solid var(--ui-border); box-shadow: none !important; }

body[data-page] .status-tag,
body[data-page] .school-type-tag,
body[data-page] .scope-tag,
body[data-page] .level-tag,
body[data-page] .status-badge { border-radius: 999px !important; font-weight: 600; }
body[data-page] .status-tag.enabled,
body[data-page] .status-tag.normal,
body[data-page] .status-tag.completed { color: var(--ui-success) !important; background: var(--ui-success-soft) !important; border-color: #b8decf !important; }
body[data-page] .status-tag.disabled { color: var(--ui-danger) !important; background: var(--ui-danger-soft) !important; border-color: #f0c3c8 !important; }
body[data-page] .status-tag.pending,
body[data-page] .status-tag.paused { color: var(--ui-warning) !important; background: var(--ui-warning-soft) !important; border-color: #efd2aa !important; }

body[data-page] .modal-overlay { background: rgba(28, 33, 40, 0.48) !important; backdrop-filter: blur(2px); }
body[data-page] .modal {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 55px rgba(22, 29, 37, 0.18) !important;
}
body[data-page] .modal-header { border-bottom-color: var(--ui-border) !important; }
body[data-page] .modal-close { color: var(--ui-muted) !important; }

/* Announcement management */
body[data-page] .section-subtitle { color: var(--ui-muted); font-size: 12px; margin: 4px 0 0; }
body[data-page] .announcement-admin-list { display: grid; gap: 10px; }
body[data-page] .announcement-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 16px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
}
body[data-page] .announcement-admin-main { min-width: 0; }
body[data-page] .announcement-admin-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
body[data-page] .announcement-admin-title strong { font-size: 14px; }
body[data-page] .announcement-admin-main p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #555d67;
    font-size: 12px;
    line-height: 1.6;
    margin: 7px 0;
    white-space: pre-wrap;
}
body[data-page] .announcement-meta { color: var(--ui-muted); font-size: 11px; }
body[data-page] .announcement-actions { display: flex; gap: 7px; flex-shrink: 0; }
body[data-page] .announcement-actions .btn { padding: 7px 11px; font-size: 12px; }
body[data-page] .notice-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}
body[data-page] .notice-badge.published { color: var(--ui-success); background: var(--ui-success-soft); }
body[data-page] .notice-badge.disabled { color: var(--ui-muted); background: #e9ebee; }
body[data-page] .notice-badge.pinned { color: var(--ui-danger); background: var(--ui-danger-soft); }
body[data-page] .notice-badge.school { color: #67429a; background: #f1ebf8; }
body[data-page] .notice-badge.teacher { color: var(--ui-success); background: var(--ui-success-soft); }
body[data-page] .announcement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body[data-page] form[id$="AnnouncementForm"] .form-item > input:not([type="checkbox"]),
body[data-page] form[id$="AnnouncementForm"] .form-item > select,
body[data-page] form[id$="AnnouncementForm"] .form-item > textarea {
    width: 100%;
    padding: 10px 12px;
}
body[data-page] .check-row { display: flex; align-items: center; gap: 8px; color: #4d5560; font-size: 13px; cursor: pointer; }
body[data-page] .announcement-empty { padding: 36px 20px; color: var(--ui-muted); text-align: center; border: 1px dashed var(--ui-border-strong); border-radius: 7px; }
body[data-page="school-admin"] .section-header,
body[data-page="teacher"] .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

/* Main landing */
body[data-page="home"] {
    background: #f4f6f8 !important;
    color: var(--ui-text) !important;
}
body[data-page="home"] .container { width: min(100%, 840px); color: var(--ui-text); }
body[data-page="home"] h1 { color: #161a20; text-shadow: none; font-size: 40px; }
body[data-page="home"] .subtitle { color: var(--ui-muted); opacity: 1; margin-bottom: 36px; }
body[data-page="home"] .card-grid { gap: 16px; margin-bottom: 20px; }
body[data-page="home"] .card {
    padding: 28px;
    cursor: default;
    text-align: left;
    box-shadow: var(--ui-shadow) !important;
}
body[data-page="home"] .card:hover { transform: none; border-color: #b9cdf4 !important; box-shadow: var(--ui-shadow) !important; }
body[data-page="home"] .card .icon { font-size: 32px; margin-bottom: 14px; }
body[data-page="home"] .card .btn {
    background: var(--ui-primary) !important; border-radius: 6px !important; color: #fff;
}
body[data-page="home"] .old-system {
    max-width: none; padding: 20px 24px; text-align: left;
    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-text);
}
body[data-page="home"] .old-system h3 { color: var(--ui-text); margin-bottom: 4px; }
body[data-page="home"] .old-system p { color: var(--ui-muted); }
body[data-page="home"] .old-system a {
    margin-top: 12px; padding: 9px 16px; color: var(--ui-primary); background: var(--ui-primary-soft); border-radius: 6px;
}
body[data-page="home"] .old-system a:hover { transform: none; background: #dfeaff; }
body[data-page="home"] .footer { color: #858c96; margin-top: 28px; }

/* Story utility */
body[data-page="story"] { max-width: 760px; padding-top: 52px; }
body[data-page="story"] h1 { text-align: left; color: var(--ui-text); font-size: 30px; margin-bottom: 24px; }
body[data-page="story"] .card { padding: 24px; }
body[data-page="story"] .card h3 { font-size: 16px; margin-bottom: 16px; }
body[data-page="story"] button { background: var(--ui-primary) !important; border: 1px solid var(--ui-primary); }
body[data-page="story"] .chars { color: var(--ui-primary); background: var(--ui-primary-soft); border: 1px solid #cbdaf7; }

/* Platform administration */
body[data-page="admin"] .header { border-top: 3px solid var(--ui-primary); }
body[data-page="admin"] .container { width: 100%; max-width: 1720px; align-items: flex-start; }
body[data-page="admin"] .sidebar { position: sticky; top: 16px; width: 210px; min-width: 210px; padding: 10px 0 14px; overflow: hidden; }
body[data-page="admin"] .nav-group-label { padding: 14px 20px 6px; color: #9299a3; font-size: 11px; font-weight: 700; }
body[data-page="admin"] .sidebar .menu-item { color: #4d5560; border-left: 3px solid transparent; }
body[data-page="admin"] .sidebar .menu-item:hover { background: var(--ui-surface-subtle); color: var(--ui-primary); }
body[data-page="admin"] .sidebar .menu-item.active {
    color: var(--ui-primary); background: var(--ui-primary-soft); border-left-color: var(--ui-primary); border-right: 0;
}
body[data-page="admin"] .main-content { min-width: 0; min-height: calc(100vh - 99px); }
body[data-page="admin"] .dashboard { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
body[data-page="admin"] .stat-card {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    text-align: left;
}
body[data-page="admin"] .stat-card .value { color: var(--ui-primary); font-size: 30px; }
body[data-page="admin"] .stat-card:nth-child(2) .value { color: var(--ui-success); }
body[data-page="admin"] .stat-card:nth-child(3) .value { color: var(--ui-warning); }
body[data-page="admin"] .stat-card:nth-child(4) .value { color: #7a4cad; }
body[data-page="admin"] .stat-card .label { color: var(--ui-muted); }
body[data-page="admin"] .admin-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
body[data-page="admin"] .quick-action { min-height: 86px; padding: 15px 16px; color: var(--ui-text); background: var(--ui-surface-subtle) !important; border: 1px solid var(--ui-border) !important; text-align: left; }
body[data-page="admin"] .quick-action:hover { background: var(--ui-primary-soft) !important; border-color: #b9cdf4 !important; }
body[data-page="admin"] .quick-action strong,
body[data-page="admin"] .quick-action span { display: block; }
body[data-page="admin"] .quick-action strong { margin-bottom: 5px; font-size: 14px; }
body[data-page="admin"] .quick-action span { color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
body[data-page="admin"] .admin-filter-bar { display: grid; grid-template-columns: minmax(150px,1.2fr) minmax(180px,1.4fr) repeat(3,minmax(100px,.8fr)) auto auto; gap: 8px; margin-bottom: 16px; padding: 12px; background: var(--ui-surface-subtle); border: 1px solid var(--ui-border); border-radius: 7px; }
body[data-page="admin"] .admin-filter-bar input,
body[data-page="admin"] .admin-filter-bar select { width: 100%; min-width: 0; padding: 8px 10px; }
body[data-page="admin"] .node-content.subject-node { background: var(--ui-primary-soft); border-color: #cad9f7; }
body[data-page="admin"] .node-content.grade-node { background: var(--ui-warning-soft); border-color: #efd2aa; }
body[data-page="admin"] .node-content.type-node { background: var(--ui-success-soft); border-color: #b8decf; }

@media (max-width: 900px) {
    body[data-page="admin"] .library-admin-layout { grid-template-columns: 1fr !important; }
    body[data-page="admin"] .admin-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="admin"] .container { flex-direction: column; }
    body[data-page="admin"] .sidebar { position: static; display: flex; width: 100%; min-width: 0; padding: 0; overflow-x: auto !important; }
    body[data-page="admin"] .nav-group-label { display: none; }
    body[data-page="admin"] .sidebar .menu-item { flex: 0 0 auto; padding: 12px 15px; white-space: nowrap; }
    body[data-page="admin"] .category-panel { width: 100%; max-height: 280px; overflow-y: auto; }
    body[data-page="admin"] .main-content { width: 100%; min-height: 0; }
    body[data-page="admin"] .admin-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body[data-page="admin"] .section-header { align-items: flex-start; flex-wrap: wrap; }
    body[data-page="admin"] .section-actions { flex-wrap: wrap; }
    body[data-page="admin"] .node-actions { opacity: 1; flex-wrap: wrap; justify-content: flex-end; }
}

body[data-page="school-admin"] .header { border-top: 3px solid #7954a8; }
body[data-page="school-admin"] .school-tab-scroll { overflow-x: auto; scrollbar-width: thin; }
body[data-page="school-admin"] .tab-btn { color: var(--ui-muted) !important; }
body[data-page="school-admin"] .school-tab-scroll .tab-btn { flex: 0 0 auto; white-space: nowrap; }
body[data-page="school-admin"] .tab-btn.active { color: var(--ui-primary) !important; border-bottom-color: var(--ui-primary) !important; }
body[data-page="school-admin"] #schoolLibraryForm input,
body[data-page="school-admin"] #schoolLibraryForm select,
body[data-page="school-admin"] #schoolLibraryForm textarea,
body[data-page="teacher"] #teacherLibraryForm input,
body[data-page="teacher"] #teacherLibraryForm select,
body[data-page="teacher"] #teacherLibraryForm textarea { width: 100%; padding: 10px 12px; }

@media (max-width: 640px) {
    body[data-page="school-admin"] .school-tab-bar { padding: 0 8px !important; }
    body[data-page="school-admin"] .school-tab-scroll .tab-btn { padding: 12px 15px !important; }
}

/* Student workspace */
body[data-page^="student"],
body[data-page="knowledge"],
body[data-page="display"],
body[data-page="practice"],
body[data-page="history"],
body[data-page="type-history"],
body[data-page="math-practice"],
body[data-page="math-detail"],
body[data-page="custom-content"] { background: #f4f6f8 !important; }

body[data-page^="student"] .header,
body[data-page="knowledge"] .header,
body[data-page="display"] .header,
body[data-page="practice"] .header,
body[data-page="history"] .header,
body[data-page="type-history"] .header,
body[data-page="custom-content"] .header { border-top: 3px solid #5c55c6; }

body[data-page="student-home"] .nav-tabs { gap: 4px; border-bottom: 1px solid var(--ui-border); padding-bottom: 0; }
body[data-page="student-home"] .nav-tab { background: transparent; border-radius: 0 !important; border-bottom: 2px solid transparent; }
body[data-page="student-home"] .nav-tab:hover { background: var(--ui-surface-subtle); }
body[data-page="student-home"] .nav-tab.active { background: transparent !important; color: var(--ui-primary); border-bottom-color: var(--ui-primary); }
body[data-page="student-home"] .info-item { background: var(--ui-surface-subtle); border: 1px solid #edf0f2; }
body[data-page="student-home"] .subject-card:hover { transform: none; border-color: #b9cdf4 !important; box-shadow: var(--ui-shadow) !important; }
body[data-page="student-home"] .subject-card .stat .value { color: var(--ui-primary); }
body[data-page="student-home"] .grade-btn:hover { background: var(--ui-primary-soft) !important; color: var(--ui-primary); border-color: #b9cdf4; transform: none; box-shadow: none; }

/* Student mastery dashboard */
body[data-page="student-home"] #home { padding-bottom: 40px; }
body[data-page="student-home"] .news-panel {
    margin: 18px 0;
    padding: 18px 20px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow);
}
body[data-page="student-home"] .news-panel .section-title-row { margin-bottom: 12px; }
body[data-page="student-home"] .news-count { color: var(--ui-muted); font-size: 12px; }
body[data-page="student-home"] .news-list { border-top: 1px solid var(--ui-border); }
body[data-page="student-home"] .news-item { border-bottom: 1px solid var(--ui-border); }
body[data-page="student-home"] .news-item:last-child { border-bottom: 0; }
body[data-page="student-home"] .news-item summary {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 13px 4px;
    cursor: pointer;
    list-style: none;
}
body[data-page="student-home"] .news-item summary::-webkit-details-marker { display: none; }
body[data-page="student-home"] .news-item summary::after {
    content: "+";
    color: var(--ui-muted);
    font-size: 17px;
    grid-column: 5;
}
body[data-page="student-home"] .news-item[open] summary::after { content: "−"; }
body[data-page="student-home"] .news-item summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
body[data-page="student-home"] .news-item summary time { color: var(--ui-muted); font-size: 11px; }
body[data-page="student-home"] .news-source,
body[data-page="student-home"] .news-pinned {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
body[data-page="student-home"] .news-source { color: var(--ui-primary); background: var(--ui-primary-soft); }
body[data-page="student-home"] .news-source.source-school { color: #67429a; background: #f1ebf8; }
body[data-page="student-home"] .news-source.source-teacher { color: var(--ui-success); background: var(--ui-success-soft); }
body[data-page="student-home"] .news-pinned { color: var(--ui-danger); background: var(--ui-danger-soft); }
body[data-page="student-home"] .news-content { padding: 0 4px 14px 4px; }
body[data-page="student-home"] .news-content p { color: #414851; font-size: 13px; line-height: 1.75; margin: 0 0 8px; }
body[data-page="student-home"] .news-content > span { color: var(--ui-muted); font-size: 11px; }
body[data-page="student-home"] .news-empty { padding: 24px 4px 8px; color: var(--ui-muted); text-align: center; font-size: 13px; }
body[data-page="student-home"] .learning-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 4px 24px;
}
body[data-page="student-home"] .learning-eyebrow,
body[data-page="student-home"] .section-kicker {
    color: var(--ui-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}
body[data-page="student-home"] .learning-hero h2 { font-size: 27px; line-height: 1.3; margin: 0 0 8px; }
body[data-page="student-home"] .learning-hero p { color: var(--ui-muted); margin: 0; }
body[data-page="student-home"] .hero-actions { display: flex; gap: 10px; flex-shrink: 0; }

body[data-page="student-home"] .learning-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
body[data-page="student-home"] .summary-tile {
    min-height: 126px;
    padding: 18px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow);
}
body[data-page="student-home"] .summary-label { color: var(--ui-muted); font-size: 13px; font-weight: 600; }
body[data-page="student-home"] .summary-value { color: var(--ui-text); font-size: 30px; font-weight: 750; line-height: 1.25; margin: 9px 0 5px; }
body[data-page="student-home"] .summary-value span { color: var(--ui-muted); font-size: 13px; font-weight: 500; margin-left: 4px; }
body[data-page="student-home"] .summary-detail { color: #8a929d; font-size: 12px; }
body[data-page="student-home"] .loading-tile {
    background: linear-gradient(90deg, #f4f5f7 25%, #fafbfc 50%, #f4f5f7 75%);
    background-size: 200% 100%;
    animation: dashboard-pulse 1.4s infinite;
}
@keyframes dashboard-pulse { from { background-position: 200% 0; } to { background-position: -200% 0; } }

body[data-page="student-home"] .focus-panel {
    margin-bottom: 30px;
    padding: 18px 20px;
    background: #f9fafb;
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--ui-warning);
    border-radius: 8px;
}
body[data-page="student-home"] .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
body[data-page="student-home"] .section-title-row h3 { font-size: 19px; margin: 0; }
body[data-page="student-home"] .focus-panel .section-title-row { margin-bottom: 12px; }
body[data-page="student-home"] .focus-panel .section-kicker { color: var(--ui-warning); }
body[data-page="student-home"] .focus-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
body[data-page="student-home"] .focus-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
}
body[data-page="student-home"] .focus-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}
body[data-page="student-home"] .focus-main { min-width: 0; }
body[data-page="student-home"] .focus-main strong,
body[data-page="student-home"] .focus-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="student-home"] .focus-main strong { font-size: 13px; }
body[data-page="student-home"] .focus-main span { color: var(--ui-muted); font-size: 11px; margin-top: 3px; }
body[data-page="student-home"] .focus-score { grid-column: 2; font-size: 13px; font-weight: 700; }
body[data-page="student-home"] .focus-item .btn { grid-column: 3; grid-row: 1 / span 2; padding: 7px 10px; font-size: 12px; }
body[data-page="student-home"] .focus-score.focus { color: var(--ui-danger); }
body[data-page="student-home"] .focus-score.steady { color: var(--ui-warning); }
body[data-page="student-home"] .focus-score.strong { color: var(--ui-success); }
body[data-page="student-home"] .focus-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
}
body[data-page="student-home"] .focus-empty strong,
body[data-page="student-home"] .focus-empty span { display: block; }
body[data-page="student-home"] .focus-empty span { color: var(--ui-muted); font-size: 13px; margin-top: 3px; }

body[data-page="student-home"] .subjects-title { margin: 0 4px 14px; }
body[data-page="student-home"] .subject-dashboard { display: grid; gap: 18px; }
body[data-page="student-home"] .dashboard-subject {
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow);
    scroll-margin-top: 16px;
}
body[data-page="student-home"] .subject-overview-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(220px, 0.8fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ui-border);
}
body[data-page="student-home"] .subject-identity { display: flex; align-items: center; gap: 12px; }
body[data-page="student-home"] .subject-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #4f46b8;
    background: #eeedff;
    font-size: 18px;
    font-weight: 750;
}
body[data-page="student-home"] .subject-math .subject-mark { color: #18755b; background: #e9f7f1; }
body[data-page="student-home"] .subject-english .subject-mark { color: #a45a10; background: #fff3e2; }
body[data-page="student-home"] .subject-name { font-size: 18px; font-weight: 750; }
body[data-page="student-home"] .subject-count { color: var(--ui-muted); font-size: 12px; margin-top: 2px; }
body[data-page="student-home"] .subject-score-block > div:first-child { display: flex; align-items: baseline; justify-content: space-between; }
body[data-page="student-home"] .subject-score-block strong { font-size: 24px; }
body[data-page="student-home"] .subject-score-block span { color: var(--ui-muted); font-size: 12px; }
body[data-page="student-home"] .subject-progress,
body[data-page="student-home"] .mastery-track { height: 6px; overflow: hidden; background: #e9ebee; border-radius: 99px; }
body[data-page="student-home"] .subject-progress { margin-top: 7px; }
body[data-page="student-home"] .subject-progress span,
body[data-page="student-home"] .mastery-track span { display: block; height: 100%; background: var(--ui-primary); border-radius: inherit; }
body[data-page="student-home"] .subject-actions { display: flex; gap: 8px; }

body[data-page="student-home"] .grade-sections { display: grid; gap: 0; }
body[data-page="student-home"] .grade-section { padding: 18px 20px 20px; border-bottom: 1px solid var(--ui-border); }
body[data-page="student-home"] .grade-section:last-child { border-bottom: 0; }
body[data-page="student-home"] .grade-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-page="student-home"] .grade-heading > div { display: flex; align-items: center; gap: 8px; }
body[data-page="student-home"] .grade-heading span { color: var(--ui-muted); font-size: 11px; padding: 2px 7px; background: #eef0f2; border-radius: 4px; }
body[data-page="student-home"] .grade-heading strong { font-size: 15px; }
body[data-page="student-home"] .grade-heading a { color: var(--ui-primary); font-size: 12px; text-decoration: none; }
body[data-page="student-home"] .type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body[data-page="student-home"] .type-card {
    min-width: 0;
    padding: 14px;
    background: var(--ui-surface-subtle);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
}
body[data-page="student-home"] .type-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body[data-page="student-home"] .type-card h4 { font-size: 15px; margin: 0 0 6px; }
body[data-page="student-home"] .mastery-status { display: inline-block; font-size: 11px; font-weight: 650; }
body[data-page="student-home"] .mastery-status.not-started { color: var(--ui-muted); }
body[data-page="student-home"] .mastery-status.focus { color: var(--ui-danger); }
body[data-page="student-home"] .mastery-status.steady { color: var(--ui-warning); }
body[data-page="student-home"] .mastery-status.strong { color: var(--ui-success); }
body[data-page="student-home"] .type-score { display: flex; align-items: baseline; gap: 2px; }
body[data-page="student-home"] .type-score strong { font-size: 23px; }
body[data-page="student-home"] .type-score span { color: var(--ui-muted); font-size: 11px; }
body[data-page="student-home"] .type-score.not-started { color: #8c939d; }
body[data-page="student-home"] .type-score.focus { color: var(--ui-danger); }
body[data-page="student-home"] .type-score.steady { color: var(--ui-warning); }
body[data-page="student-home"] .type-score.strong { color: var(--ui-success); }
body[data-page="student-home"] .mastery-track { margin: 11px 0; }
body[data-page="student-home"] .mastery-track span.not-started { background: #b9bec5; }
body[data-page="student-home"] .mastery-track span.focus { background: var(--ui-danger); }
body[data-page="student-home"] .mastery-track span.steady { background: var(--ui-warning); }
body[data-page="student-home"] .mastery-track span.strong { background: var(--ui-success); }
body[data-page="student-home"] .type-metrics { display: flex; gap: 14px; color: var(--ui-muted); font-size: 11px; }
body[data-page="student-home"] .type-metrics strong { color: var(--ui-text); }
body[data-page="student-home"] .type-actions { display: flex; gap: 7px; margin-top: 13px; }
body[data-page="student-home"] .type-actions .btn { flex: 1; padding: 7px 8px; text-align: center; font-size: 12px; }
body[data-page="student-home"] .type-empty,
body[data-page="student-home"] .dashboard-empty,
body[data-page="student-home"] .dashboard-loading {
    padding: 24px;
    color: var(--ui-muted);
    background: var(--ui-surface-subtle);
    border: 1px dashed var(--ui-border-strong);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
}

body[data-page="knowledge"] .search-bar { background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); }
body[data-page="knowledge"] .search-bar button { background: var(--ui-primary) !important; }
body[data-page="knowledge"] .node-content.active { background: var(--ui-primary-soft); color: var(--ui-primary); }
body[data-page="knowledge"] .kp-card { border-color: var(--ui-border); }
body[data-page="knowledge"] .kp-card:hover { transform: none; border-color: #b9cdf4; box-shadow: none; }

body[data-page="display"] .page-header,
body[data-page="math-practice"] .page-header {
    background: var(--ui-surface) !important; color: var(--ui-text) !important;
    border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-primary); box-shadow: var(--ui-shadow) !important;
}
body[data-page="display"] .list { border: 1px solid var(--ui-border); }
body[data-page="display"] .list-item:hover { background: var(--ui-primary-soft); }

body[data-page="practice"] .sidebar { border-right: 1px solid var(--ui-border) !important; }
body[data-page="practice"] .sidebar-toggle {
    background: var(--ui-surface) !important;
    color: var(--ui-primary) !important;
    border: 1px solid var(--ui-border-strong) !important;
    box-shadow: none !important;
}
body[data-page="practice"] .sidebar-toggle:hover { background: var(--ui-primary-soft) !important; }
body[data-page="practice"] .subject-card.selected { border-color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; }

body[data-page="type-history"] .stat-summary,
body[data-page="type-history"] .batch-toolbar { background: var(--ui-surface-subtle) !important; border-color: var(--ui-border) !important; }
body[data-page="type-history"] .history-item:hover { background: #f8faff; }

body[data-page="math-practice"] .page-header { border-left-color: #7954a8; }
body[data-page="math-practice"] .problem-item { border-radius: 6px !important; border-color: var(--ui-border) !important; }
body[data-page="math-practice"] .stat-card { background: var(--ui-surface) !important; border: 1px solid var(--ui-border); }
body[data-page="math-detail"] .kp-expression { color: var(--ui-text); }
body[data-page="math-detail"] .kp-score { color: var(--ui-primary); }

body[data-page="custom-content"] .content-item { background: var(--ui-surface-subtle); border-color: var(--ui-border); }
body[data-page="custom-content"] .content-item:hover { background: var(--ui-primary-soft); border-color: #b9cdf4; }

/* Teacher workspace */
body[data-page="teacher"].login-page { background: var(--ui-bg) !important; }
body[data-page="teacher"] .teacher-header { border-top: 3px solid var(--ui-success); }
body[data-page="teacher"] .overview-card .icon { border-radius: 8px; }
body[data-page="teacher"] .overview-card .icon.green { background: var(--ui-success-soft); color: var(--ui-success); }
body[data-page="teacher"] .overview-card .icon.blue { background: var(--ui-primary-soft); color: var(--ui-primary); }
body[data-page="teacher"] .overview-card .icon.orange { background: var(--ui-warning-soft); color: var(--ui-warning); }
body[data-page="teacher"] .scope-tag { background: var(--ui-primary-soft); color: var(--ui-primary); }
body[data-page="teacher"] .scope-tag.empty { background: var(--ui-warning-soft); color: var(--ui-warning); }
body[data-page="teacher"] .container { max-width: 1360px; }
body[data-page="teacher"] .teacher-workspace-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    overflow-x: auto;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
body[data-page="teacher"] .teacher-workspace-nav button {
    flex: 0 0 auto;
    padding: 9px 16px;
    color: var(--ui-muted);
    background: transparent !important;
    border: 0 !important;
    font-size: 13px;
    font-weight: 600;
}
body[data-page="teacher"] .teacher-workspace-nav button.active { color: var(--ui-primary); background: var(--ui-primary-soft) !important; }
body[data-page="teacher"] .teacher-workspace-section { display: none; }
body[data-page="teacher"] .teacher-workspace-section.active { display: block; }
body[data-page="teacher"] .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: var(--ui-muted); font-size: 13px; }

/* Internal diagnostic pages */
body[data-page="debug-history"],
body[data-page="test-history"] { max-width: 860px; margin: 0 auto; padding: 24px; }
body[data-page="debug-history"] .continue-learning-config,
body[data-page="test-history"] .test-box { border-color: var(--ui-border); background: var(--ui-surface-subtle); }

@media (max-width: 700px) {
    body[data-page] .container { padding: 12px; }
    body[data-page] .card { border-radius: 8px !important; }
    body[data-page="home"] { padding: 18px; }
    body[data-page="home"] h1 { font-size: 28px; text-align: left; }
    body[data-page="home"] .subtitle { text-align: left; }
    body[data-page="home"] .card { padding: 22px; }
    body[data-page="story"] { padding: 28px 16px; }
    body[data-page="story"] h1 { font-size: 26px; }
    body[data-page="admin"] .sidebar .menu-item.active { border-left-color: transparent; border-bottom-color: var(--ui-primary); }
    body[data-page="admin"] #loginPage { width: calc(100% - 24px); }
    body[data-page="student-home"] .nav-tabs { overflow-x: auto; white-space: nowrap; }
    body[data-page="student-home"] .nav-tab { flex: 0 0 auto; }
    body[data-page="student-home"] .learning-hero { align-items: flex-start; flex-direction: column; padding: 12px 0 18px; }
    body[data-page="student-home"] .learning-hero h2 { font-size: 22px; }
    body[data-page="student-home"] .hero-actions { width: 100%; }
    body[data-page="student-home"] .hero-actions .btn { flex: 1; padding: 9px 8px; }
    body[data-page="student-home"] .learning-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body[data-page="student-home"] .news-panel { margin: 12px 0; padding: 15px; }
    body[data-page="student-home"] .news-item summary { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    body[data-page="student-home"] .news-item summary time { display: none; }
    body[data-page="student-home"] .news-item summary::after { grid-column: 4; }
    body[data-page="student-home"] .summary-tile { min-height: 110px; padding: 14px; }
    body[data-page="student-home"] .summary-value { font-size: 25px; }
    body[data-page="student-home"] .focus-panel { padding: 15px; margin-bottom: 24px; }
    body[data-page="student-home"] .focus-list { grid-template-columns: 1fr; }
    body[data-page="student-home"] .focus-empty { align-items: flex-start; flex-direction: column; }
    body[data-page="student-home"] .subject-overview-row { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
    body[data-page="student-home"] .subject-actions { display: grid; grid-template-columns: 1fr 1fr; }
    body[data-page="student-home"] .grade-section { padding: 16px; }
    body[data-page="student-home"] .type-grid { grid-template-columns: 1fr; }
    body[data-page="student-home"] .type-metrics { justify-content: space-between; gap: 8px; }
    body[data-page="debug-history"],
    body[data-page="test-history"] { padding: 12px; }
    body[data-page] .announcement-admin-item { align-items: flex-start; flex-direction: column; }
    body[data-page] .announcement-actions { width: 100%; }
    body[data-page] .announcement-actions .btn { flex: 1; }
    body[data-page] .announcement-form-grid { grid-template-columns: 1fr; }
    body[data-page="school-admin"] .custom-scope-row { align-items: stretch !important; flex-wrap: wrap; }
    body[data-page="school-admin"] .custom-scope-row input { flex: 1 1 140px; width: auto !important; min-width: 0; }
    body[data-page="school-admin"] .custom-scope-row .btn { flex: 1 1 100%; }
}

@media (max-width: 480px) {
    body[data-page="teacher"] .teacher-header,
    body[data-page="school-admin"] .header { flex-wrap: wrap; }
    body[data-page="teacher"] .teacher-header h1,
    body[data-page="school-admin"] .header h1 { flex: 1 1 100%; }
    body[data-page="teacher"] .teacher-header .user-info,
    body[data-page="school-admin"] .header .user-info {
        display: flex;
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
    body[data-page="teacher"] #teacherInfo,
    body[data-page="school-admin"] #adminDisplayName {
        min-width: 0;
        max-width: 45vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Shared English-letter recognition cards (practice and history modals). */
body[data-page] .article-content.letter-practice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 12px;
    padding: 22px;
    background: linear-gradient(145deg, #f7f9fc, #fff);
    text-align: center;
}

body[data-page] .article-content.letter-practice .char {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    margin: 0;
    padding: 9px;
    border: 1px solid #dbe4f0;
    border-bottom: 3px solid #6480ad;
    border-radius: 11px;
    background: #fff;
    color: #2f4d7a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(43, 67, 104, .07);
}

body[data-page] .article-content.letter-practice .char.marked {
    border-color: #ffaaa7;
    border-bottom-color: #e85d59;
    background: #fff1f0;
    color: #d94743;
}