/* ============================================================
   教务管理平台 · 样式
   ------------------------------------------------------------
   设计要点
     · 对比度：选中态用高饱和描边 + 深色文字，未选中态明显更浅
     · 移动端：栅格自动折叠、横向滚动表格给出滑动提示、
       点按目标不小于 44px、弹窗在手机上占满宽度
   ============================================================ */

:root {
    --c-bg: #eef1f6;
    --c-surface: #ffffff;
    --c-surface-2: #f5f8fc;
    --c-border: #d7dfea;
    --c-border-strong: #b3bfd0;
    --c-text: #101828;
    --c-text-2: #475467;
    --c-text-3: #7a8699;

    --c-primary: #1d5fd8;
    --c-primary-d: #1748a8;
    --c-primary-l: #e3edfd;
    --c-success: #12855a;
    --c-success-l: #dff5ea;
    --c-warn: #c07806;
    --c-warn-l: #fdf0d6;
    --c-danger: #cc352c;
    --c-danger-l: #fde7e4;
    --c-info: #1a75bd;
    --c-info-l: #e0f0fb;
    --c-purple: #6a45cc;
    --c-purple-l: #ece5fb;

    --radius: 12px;
    --radius-lg: 16px;
    --radius-sm: 8px;
    --shadow-s: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .05);
    --shadow-m: 0 4px 14px rgba(16, 24, 40, .12);
    --shadow-l: 0 14px 38px rgba(16, 24, 40, .2);
    --sidebar-w: 226px;
    --tap: 44px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.35;
}

code {
    font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}

/* ============ 布局 ============ */
.app {
    display: flex;
    min-height: 100vh;
}

/* 侧栏默认收起：点顶栏 ☰ 才滑出，内容区始终占满整宽 */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-l);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px;
    border-bottom: 1px solid var(--c-border);
}

.brand-icon {
    font-size: 24px;
    line-height: 1;
}

.brand strong {
    font-size: 15.5px;
    letter-spacing: -.2px;
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    min-height: var(--tap);
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--c-text-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background .15s, color .15s;
    width: 100%;
}

.nav-item:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
}

.nav-item.active {
    background: var(--c-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-s);
}

.nav-ico {
    font-size: 17px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.nav-sep {
    height: 1px;
    background: var(--c-border);
    margin: 8px 6px;
}

.side-foot {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--c-border);
}

.conn-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--c-text-2);
    font-weight: 500;
}

.conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-text-3);
    flex-shrink: 0;
}

.conn-badge.online .conn-dot {
    background: var(--c-success);
    box-shadow: 0 0 0 3px var(--c-success-l);
}

.conn-badge.local .conn-dot {
    background: var(--c-warn);
    box-shadow: 0 0 0 3px var(--c-warn-l);
}

.side-foot-tip {
    margin-top: 6px;
    font-size: 11px;
    color: var(--c-text-3);
    line-height: 1.5;
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: wrap;
}

.topbar-title {
    flex: 1;
    min-width: 0;
}

/* ============ 当前班级指示器（顶栏） ============ */
/* 当前班级是全局设置，作业/考勤/成绩/座位/值日/学生信息都按它取数，
   放在顶栏是为了让「现在看的是哪个班」在任何页面都一目了然。 */
.class-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--c-primary-l);
    border: 1.5px solid #bcd4f7;
    color: var(--c-primary-d);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.class-chip b {
    font-weight: 800;
}

.class-chip .cc-ico {
    font-size: 13px;
}

/* 工具栏里的班级下拉：窄一点，别把搜索框挤没了 */
.field.class-pick {
    min-width: 132px;
    flex: 0 0 auto;
}

/* 行内版班级下拉（作业统计的标签栏右侧） */
.class-pick-inline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-2);
    white-space: nowrap;
}

.class-pick-inline select {
    min-width: 132px;
    min-height: 36px;
    padding: 6px 28px 6px 11px;
}

/* 作业统计顶部：标签 + 提示 + 班级切换，始终排成一行 */
.hw-tabbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hw-tabbar .hint {
    flex: 1;
    min-width: 0;
}

.topbar-title h1 {
    font-size: 19px;
    letter-spacing: -.3px;
}

.topbar-title p {
    font-size: 12.5px;
    color: var(--c-text-2);
    margin-top: 1px;
}

/* 首页日期后面的秒级时钟 */
.live-clock {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--c-primary);
    background: var(--c-primary-l);
    border-radius: 6px;
    padding: 0 6px;
    margin: 0 2px;
    letter-spacing: .3px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 展开导航：侧栏收起后这是唯一的入口，所以放大加粗 */
.btn-menu {
    width: 40px;
    height: 40px;
    font-size: 19px;
    border: 1.5px solid var(--c-border-strong);
    background: var(--c-surface);
    flex-shrink: 0;
}

.btn-menu:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.content {
    flex: 1;
    padding: 18px 22px 28px;
    max-width: 1440px;
    width: 100%;
}

.page-foot {
    padding: 14px 22px 22px;
    color: var(--c-text-3);
    font-size: 12px;
    text-align: center;
}

/* ============ 通用组件 ============ */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-s);
    padding: 18px 20px;
    margin-bottom: 16px;
}

.card:last-child {
    margin-bottom: 0;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.card-head h3 {
    font-size: 15px;
    flex: 1;
    min-width: 120px;
}

.card-head .hint,
.hint {
    font-size: 12px;
    color: var(--c-text-2);
    font-weight: 400;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    /*
     * 网格下方也要留出和 .card 一样的 16px。
     * 只把里面的卡片 margin-bottom 抹成 0 是不够的 —— 网格自己没边距，
     * 紧跟着的下一张卡片就贴上来了（总览页「需要注意的学生」原来就是这么贴着的）。
     */
    margin-bottom: 16px;
}

/* 网格是最后一个元素时不留尾巴（跟 .card:last-child 一个道理） */
.grid-2:last-child {
    margin-bottom: 0;
}

/*
 * 网格里的卡片不吃「卡片自带的下边距」。
 * .card 默认 margin-bottom:16px、:last-child 又抹成 0 —— 单列排版时这是对的，
 * 但在网格里会变成「最后一张比同排的多出 16px」，一眼就看出没对齐。
 * 网格的间距一律交给上面的 gap。
 */
.grid-2 > .card {
    margin-bottom: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    min-height: 40px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
    white-space: nowrap;
    line-height: 1.4;
}

.btn:hover {
    background: var(--c-surface-2);
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.btn:active {
    transform: scale(.97);
}

.btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--c-primary-d);
    border-color: var(--c-primary-d);
    color: #fff;
}

.btn-success {
    background: var(--c-success);
    border-color: var(--c-success);
    color: #fff;
}

.btn-success:hover {
    background: #0d6b48;
    border-color: #0d6b48;
    color: #fff;
}

.btn-danger {
    background: var(--c-danger);
    border-color: var(--c-danger);
    color: #fff;
}

.btn-danger:hover {
    background: #a82a22;
    border-color: #a82a22;
    color: #fff;
}

.btn-ghost {
    border-color: transparent;
    background: var(--c-surface-2);
    color: var(--c-text-2);
}

.btn-ghost:hover {
    background: #e7edf6;
    color: var(--c-primary);
}

.btn-sm {
    padding: 6px 11px;
    min-height: 34px;
    font-size: 12.5px;
    border-radius: 6px;
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    opacity: .5;
    pointer-events: none;
}

.icon-btn {
    width: var(--tap);
    height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--c-text-2);
    font-size: 17px;
    transition: background .15s;
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--c-surface-2);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-2);
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="time"],
input[type="search"],
select,
textarea {
    padding: 9px 11px;
    min-height: 40px;
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    max-width: 100%;
}

textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(29, 95, 216, .18);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%23475467' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

input[type="checkbox"] {
    width: auto;
    min-height: auto;
    accent-color: var(--c-primary);
    width: 18px;
    height: 18px;
}

.toolbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar .field {
    min-width: 130px;
}

.spacer {
    flex: 1;
}

/* 统计小卡 */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-s);
    min-width: 0;
}

.stat .num {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.6px;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat .lbl {
    font-size: 12.5px;
    color: var(--c-text-2);
    font-weight: 600;
}

.stat .sub {
    font-size: 12px;
    color: var(--c-text-3);
    margin-top: 2px;
    line-height: 1.5;
}

.stat .bar {
    height: 6px;
    border-radius: 4px;
    background: var(--c-border);
    margin-top: 8px;
    overflow: hidden;
}

.stat .bar > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease;
}

.stat.t-ink .num {
    color: var(--c-text);
}

.stat.t-blue .num {
    color: var(--c-primary);
}

.stat.t-blue .bar > i {
    background: var(--c-primary);
}

.stat.t-green .num {
    color: var(--c-success);
}

.stat.t-green .bar > i {
    background: var(--c-success);
}

.stat.t-red .num {
    color: var(--c-danger);
}

.stat.t-red .bar > i {
    background: var(--c-danger);
}

.stat.t-amber .num {
    color: var(--c-warn);
}

.stat.t-amber .bar > i {
    background: var(--c-warn);
}

.stat.t-purple .num {
    color: var(--c-purple);
}

.stat.t-purple .bar > i {
    background: var(--c-purple);
}

/* 标签 */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2f7;
    color: var(--c-text-2);
    line-height: 1.6;
    white-space: nowrap;
}

.chip.blue {
    background: var(--c-info-l);
    color: #10558a;
}

.chip.red {
    background: var(--c-danger-l);
    color: #9c221b;
}

.chip.green {
    background: var(--c-success-l);
    color: #0b5e3f;
}

.chip.amber {
    background: var(--c-warn-l);
    color: #8a5403;
}

.chip.purple {
    background: var(--c-purple-l);
    color: #4b2d9c;
}

.chip.gray {
    background: #eef2f7;
    color: var(--c-text-2);
}

/* 表格 */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}

table.tb {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 460px;
}

table.tb th {
    background: var(--c-surface-2);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--c-text-2);
    border-bottom: 1.5px solid var(--c-border);
    white-space: nowrap;
    font-size: 12.5px;
}

table.tb td {
    padding: 9px 12px;
    border-bottom: 1px solid #eaeff6;
}

table.tb tr:last-child td {
    border-bottom: none;
}

table.tb tbody tr:hover td {
    background: #f6f9fd;
}

table.tb .num {
    font-variant-numeric: tabular-nums;
}

table.tb tr.row-flash td {
    background: var(--c-primary-l) !important;
}

/* 可点击排序的表头 */
table.tb th.th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

table.tb th.th-sort:hover {
    background: var(--c-primary-l);
    color: var(--c-primary-d);
}

th.th-sort .sort-ind {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--c-primary);
    vertical-align: 1px;
}

/* 成绩录入表的冻结列 */
table.tb th.sticky-l1,
table.tb td.sticky-l1 {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--c-surface);
}

table.tb th.sticky-l2,
table.tb td.sticky-l2 {
    position: sticky;
    left: 48px;
    z-index: 2;
    background: var(--c-surface);
}

table.tb thead th.sticky-l1,
table.tb thead th.sticky-l2 {
    z-index: 5;
    background: var(--c-surface-2);
}

table.tb tfoot td.sticky-l1 {
    background: var(--c-surface-2);
}

/* 分段控件 */
.seg {
    display: inline-flex;
    background: #e7edf6;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.seg button {
    border: none;
    background: none;
    padding: 8px 14px;
    min-height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.seg button.active {
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--shadow-s);
}

.sub-seg {
    margin-bottom: 14px;
}

/* 空态 */
.empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--c-text-2);
    line-height: 1.9;
}

/* hidden 就是 hidden：作者样式里的 display:flex 会把 UA 的 [hidden]{display:none} 顶回去，
   .class-chip / .user-box / .nav-item 这类元件都踩过这个坑（未登录时顶栏中路露出一个空胶囊） */
.class-chip[hidden],
.user-box[hidden],
.nav-item[hidden],
.nav-sep[hidden] {
    display: none !important;
}

/* ---------------- 登录 / 账号 ---------------- */
.login-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    font-size: 12.5px;
    color: var(--c-text-2);
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--c-primary);
    cursor: pointer;
}

.login-tip {
    margin-top: 12px;
    font-size: 12px;
    color: var(--c-text-3);
    line-height: 1.7;
}

.login-tip b {
    color: var(--c-text-2);
}

/* 侧栏左下角的「当前登录用户」 */
.user-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    margin-bottom: 9px;
    border-radius: 10px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
}

.user-box .ub-ava {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-box .ub-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.user-box .ub-info b {
    font-size: 13px;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-box .ub-info span {
    font-size: 11.5px;
    color: var(--c-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-box .btn {
    flex: none;
    padding: 4px 8px;
    font-size: 12px;
}

/* 班级指示器被账号锁住时 */
.class-chip.locked {
    border-style: dashed;
}

.class-chip .cc-lock {
    margin-left: 5px;
    font-size: 11px;
    opacity: .8;
}

/*
 * 未登录总览顶部的引导条。
 * 这是「请你登录」，不是「出问题了」—— 用主色调，别用警告的橙。
 */
.notice-bar.guest-bar {
    background: var(--c-primary-l);
    border-color: var(--c-primary);
    color: #16407f;
}

.notice-bar.guest-bar b {
    color: #123a75;
}

/*
 * 未登录时卡片里的占位。
 * 结构跟登录后一样（同样的 .empty 排版），只加一层淡斜纹 ——
 * 一眼看出这是「待解锁」，而不是「真的没有数据」。
 */
.guest-empty {
    background: repeating-linear-gradient(45deg,
            rgba(29, 95, 216, .055) 0 12px, transparent 12px 24px);
    border-radius: 10px;
    padding: 20px 12px;
}

/*
 * 只读账号（模块配成「仅查看」）：把页内那些「写」交互关掉。
 * 守卫照样会拦（数据层 + 云端各一道），这里只是别让人白点一次、
 * 也别让人以为点了没反应是坏了。
 */
.view-readonly .seat-grid,
.view-readonly .rest-list,
.view-readonly .tile,
.view-readonly .score-in,
.view-readonly .duty-task-chip,
.view-readonly [data-pick] {
    pointer-events: none;
}

/* 关掉交互的元件别再显示手型，免得误导 */
.view-readonly .tile,
.view-readonly [data-pick] {
    cursor: default;
}

/* 只读模块里被禁用的输入框：视觉上也压成「不能改」的样子 */
.view-readonly input:disabled,
.view-readonly select:disabled,
.view-readonly textarea:disabled {
    background: var(--c-surface-2);
    color: var(--c-text-2);
    cursor: not-allowed;
}

/* 成绩录入框：不只是不能点，视觉上也压成「只读」的样子 */
.view-readonly .score-in {
    background: var(--c-surface-2);
    color: var(--c-text-2);
}

/* 只读账号的横幅：跟「数据不完整」的提示条一个样式，换个底色 */
.notice-bar.ro-bar {
    background: #eef2f8;
    border-color: #c3cedd;
    color: #43536b;
}

.notice-bar.ro-bar b {
    color: #2c3a52;
}

/* ---------------- 账号管理表 ---------------- */
.acc-table td {
    vertical-align: middle;
}

.acc-tag {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    background: var(--c-surface-2);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
}

.acc-tag.super {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #c4b5fd;
}

.acc-tag.ok {
    background: #e8f6ec;
    color: #1c6b38;
    border-color: #b7e0c4;
}

.acc-tag.none {
    background: #fbeee6;
    color: #8a4b16;
    border-color: #eccdae;
}

.acc-sub {
    margin-left: 6px;
    font-size: 12px;
    color: var(--c-text-3);
}

.acc-warn {
    color: var(--c-warn);
    font-size: 12.5px;
}

.acc-form .acc-perm {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface-2);
}

.acc-perm-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.acc-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 8px 14px;
}

.acc-perm-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acc-perm-name {
    flex: 1;
    font-size: 13px;
    color: var(--c-text);
}

.acc-perm-row select {
    width: 96px;
    padding: 4px 6px;
    font-size: 12.5px;
}

.acc-perm-fixed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border);
    font-size: 12.5px;
    color: var(--c-text-3);
}

/* 数据不完整时的提示条（比如某一年的法定节假日还没公布） */
.notice-bar {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--c-warn-l); border: 1px solid var(--c-warn);
    border-radius: 10px; color: #7a4b00; font-size: 13px; line-height: 1.65;
}
.notice-bar .nb-ico { font-size: 15px; line-height: 1.5; flex: none; }
.notice-bar .nb-body { flex: 1; }
.notice-bar b { color: #7a4b00; }
.notice-bar .btn { flex: none; margin-top: 2px; }

.empty .big {
    font-size: 34px;
    display: block;
    margin-bottom: 8px;
    opacity: .85;
}

/* ============ 日历（作业统计） ============ */
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-head strong {
    font-size: 15px;
}

.cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.cal-week span {
    text-align: center;
    font-size: 11.5px;
    color: var(--c-text-2);
    font-weight: 600;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-cell {
    position: relative;
    border: 1.5px solid transparent;
    background: var(--c-surface-2);
    border-radius: 9px;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 2px;
    transition: transform .1s, box-shadow .15s, border-color .15s;
}

.cal-cell.blank {
    background: transparent;
    pointer-events: none;
    border-color: transparent;
}

.cal-cell .d {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-text-2);
}

/* 没有作业：浅灰、无标记 */
.cal-cell.no-hw {
    background: #f2f5fa;
    border-color: #e4eaf3;
}

.cal-cell.no-hw .d {
    color: var(--c-text-3);
    font-weight: 500;
}

.cal-cell .nodot {
    display: block;
    width: 14px;
    height: 3px;
    margin-top: 3px;
    border-radius: 2px;
    background: #dbe2ec;
}

/* 有作业：蓝底、深色数字、带数量角标 —— 与无作业形成明显区别 */
.cal-cell.has-hw {
    background: var(--c-primary-l);
    border-color: var(--c-primary);
}

.cal-cell.has-hw .d {
    color: var(--c-primary-d);
    font-weight: 800;
}

.cal-cell .dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    margin-top: 2px;
    border-radius: 9px;
    background: var(--c-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cal-cell.today {
    box-shadow: inset 0 0 0 2px var(--c-warn);
}

.cal-cell.selected {
    background: var(--c-primary);
    border-color: var(--c-primary-d);
    box-shadow: 0 0 0 3px rgba(29, 95, 216, .28);
}

.cal-cell.selected .d {
    color: #fff;
}

.cal-cell.selected .dot {
    background: #fff;
    color: var(--c-primary-d);
}

.cal-cell.selected .nodot {
    background: rgba(255, 255, 255, .6);
}

.cal-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--c-text-2);
}

.cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cal-legend .lg {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.cal-legend .lg.has-hw {
    background: var(--c-primary-l);
    border: 1.5px solid var(--c-primary);
}

.cal-legend .lg.no-hw {
    background: #f2f5fa;
    border: 1.5px solid #e4eaf3;
}

.cal-legend .lg.today {
    background: transparent;
    border: 2px solid var(--c-warn);
}

/* ============ 学生格子 ============ */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
}

/*
 * 作业统计用的「大号姓名卡」——尺寸对齐最初那份 作业.html：
 * 网格最小 120px、间距 12px、卡片最小高 90px、3px 描边，姓名 28px 加粗。
 * 目的是让学生站在教室大屏前也能一眼看清、伸手就能点中。
 */
.tile-grid.big {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.tile-grid.big .tile {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 90px;
    padding: 14px 8px;
    border-radius: 12px;
    border-width: 3px;
}

.tile-grid.big .tile .nm {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2px;
}

.tile-grid.big .tile .st {
    font-size: 12.5px;
    margin-top: 2px;
    letter-spacing: 0;
}

.tile-grid.big .tile .mark {
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    font-size: 13px;
}

.tile {
    background: var(--c-surface);
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius);
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: transform .1s, box-shadow .15s, border-color .15s, background .15s;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tile:hover {
    box-shadow: var(--shadow-m);
}

.tile:active {
    transform: scale(.96);
}

.tile .nm {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-all;
}

.tile .st {
    font-size: 11.5px;
    margin-top: 2px;
    font-weight: 700;
    letter-spacing: .2px;
}

.tile .mark {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-purple);
    color: #fff;
    font-size: 13px;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

.tile.selected {
    border-color: var(--c-purple);
    background: var(--c-purple-l);
    box-shadow: 0 0 0 4px rgba(106, 69, 204, .32);
    transform: scale(1.03);
}

.tile.selected .mark {
    display: flex;
}

/* 作业三态：饱和描边 + 深色文字，彼此区别明显 */
.tile.s-not_submitted {
    background: #fde7e4;
    border-color: var(--c-danger);
}

.tile.s-not_submitted .nm {
    color: #8f1f17;
}

.tile.s-not_submitted .st {
    color: var(--c-danger);
}

.tile.s-submitted {
    background: #dfeefc;
    border-color: var(--c-info);
}

.tile.s-submitted .nm {
    color: #10558a;
}

.tile.s-submitted .st {
    color: var(--c-info);
}

.tile.s-corrected {
    background: #dcf4e8;
    border-color: var(--c-success);
}

.tile.s-corrected .nm {
    color: #0b5e3f;
}

.tile.s-corrected .st {
    color: var(--c-success);
}

/* 考勤：出勤默认中性，其余高饱和 */
.tile.a-present {
    background: #f4f7fb;
    border-color: #c3cede;
}

.tile.a-present .nm {
    color: var(--c-text);
}

.tile.a-present .st {
    color: var(--c-text-3);
}

/* 事假：蓝 */
.tile.a-personal {
    background: #dfeefc;
    border-color: var(--c-info);
}

.tile.a-personal .nm {
    color: #10558a;
}

.tile.a-personal .st {
    color: var(--c-info);
}

/* 病假：琥珀 */
.tile.a-sick {
    background: #fdf0d6;
    border-color: var(--c-warn);
}

.tile.a-sick .nm {
    color: #8a5403;
}

.tile.a-sick .st {
    color: var(--c-warn);
}

/* 餐费统计：「正在查看的是哪一条历史」那一行、低年级周三没有午饭的提示 */
.meal-view {
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--c-surface-2);
    border: 1px dashed var(--c-border-strong);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--c-text-2);
}

.meal-view b {
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

/* 历史下拉：一条 = 一次统计，名字比较长，字号收一点 */
#mealPick {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.meal-note {
    font-size: 12.5px;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: 10px;
    background: #fdf0d6;
    border: 1px solid var(--c-warn);
    color: #8a5403;
}

.batchbar {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--c-purple-l);
    border: 1.5px solid var(--c-purple);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}

.batchbar.show {
    display: flex;
}

.batchbar .info {
    font-weight: 700;
    color: #4b2d9c;
    font-size: 13.5px;
    margin-right: 4px;
}

/* ============ 作业页布局 ============ */
.hw-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hw-left {
    position: sticky;
    top: 84px;
}

/* 左侧日历整体收小：格子变矮、日期字号调小，把版面让给右侧的大号姓名卡 */
.hw-left .card-head {
    margin-bottom: 10px;
}

.hw-left .card-head h3 {
    font-size: 13.5px;
}

.hw-left .cal-head strong {
    font-size: 13.5px;
}

.hw-left .cal-week {
    margin-bottom: 4px;
}

.hw-left .cal-week span {
    font-size: 10.5px;
}

.hw-left .cal-grid {
    gap: 3px;
}

.hw-left .cal-cell {
    min-height: 34px;
    border-radius: 7px;
    padding: 2px 1px;
}

.hw-left .cal-cell .d {
    font-size: 11.5px;
    line-height: 1.15;
}

.hw-left .cal-cell .dot {
    min-width: 14px;
    height: 12px;
    padding: 0 4px;
    margin-top: 1px;
    border-radius: 7px;
    font-size: 9px;
}

.hw-left .cal-cell .nodot {
    width: 10px;
    height: 2px;
    margin-top: 2px;
}

.hw-left .cal-legend {
    margin-top: 8px;
    font-size: 11px;
}

/* 右侧顶部操作栏只占一行，省下的高度全留给下面的姓名格子 */
.hw-bar {
    padding: 12px 16px;
    margin-bottom: 12px;
}

.hw-bar .field {
    margin: 0;
}

.hw-bar .hw-pick {
    min-width: 190px;
}

.hw-bar .hw-pick select {
    min-height: 36px;
    padding: 6px 28px 6px 11px;
}

/* 作业统计工具栏里的「排序」下拉 */
.hw-bar .hw-sort,
.hw-right .hw-sort {
    min-width: 148px;
    flex: 0 0 auto;
}

.hw-right .hw-sort select {
    min-height: 36px;
    padding: 6px 28px 6px 11px;
}

/* 学生卡片上的学号：不再用长方框，直接排在姓名正上方（字号保持 11px 不变） */
.tile .no {
    display: block;
    min-height: 13px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .3px;
    color: var(--c-text-2);
    pointer-events: none;
}

/* 卡片本身有状态色时，学号跟着变色，和姓名一起读 */
.tile.s-not_submitted .no {
    color: var(--c-danger);
}

.tile.s-submitted .no {
    color: var(--c-info);
}

.tile.s-corrected .no {
    color: var(--c-success);
}

.tile.selected .no {
    color: rgba(255, 255, 255, .92);
}

.hw-none {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 13.5px;
    color: var(--c-text-3);
}

.hw-list {
    max-height: 62vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
}

.hw-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    min-height: var(--tap);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
}

.hw-list-item:hover {
    border-color: var(--c-primary);
    background: var(--c-surface-2);
}

.hw-list-item.active {
    border-color: var(--c-primary);
    background: var(--c-primary-l);
}

.hw-list-date {
    font-size: 11.5px;
    color: var(--c-text-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.hw-list-name {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-list-badge {
    font-size: 11px;
    color: var(--c-primary);
    background: var(--c-primary-l);
    border-radius: 9px;
    padding: 1px 7px;
    flex-shrink: 0;
    font-weight: 600;
}

.hw-list-item.active .hw-list-badge {
    background: var(--c-primary);
    color: #fff;
}

/* ============ 座位表 ============ */
.seat-stage {
    overflow-x: auto;
    padding: 18px 14px 14px;
    background: linear-gradient(180deg, #fbfcfe, #f2f5fa);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}

/* 讲台：字大、有图案，作为整张座位表的视觉锚点 */
.podium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 22px;
    padding: 16px 24px;
    background: linear-gradient(180deg, #f0f5fd, #dfe9f8);
    border: 2px dashed #a9bcd8;
    border-radius: 16px;
    box-shadow: 0 2px 0 #cdd9ea inset;
    color: #2c4a75;
}

.podium .podium-ico {
    font-size: 34px;
    line-height: 1;
}

.podium .podium-txt {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 10px;
    text-indent: 10px;
    line-height: 1;
}

/* 性别图例 */
.seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 4px 0 12px;
    font-size: 12.5px;
    color: var(--c-text-2);
}

.seat-legend .lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.seat-legend .lg i {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid var(--c-border-strong);
    display: inline-block;
}

.seat-legend .lg-male i {
    background: #d9ecfd;
    border-color: #1a75bd;
}

.seat-legend .lg-female i {
    background: #fde4f2;
    border-color: #c2418f;
}

.seat-legend .lg-unknown i {
    background: #f1f3f7;
    border-color: #98a2b3;
}

.seat-legend .lg-empty i {
    background: repeating-linear-gradient(45deg, #f4f7fb, #f4f7fb 4px, #e6ebf3 4px, #e6ebf3 8px);
    border-style: dashed;
}

.seat-grid {
    display: grid;
    gap: 9px;
    min-width: min-content;
    margin: 0 auto;
}

.seat {
    background: var(--c-surface);
    border: 2px solid var(--c-border-strong);
    border-radius: 10px;
    min-height: 68px;
    min-width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    position: relative;
    transition: transform .1s, box-shadow .15s, border-color .15s;
    padding: 5px 3px;
    user-select: none;
}

.seat:hover {
    box-shadow: var(--shadow-m);
    border-color: var(--c-primary);
}

.seat.dragging {
    opacity: .45;
}

/* 姓名大、学号小 */
.seat .sname {
    font-size: 18px;
    font-weight: 800;
    word-break: break-all;
    line-height: 1.25;
    text-align: center;
}

.seat .sno {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c-text-3);
    line-height: 1.2;
    margin-top: 1px;
    letter-spacing: .3px;
}

.seat .pos {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 9px;
    color: var(--c-text-3);
}

.seat .plus {
    font-size: 20px;
    color: var(--c-text-3);
}

.seat .ban {
    font-size: 17px;
    color: var(--c-text-3);
}

.seat.empty {
    background: repeating-linear-gradient(45deg, #f4f7fb, #f4f7fb 6px, #e9eef6 6px, #e9eef6 12px);
    color: var(--c-text-3);
    border-style: dashed;
}

.seat.disabled {
    background: #e7ebf2;
    border-style: dashed;
    opacity: .5;
    cursor: not-allowed;
}

/* ---- 按性别填充：男 / 女 / 未填，三种底色互不相同 ---- */
.seat.g-male {
    background: #d9ecfd;
    border-color: #1a75bd;
}

.seat.g-male .sname {
    color: #0f4c78;
}

.seat.g-female {
    background: #fde4f2;
    border-color: #c2418f;
}

.seat.g-female .sname {
    color: #8a1f5f;
}

.seat.g-unknown {
    background: #f1f3f7;
    border-color: #98a2b3;
}

.seat.g-unknown .sname {
    color: #475467;
}

.seat.drop-target {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(29, 95, 216, .3);
    transform: scale(1.05);
}

.seat.aisle {
    visibility: hidden;
    pointer-events: none;
    min-width: 22px;
    border: none;
}

/* ============ 待安排学生 ============ */
.rest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rest-chip {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 14px 7px;
    border-radius: 12px;
    border: 2px solid var(--c-border-strong);
    background: var(--c-surface);
    cursor: grab;
    font: inherit;
    color: var(--c-text);
    transition: transform .1s, box-shadow .15s, border-color .15s;
}

.rest-chip:hover {
    box-shadow: var(--shadow-m);
    border-color: var(--c-primary);
}

.rest-chip.dragging {
    opacity: .45;
}

.rest-chip.drop-before {
    box-shadow: -4px 0 0 0 var(--c-primary);
}

/* 姓名在上、学号在下：名字大、学号小，性别只靠卡片底色区分 */
.rest-chip .rp-name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.rest-chip .rp-no {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c-text-3);
    line-height: 1.1;
}

.rest-chip.g-male {
    background: #d9ecfd;
    border-color: #1a75bd;
}

.rest-chip.g-male .rp-name {
    color: #0f4c78;
}

.rest-chip.g-female {
    background: #fde4f2;
    border-color: #c2418f;
}

.rest-chip.g-female .rp-name {
    color: #8a1f5f;
}

.rest-chip.g-unknown {
    background: #f1f3f7;
    border-color: #98a2b3;
}

.rest-chip.picked {
    border-color: var(--c-primary-d);
    box-shadow: 0 0 0 3px rgba(29, 95, 216, .25);
    transform: translateY(-2px);
}


/* ============ 课表 ============ */
.tt-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 固定表格布局：列宽平分、每行等高，整张表看起来才整齐 */
table.tt {
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
}

table.tt th:first-child,
table.tt td.period-cell {
    width: 104px;
}

table.tt th {
    font-size: 14px;
    color: var(--c-text-2);
    font-weight: 700;
    padding: 8px 4px;
    height: 38px;
    text-align: center;
    white-space: nowrap;
    background: var(--c-surface-2);
    border-radius: 8px;
}

table.tt th.today-col {
    background: var(--c-primary-l);
    color: var(--c-primary-d);
}

table.tt td {
    height: 68px;
    padding: 0;
    vertical-align: middle;
}

/* 节次列：只留「第 N 节」，上课时间不再显示，字号放大到一眼能看清 */
table.tt td.period-cell {
    background: var(--c-surface-2);
    border-radius: 10px;
    text-align: center;
    padding: 4px 6px;
    font-size: 15px;
    color: var(--c-text-2);
    line-height: 1.35;
}

table.tt td.period-cell strong {
    display: block;
    font-size: 16px;
    color: var(--c-text);
}

.tt-cell {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 6px 5px;
    text-align: center;
    cursor: pointer;
    height: 68px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    overflow: hidden;
}

.tt-cell:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-s);
}

.tt-cell .sub {
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.3;
}

.tt-cell .tch {
    font-size: 12.5px;
    color: var(--c-text-2);
}

.tt-cell.blank {
    border-style: dashed;
    color: var(--c-text-3);
    background: var(--c-surface-2);
}

/* ============ 值日 ============ */
.duty-day {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-border);
}

.duty-day:last-child {
    border-bottom: none;
}

.duty-date {
    width: 92px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--c-text-2);
    line-height: 1.5;
}

.duty-date strong {
    display: block;
    font-size: 14px;
    color: var(--c-text);
}

.duty-body {
    flex: 1;
    min-width: 0;
}

.duty-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.member-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 20px;
    font-size: 12.5px;
}

/* ============ 成绩分析 ============ */
.conc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conc-list li {
    position: relative;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--c-text);
}

.conc-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-primary);
}

.diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.diag-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 13px 15px;
    background: var(--c-surface-2);
}

.diag-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.diag-head strong {
    font-size: 15px;
}

.diag-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--c-text-2);
    margin-bottom: 8px;
}

.diag-metrics b {
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}

.diag-text {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-2);
}

.corr-table td.corr-cell,
.corr-table th {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.corr-table tbody th {
    background: var(--c-surface-2);
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.dist-label {
    width: 88px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--c-text-2);
}

.dist-bar {
    flex: 1;
    height: 12px;
    background: var(--c-border);
    border-radius: 6px;
    overflow: hidden;
}

.dist-bar > i {
    display: block;
    height: 100%;
    background: var(--c-primary);
    border-radius: 6px;
    transition: width .5s ease;
}

.dist-num {
    width: 56px;
    text-align: right;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--c-text-2);
}

/* ============ Toast / Modal / Loading ============ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%) translateY(90px);
    background: #101828;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-l);
    opacity: 0;
    transition: all .32s cubic-bezier(.22, 1, .36, 1);
    z-index: 9000;
    pointer-events: none;
    max-width: min(90vw, 460px);
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .5);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 8000;
}

.modal-mask.open {
    display: flex;
}

.modal {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-l);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    animation: pop .22s cubic-bezier(.22, 1, .36, 1);
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.96) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--c-border);
}

.modal-head h3 {
    flex: 1;
    font-size: 16px;
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.modal-foot {
    padding: 12px 16px 14px;
    border-top: 1px solid var(--c-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.modal-foot:empty {
    display: none;
}

.loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9500;
}

.loading.show {
    display: flex;
}

.spin {
    width: 34px;
    height: 34px;
    border: 3px solid var(--c-border-strong);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: rot .7s linear infinite;
}

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

/* ============ 登录 ============ */
.login-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(150deg, #e8eefa, #dde6f6 60%, #d6e0f3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.login-overlay[hidden] {
    display: none;
}

.login-card {
    background: var(--c-surface);
    border-radius: 20px;
    box-shadow: var(--shadow-l);
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 370px;
    text-align: center;
}

.login-logo {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

.login-card h1 {
    font-size: 19px;
    margin-bottom: 4px;
}

.login-sub {
    color: var(--c-text-2);
    font-size: 13px;
    margin-bottom: 20px;
}

.login-card input {
    text-align: center;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.login-err {
    color: var(--c-danger);
    font-size: 12.5px;
    min-height: 18px;
    margin-top: 8px;
}

.login-local {
    border: none;
    background: none;
    color: var(--c-text-2);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 4px;
}

.login-local:hover {
    color: var(--c-primary);
}

/* ============ 响应式 ============ */
.only-mobile {
    display: none;
}

/* 侧栏默认收起，遮罩在所有屏幕尺寸下都要能用 */
.sidebar-mask {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .4);
    z-index: 55;
    display: none;
}

.sidebar-mask.show {
    display: block;
}

/* —— 平板 / 窄屏 —— */
@media (max-width: 1000px) {
    .hw-layout {
        grid-template-columns: 1fr;
    }

    .hw-left {
        position: static;
    }

    .hw-list {
        max-height: 260px;
    }

    .tile-grid.big {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }

    .tile-grid.big .tile .nm {
        font-size: 24px;
    }
}

/* —— 手机 —— */
@media (max-width: 900px) {
    .only-mobile {
        display: inline-flex;
    }

    .content {
        padding: 14px 12px calc(24px + env(safe-area-inset-bottom));
    }

    .topbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .topbar-title h1 {
        font-size: 17px;
    }

    .topbar-title p {
        font-size: 12px;
    }

    .class-chip {
        max-width: 130px;
        padding: 4px 9px;
        font-size: 11.5px;
    }
}

/* —— 手机 —— */
@media (max-width: 620px) {

    .tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }

    .tile {
        min-height: 70px;
        padding: 10px 4px;
    }

    .tile .nm {
        font-size: 15.5px;
    }

    /* 大号姓名卡在手机上按原作业.html 的断点收一档 */
    .tile-grid.big {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }

    .tile-grid.big .tile {
        padding: 12px 4px;
        min-height: 70px;
    }

    .tile-grid.big .tile .nm {
        font-size: 22px;
    }

    .tile-grid.big .tile .st {
        font-size: 11.5px;
    }

    .stat .num {
        font-size: 23px;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 9px;
    }

    .stat {
        padding: 11px 12px;
    }

    .card {
        padding: 14px 13px;
        border-radius: var(--radius);
    }

    .toolbar .field {
        min-width: 100%;
    }

    .toolbar .btn {
        flex: 1;
    }

    .topbar-actions {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-actions .btn {
        flex: 1;
    }

    /* 弹窗在手机上接近全屏 */
    .modal-mask {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-width: 100% !important;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }

    .modal-foot {
        flex-direction: column-reverse;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .modal-foot .btn {
        width: 100%;
    }

    /* 表格横向滚动时给出可滑动的视觉提示 */
    .table-wrap {
        position: relative;
        background:
            linear-gradient(to right, var(--c-surface) 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, var(--c-surface) 30%, rgba(255, 255, 255, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 32px 100%, 32px 100%;
        background-attachment: local, local;
    }

    table.tb {
        min-width: 420px;
    }

    .duty-day {
        flex-direction: column;
        gap: 6px;
    }

    .duty-date {
        width: auto;
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .cal-cell {
        min-height: 42px;
    }

    .seg {
        width: 100%;
    }

    .seg button {
        flex: 1;
    }

    .hw-list {
        max-height: 220px;
    }

    /* 手机上日历格子保留可点按的高度 */
    .hw-left .cal-cell {
        min-height: 40px;
    }

    .hw-left .cal-cell .d {
        font-size: 12.5px;
    }
}

/* —— 超小屏 —— */
@media (max-width: 420px) {
    .tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }

    .tile .nm {
        font-size: 14.5px;
    }

    .tile-grid.big {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 6px;
    }

    .tile-grid.big .tile {
        padding: 10px 2px;
        min-height: 60px;
        border-width: 2px;
    }

    .tile-grid.big .tile .nm {
        font-size: 18px;
    }

    .tile-grid.big .tile .st {
        font-size: 10.5px;
    }

    .stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .stat .num {
        font-size: 21px;
    }
}

/* 支持触屏的设备：加大点按区域 */
@media (hover: none) {

    .btn,
    .nav-item,
    .seg button {
        min-height: var(--tap);
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* 打印 */
@media print {

    .sidebar,
    .topbar,
    .page-foot,
    .batchbar,
    .toolbar,
    .no-print,
    .topbar-actions {
        display: none !important;
    }

    .main {
        margin-left: 0;
    }

    body {
        background: #fff;
    }

    .card {
        box-shadow: none;
        border-color: #ccc;
        page-break-inside: avoid;
    }

    .hw-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   工作日 / 休息日标记（中国法定节假日 + 调休）
   ------------------------------------------------------------
   全站统一的「休 / 班」小角标，凡是出现日期的地方都用它，
   这样一眼就能分清今天是不是要上学。
   ============================================================ */
.day-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 休息日（法定节假日 / 周末） */
.day-tag.off {
    background: #fde8d3;
    color: #b45309;
    border: 1px solid #f0bd85;
}

/* 调休上班日：虽然是周六周日，但要上学 */
.day-tag.work {
    background: var(--c-primary);
    color: #fff;
}

/* 日历里的休息日：底色比别的日期暖一些；调休日用虚线蓝框 */
.cal-cell.is-weekend:not(.selected) {
    background: #eaedf3;
    border-color: #dee3ec;
}

.cal-cell.is-holiday:not(.selected) {
    background: #fdf1e3;
    border-color: #f0cfa4;
}

.cal-cell.is-holiday:not(.selected) .d {
    color: #b45309;
}

.cal-cell.is-makeup:not(.selected) {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .16) 0 3px, rgba(109, 40, 217, 0) 3px 8px),
        #d6c7fb;
    border: 1.5px dashed #7c3aed;
}

.cal-cell.is-makeup:not(.selected) .d {
    color: #5b21b6;
    font-weight: 800;
}

.cal-cell .cal-tag {
    position: absolute;
    top: 2px;
    right: 3px;
    display: inline-flex;
    line-height: 0;
}

.cal-cell .cal-tag .day-tag {
    height: 13px;
    min-width: 13px;
    padding: 0 3px;
    font-size: 9px;
}

.cal-legend .lg.rest {
    background: #fdf1e3;
    border: 1.5px solid #f0cfa4;
}

.cal-legend .lg.makeup {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .16) 0 3px, rgba(109, 40, 217, 0) 3px 8px),
        #d6c7fb;
    border: 1.5px dashed #7c3aed;
}

/* ============================================================
   日历右下角的「节假日数据来源」一行
   ============================================================ */
.cal-holiday-src {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--c-border);
    font-size: 12px;
    color: var(--c-text-3);
}

.cal-holiday-src button {
    font-size: 12px;
    padding: 3px 10px;
}

/* 设置页的节假日同步卡片 */
.holiday-sync-row td {
    font-size: 13px;
}

.holiday-state {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.holiday-state.synced {
    background: #e7f6ec;
    color: #1a7f37;
}

.holiday-state.builtin {
    background: var(--c-surface-2);
    color: var(--c-text-2);
}

.holiday-state.unpublished,
.holiday-state.none {
    background: #fdf1e3;
    color: #b45309;
}

/* 年级分析：班级 × 学科热力表 */
.heat-tb .heat-cell {
    text-align: center;
    font-weight: 600;
}

/* ============================================================
   顶栏的「当前班级」标签：居中显示
   ------------------------------------------------------------
   用绝对定位让它相对整个顶栏居中，不受左侧标题长短、
   右侧按钮多少的影响；窄屏放不下时退回跟随文档流，避免压住标题。
   ============================================================ */
.class-chip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@media (max-width: 1000px) {
    .class-chip {
        position: static;
        transform: none;
        margin-left: auto;
    }
}

/* ============================================================
   课表「本周统计」：每个学科一块，学科名与节数待在同一块里，
   不会和隔壁学科的进度条、数字挤在一起造成误读。
   ============================================================ */
.week-stat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.week-stat-item {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 10px 12px;
}

.week-stat-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.week-stat-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-stat-count {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.week-stat-bar {
    height: 9px;
    border-radius: 5px;
    background: var(--c-border);
    overflow: hidden;
}

.week-stat-bar > i {
    display: block;
    height: 100%;
    border-radius: 5px;
}

/* ============================================================
   值日排班：休息日与调休的视觉区分
   ============================================================ */
.duty-day.is-rest {
    background: #f6f8fb;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.duty-day.is-holiday {
    background: #fef7ee;
}

.duty-day.is-makeup {
    background: #f3edff;
}

.duty-date .day-tag {
    margin-left: 4px;
    vertical-align: 1px;
}

/* 组内分工：人名 + 任务 */
.duty-task-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.duty-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.5;
}

.duty-task-chip .who {
    font-weight: 700;
    color: var(--c-text);
}

.duty-task-chip .what {
    color: var(--c-primary-d);
    font-weight: 600;
}

.duty-task-chip .what.none {
    color: var(--c-text-3);
    font-weight: 500;
}

/* ============================================================
   校历（学期 / 周次 / 寒暑假）
   ------------------------------------------------------------
   作业统计与校历页共用同一份日历：
     月视图 —— 7 列日期 + 左侧一列「第几周」
     年视图 —— 12 个小月历，假期与周末靠底色区分
   ============================================================ */
.sc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sc-head strong {
    font-size: 15px;
    min-width: 96px;
    text-align: center;
}

.sc-head .spacer {
    flex: 1;
}

/* 年 / 月 / 日 三个下拉 —— 校历里的年月日都要能直接选 */
.sc-picks {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-picks label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: var(--c-text-2);
}

.sc-picks select {
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text);
}

.sc-view {
    margin-left: 4px;
}

.cal-week.with-wk,
.sc-grid {
    display: grid;
    grid-template-columns: 58px repeat(7, 1fr);
    gap: 4px;
}

.cal-week.noweek,
.sc-grid.noweek {
    grid-template-columns: repeat(7, 1fr);
}

.sc-grid {
    margin-bottom: 2px;
}

/* 每行最左边的「第几周」 */
.sc-wk {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-text-3);
    min-height: 46px;
    padding: 2px;
    text-align: center;
    line-height: 1.25;
}

/* 作业页左栏的日历是「看一眼就点」的辅助区，比校历页那一套再收小一号 */
.hw-left .sc-wk {
    min-height: 32px;
    font-size: 11px;
    padding: 0 2px;
}

.hw-left .sc-grid .cal-cell {
    min-height: 32px;
}

/* 学期里的上课日：白底、描边清楚；假期：淡青底 */
.cal-cell.in-term:not(.selected):not(.is-holiday):not(.is-weekend):not(.is-makeup) {
    background: #fff;
    border-color: #dbe4f0;
}

.cal-cell.is-vacation:not(.selected) {
    background: #e7f6f3;
    border-color: #a7ded3;
}

.cal-cell.is-vacation:not(.selected) .d {
    color: #0f766e;
}

/* 「假」角标：寒暑假 / 春假 / 秋假 */
.day-tag.vac {
    background: #0f766e;
    color: #fff;
    border: 1px solid #0b5d57;
}

.sc-legend .lg.sc-term {
    background: #fff;
    border: 1.5px solid #dbe4f0;
}

.sc-legend .lg.sc-vac {
    background: #e7f6f3;
    border: 1.5px solid #a7ded3;
}

/* ---------- 年视图 ---------- */
.sc-year {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 12px;
}

.sc-month {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 8px;
}

.sc-m-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 5px;
}

.sc-m-head b {
    font-size: 13px;
}

.sc-m-head span {
    font-size: 11px;
    color: var(--c-text-3);
}

.sc-m-week,
.sc-m-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sc-m-week span {
    text-align: center;
    font-size: 9.5px;
    color: var(--c-text-3);
    font-weight: 600;
}

.sc-mn {
    position: relative;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 5px;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--c-text-2);
    cursor: pointer;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.sc-mn.blank {
    background: transparent;
    pointer-events: none;
}

.sc-mn.st-class {
    background: #fff;
    border-color: #e2e8f2;
}

.sc-mn.st-vacation {
    background: #dff3ef;
    border-color: #a7ded3;
    color: #0f766e;
}

.sc-mn.st-weekend,
.sc-mn.st-holiday {
    background: #fbeadb;
    border-color: #f0cfa4;
    color: #b45309;
}

/* 调休上课：与月视图 / 学期视图同一套紫底斜纹（年视图格子小，底纹稍密） */
.sc-mn.st-makeup {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .18) 0 2px, rgba(109, 40, 217, 0) 2px 6px),
        #d6c7fb;
    border: 1px dashed #7c3aed;
    color: #5b21b6;
    font-weight: 800;
}

.sc-mn.st-off-term {
    background: var(--c-surface-2);
    border-color: #e6eaf1;
    color: var(--c-text-3);
}

.sc-mn.has-hw {
    font-weight: 800;
    color: var(--c-primary-d);
    box-shadow: inset 0 -3px 0 var(--c-primary);
}

.sc-mn.today {
    box-shadow: inset 0 0 0 2px var(--c-warn);
}

.sc-mn.selected {
    background: var(--c-primary);
    border-color: var(--c-primary-d);
    color: #fff;
}

/* ---------- 当日详情 + 学期一览 ---------- */
.sc-detail-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 14px;
    align-items: start;
}

/* ---------- 校历设置弹窗 ---------- */
.sc-tip {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.7;
    margin-bottom: 12px;
}

.sc-year-block {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--c-surface-2);
}

.sc-yb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sc-yb-head b {
    font-size: 14.5px;
}

.sc-yb-head .spacer {
    flex: 1;
}

.sc-yb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.sc-f input[type="date"] {
    width: 100%;
}

.sc-f-hint {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--c-text-3);
}

.sc-add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    font-size: 13px;
    color: var(--c-text-2);
}

@media (max-width: 900px) {
    .cal-week.with-wk,
    .sc-grid {
        grid-template-columns: 42px repeat(7, 1fr);
        gap: 3px;
    }

    .sc-wk {
        font-size: 10px;
        min-height: 40px;
    }
}

@media (max-width: 560px) {
    .sc-head strong {
        min-width: 0;
    }

    .sc-year {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
    }

    .sc-mn {
        min-height: 20px;
        font-size: 10px;
    }
}

/* ============================================================
   校历图例：五种状态用「底色 + 底纹 + 角标」三重区分
   ------------------------------------------------------------
   只靠颜色深浅容易看混（尤其投到教室大屏上），所以每种状态
   除了颜色不一样，底纹和形状也不一样，图例里直接带上角标文字。
   ============================================================ */
.sc-legend {
    gap: 16px;
    row-gap: 8px;
    font-size: 12.5px;
}

.sc-legend .lg {
    width: 22px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    flex-shrink: 0;
}

.sc-legend .lg b {
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
}

/* ① 学期上课日：白底 + 实线灰蓝描边，没有角标 */
.sc-legend .lg.sc-term {
    background: #fff;
    border: 2px solid #8ea0b8;
}

/* ② 寒暑假 / 春秋假：青绿底 + 斜纹，角标「休」 */
.sc-legend .lg.sc-vac {
    background:
        repeating-linear-gradient(45deg, rgba(15, 118, 110, .30) 0 3px, rgba(15, 118, 110, 0) 3px 6px),
        #dff3ef;
    border: 2px solid #0f766e;
    color: #0b5d57;
}

/* ③ 周末 / 法定节假日：暖橙底 + 圆点，角标「休」 */
.sc-legend .lg.sc-rest {
    background:
        radial-gradient(rgba(180, 83, 9, .40) 1px, transparent 1.1px) 0 0 / 5px 5px,
        #fde8d3;
    border: 2px solid #e08b3c;
    color: #9a4a06;
}

/* ④ 调休上课：紫底斜纹 + 虚线紫边，角标「班」（与日格同一套值） */
.sc-legend .lg.sc-makeup {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .16) 0 3px, rgba(109, 40, 217, 0) 3px 8px),
        #d6c7fb;
    border: 2px dashed #7c3aed;
    color: #5b21b6;
}

/* ⑤ 今天：深蓝圆形 —— 形状本身就和其他四个不一样 */
.sc-legend .lg.sc-today {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--c-primary);
}

.sc-legend .lg.has-hw,
.sc-legend .lg.no-hw {
    width: 18px;
    height: 18px;
}

/* 日格跟着图例走：假期整段斜纹（不管是不是工作日都放假） */
.cal-cell.is-vacation:not(.selected) {
    background:
        repeating-linear-gradient(45deg, rgba(15, 118, 110, .12) 0 4px, rgba(15, 118, 110, 0) 4px 9px),
        #dff3ef;
    border-color: #7ecfc2;
}

/* 周末：冷静的灰蓝 + 圆点 */
.cal-cell.is-weekend:not(.selected) {
    background:
        radial-gradient(rgba(100, 116, 139, .26) 1px, transparent 1.1px) 0 0 / 6px 6px,
        #eceff5;
    border-color: #cbd5e1;
}

/* 法定节假日：暖橙 + 圆点 */
.cal-cell.is-holiday:not(.selected) {
    background:
        radial-gradient(rgba(180, 83, 9, .26) 1px, transparent 1.1px) 0 0 / 6px 6px,
        #fdf1e3;
    border-color: #e8b878;
}

/* 假期里的「休」角标（比法定节假日的更深一点，两者仍能分开） */
.cal-cell .cal-tag .day-tag.vac {
    background: #0f766e;
    color: #fff;
    border-color: #0b5d57;
}

/* ============================================================
   学期视图：整学期摊成一张纸一样的表格
     月份 | 周次 | 周一 … 周日
   ============================================================ */
.sc-term-head {
    margin-bottom: 10px;
}

.sc-term-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-term-title b {
    font-size: 16px;
}

.sc-term-badge {
    background: var(--c-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 7px;
}

.sc-term-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--c-text-2);
}

.sc-term-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
}

.sc-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 12.5px;
    background: #fff;
}

.sc-table th,
.sc-table td {
    border: 1px solid #dfe5ee;
    text-align: center;
    padding: 0;
    height: 30px;
}

.sc-table thead th {
    background: #eef2f8;
    font-weight: 700;
    color: var(--c-text-2);
    height: 34px;
    font-size: 12.5px;
}

.sc-th-month { width: 64px; }
.sc-th-wk { width: 46px; }

.sc-th-day.wk-end {
    color: #b45309;
}

.sc-td-month {
    font-weight: 800;
    font-size: 13px;
    color: #3d4655;
    width: 64px;
}

.sc-td-wk {
    background: #f7f9fc;
    font-weight: 700;
    color: var(--c-text-2);
    width: 46px;
    font-size: 13px;
}

.sc-td-day {
    position: relative;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}

.sc-td-day .dn {
    font-weight: 600;
}

.sc-td-day .cal-tag {
    position: static;
    margin-left: 2px;
}

.sc-td-day .cal-tag .day-tag {
    height: 12px;
    min-width: 12px;
    padding: 0 2px;
    font-size: 8.5px;
}

.sc-td-day[data-date] {
    cursor: pointer;
}

.sc-td-day[data-date]:hover {
    background: var(--c-primary-l);
}

.sc-td-day.st-class { background: #fff; color: var(--c-text); }
.sc-td-day.wk-end { background: #f4f6fa; color: #96a0b2; }

.sc-td-day.st-weekend {
    background: #eceff5;
    color: #6b7688;
}

.sc-td-day.st-vacation {
    background:
        repeating-linear-gradient(45deg, rgba(15, 118, 110, .14) 0 4px, rgba(15, 118, 110, 0) 4px 9px),
        #dff3ef;
    color: #0b5d57;
    font-weight: 700;
}

.sc-td-day.st-holiday {
    background: #fde8d3;
    color: #9a4a06;
    font-weight: 700;
}

.sc-td-day.st-makeup {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .16) 0 3px, rgba(109, 40, 217, 0) 3px 8px),
        #d6c7fb;
    color: #5b21b6;
    font-weight: 800;
    /* 表格单元格用 outline 画虚线边：不占布局，也不会和「今天 / 选中」的 box-shadow 打架 */
    outline: 1.5px dashed #7c3aed;
    outline-offset: -2px;
}

.sc-td-day.st-off-term,
.sc-td-day.out {
    background: #f6f7fa;
    color: #c3cad6;
}

.sc-td-day.is-today {
    box-shadow: inset 0 0 0 2px var(--c-warn);
}

.sc-td-day.is-sel {
    box-shadow: inset 0 0 0 2px var(--c-primary);
}

/* 学期视图表头上「哪个学期」的下拉 */
.sc-term-pick {
    /* 学期名很长（学年 + 学期 + 起止日期），要允许它收缩，
       否则会把 « » 与「按月 / 按学期 / 按年」挤到下一行去 */
    flex: 1 1 220px;
    min-width: 170px;
    max-width: 520px;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--c-text);
}

/* 校历设置弹窗：暑假放假后面换行，第二行放秋假 / 春假 */
.sc-yb-grid-2 {
    margin-top: 10px;
}

/* ============================================================
   年级 / 入学年份对照（数据与设置）
   ============================================================ */
.gm-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.gm-cell {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 10px 10px 11px;
    text-align: center;
}

.gm-grade {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-2);
    margin-bottom: 6px;
}

.gm-cell select {
    width: 100%;
}

/* ============================================================
   课表页：按年级对照自动对应班级时的说明条
   ============================================================ */
.tt-map-hint {
    margin-top: 10px;
    padding: 9px 13px;
    font-size: 12.5px;
    line-height: 1.7;
    background: #f0f6ff;
    border: 1px solid #cfe0fb;
    border-radius: 10px;
    color: var(--c-text-2);
}

@media (max-width: 640px) {
    .sc-legend {
        gap: 10px;
    }

    .sc-term-pick {
        min-width: 180px;
        flex: 1;
    }

    .sc-term-title b {
        font-size: 14.5px;
    }
}

/* ============================================================
   校历日格配色（权威版 · 放在文件最后，覆盖前面的旧配色）
   ------------------------------------------------------------
   五种状态，底色 + 底纹 + 角标三重区分，光靠颜色深浅在教室
   大屏上根本分不出来：

     学期上课日       白底 + 深灰实线边
     寒暑假 / 春秋假   青绿底 + 45° 斜纹 + 「休」
     周末 / 法定节假日  暖橙底 + 圆点纹 + 「休」
     调休上课         紫底 + 紫色虚线边 + 「班」（原来用蓝色，
                      和「有作业」的蓝底、「今天」的蓝撞在一起）
     今天           橙色圆框圈出

   周末与法定节假日合并成同一种样子 —— 对老师来说都是「今天
   不用上学」，分开反而要多记一套色；节日的名字依旧在悬浮提示
   与下方「这天」卡片里写清楚。
   ============================================================ */

/* ① 学期上课日 */
.cal-cell.in-term:not(.selected):not(.is-holiday):not(.is-weekend):not(.is-makeup) {
    background: #fff;
    border-color: #b6c4d8;
}

.cal-cell.in-term:not(.selected) .d {
    color: #33415c;
}

/* ② 寒暑假 / 春秋假：整段斜纹，不管那天是不是工作日都放假 */
.cal-cell.is-vacation:not(.selected) {
    background:
        repeating-linear-gradient(45deg, rgba(13, 148, 136, .22) 0 4px, rgba(13, 148, 136, 0) 4px 9px),
        #d2f0e9;
    border-color: #3aa896;
}

.cal-cell.is-vacation:not(.selected) .d {
    color: #0b5d57;
    font-weight: 800;
}

.day-tag.vac {
    background: #0f766e;
    color: #fff;
    border: 1px solid #0b5d57;
}

/* ③ 周末 / 法定节假日：暖橙底 + 圆点纹 */
.cal-cell.is-weekend:not(.selected),
.cal-cell.is-holiday:not(.selected) {
    background:
        radial-gradient(rgba(194, 65, 12, .32) 1px, transparent 1.1px) 0 0 / 6px 6px,
        #ffe2c8;
    border-color: #eaa25e;
}

.cal-cell.is-weekend:not(.selected) .d,
.cal-cell.is-holiday:not(.selected) .d {
    color: #9a4a06;
}

/*
 * ④ 调休上课：中等饱和的紫底 + 45° 紫色斜纹 + 紫虚线边 +「班」角标。
 *
 * 这一档颜色调过两次，两头都踩过坑：
 *   · 一开始是淡紫底 + 虚线边（#ebe4fc）—— 在学期表 / 年视图的浅色格子里
 *     跟白底几乎分不出来；
 *   · 后来改成饱和实心紫（#6d28d9）—— 月视图里又太重，整块压过去很刺眼。
 * 现在取中间档 #d6c7fb + 紫色斜纹，三种视图（按月 / 按学期 / 按年）
 * 与图例共用同一组值，深浅一致、又能一眼认出来。
 */
.cal-cell.is-makeup:not(.selected) {
    background:
        repeating-linear-gradient(45deg, rgba(109, 40, 217, .16) 0 3px, rgba(109, 40, 217, 0) 3px 8px),
        #d6c7fb;
    border: 1.5px dashed #7c3aed;
}

.cal-cell.is-makeup:not(.selected) .d {
    color: #5b21b6;
    font-weight: 800;
}

/* 角标：白底紫字，在紫底格子上最清楚 */
.day-tag.work {
    background: #fff;
    color: #5b21b6;
    border: 1px solid #8b5cf6;
    font-weight: 900;
}

/* ⑤ 今天：橙色圆框（和图例里的样例完全一致） */
.cal-cell:not(.selected).today {
    box-shadow: inset 0 0 0 2px var(--c-warn);
}

.cal-cell:not(.selected).today .d {
    color: #b45309;
    font-weight: 800;
}

/* 作业页左栏的日历不显示作业标记时，别把 today 的圈压掉 */
.hw-left .cal-cell.today .d {
    font-weight: 800;
}

/* ============================================================
   校历图例（权威版）
   ------------------------------------------------------------
   每一项 = 一个「真的日格」样例 + 名称 + 一句说明。
   样例用的就是日历里那套 class，所见即所得。
   ============================================================ */
.sc-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
    gap: 10px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    margin-top: 12px;
    font-size: 12.5px;
}

.sc-legend .sc-lg {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sc-legend .sc-lg-demo {
    flex: 0 0 40px;
    width: 40px;
    min-height: 40px;
    padding: 2px 1px;
    gap: 0;
    border-radius: 8px;
    cursor: default;
    pointer-events: none;
}

.sc-legend .sc-lg-demo .d {
    font-size: 13.5px;
    line-height: 1.05;
}

/* 图例样例和日历一样：数字在上、「休 / 班」角标在右下角，不遮挡 */
.sc-legend .sc-lg-demo {
    justify-content: flex-start;
}

.sc-legend .sc-lg-demo .cal-tag {
    top: auto;
    bottom: 1px;
    right: 1px;
}

.sc-legend .sc-lg-demo .cal-tag .day-tag {
    height: 11px;
    min-width: 11px;
    padding: 0 2px;
    font-size: 8.5px;
}

.sc-legend .sc-lg-demo .dot {
    min-width: 15px;
    height: 13px;
    padding: 0 4px;
    margin-top: 1px;
    font-size: 9.5px;
}

.sc-legend .sc-lg-demo .nodot {
    width: 12px;
    height: 2px;
    margin-top: 2px;
}

.sc-legend .sc-lg-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.sc-legend .sc-lg-txt b {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.25;
}

.sc-legend .sc-lg-txt i {
    font-style: normal;
    font-size: 11px;
    color: var(--c-text-3);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .sc-legend {
        grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    }

    .sc-legend .sc-lg-txt i {
        display: none;
    }
}

/* ============================================================
   作业统计左栏的日历
   ------------------------------------------------------------
   这一栏是「看一眼、点一下」用的：
     · 不要周次列（那是校历页才需要的信息）
     · 不要整块图例与节假日来源行（占地方）
     · 日期数字放大、格子加高 —— 手指点得准
   「今天」按钮挪到卡片标题后面（标题行里），日历上不再重复一个。
   ============================================================ */
.hw-left .sc-lg-demo,
.hw-left .sc-legend {
    display: none;
}

.hw-left .card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hw-left .card-head h3 {
    flex: 0 0 auto;
}

.hw-left .card-head .hw-today {
    margin-left: auto;
    padding: 3px 10px;
    font-size: 12px;
    min-height: 26px;
}

/* 导航要在一行里放下 « ‹ 2026 年 9 月 › » —— 这些按钮跟日期格子不一样，
   收小一号没关系（真正要点准的是下面的日期） */
.hw-left .sc-head {
    justify-content: space-between;
    gap: 3px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

.hw-left .sc-head strong {
    font-size: 14px;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    text-align: center;
}

.hw-left .sc-head .icon-btn {
    width: 26px;
    min-width: 26px;
    height: 26px;
    font-size: 13px;
}

.hw-left .cal-week span {
    font-size: 11px;
    font-weight: 600;
}

/*
 * 用户要的是「日期放大、方便点」。
 *
 * 之前左栏 250px：每格只有 26px 宽，却把高度写到 44px —— 又窄又高的长条，
 * 数字挤在里头既不好看也不好点（面积 26×44，但横向只有 26px，手指很容易点偏）。
 * 这里把左栏放到 288px，7 列每格约 35px 见方：
 *   · 面积比原来更大（35×35 > 26×44），横向也够宽，点得准；
 *   · 右侧姓名卡从一行 8 个变成 7 个，但**单卡反而更宽**
 *     （约 146px，原来 124px）—— 姓名更大，站教室大屏前更好认。
 *
 * 只在宽屏生效：窄屏那份「折叠成单列」的断点写在前面，不能在这儿被盖掉。
 */
@media (min-width: 901px) {
    .hw-layout {
        grid-template-columns: 288px minmax(0, 1fr);
    }
}

.hw-left {
    padding: 14px 12px;
}

/* 格子做成正方形：宽度由 7 等分决定，高度跟着宽度走 */
.hw-left .sc-grid .cal-cell {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    /* 日期从顶部开始排，把下半格留给「休 / 班」角标 —— 两者不再叠在一起 */
    justify-content: flex-start;
}

.hw-left .sc-grid .cal-cell .d {
    font-size: 15px;
    line-height: 1.05;
}

/*
 * 角标挪到**右下角**（原来在右上角，正好压住日期数字）。
 * 格子只有 35px 见方，数字在上面、角标在下面，各占一半，互不遮挡。
 */
.hw-left .sc-grid .cal-cell .cal-tag {
    top: auto;
    bottom: 1px;
    right: 1px;
}

.hw-left .sc-grid .cal-cell .cal-tag .day-tag {
    height: 12px;
    min-width: 12px;
    padding: 0 2px;
    font-size: 9px;
}

/*
 * 作业数量角标（蓝色小圆点）在这一栏不显示：
 * 底色已经区分了「有作业（蓝）/ 无作业（灰）」，35px 的格子再塞一个数字
 * 只会把日期挤掉。要看几项作业，点一下日期右侧就列出来了。
 */
.hw-left .sc-grid .cal-cell .dot,
.hw-left .sc-grid .cal-cell .nodot {
    display: none;
}

/* 窄屏（手机 / 平板）：左栏不再是固定宽度，正方形会变得很大，退回固定高度 */
@media (max-width: 900px) {
    .hw-left .sc-grid .cal-cell {
        aspect-ratio: auto;
        min-height: 40px;
    }

    .hw-left .sc-grid .cal-cell .d {
        font-size: 14px;
    }
}

/* 屏幕很窄时（校历页的月视图也一样）角标一律靠右下，避免压住日期 */
@media (max-width: 560px) {
    .cal-cell .cal-tag {
        top: auto;
        bottom: 1px;
        right: 1px;
    }
}

/* ============================================================
   学生信息 · 「🏫 班级」卡片
   ------------------------------------------------------------
   班级是这一页的第一等公民（先建班、再导学生），所以给它
   一张独立的卡片：上面一行新建，下面把班级排成一张张卡片。
   ============================================================ */
.cls-new {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--c-border);
}

.cls-new .field {
    margin: 0;
}

.cls-new-hint {
    font-size: 12.5px;
    color: var(--c-text-3);
    padding-bottom: 9px;
}

.cls-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    gap: 10px;
}

.cls-empty {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    background: var(--c-surface-2);
    font-size: 13px;
    line-height: 1.8;
    color: var(--c-text-3);
}

.cls-card {
    border: 1.5px solid var(--c-border);
    border-radius: 11px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.cls-card:hover {
    border-color: #a9bfe4;
    box-shadow: 0 2px 10px rgba(29, 95, 216, .10);
}

.cls-card.on {
    border-color: var(--c-primary);
    background: var(--c-primary-l);
}

.cls-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cls-card-top b {
    font-size: 14px;
    color: var(--c-text);
}

.cls-n {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-primary-d);
    white-space: nowrap;
}

.cls-n.zero {
    color: var(--c-text-3);
    font-weight: 500;
}

.cls-card-bot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    min-height: 26px;
}

.cls-tag {
    font-size: 11px;
    line-height: 1.6;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--c-surface-2);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
}

.cls-tag.src {
    background: #eef4ff;
    border-color: #cfe0fb;
    color: var(--c-primary-d);
}

.cls-lock {
    font-size: 11.5px;
    color: var(--c-text-3);
    margin-left: auto;
}

.cls-del {
    margin-left: auto;
    padding: 2px 10px;
    font-size: 12px;
    min-height: 24px;
}

/* ============================================================
   数据与设置 · 分模块备份 / 科目 / 班级名单
   ============================================================ */

/* 勾选模块的列表：一行一个模块，右边小字写它对应哪几张表 */
.mod-pick {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow: auto;
}

.mod-pick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--c-border);
    border-radius: 9px;
    background: var(--c-surface-2);
    cursor: pointer;
}

.mod-pick-row:hover {
    border-color: #a9bfe4;
    background: #fff;
}

.mod-pick-row b {
    font-size: 13px;
    font-weight: 600;
    min-width: 96px;
}

.mod-pick-row span {
    font-size: 11.5px;
    color: var(--c-text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 科目小标签 */
.subj-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.subj-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4ff;
    border: 1px solid #cfe0fb;
    color: var(--c-primary-d);
    font-size: 12.5px;
    font-weight: 600;
}

.subj-del {
    border: none;
    background: transparent;
    color: var(--c-text-3);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.subj-del:hover {
    color: var(--c-danger);
}

/* 年级查不出来的班（入学年份不在对照范围）：整行淡掉，提醒老师 */
.cls-unknown td {
    color: var(--c-text-3);
}

.cls-unknown td b {
    color: var(--c-text-2);
    font-weight: 600;
}

/* 导入预览里「这批学生会被跳过」的说明 */
.imp-cls-row .skip {
    color: var(--c-text-3);
}

/* ============================================================
   学生信息 · 「📥 导入学生」弹窗
   ============================================================ */
.imp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 18px;
    border: 2px dashed #c3d3ea;
    border-radius: 12px;
    background: var(--c-surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.imp-drop:hover,
.imp-drop.over {
    border-color: var(--c-primary);
    background: var(--c-primary-l);
}

.imp-drop .big {
    font-size: 30px;
    line-height: 1;
}

.imp-drop b {
    font-size: 14px;
    color: var(--c-text);
}

.imp-drop i {
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-3);
    max-width: 520px;
}

.imp-preview {
    margin-top: 14px;
}

.imp-idle {
    padding: 14px;
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    background: var(--c-surface-2);
    font-size: 13px;
    color: var(--c-text-3);
    text-align: center;
}

.imp-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.imp-cls {
    margin-top: 12px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    overflow: hidden;
}

.imp-cls-head {
    padding: 8px 12px;
    background: var(--c-surface-2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-border);
}

.imp-cls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--c-border);
}

.imp-cls-row:last-child {
    border-bottom: none;
}

.imp-cls-row b {
    min-width: 108px;
}

.imp-cls-row .n {
    font-size: 12px;
    color: var(--c-text-3);
    min-width: 48px;
}

.imp-cls-row .ok {
    color: #0f766e;
    font-size: 12.5px;
}

.imp-cls-row .new {
    color: #b45309;
    font-size: 12.5px;
}

@media (max-width: 640px) {
    .cls-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .cls-new-hint {
        padding-bottom: 0;
    }
}

/* ============================================================
   作息时间表（第 9 个功能）
   ------------------------------------------------------------
   左边的表是「一节一行」的编辑表，上午 / 下午各有一个小节标题行；
   右边「今天的时间轴」按当前时间把每节标成 已结束 / 正在上 / 还没开始。
   ============================================================ */

/*
 * 作息编辑表：固定列宽，别让「名称」把整张表撑得左松右紧。
 * 名称列留给剩余宽度，时间输入框各自站好自己的列。
 */
.sc-edit-table {
    table-layout: fixed;
    width: 100%;
}

/* 列序：1 节次 / 2 类型 / 3 名称 / 4 上午下午 / 5 开始 / 6 结束 / 7 时长 / 8 操作 */
.sc-edit-table th:nth-child(1),
.sc-edit-table td:nth-child(1) {
    width: 56px;
}

.sc-edit-table th:nth-child(2),
.sc-edit-table td:nth-child(2) {
    width: 126px;
}

.sc-edit-table th:nth-child(4),
.sc-edit-table td:nth-child(4) {
    width: 92px;
}

.sc-edit-table th:nth-child(5),
.sc-edit-table td:nth-child(5),
.sc-edit-table th:nth-child(6),
.sc-edit-table td:nth-child(6) {
    width: 116px;
}

.sc-edit-table th:nth-child(7),
.sc-edit-table td:nth-child(7) {
    width: 74px;
}

.sc-edit-table th:nth-child(8),
.sc-edit-table td:nth-child(8) {
    width: 132px;
    white-space: nowrap;
}

.sc-edit-table input,
.sc-edit-table select {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
}

.sc-edit-table .btn + .btn {
    margin-left: 4px;
}

/* 上移 / 下移：小方钮，不抢「删除」的视觉重量 */
.btn-icon {
    padding: 4px 8px;
    min-width: 30px;
    font-size: 13px;
    line-height: 1.2;
}

.btn-icon[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* 非上课的时段（大课间 / 眼保健操 / 午休）：浅蓝底，跟上课的行分开。
   作息页的编辑表和「数据与设置」里的只读一览都用 .tb，一处定义两处生效 */
.tb tr.is-act td {
    background: #eef6fd;
}

.sc-edit-table tr.is-act td:nth-child(1) {
    color: var(--c-text-3);
}

/* 按钮行里那个「加什么类型」的下拉 */
.sc-kind-new {
    padding: 4px 8px;
    font-size: 13px;
    max-width: 150px;
}

/* 模板选择：选中整块要高亮，不然看不出点了哪个 */
.sc-tpl {
    transition: background .12s, border-color .12s;
}

.sc-tpl:hover {
    background: var(--c-surface-2);
}

.sc-tpl:has(input:checked) {
    border-color: var(--c-primary) !important;
    background: var(--c-primary-l);
}

/* 表里的「上午 / 下午」小节行 */
.sc-part-row td {
    background: var(--c-surface-2);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-2);
    letter-spacing: .4px;
}

.tl-part {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-3);
    margin: 12px 0 6px;
}

.tl-part:first-child {
    margin-top: 0;
}

.tl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
}

.tl-row + .tl-row {
    margin-top: 8px;
}

.tl-row .tl-time {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--c-text-2);
    min-width: 104px;
}

.tl-row .tl-name {
    font-weight: 600;
}

.tl-row .tl-tip {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--c-text-3);
    white-space: nowrap;
}

/* 大课间 / 眼保健操 / 午休：蓝灰底 + 左侧色条，一眼看出这不是上课 */
.tl-row.is-act {
    background: #eef6fd;
    box-shadow: inset 3px 0 0 var(--c-info);
}

.tl-row.is-act .tl-name {
    color: #12557f;
}

.tl-row.is-act.is-now {
    background: var(--c-info-l);
    box-shadow: inset 0 0 0 1.5px var(--c-info);
}

/* 已经上完的：压淡，一眼看出进度 */
.tl-row.is-done {
    opacity: .6;
}

/* 正在上的：绿底 + 绿边，和「出勤」一个色系 */
.tl-row.is-now {
    background: var(--c-success-l);
    box-shadow: inset 0 0 0 1.5px var(--c-success);
}

.tl-row.is-now .tl-time,
.tl-row.is-now .tl-name {
    color: #0b5e3f;
}