* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Microsoft YaHei", "SimSun", sans-serif;
    background: #f2f4f7;
    color: #222;
	font-size: 14px;
    user-select: none;
}

.topbar {
    background: #1f4e8c;
    color: #fff;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar h1 { font-size: 18px; margin: 0; }
.topbar a { color: #cfe0ff; text-decoration: none; margin-left: 16px; font-size: 14px; }
.topbar-brand a { margin-left: 0px;}
.topbar a:hover { text-decoration: underline; }
.topbar a.active { color: #fff; font-weight: bold; }
.topbar-toggle { display: none; background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; }

.topbar-brand { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.topbar-brand-link { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; margin-left: 0; }
.topbar-brand-link:hover { text-decoration: none; opacity: .9; }
.topbar-brand-logo { width: 28px; height: 28px; border-radius: 26px; object-fit: contain; background: #fff; }
.topbar-brand-text { font-weight: 900; font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
.topbar-collapse-btn { display: none; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 15px; width: 22px; height: 22px; line-height: 22px; border-radius: 4px; cursor: pointer; padding: 0; flex: none; }
.topbar-collapse-btn:hover { background: rgba(255,255,255,.25); }
.topbar-welcome { display: none; font-size: 12px; color: #cfe0ff; }

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; }
    .topbar-toggle { display: block; }
    .topbar #topbar-nav { display: none; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin-top: 10px; }
    .topbar #topbar-nav.topbar-nav-open { display: flex; }
    .topbar #topbar-nav a { margin-left: 0; }
}
.topbar-nav-home { display: none; }
@media (max-width: 720px) {
    .topbar-nav-home { display: inline; }
}

/* ---- PC 端管理/教师页：顶部横条改为左侧竖排菜单（.topbar-app 专属，学生端/登录页仍用原横条 .topbar，不受影响）；仅屏幕显示，打印时不占位 ---- */
@media screen and (min-width: 721px) {
    .topbar-app {
        position: fixed; left: 0; top: 0; bottom: 0; width: 180px; z-index: 40;
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 18px 14px; overflow-y: auto; box-sizing: border-box;
    }
    .topbar-app { transition: width .15s ease; }
    .topbar-app .topbar-brand { display: flex; margin-bottom: 4px; }
    .topbar-app .topbar-collapse-btn { display: block; }
    .topbar-app .topbar-welcome { display: block; order: 1; margin-bottom: 14px; padding-left: 2px; }
    .topbar-app h1 { order: 2; font-size: 14px; line-height: 1.4; margin: 0 0 14px; opacity: .85; }
    .topbar-app .topbar-toggle { display: none; }
    .topbar-app #topbar-nav {
        order: 3; display: flex !important; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; margin-top: 0;
    }
    .topbar-app #topbar-nav a {
        margin-left: 0; padding: 9px 12px; border-radius: 6px; color: #cfe0ff; white-space: nowrap; overflow: hidden;
    }
    .topbar-app #topbar-nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
    .topbar-app #topbar-nav a.active { background: #fff; color: #1f4e8c; font-weight: bold; }

    /* 用普通兄弟选择器（非紧邻），因为 topbar.php 在 .topbar-app 后面还输出了一段 <script> */
    .topbar-app ~ .page-body { margin-left: 200px; transition: margin-left .15s ease; }

    /* 收起状态：仅保留一条 60px 窄栏（logo + 展开按钮），标题/欢迎语/导航文字隐藏，正文随之让出空间 */
    body.sidebar-collapsed .topbar-app { width: 60px; padding-left: 10px; padding-right: 10px; align-items: center; }
    body.sidebar-collapsed .topbar-app .topbar-brand { flex-direction: column; gap: 10px; }
    body.sidebar-collapsed .topbar-app .topbar-brand-text,
    body.sidebar-collapsed .topbar-app .topbar-welcome,
    body.sidebar-collapsed .topbar-app h1,
    body.sidebar-collapsed .topbar-app #topbar-nav a { display: none; }
    body.sidebar-collapsed .topbar-app ~ .page-body { margin-left: 60px; }
}

.page-body { padding: 20px; }
.page-footer{text-align: center; color: #999; font-size: 14px; padding-top: 15px;}
.role-cards { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-top: 60px; }
.role-card {
    width: 260px; padding: 32px 24px; background: #fff; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08); text-align: center; text-decoration: none; color: #222;
}
.role-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.role-card .icon { font-size: 40px; }
.role-card h2 { margin: 12px 0 4px; font-size: 18px; }
.role-card p { color: #666; font-size: 13px; }

@media (max-width: 720px) {
    .role-cards { flex-direction: column; align-items: stretch; margin-top: 20px; }
    .role-card { width: 100%; }
}

/* ---- 两栏编辑器布局 ---- */
.editor-layout { display: flex; gap: 16px; align-items: flex-start; }
.editor-left, .editor-right { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.editor-left { width: 360px; flex: none; }
.editor-right { flex: 1; min-width: 0; }

@media (max-width: 720px) {
    .editor-layout { flex-direction: column; }
    .editor-left, .editor-right { width: 100%; padding: 12px; }
    .structure-list .q-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .structure-list .q-actions { margin-left: 0; }
}

.panel-title { font-size: 15px; font-weight: bold; border-bottom: 2px solid #1f4e8c; padding-bottom: 8px; margin-bottom: 12px; }

/* ---- 出题排版页右栏标题：滚动时固定在顶端，显示试卷合计分（仅本页专属，不影响全站其它 .panel-title） ---- */
.editor-right-title {
    position: sticky; top: 0; z-index: 6; background: #fff;
    margin: -16px -16px 12px -16px; padding: 16px 16px 8px;
}
#paper-total-score-wrap { font-size: 13px; font-weight: normal; color: #555; margin-left: 10px; }
#paper-total-score { color: #1f4e8c; font-weight: bold; }
/* 合计分超过100分时整条标题背红警示，避免老师漏看 */
.editor-right-title.score-over-limit { background: #e03131; color: #fff; border-bottom-color: #b81f1f; }
.editor-right-title.score-over-limit #paper-total-score-wrap,
.editor-right-title.score-over-limit #paper-total-score { color: #fff; }

.type-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.type-tabs button {
    padding: 6px 12px; border: 1px solid #1f4e8c; background: #fff; color: #1f4e8c; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.type-tabs button.active { background: #1f4e8c; color: #fff; }

.room-form-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.room-form-tabs button {
    padding: 6px 12px; border: 1px solid #1f4e8c; background: #fff; color: #1f4e8c; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.room-form-tabs button.active { background: #1f4e8c; color: #fff; }

.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 13px; color: #444; margin-bottom: 4px; padding: 0px 8px; border-radius: 0px 8px 8px 0px; background-color: #fff179; }
.form-row span {background-color: none;}
.form-row-inline { display: flex; gap: 16px; }
.form-row-inline > div { flex: 1; }
.student-remark-hint { display: block; font-size: 12px; color: #999; font-weight: 400; }
.form-row input[type=text], .form-row input[type=number], .form-row textarea, .form-row select {
    width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; font-family: inherit;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-hint { font-size: 12px; color: #888; margin-top: 4px; }

.option-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.option-row input[type=text] { flex: 1; }
.option-row .opt-label { width: 22px; font-weight: bold; }
/* 题库选题列表：已勾选的题目高亮背景，方便老师一眼确认当前已选中哪些 */
.option-row.option-row-checked { background: #F44336; border-radius: 4px; padding: 2px 4px; margin-left: -4px; color: #FFF;}

.btn { padding: 7px 14px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; background: #1f4e8c; color: #fff; }
.btn:hover { background: #163a6b; }
.btn.secondary { background: #eee; color: #333; }
.btn.secondary:hover { background: #ddd; }
.btn.danger { background: #d9534f; }
.btn.danger:hover { background: #c9302c; }
.btn.small { padding: 4px 8px; font-size: 12px; }
/* 禁用态：须排在各 :hover 规则之后才能压过 hover 变色（同特异性按源序决胜） */
.btn:disabled, .btn:disabled:hover { background: #ccc; border-color: #ccc; color: #888; cursor: not-allowed; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar select { padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }

.structure-list .sec-block { border: 1px solid #ddd; border-radius: 6px; margin-bottom: 10px; }
.structure-list .sec-head {
    display: flex; justify-content: space-between; align-items: center; background: #eef3fb; padding: 8px 12px; font-weight: bold;
}
.structure-list .group-block { border: 1px dashed #c9a24a; margin: 8px 12px; border-radius: 4px; }
.structure-list .group-head { display: flex; justify-content: space-between; align-items: center; background: #fdf6e3; padding: 6px 10px; }
.structure-list .q-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 12px; border-top: 1px solid #eee; }
.structure-list .q-row .q-stem { flex: 1; font-size: 13px; }
.structure-list .sec-head-label:hover,
.structure-list .q-row .q-stem:hover {
    background: #dbe7f7; color: #d9534f; cursor: pointer;
}
.structure-list .q-actions { display: flex; gap: 4px; flex: none; margin-left: 8px; }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: #1f4e8c; color: #fff; margin-right: 6px; }
.tag.subj { background: #e08e0b; }
.tag.tag-single { background: #1f4e8c; }
.tag.tag-multiple { background: #2f9e44; }
.tag.tag-judge { background: #0ca678; }
.tag.tag-fill { background: #d9480f; }
.stu-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 14px; }
.seat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.seat-card { display: flex; flex-direction: row; align-items: center; text-align: center; padding: 8px 4px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
.seat-card .seat-name { font-size: 12px; color: #333; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-name,.seat-time{padding-right: 5px;}
.stu-avatar {margin-right: 5px;}
.seat-card .seat-time { font-size: 11px; color: #999; margin-top: 2px; }
.seat-card .btn { margin-top: 6px; padding: 1px 8px; font-size: 11px; }

/* ---- 打印签到表弹窗：按班级卡片（复用 seat-card，纵向排列） ---- */
.signin-card { flex-direction: column; align-items: stretch; text-align: center; min-width: 200px; padding: 10px 12px; }
.signin-card .seat-name { font-size: 14px; font-weight: bold; color: #1f4e8c; margin-top: 0; white-space: normal; }
.signin-time-display { cursor: pointer; font-size: 12px; color: #555; margin: 6px 0; padding: 4px; border-radius: 4px; }
.signin-time-display:hover { background: #eef3fa; }
.signin-edit-form { font-size: 12px; text-align: left; margin: 6px 0; }
.signin-edit-form input, .signin-edit-form select { font-size: 12px; margin-bottom: 4px; width: 100%; box-sizing: border-box; }
.signin-card .btn.disabled { background: #ccc; border-color: #ccc; color: #888; cursor: not-allowed; }

/* ---- 考前倒计时占位按钮（student_exams.php，不可点，归零后由 JS 换成可点「进入作答」） ---- */
.countdown-btn {
    display: inline-block; background: #eef3ff; border: 1px solid #b7c6f0; color: #3355aa;
    font-variant-numeric: tabular-nums; cursor: not-allowed; animation: countdown-pulse 1.4s ease-in-out infinite; font-weight: bold;
}
@keyframes countdown-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---- 监考端座位表（exam_monitor.php，复用 seat-card 但纵向排布 + 状态色边框） ---- */
.monitor-summary { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #444; margin-top: 6px; }
.monitor-seat { flex-direction: column; align-items: stretch; text-align: left; min-width: 160px; padding: 8px 10px; border-width: 2px; }
.monitor-seat-main { display: flex; align-items: center; gap: 2px; }
.monitor-seat-main .seat-name { flex: 1; font-weight: bold; }
.monitor-seat-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.seat-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; color: #fff; margin-left: 4px; }
.seat-badge.late-badge { background: #e08e0b; }
.monitor-seat.st-absent { border-color: #ddd; background: #f5f5f5; }
.monitor-seat.st-signed { border-color: #b2f2bb; }
.monitor-seat.st-late { border-color: #ffd8a8; }
.monitor-seat.st-offsite { border-color: #ffc9c9; background: #fff5f5; }
.monitor-seat.st-submitted { border-color: #bac8ff; }
.monitor-seat.st-auto_submitted { border-color: #bac8ff; background: #f4f6ff; }
.monitor-seat.st-ongoing { border-color: #e0e0e0; }
.monitor-seat.st-expired { border-color: #ffc9c9; background: #fff5f5; }

/* ---- 监考端班级面板：未签到/未交卷/已交卷三列 ---- */
.monitor-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.monitor-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.monitor-column-title { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eee; }
.monitor-column-empty { font-size: 12px; color: #aaa; margin: 4px 0; }
.monitor-column-pending { background: #fff4e6; border: 1px solid #ffd8a8; border-radius: 6px; padding: 8px; }
.monitor-column-pending .monitor-column-title { color: #d9730d; border-bottom-color: #ffd8a8; }
@media (max-width: 900px) {
    .monitor-columns { grid-template-columns: 1fr; }
    .monitor-columns-3 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
    .monitor-columns-3 { grid-template-columns: 1fr 1fr; }
}

/* ---- 监考端学生详情弹窗（点击姓名/头像触发） ---- */
.stu-detail-list { display: flex; flex-direction: column; gap: 10px; }
.stu-detail-list > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed #eee; padding-bottom: 6px; }
.stu-detail-list > div span { color: #888; font-size: 13px; }
.stu-detail-list > div b { font-weight: 600; }

/* ---- 试卷预览（华联学院模板样式，屏幕上模拟印刷版式） ---- */
.paper-preview {
    background: #fff; margin: 0 auto; max-width: 1040px; padding: 40px 46px;
    box-shadow: 0 1px 6px rgba(0,0,0,.15); font-family: "SimSun", serif;
}
.paper-title { text-align: center; font-family: "SimHei", sans-serif; font-weight: bold; font-size: 26px; letter-spacing: 4px; }
.paper-subtitle { text-align: center; font-weight: bold; font-size: 16px; margin-top: 6px; }
.paper-examinfo { text-align: center; font-size: 15px; margin-top: 10px; }
.paper-fields { margin-top: 18px; font-size: 15px; line-height: 2.2; text-align: center; }
.paper-fields .fline { display: block; }
.paper-fields .fline span { border-bottom: 1px solid #333; min-width: 110px; display: inline-block; }
.paper-fields .fline span.field-course,
.paper-fields .fline span.field-teacher { min-width: 235px; }
.paper-fields .fline span.field-office-head,
.paper-fields .fline span.field-dept-head { min-width: 190px; }
.paper-divider { border: none; border-top: 1px solid #333; margin: 14px 0; }

.score-table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 13px; }
.score-table td, .score-table th { border: 1px solid #333; padding: 6px 4px; text-align: center; }

.sec-title { font-family: "SimHei", sans-serif; font-weight: bold; font-size: 17px; margin: 20px 0 6px; }
.sec-note { font-size: 13px; color: #444; margin-bottom: 8px; font-weight: normal; }
.q-block { font-size: 14.5px; margin-bottom: 10px; line-height: 1.8; }
.q-num { font-weight: bold; margin-right: 4px; }
/* 题号/选项号 + 文本用两列表格布局（供 dompdf 导出正常换行，见 pdf.css 同名规则注释），
   浏览器端也复用同一套标记，这里补上无边框、贴边的基础样式使其与旧版纯 span 视觉一致 */
.q-line, .opt-line { width: 100%; border-collapse: collapse; }
.q-line td, .opt-line td { padding: 0; vertical-align: top; border: none; }
.q-line td.q-num, .opt-line td.opt-num { font-weight: bold; white-space: nowrap; padding-right: 4px; width: 1%; }
.options-grid { display: grid; grid-template-columns: repeat(var(--opt-cols, 2), 1fr); gap: 2px 10px; margin: 4px 0 4px 20px; }
.material-box {  /*background: #fafafa;*/ text-indent: 20px; padding: 10px 14px; margin: 8px 0; font-size: 14px; line-height: 1.8; }
.group-children { margin-left: 10px; }
.blank-line { display: inline-block; border-bottom: 1px solid #333; min-width: 90px; text-align: center; }
.dual-columns { column-count: 2; column-gap: 40px; }
.dual-columns .sec-title { break-after: avoid; }
.dual-columns .q-block { break-inside: avoid; }
.dual-head { width: 50%; margin: 0 auto; }

.answer-input-text { border: none; border-bottom: 1px solid #333; font-family: inherit; font-size: 14px; padding: 2px 4px; min-width: 120px; }
.answer-textarea { width: 100%; min-height: 70px; font-family: inherit; font-size: 14px; border: 1px solid #999; padding: 6px; margin-top: 4px; }

/* ---- 学生作答页 ---- */
.exam-shell { max-width: 1040px; margin: 0 auto; }
/* 学号+姓名水印：平铺旋转、低透明度、不遮挡作答，供试卷外泄溯源；打印/截图也带出 */
.exam-watermark {
    position: fixed; inset: 0; z-index: 1; overflow: hidden;
    pointer-events: none; display: flex; flex-wrap: wrap; align-content: flex-start;
    transform: rotate(-22deg) scale(1.4); transform-origin: center;
}
.exam-watermark span {
    display: inline-block; width: 220px; padding: 40px 10px; font-size: 14px;
    color: rgba(0, 0, 0, 0.075); white-space: nowrap; user-select: none;
}
@media print {
    .exam-watermark { position: absolute; }
    .exam-watermark span { color: rgba(0, 0, 0, 0.15); }
}
.timer-bar {
    position: sticky; top: 0; z-index: 10; background: #fff3cd; border: 1px solid #ffe08a; border-radius: 6px;
    padding: 10px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 14px; font-size: 14px;
}
.timer-student-name { justify-self: start; font-weight: 500; }
#timer-clock { justify-self: center; font-weight: bold; font-size: 18px; color: #b8860b; }
#back-to-top-btn { justify-self: end; }
.timer-bar.timer-warning { background: #c92a2a; border-color: #c92a2a; color: #fff; }
.timer-bar.timer-warning #timer-clock { color: #fff; }
.timer-bar.timer-warning .timer-student-name { color: #fff; }
/* 试卷左外侧浮动大题导航：白底、无边框卡片，当前所在大题用深色背景高亮突出 */
.paper-nav {
    position: fixed; top: 70px; right: calc(50% + 532px); z-index: 9;
    width: 170px; max-height: calc(100vh - 90px); overflow-y: auto;
    background: #fff; padding: 4px 0; border-radius: 7px;
}
.paper-nav-toggle {
    display: block; margin: 0 12px 8px auto; width: 22px; height: 22px; line-height: 20px;
    text-align: center; border: 1px solid #d6dcf5; border-radius: 4px; background: #fff;
    cursor: pointer; font-size: 12px; color: #6b7280;
}
.paper-nav-item {
    display: block; padding: 8px 12px; margin: 2px 6px; font-size: 14px; color: #333;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 4px;
}
.paper-nav-item:hover { background: #f0f2fa; color: #1a1a2e; }
.paper-nav-item.active { background: #2b2f45; color: #fff; font-weight: 600; }
.paper-nav.mini { width: 56px; }
.paper-nav.mini .paper-nav-item { text-align: center; padding: 8px 4px; margin: 2px 4px; }
@media (max-width: 1099px), print { .paper-nav { display: none !important; } }
.answerable .q-block { padding: 10px; border-radius: 4px; border-left: 3px solid transparent; }
.answerable .q-block:hover { background: #fafcff; }
.answerable .q-block.answered { background: #eefaf0; border-left: 3px solid #2b8a3e; }
.answerable .q-block.answered:hover { background: #e3f6e7; }
label.opt-label { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }

/* ---- 考试列表 ---- */
.exam-list { display: flex; flex-direction: column; gap: 12px; max-width: 700px; margin: 0 auto; }
.exam-card { background: #fff; border-radius: 8px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.exam-card .status { font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.status.ongoing { background: #d3f9d8; color: #2b8a3e; }
.status.upcoming { background: #e7e7e7; color: #666; }
.status.finished { background: #dbe4ff; color: #3b5bdb; }

@media (max-width: 720px) {
    .exam-list { max-width: none; }
    .exam-card { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ---- 阅卷页 ---- */
.grading-layout { display: flex; gap: 16px; }
.student-list { width: 220px; flex: none; background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.student-list .stu-item { padding: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; }
.student-list .stu-item:hover { background: #eef3fb; }
.student-list .stu-item.active { background: #1f4e8c; color: #fff; }
.student-list .stu-status { font-size: 11px; }
.grading-main { flex: 1; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.grade-row { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid #eee; padding: 12px 0; }
.grade-row:hover { background-color: aliceblue; padding: 5px; }
.answer-img-row img { background-color: #FFF; }
.grade-row .g-content { flex: 1; }
.grade-row .g-score { flex: none; width: 150px; text-align: right; }
.grade-row input.score-input { width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 4px; text-align: center; }
.grade-row textarea.comment-input { width: 100%; margin-top: 6px; font-size: 13px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; }
.correct-mark { color: #2b8a3e; font-weight: bold; }
.wrong-mark { color: #c92a2a; font-weight: bold; }
.total-bar { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: bold; position: sticky; top: 0; z-index: 5; background: #fff; margin: -20px -20px 16px -20px; padding: 14px 20px; border-bottom: 2px solid #1f4e8c; }

/* ---- 已批改试卷导出（只读版阅卷行） ---- */
.export-row .answer-line { font-size: 13px; color: #555; }
.export-row .score-badge { font-weight: bold; color: #1f4e8c; }

/* ---- 登录页 ---- */
.login-card {
    max-width: 380px; margin: 60px auto 0; background: #fff; border-radius: 10px;
    padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.login-error { color: #c92a2a; font-size: 13px; margin: 10px 0 0; }
.login-hint { color: #888; font-size: 12px; margin-top: 14px; line-height: 1.6; }

@media (max-width: 720px) {
    .login-card { max-width: none; margin: 20px 12px 0; padding: 18px; }
}

/* ---- 管理员：学生管理页 ---- */
.admin-panel { max-width: 920px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.admin-table th, .admin-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; }
.admin-table th { background: #eef3fb; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > .admin-table { min-width: 160px; }
.course-table-cols { display: flex; gap: 20px; }

.student-status-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.student-status-tag.student-status-active { background: #e6f4ea; color: #2b8a3e; }
.student-status-tag.student-status-suspended { background: #fff3bf; color: #a67f00; }
.student-status-tag.student-status-withdrawn { background: #ffe3e3; color: #c92a2a; }
.student-row-inactive { color: #999; background: #f7f7f7; }
.student-row-inactive td { color: #999; }


@media (max-width: 720px) {
    .admin-panel { padding: 12px; }
    .admin-table { font-size: 12px; }
    .admin-table th, .admin-table td { padding: 6px 8px; }
    .course-table-cols { flex-direction: column; gap: 0; }
}
.import-sample { background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #555; }
.import-textarea { width: 100%; min-height: 80px; font-family: inherit; font-size: 13px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #222; }
.flash-ok { color: #2b8a3e; font-size: 13px; margin: 10px 0 0; }

/* ---- 出题排版：编辑弹窗 ---- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box { background: #fff; border-radius: 8px; width: 580px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.modal-title { font-size: 15px; font-weight: bold; padding: 16px 20px; border-bottom: 1px solid #eee; }
.modal-tabs { display: flex; gap: 4px; padding: 10px 20px 0; border-bottom: 1px solid #eee; }
.modal-tabs .tab-btn { background: transparent; border: none; padding: 8px 14px; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
.modal-tabs .tab-btn.active { color: #1f4e8c; font-weight: bold; border-bottom-color: #1f4e8c; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal-body label {
    display: block;
    line-height: 32px;
}
.tab-remark-textarea { min-height: 220px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #eee; }

/* 退出全屏提示：纯黑不透传，避免学生透过半透明遮罩偷看到试卷内容继续作答 */
.modal-overlay-opaque { background: #000; z-index: 200; }

.toast { position: fixed; bottom: 24px; right: 24px; background: #2b8a3e; color: #fff; padding: 10px 18px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: none; z-index: 9999; border: 3px solid #FFF;}

/* ---- 出题排版：批量导入 ---- */
.import-panel textarea { min-height: 140px; font-family: monospace; }
.import-help { margin-bottom: 12px; }
.import-help summary { cursor: pointer; font-size: 13px; color: #1f4e8c; }
.import-help pre { white-space: pre-wrap; font-size: 12px; background: #f6f8fa; padding: 8px; border-radius: 4px; max-height: 220px; overflow: auto; margin: 8px 0; }
.import-report { margin-top: 10px; font-size: 12px; }

/* ---- 出题排版：AI 提示词模板 ---- */
.prompt-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.prompt-tpl-card { position: relative; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; background: #fafafa; }
.prompt-tpl-card-title { font-size: 13px; font-weight: bold; color: #1f4e8c; margin-bottom: 6px; }
.prompt-tpl-card pre { white-space: pre-wrap; font-size: 12px; color: #333; margin: 0; max-height: 160px; overflow: auto; font-family: monospace; }
.prompt-tpl-copy-btn { position: absolute; top: 8px; right: 10px; opacity: 0; transition: opacity .15s; }
.prompt-tpl-card:hover .prompt-tpl-copy-btn { opacity: 1; }

/* ---- 出题排版：备份题目（导出成批量导入格式）——复制按钮常亮，题目区放高一些 ---- */
#backup-list .prompt-tpl-card { padding-right: 76px; }
#backup-list .prompt-tpl-card pre { max-height: 300px; }
#backup-list .backup-copy-btn { position: absolute; top: 8px; right: 10px; }


.draw-config-row {font-size: 14px; color: #0053c3;}

/* ---- 题目/答题配图：上传区、缩略图托盘、正方形小缩略图 ---- */
.img-dropzone {
    border: 2px dashed #b7c6dd; border-radius: 6px; padding: 16px; text-align: center;
    font-size: 13px; color: #789; cursor: pointer; background: #f7f9fc;
}
.img-dropzone:hover, .img-dropzone:focus { border-color: #1f4e8c; color: #1f4e8c; outline: none; }
.img-dropzone.drag-over { border-color: #1f4e8c; background: #eaf1fb; color: #1f4e8c; }

.img-thumb-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.img-thumb { width: 96px; text-align: center; }
.img-thumb img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; cursor: grab; }
.img-thumb-name { font-size: 12px; color: #555; margin-top: 2px; }
.img-thumb-actions { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.img-thumb-actions .btn { padding: 2px 6px; font-size: 11px; }

.q-thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.q-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; cursor: pointer; }
.q-thumb:hover { border-color: #1f4e8c; }
.q-thumb-att { display: flex; align-items: center; justify-content: center; background: #f7f9fc; text-decoration: none; }
.q-thumb-att img { width: 32px; height: 32px; object-fit: contain; }
.q-thumb-att:hover { border-color: #1f4e8c; }

/* ---- 题目附加（zip/rar）：上传区、文件条列表 ---- */
.att-dropzone {
    border: 2px dashed #b7c6dd; border-radius: 6px; padding: 16px; text-align: center;
    font-size: 13px; color: #789; cursor: pointer; background: #f7f9fc;
}
.att-dropzone:hover, .att-dropzone:focus { border-color: #1f4e8c; color: #1f4e8c; outline: none; }
.att-dropzone.drag-over { border-color: #1f4e8c; background: #eaf1fb; color: #1f4e8c; }

.att-file-list { display: flex; flex-direction: row; gap: 6px; margin-top: 10px; }
.att-file-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: grab;
	float: left;
    flex-direction: column;
}
.att-file-name { font-size: 13px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 出题编辑弹窗：题目配图/题目附件默认折叠面板，箭头符号复用 bookmarks.js 的折叠约定 ---- */
/* 选择器比 .form-row label 更具体（多一层 .form-row），确保能覆盖其 display:block，改为 flex 排列箭头/文字/徽标 */
.form-row label.collapsible-panel-head { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.form-row label.collapsible-panel-head:hover { background-color: #ffe680; }
.collapsible-arrow { flex: none; font-size: 11px; color: #789; }
.collapsible-count { flex: none; color: red; font-weight: normal; }
.collapsible-panel-body { margin-top: 8px; }

/* 学生作答页：附加区+图片区一行两列布局；附加文件条列表（换行排列，非缩略图） */
.upload-row-2col { display: flex; gap: 16px; }
.upload-row-2col > .form-row { flex: 1; min-width: 0; }
.answer-att-row { display: flex; flex-wrap: wrap; gap: 8px; }
.answer-att-row > * { flex: 0 0 auto; }
.answer-att-row .att-file-item { cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: row; }
.answer-att-row .att-file-item:hover { border-color: #1f4e8c; }

/* 学生答题图：阅卷页/导出页/学生作答页自身缩略图统一按张数单行等比展示 */
.answer-img-row { display: flex; flex-wrap: nowrap; gap: 8px; padding: 6px 0; }
.answer-img-row[data-count="1"] > * { width: 52%; }
.answer-img-row[data-count="2"] > * { width: 48%; }
.answer-img-row[data-count="3"] > * { width: 31%; }
.answer-img-row[data-count="4"] > * { width: 25%; }
.answer-img-row[data-count="5"] > * { width: 18%; }
.answer-img-row > img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; }
.answer-img-row > .img-thumb { text-align: center; }
.answer-img-row > .img-thumb img { width: 100%; height: auto; object-fit: contain; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; }

/* ---- 图片画册 Lightbox（app.js 动态注入 DOM，点击 [data-gallery] 触发） ---- */
.gallery-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 200;
    display: flex; align-items: center; justify-content: center;
}
.gallery-box { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 90vw; max-height: 90vh; }
.gallery-main { max-width: 86vw; max-height: 78vh; display: flex; align-items: center; justify-content: center; }
.gallery-main img { max-width: 86vw; max-height: 78vh; object-fit: contain; border-radius: 4px; background: #fff; }
.gallery-caption { color: #fff; font-size: 14px; margin-top: 10px; }
.gallery-close {
    position: absolute; top: -36px; right: -6px; background: transparent; border: none; color: #fff;
    font-size: 28px; line-height: 1; cursor: pointer;
}
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none;
    color: #fff; font-size: 32px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
}
.gallery-nav:hover { background: rgba(255,255,255,.3); }
.gallery-prev { left: -56px; }
.gallery-next { right: -56px; }

/* ---- 教师个人课表 ---- */
.sch-panel { max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.sch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.sch-head-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sch-head-left select { padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.sch-head-title { font-size: 20px; font-weight: bold; color: #1f4e8c; }
.sch-head-right { font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; }

.sch-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sch-table th, .sch-table td { border: 1px solid #7e7e7e; }
.sch-table th { background: #eef3fb; font-size: 13px; padding: 8px 4px; color: #333; }
.sch-table th.sch-period-col { width: 40px; font-size: 12px; cursor: default; }
.sch-cell { height: 78px; vertical-align: top; padding: 4px; cursor: pointer; }
.sch-cell.empty:hover { background: #f7f9fc; }
.sch-cell.empty.sch-cell-evening { background: #f3f3f3; }
.sch-cell.empty.sch-cell-evening:hover { background: #e4eaf3; }
.sch-row-noon .sch-cell { height: 39px; }
.sch-row-noon .sch-period-col { font-size: 11px; padding: 4px; }
.sch-row-noon .sch-course { font-size: 11px; }
.sch-row-noon .sch-class, .sch-row-noon .sch-venue, .sch-row-noon .sch-remark { font-size: 10px; }
.sch-cell-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sch-cell.filled .sch-cell-content { align-items: flex-start; justify-content: flex-start; text-align: left; }
.sch-cell-main { max-width: 100%; }
.sch-course { font-size: 12.5px; font-weight: bold; color: #222; line-height: 1.4; }
.sch-class { font-size: 11.5px; line-height: 1.4; margin: 1px 0; }
.sch-venue { font-size: 11px; color: #666; line-height: 1.4; }
.sch-remark { font-size: 11px; color: #888; line-height: 1.4; font-style: italic; }

.sch-table th.sch-today { background: #1f4e8c; color: #fff; }
.sch-cell.sch-today { box-shadow: inset 0 0 0 0px #dcebff; }
.sch-cell.sch-today.empty { background: repeating-linear-gradient(135deg, #fff8e6, #fff8e6 10px, #fff2cc 10px, #fff2cc 20px) !important; opacity: 0.5;}
.sch-cell.sch-today.empty:hover { background: #dce7f6; }
.sch-cell.sch-today.empty.sch-cell-evening { background: #e6ebf3; }

.sch-color-row { display: flex; align-items: center; gap: 6px; }
.sch-color-row input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.sch-color-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sch-color-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer; display: inline-block; }
.sch-color-swatch:hover { border-color: #1f4e8c; transform: scale(1.1); }
.sch-class-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; color: #fff; }

.sch-mobile { display: none; }
.sch-mobile-tabs { display: flex; overflow-x: auto; gap: 4px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.sch-mobile-tab { flex: 0 0 auto; padding: 8px 14px; border: 1px solid #ccc; border-radius: 6px; background: #fff; font-size: 13px; color: #444; }
.sch-mobile-tab.active { background: #1f4e8c; color: #fff; border-color: #1f4e8c; font-weight: bold; }
.sch-mobile-tab.sch-today:not(.active) { border-color: #1f4e8c; color: #1f4e8c; font-weight: bold; }
.sch-mobile-cell { border: 1px solid #ddd; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.sch-mobile-cell.empty:hover { background: #f7f9fc; }
.sch-mobile-cell.empty.sch-cell-evening { background: #f3f3f3; }
.sch-mobile-cell-period { font-size: 12px; color: #888; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.sch-period-time-btn { cursor: pointer; font-size: 12px; opacity: .7; }
.sch-period-time-btn:hover { opacity: 1; }
.sch-mobile-cell .sch-cell-content { align-items: flex-start; justify-content: flex-start; text-align: left; height: auto; flex-direction: row; gap: 10px; }
.sch-mobile-cell .sch-cell-main { flex: 1 1 auto; overflow-wrap: break-word; word-break: break-word; }
.sch-mobile-cell .sch-remark { flex: 0 0 38%; max-width: 38%; text-align: right; overflow-wrap: break-word; word-break: break-word; }
.sch-mobile-empty-hint { font-size: 12px; color: #bbb; }

/* ---- 教学文档功能区（课表下方，默认折叠；三份文档都是「课程+班级」粒度，按课程分组、每班一行） ---- */
.sch-docs { margin-top: 18px; border: 1px solid #dde4ee; border-radius: 8px; background: #fbfcfe; }
.sch-docs-summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: bold; color: #1f4e8c; display: flex; align-items: center; gap: 6px; user-select: none; }
.sch-docs-summary::-webkit-details-marker { display: none; }
.sch-docs-summary::after { content: '\25be'; margin-left: auto; font-size: 12px; color: #7c8aa0; transition: transform .15s; }
.sch-docs[open] .sch-docs-summary::after { transform: rotate(180deg); }
.sch-docs-summary:hover { background: #f2f6fc; border-radius: 8px 8px 0 0; }
.sch-docs-count { font-size: 12px; font-weight: normal; color: #7c8aa0; }
.sch-docs-body { padding: 4px 14px 14px; border-top: 1px solid #e6ecf5; }
.sch-docs-course { border-left: 4px solid #ccc; padding: 8px 0 8px 10px; margin-top: 10px; }
.sch-docs-course-name { font-size: 13.5px; font-weight: bold; color: #222; margin-bottom: 6px; }
.sch-docs-course-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sch-docs-course-head .sch-docs-course-name { margin-bottom: 0; }
.sch-docs-plan-btn { padding: 4px 10px; border: 0px; border-radius: 4px; background: #4CAF50; color: #fdffbd; font-size: 12.5px; cursor: pointer; }
.sch-docs-plan-btn:hover { background: #1f4e8c; border-color: #1f4e8c; color: #fff; }
.sch-docs-class { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.sch-docs-class-name { flex: 0 0 auto; min-width: 96px; padding: 2px 8px; border-radius: 4px; background: #6b7a8f; color: #fff; font-size: 12px; text-align: center; }
.sch-docs-class-empty .sch-docs-class-name { background: #c6ccd4; }
.sch-docs-class button { padding: 4px 10px; border: 1px solid #c9d3e2; border-radius: 4px; background: #fff; color: #1f4e8c; font-size: 12.5px; cursor: pointer; }
.sch-docs-class button:hover:not(:disabled) { background: #1f4e8c; border-color: #1f4e8c; color: #fff; }
.sch-docs-class button:disabled { color: #aab2bd; border-color: #e2e6ec; cursor: not-allowed; }

@media (max-width: 720px) {
    .sch-table,.sch-head-title { display: none; }
    .sch-mobile { display: block; }
    .sch-panel { padding: 12px; }
    .sch-head { flex-direction: column; align-items: stretch; }
    .sch-head-title { order: -1; text-align: center; }
    .sch-head-right { display: none; }
    .sch-mobile-cell { height: auto; }
    .sch-mobile-cell .sch-course, .sch-mobile-cell .sch-class, .sch-mobile-cell .sch-venue { overflow-wrap: break-word; word-break: break-word; }
	.sch-mobile-cell-period{ display: block; float: right; }
	.sch-cell-content{float: left; display: contents;}
    /* 窄屏：整块折叠时淡出，不跟课表抢视线；点开（展开）后恢复正常。PC 端不受影响 */
    .sch-docs { opacity: .2; transition: opacity .2s; }
    .sch-docs[open] { opacity: 1; }
    /* 窄屏：班级行改纵向堆叠，三个文档按钮各占满一行，避免挤成两三个字换行 */
    .sch-docs-class { flex-direction: column; align-items: stretch; }
    .sch-docs-class-name { text-align: left; }
    .sch-docs-class button { width: 100%; text-align: left; padding: 8px 10px; }
}

/* ---------- 课表格子单击浮动按钮 ---------- */
.slot-popover { position: absolute; z-index: 60; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.slot-popover-row { display: flex; gap: 6px; }
.slot-popover .btn { white-space: nowrap; }
.slot-popover-more { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #eee; padding-top: 6px; }
.slot-popover-more button { background: none; border: none; text-align: left; padding: 6px 8px; font-size: 13px; color: #333; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.slot-popover-more button:hover { background: #f0f4fa; }

/* ---------- 课程教学总结 / 综合实训项目一览表 弹窗 ---------- */
.modal-box-wide { width: 820px; max-width: 96vw; }

/* 叠在实训弹窗之上的「从其它班级载入」选择层 */
.modal-overlay-top { z-index: 120; }
.doc-load-hint { font-size: 12.5px; color: #666; line-height: 1.7; margin: 0 0 12px; padding: 8px 10px; background: #f7f9fc; border-left: 3px solid #1f4e8c; border-radius: 0 4px 4px 0; }
.doc-load-filter { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; margin-bottom: 10px; }
.doc-load-filter:focus { outline: none; border-color: #1f4e8c; }
.doc-load-group { font-size: 12px; font-weight: bold; color: #7c8aa0; margin: 14px 0 6px; }
.doc-load-group:first-child { margin-top: 0; }
.doc-load-group-toggle { cursor: pointer; user-select: none; }
.doc-load-group-toggle:hover { color: #1f4e8c; }
.doc-load-group-count { font-weight: normal; }
.doc-load-item { border: 1px solid #dde4ee; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; }
.doc-load-item:hover { border-color: #1f4e8c; background: #f2f6fc; }
.doc-load-item-title { font-size: 13.5px; font-weight: bold; color: #222; }
.doc-load-item-meta { font-size: 12px; color: #7c8aa0; margin-top: 2px; }
.doc-load-item-preview { font-size: 12px; color: #888; margin-top: 4px; overflow-wrap: break-word; word-break: break-word; }
.doc-load-empty { font-size: 13px; color: #999; text-align: center; padding: 24px 0; }
.doc-load-empty span { font-size: 12px; color: #bbb; }
.doc-sheet { font-size: 14px; }
.doc-sheet-title { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.doc-sheet-sub { text-align: center; color: #555; margin-bottom: 12px; }
.doc-info-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.doc-info-table td { border: 1px solid #d0d0d0; padding: 6px 8px; }
.doc-info-label { background: #f7f7f7; font-weight: bold; white-space: nowrap; width: 1%; }
.doc-info-table input[type="text"], .doc-info-table input[type="number"], .doc-info-table select { width: 100%; border: none; background: transparent; font-size: 13px; }
.doc-training-table input[type="text"], .doc-training-table input[type="number"] { width: 100%; border: none; background: transparent; font-size: 12px; text-align: center; }
.doc-block-label { font-weight: bold; margin: 10px 0 4px; }
.doc-textarea { width: 100%; min-height: 90px; border: 1px solid #d0d0d0; border-radius: 4px; padding: 8px; font-size: 14px; font-family: inherit; resize: vertical; color: #c92a2a;line-height:23px;}
.doc-sheet-note { margin-top: 12px; color: #888; font-size: 12px; line-height: 1.6; }
.doc-training-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.doc-training-table th, .doc-training-table td { border: 1px solid #d0d0d0; padding: 6px; text-align: center; }
tr.plan-row-item {color: #c92a2a;}
table.doc-info-table input, table.doc-info-table select, .doc-training-table input {background-color: #fff9c7 !important; min-width: 32px;}
.doc-training-table .tr-content-cell { text-align: left;}
.tr-item-row { cursor: grab; color: #d9534f;}
.tr-item-row:hover { background: #f7fafd; }
.tr-add-row { text-align: center; color: #1f4e8c; cursor: pointer; padding: 8px; }
.tr-add-row:hover { background: #f0f4fa; }
.tr-total-row td { font-weight: bold; background: #f7f7f7; }
.tr-row-edit-btn { background: none; border: none; cursor: pointer; color: #666; }

/* ---------- 时间设置弹窗：9 行时段起止时间 ---------- */
.pt-row { align-items: center; gap: 8px; margin-bottom: 8px; }
.pt-label { flex: 0 0 90px; font-size: 13px; color: #333; }
.pt-row input[type=time] { padding: 5px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.pt-sep { color: #999; }

/* ---------- 时段时间气泡（桌面表头 hover / 手机端图标点击共用） ---------- */
.period-time-bubble {
    position: absolute; z-index: 70; background: #333; color: #fff; font-size: 12px; line-height: 1.5;
    padding: 6px 10px; border-radius: 6px; white-space: pre-line; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* ---------- 班级点名页 ---------- */
.att-panel { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); --atu: 1; }
/* 「放大名单」：--atu 为放大系数，名单卡片的尺寸/字号/按钮同比缩放 */
.att-panel.att-big { --atu: 1.4; }
.att-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 12px; }
.att-course { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.att-meta { display: flex; gap: 12px; flex-wrap: wrap; color: #666; font-size: 13px; align-items: center; }
.att-class-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; color: #fff; }
.att-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.att-head-actions label { font-size: 13px; color: #555; }
.att-head-actions select { padding: 4px 6px; }

/* 本次课备注按钮：已有备注时右上角加小红点 */
#att-note-btn { position: relative; }
#att-note-btn.att-note-has::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #e03131; }

/* 全部备注：只读时间线 */
.att-note-timeline { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.att-note-item { border: 1px solid #eee; border-radius: 6px; padding: 10px 12px; background: #fafafa; }
.att-note-item-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #1f4e8c; font-weight: bold; margin-bottom: 6px; }
.att-note-item-right { display: flex; align-items: center; gap: 6px; }
.att-note-item-date { color: #999; font-weight: normal; }
.att-note-item-body { font-size: 13px; color: #333; word-break: break-word; }
.att-note-edit-form textarea { width: 100%; box-sizing: border-box; font-size: 13px; font-family: inherit; }
.att-note-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* 设置菜单 */
.att-settings-wrap { position: relative; }
.att-settings-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 50; flex-direction: column; min-width: 150px; background: #fff; border: 1px solid #d5d5d5; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 4px; }
.att-settings-menu a, .att-settings-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; color: #333; text-decoration: none; }
.att-settings-menu a:hover, .att-settings-menu button:hover { background: #f0f4fa; }

/* 课次 tab */
.att-session-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.att-session-tab { padding: 6px 14px; border: 1px solid #d5d5d5; background: #fafafa; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 13px; color: #555; }
.att-session-tab.active { background: #1f4e8c; color: #fff; border-color: #1f4e8c; }
.att-tab-date { margin-left: 6px; font-size: 12px; opacity: .85; }
.att-tab-hint { color: #aaa; font-size: 12px; }
.att-label-row { gap: 10px; }
.att-legend { color: #888; font-size: 12px; margin-top: 10px; }
.att-roster-count { color: #666; font-size: 12px; margin: 4px 0 0; }
.att-table-wrap { display: flex; gap: 20px; align-items: flex-start; }
.att-table-wrap > .att-table { flex: 1; min-width: 0; }
.att-table { width: 100%; border-collapse: collapse; }
.att-table th, .att-table td { border: 1px solid #eee; padding: 6px 8px; text-align: left; }
.att-table thead th { background: #f7f7f7; font-size: 13px; color: #555; }
.att-table tbody tr:hover { background: #eef4fc; }
.att-col-no { width: 48px; text-align: center; }
.att-col-sno { width: 120px; }
.att-col-name { font-weight: 700; }
.stu-gender-icon { display: inline-block; width: 14px; margin-right: 2px; font-weight: 700; }
.stu-gender-icon.stu-gender-m { color: #1f6fd6; }
.stu-gender-icon.stu-gender-f { color: #e0529c; }
.att-name-py { display: none; }
.att-py-on .att-col-name { display: flex; flex-direction: column; align-items: flex-start; }
.att-py-on .att-name-py { display: block; font-size: 14px; line-height: 1.2; color: #8a8f99; font-weight: 400; letter-spacing: .3px; }
.att-status-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.att-status-btn { padding: 4px 10px; border: 1px solid #d5d5d5; background: #fafafa; color: #555; border-radius: 4px; cursor: pointer; font-size: 12px; }
.att-status-btn:hover { border-color: #1f4e8c; }
.att-status-btn.active { color: #fff; border-color: transparent; font-weight: 600; }
/* 额外状态：默认隐藏；本行已有该状态(att-force-show)或展开(expanded)时显示 */
.att-status-extra { display: none; }
.att-status-extra.att-force-show { display: inline-block; }
.att-status-btns.expanded .att-status-extra { display: inline-block; }
/* “更多”切换按钮 */
.att-more-btn { padding: 3px 8px; border: 1px dashed #bbb; background: #fff; color: #888; border-radius: 13px; cursor: pointer; font-size: 12px; }
.att-more-btn:hover { border-color: #1f4e8c; color: #1f4e8c; }
.att-status-btns.expanded .att-more-btn { color: #1f4e8c; border-style: solid; }
.att-st-absent.active { background: #d9534f; }
.att-st-leave.active { background: #2b8a3e; }
.att-st-official.active { background: #6a9a2a; }
.att-st-late.active { background: #e6a817; }
.att-st-early.active { background: #7a7a7a; }
.att-st-bonus.active { background: #1f4e8c; }

/* 点名名单：卡片网格（电脑端自适应 2/3/4 列，手机端 2 列） */
.att-roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
@media (min-width: 1101px) { .att-roster { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1401px) { .att-roster { grid-template-columns: repeat(5, 1fr); } }
/* 放大后每行少放几张：电脑 3/4 列，手机单列整行 */
.att-panel.att-big .att-roster { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1101px) { .att-panel.att-big .att-roster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1401px) { .att-panel.att-big .att-roster { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .att-panel.att-big .att-roster { grid-template-columns: 1fr; } }

/* 未开课遮罩：只盖点名册区域，顶部工具栏仍可用（备忘录/预览/导出/周次下拉） */
.att-roster-wrap { position: relative; }
.att-roster-wrap.att-not-started .att-roster { filter: grayscale(0.6); }
#att-not-started-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; z-index: 5; }
.att-ns-box { background: #fff; border-radius: 10px; padding: 22px 28px; box-shadow: 0 4px 20px rgba(0, 0, 0, .25); text-align: center; max-width: 90%; }
.att-ns-title { font-size: 16px; font-weight: bold; color: #333; }
.att-ns-planned { font-size: 13px; color: #555; margin-top: 8px; }
.att-ns-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.att-ns-hint { font-size: 12px; color: #888; margin-top: 10px; }
.att-card {
    background: #fff; border: 1px solid #e2e2e2; border-left: calc(var(--atu) * 4px) solid #e2e2e2; border-radius: 8px;
    padding: calc(var(--atu) * 10px) calc(var(--atu) * 12px); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.att-card:hover { border-color: #1f4e8c; }
.att-card-head { display: flex; align-items: center; gap: 8px; }
.att-card-no {
    flex: none; width: calc(var(--atu) * 22px); height: calc(var(--atu) * 22px); line-height: calc(var(--atu) * 22px); text-align: center;
    background: #1f4e8c; color: #fff; border-radius: 50%; font-size: calc(var(--atu) * 12px); font-weight: 600;
}
.att-card-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-card-name { font-size: calc(var(--atu) * 15px); font-weight: 700; display: flex; align-items: center; gap: 4px; min-width: 0; }
.att-card-name .att-name-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card-sno { font-size: calc(var(--atu) * 12px); color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card-remark { display: none; font-size: calc(var(--atu) * 12px); color: #c47f17; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-remark-on .att-card-remark { display: block; }
.att-card-tools { display: flex; align-items: center; gap: 6px; flex: none; flex-direction: column;}
.att-card-flag { flex: none; font-size: calc(var(--atu) * 11px); padding: 1px calc(var(--atu) * 8px); border-radius: 10px; color: #fff; background: #999; }
.att-card-flag.att-st-absent { background: #d9534f; }
.att-card-flag.att-st-leave { background: #2b8a3e; }
.att-card-flag.att-st-official { background: #6a9a2a; }
.att-card-flag.att-st-late { background: #e6a817; }
.att-card-flag.att-st-early { background: #7a7a7a; }
.att-card-flag.att-st-bonus { background: #1f4e8c; }
.att-more-btn { flex: none; padding: calc(var(--atu) * 3px) calc(var(--atu) * 8px); border: 1px dashed #bbb; background: #fff; color: #888; border-radius: 13px; cursor: pointer; font-size: calc(var(--atu) * 12px); display: none; }
.att-more-btn:hover { border-color: #1f4e8c; color: #1f4e8c; }
/* “更多”按钮默认隐藏，单击卡片空白处才显示 */
.att-card.show-more .att-more-btn { display: inline-block; }
.att-card.expanded .att-more-btn { display: inline-block; color: #1f4e8c; border-style: solid; }
.att-card-actions { display: none; flex-wrap: wrap; gap: calc(var(--atu) * 6px); margin-top: calc(var(--atu) * 8px); padding-top: calc(var(--atu) * 8px); border-top: 1px dashed #eee; }
.att-card-actions .att-status-btn { padding: calc(var(--atu) * 4px) calc(var(--atu) * 10px); font-size: calc(var(--atu) * 12px); }
.att-card.expanded .att-card-actions { display: flex; }
.att-card[data-cur-status="absent"] { border-left-color: #d9534f; background: #fff6f6; }
.att-card[data-cur-status="leave"] { border-left-color: #2b8a3e; background: #f5fbf6; }
.att-card[data-cur-status="official"] { border-left-color: #6a9a2a; background: #f8fbf3; }
.att-card[data-cur-status="late"] { border-left-color: #e6a817; background: #fffaf0; }
.att-card[data-cur-status="early"] { border-left-color: #7a7a7a; background: #f7f7f7; }
.att-card[data-cur-status="bonus"] { border-left-color: #1f4e8c; background: #f2f6fb; }
.att-py-on .att-card-name { flex-direction: column; align-items: flex-start; gap: 0; }
.att-py-on .att-card-name .att-name-py { display: block; font-size: 12px; line-height: 1.2; color: #8a8f99; font-weight: 400; letter-spacing: .3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-py-on .att-card-name .att-name-main { max-width: 100%; }

.att-head-main{display: flex;}

@media (max-width: 720px) {
    .att-head { flex-direction: column; }
    .att-table-wrap { flex-direction: column; gap: 0; }
    .att-table thead { display: none; }
    .att-table, .att-table td { display: block; width: 100%; }
    /* 卡片两个一行：tbody 横向排布，每张卡约占一半宽 */
    .att-table tbody { display: flex; flex-wrap: wrap; gap: 8px; }
    .att-table tr { display: block; width: calc(50% - 4px); box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 0; padding: 8px; }
    .att-table td { border: none; padding: 3px 4px; }
    .att-col-no, .att-col-sno, .att-col-name { display: inline-block; width: auto; margin-right: 10px; }
    .att-col-name { font-weight: 700; }
    .att-py-on .att-col-name { display: flex; gap: 6px; }
    .att-py-on .att-name-py { display: inline; }
	.att-col-no{ background-color: #dbdbdb; text-align: center !important; float: right; width: 27px !important; border-radius: 12px; color: #FFF; }
	.att-head-main{display: flex;flex-direction: column;}
	.att-st-absent, .att-st-late {
    margin-right: 10px;
}
    .att-card { padding: calc(var(--atu) * 8px) calc(var(--atu) * 10px); position: relative; }
    .att-card-name { font-size: calc(var(--atu) * 14px); }
    .att-roster { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .att-card-head { flex-wrap: wrap; }
    .att-card-no {
        position: absolute; top: -6px; left: -6px; width: calc(var(--atu) * 18px); height: calc(var(--atu) * 18px); line-height: calc(var(--atu) * 18px); font-size: calc(var(--atu) * 10px);
        box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
    .att-card-tools { flex-wrap: wrap; }
    .att-card-flag { font-size: calc(var(--atu) * 10px); padding: 1px calc(var(--atu) * 6px); }
    .att-more-btn { padding: calc(var(--atu) * 2px) calc(var(--atu) * 6px); font-size: calc(var(--atu) * 11px); }
    .att-card-actions { gap: calc(var(--atu) * 4px); }
    .att-card-actions .att-status-btn { padding: calc(var(--atu) * 3px) calc(var(--atu) * 7px); font-size: calc(var(--atu) * 11px); }
}

/* ---- 点名页：右下角悬浮筛选按钮 ---- */
#att-filter-fab { position: fixed; right: 20px; bottom: 24px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#att-filter-toggle { background: #fff; color: #333; border: none; border-radius: 20px; padding: 7px 7px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
#att-filter-toggle.att-filter-on { background: #607D8B; color: #fff;}
#att-filter-menu { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: 6px; min-width: 88px; }
.att-filter-opt { background: none; border: none; padding: 7px 14px; text-align: left; cursor: pointer; border-radius: 4px; font-size: 13px; color: #333; }
.att-filter-opt:hover { background: #eef3fa; }
.att-filter-opt.active { background: #e8f0fb; color: #1f4e8c; font-weight: 600; }
@media (max-width: 720px) {
    #att-filter-fab { right: 12px; bottom: 16px; }
}

/* ---- 教研桌面 dashboard ---- */
.page-body.desk-page { padding: 0; }
.desk {
    position: relative; background-color: #e8edf5;
    background-image: radial-gradient(rgba(31,78,140,.06) 1px, transparent 1px);
    background-size: 22px 22px; transition: background-color .2s ease;
    display: flex; flex-direction: column;
}
.desk-rail {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 14px 22px; background: rgba(255,255,255,.72); backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(31,78,140,.12); flex: none;
}
.desk-rail-greet { line-height: 1.5; }
.desk-greet-line { font-family: "SimSun", serif; font-size: 16px; color: #2a2f3a; }
.desk-clock-line { font-family: "SimHei", sans-serif; font-size: 13px; color: #1f4e8c; letter-spacing: .5px; }
.desk-clock-line #desk-clock { font-variant-numeric: tabular-nums; font-weight: bold; margin-right: 10px; }
.desk-date { color: #6a7488; }
.desk-rail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.desk-dirty-flag { color: #d9534f; font-size: 12px; margin-right: 4px; }
/* 保存桌面按钮默认隐藏，有改动（desk.is-dirty）时才显示 */
#desk-save-btn { display: none; }
.desk.is-dirty #desk-save-btn { display: inline-block; }

.desk-surface { position: relative; flex: 1 1 auto; min-height: 480px; padding: 10px; user-select: none; }

.desk-mini-toggle {
    position: absolute; top: 6px; left: 6px; z-index: 15; width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid rgba(31,78,140,.18); background: rgba(255,255,255,.85); color: #1f4e8c; font-size: 11px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(31,78,140,.15);
    transition: box-shadow .15s ease, background-color .15s ease;
}
.desk-mini-toggle:hover { box-shadow: 0 4px 12px rgba(31,78,140,.28); background: #fff; }
.desk-mini-toggle.is-active { background: #1f4e8c; color: #fff; border-color: #1f4e8c; }

.desk-icon {
    position: absolute; width: 104px; padding: 10px 6px 8px; border-radius: 12px; text-align: center;
    text-decoration: none; color: #2a2f3a; background: rgba(255,255,255,.7); box-shadow: 0 1px 4px rgba(31,78,140,.12);
    cursor: grab; touch-action: none; transition: box-shadow .15s ease, transform .15s ease, width .15s ease, height .15s ease, padding .15s ease;
}
.desk-icon.has-color { background: var(--desk-icon-bg, rgba(255,255,255,.7)); }
.desk-icon:hover { box-shadow: 0 4px 14px rgba(31,78,140,.22); }
.desk-icon.dragging { cursor: grabbing; box-shadow: 0 8px 20px rgba(31,78,140,.3); transform: scale(1.04); z-index: 20; }
.desk-icon-face { font-size: 30px; line-height: 1.2; }
.desk-icon-label { font-size: 13px; font-weight: bold; margin-top: 4px; }
.desk-icon-desc { font-size: 10.5px; color: #6a7488; margin-top: 2px; line-height: 1.3; }

/* 迷你模式：图标收缩为只显示标题的小药丸，保留原有 left/top 坐标不重排 */
.icons-mini .desk-icon {
    width: auto; max-width: 150px; padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center;
}
.icons-mini .desk-icon-face, .icons-mini .desk-icon-desc { display: none; }
.icons-mini .desk-icon-label { margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.desk-note {
    position: absolute; width: 168px; height: auto; min-width: 130px; min-height: 120px; max-width: 420px; max-height: 420px;
    padding: 14px 12px 10px; border-radius: 3px 3px 10px 10px; display: flex; flex-direction: column;
    box-shadow: 0 3px 10px rgba(0,0,0,.16), 0 14px 14px -12px rgba(0,0,0,.2);
    cursor: grab; touch-action: none; transform: rotate(0deg); transition: box-shadow .15s ease, transform .1s ease;
    background-clip: padding-box; z-index: 10;
}
.desk-note.dragging { cursor: grabbing; box-shadow: 0 10px 24px rgba(0,0,0,.28); transform: rotate(-1.5deg) scale(1.03); }
.desk-note:nth-child(odd).dragging { transform: rotate(1.2deg) scale(1.03); }
.desk-note::before {
    content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 16px 16px; border-color: transparent transparent rgba(0,0,0,.12) transparent;
}
.desk-note-pin {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px;
    border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9534f 60%, #a33 100%);
    box-shadow: 0 2px 3px rgba(0,0,0,.35); cursor: pointer;
}
.desk-note.is-mini {
    width: 140px !important; height: 32px !important; min-width: 0; min-height: 0; overflow: hidden; cursor: pointer;
}
.desk-note.is-mini .desk-note-body,
.desk-note.is-mini .desk-note-remind,
.desk-note.is-mini .desk-note-save,
.desk-note.is-mini .desk-note-resize,
.desk-note.is-mini .desk-note-images,
.desk-note.is-mini .desk-note-attachments { display: none; }
.desk-note.is-mini::after {
    content: attr(data-mini-text); position: absolute; left: 12px; right: 10px; top: 9px;
    font-size: 12px; color: #2a2f3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.desk-note-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; font-size: 13px; line-height: 1.5; color: #2a2f3a;
    outline: none; word-break: break-word; white-space: pre-wrap; font-family: "Microsoft YaHei", sans-serif;
    cursor: text; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; transition: background-color .15s ease;
}
.desk-note-body:hover, .desk-note-body:focus { background-color: rgba(255,255,255,.45); }
.desk-note-remind { flex: none; margin-top: 8px; font-size: 11px; color: #a33; font-weight: bold; }
.desk-note-remind.is-done { color: #8a8f99; text-decoration: line-through; font-weight: normal; }
.desk-note-resize {
    position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; opacity: .45;
    background:
        linear-gradient(135deg, transparent 0 40%, #2a2f3a 40% 46%, transparent 46% 60%, #2a2f3a 60% 66%, transparent 66%);
}
.desk-note-resize:hover { opacity: .85; }
.desk-note-save {
    display: none; margin-top: 8px; padding: 3px 10px; border: none; border-radius: 5px; cursor: pointer;
    background: rgba(31,78,140,.85); color: #fff; font-size: 11px;
}
.desk-note-save:hover { background: #1f4e8c; }
.desk.is-dirty .desk-note-save { display: inline-block; }

.desk-note-images { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.desk-note-img {
    position: relative; width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
    background: rgba(0,0,0,.06);
}
.desk-note-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.desk-note-img.is-uploading {
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #6b7280;
}
.desk-note-img-del {
    position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; font-size: 11px; line-height: 16px; text-align: center;
    padding: 0; cursor: pointer;
}
.desk-note-img-del:hover { background: rgba(200,30,30,.85); }

.desk-note-attachments { flex: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.desk-note-att-item {
    display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 6px;
    border-radius: 4px; background: rgba(0,0,0,.06); font-size: 12px; color: #2a2f3a; cursor: pointer;
}
.desk-note-att-item:hover { background: rgba(0,0,0,.12); }
.desk-note-att-item img { width: 16px; height: 16px; flex: none; }
.desk-note-att-item span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-note-att-item.is-uploading { color: #6b7280; cursor: default; }
.desk-note-att-del {
    flex: none; width: 14px; height: 14px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.4); color: #fff; font-size: 10px; line-height: 14px; text-align: center;
    padding: 0; cursor: pointer;
}
.desk-note-att-del:hover { background: rgba(200,30,30,.85); }

.desk-menu {
    position: fixed; z-index: 200; min-width: 168px; background: #fff; border: 1px solid #d5d5d5; border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2); padding: 5px;
}
.desk-menu-item {
    display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: none; border-radius: 5px;
    cursor: pointer; font-size: 13px; color: #333;
}
.desk-menu-item:hover { background: #f0f4fa; }
.desk-menu-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px; }
.desk-color-swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid #ccc; cursor: pointer; }
.desk-color-swatch:hover { border-color: #1f4e8c; transform: scale(1.1); }
.desk-color-custom { width: 26px; height: 22px; padding: 0; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; }
.desk-menu-datetime { display: block; width: 100%; margin: 6px 0; padding: 6px 8px; border: 1px solid #ccc; border-radius: 5px; font-size: 13px; box-sizing: border-box; }

.reminder-host {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 300;
    display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.reminder-bubble {
    pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 86vw;
    background: #d9534f; color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.28);
    transform: translateY(-16px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.reminder-bubble.is-in { transform: translateY(0); opacity: 1; }
.reminder-bubble-text { font-size: 13px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.reminder-bubble-close { background: none; border: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; opacity: .85; }
.reminder-bubble-close:hover { opacity: 1; }

@media (max-width: 720px) {
    .desk-rail { padding: 10px 14px; }
    .desk-surface { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; min-height: 0; }
    .desk-icon {
        position: static !important; width: calc(50% - 6px); cursor: default; touch-action: auto;
        padding: 8px 8px 6px;
    }
    .desk-icon.dragging { transform: none; }
    /* 手机端图标已是文档流铺满两列，迷你模式没有意义，隐藏切换按钮并保持原有布局 */
    .desk-mini-toggle { display: none; }
    .icons-mini .desk-icon { width: calc(50% - 6px); padding: 8px 8px 6px; display: block; }
    .icons-mini .desk-icon-face, .icons-mini .desk-icon-desc { display: block; }
    .desk-icon-face { font-size: 22px; line-height: 1.1; }
    .desk-icon-label { font-size: 12px; margin-top: 2px; }
    .desk-icon-desc {
        font-size: 10px; margin-top: 1px; line-height: 1.2;
        display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
        overflow: hidden; text-overflow: ellipsis;
    }
    /* 手机端放弃桌面坐标：便签按文档流排在图标下方，宽度铺满、高度随内容自适应。
       用 relative + left/top:auto（而非 static）忽略桌面坐标的同时，仍为便签内部
       图钉 / 拉伸柄 / 折角等绝对定位子元素保留正确的定位基准，避免它们跑位到 desk-surface 左上角。 */
    .desk-note {
        position: relative !important; left: auto !important; top: auto !important;
        width: 100%; max-width: none; height: auto !important;
        margin: 0 0 12px; cursor: default; touch-action: auto; transform: none !important;
    }
    .desk-note.dragging { transform: none !important; box-shadow: 0 3px 10px rgba(0,0,0,.16), 0 14px 14px -12px rgba(0,0,0,.2); }
    .desk-note-resize { display: none; }
}

/* ---- 网址书签：管理页 bookmarks.php ---- */
.bm-add-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.bm-add-form .btn { margin-bottom: 1px; }
.bm-hint { font-size: 12px; color: #6a7488; margin: 4px 0 0; }
.bm-hint.is-err { color: #d9534f; }
.bm-checkbox-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2a2f3a; cursor: pointer; user-select: none; }
.bm-checkbox-line input { cursor: pointer; }
.bm-checkbox-inline { margin: 0 8px; }
#bm-add-panel .bm-checkbox-line { margin: 8px 0 12px; }
.bm-perm-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px 10px; }
.bm-perm-grade-group { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e2e6ee; max-height: 180px; overflow-y: auto; }
.bm-perm-grade-group:last-child { border-bottom: none; }
.bm-perm-grade-head { font-size: 12px; color: #6a7488; margin-bottom: 4px; }
.bm-cat-add { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.bm-cat-add input { flex: 1; max-width: 280px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 13px; }
.bm-cat-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bm-cat-card { border: 1px solid #e2e6ee; border-radius: 8px; padding: 12px 14px; background: #fafbfd; cursor: grab; }
.bm-cat-card.is-dragging { opacity: .4; }
.bm-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bm-cat-name { font-weight: bold; font-size: 14px; flex: 1; }
.bm-item-list { display: flex; flex-direction: column; gap: 6px; min-height: 8px; }
.bm-item-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff;
    border: 1px solid #eee; border-radius: 6px; cursor: grab; flex-wrap: wrap;
}
.bm-item-row.is-dragging { opacity: .4; }
.bm-item-title { flex: 1; font-size: 13px; color: #1f4e8c; text-decoration: none; word-break: break-all; }
.bm-item-title:hover { text-decoration: underline; }

/* ---- 网址书签：桌面浮动小窗 bookmark_widget.js ---- */
.bm-widget {
    position: fixed; top: 96px; right: 18px; z-index: 95; width: 260px; max-height: 70vh;
    background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(31,78,140,.22); display: flex; flex-direction: column; overflow: hidden;
}
.bm-widget-head {
    display: flex; align-items: center; gap: 6px; padding: 3px 5px; background: #1f4e8c; color: #fff;
    cursor: grab; flex: none;
}
.bm-widget-head-title { flex: 1; font-size: 13px; font-weight: bold; }
.bm-widget-head-btn { background: none; border: none; color: #fff; opacity: .85; cursor: pointer; font-size: 13px; padding: 2px 4px; }
.bm-widget-head-btn:hover { opacity: 1; }
.bm-widget-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px; }
.bm-widget.is-mini .bm-widget-body { display: none; }
.bm-widget.is-mini { max-height: none; width: auto; }
.bm-widget-empty { font-size: 12px; color: #6a7488; }
.bm-widget-empty a { color: #1f4e8c; }
.bm-widget-group { margin-bottom: 10px; }
.bm-widget-group-title { font-size: 11.5px; color: #8a93a6; font-weight: bold; margin-bottom: 4px; }
/* 书签列表左右排列（flex-wrap），而非逐条独占一行；每条按内容宽度排布，超出自动换行 */
.bm-widget-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; min-height: 6px; }
.bm-widget-row {
    display: inline-block; font-size: 12.5px; color: #2a2f3a; text-decoration: none; padding: 5px 9px;
    border-radius: 5px; background: #f0f4fa; cursor: grab; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 100%;
}
.bm-widget-row:hover { background: #e0e9f7; }
.bm-widget-row.is-dragging { display: none; }
.bm-drop-placeholder {
    border: 2px dashed #7ea6df; border-radius: 6px; background: rgba(126,166,223,.08); box-sizing: border-box; flex: none;
}

@media (max-width: 720px) {
    .bm-widget {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 40vh;
        border-radius: 12px 12px 0 0;
    }
    .bm-widget-head { cursor: default; }
    .bm-widget-row { cursor: default; }
}

/* ---- 网址书签：管理页 bookmarks.php v3（按分类分组，标题滚动吸顶，跨分类拖拽） ---- */
.bm-page-body { padding: 20px 24px; max-width: 1100px; margin: 0 auto; }
.bm-toolbar { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; }

/* 默认/简约 模式分段开关：胶囊容器 + 滑动高亮，跟旁边的实心按钮区分开，明确这是「态」而非「动作」 */
.bm-mode-toggle {
    display: inline-flex; margin-left: auto; background: #e8ecf3; border-radius: 999px; padding: 3px; gap: 2px;
}
.bm-mode-btn {
    border: none; background: none; padding: 6px 14px; border-radius: 999px; font-size: 12.5px;
    color: #6a7488; cursor: pointer; font-weight: 600; letter-spacing: .2px; transition: background .15s, color .15s;
}
.bm-mode-btn:hover { color: #2a2f3a; }
.bm-mode-btn.active { background: #1f4e8c; color: #fff; box-shadow: 0 2px 6px rgba(31,78,140,.35); }
.bm-mode-btn.active:hover { color: #fff; }

/* 管理开关：不勾选时卡片右上角的管理按钮组（置顶/编辑/删除）不显示，勾选后常显，方便批量整理 */
.bm-manage-toggle { flex: none; }

.bm-section { margin-bottom: 6px; }
.bm-section.is-dragging { opacity: .4; }
.bm-section-header {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
    background: #fff; border-bottom: 1px solid #e2e6ee; padding: 10px 4px; cursor: grab; border-radius: 7px;
}
.bm-section-collapse-btn {
    background: none; border: none; color: #6a7488; font-size: 12px; cursor: pointer; padding: 2px 4px;
    flex: none;
}
.bm-section-title { margin: 0; font-size: 16px; color: #1a2036; flex: none; }
.bm-section-count { color: #8a93a6; font-size: 12px; flex: 1; }
.bm-section-desk-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6a7488; flex: none; cursor: pointer; }
.bm-section-action-btn {
    background: none; border: none; color: #8a93a6; font-size: 16px; cursor: pointer; padding: 3px 6px;
    border-radius: 4px; flex: none; font-weight: bold;
}
.bm-section-action-btn:hover { background: #eef1f6; color: #2a2f3a; }
.bm-section-action-btn.danger:hover { background: #d9534f; color: #fff; }
.bm-section-body { padding: 26px 4px 18px; }
.bm-section-body.is-drop-target { background: #eaf1fb; border-radius: 8px; }

.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; transition: background .1s; border-radius: 8px; }
.bm-grid.is-drop-target { background: #eaf1fb; outline: 2px dashed #7ea6df; outline-offset: 4px; }
.bm-card {
    position: relative; background: #fff; border: 1px solid #e8ecf3; border-radius: 12px;
    padding: 3px; text-align: left; cursor: pointer; text-decoration: none; color: inherit;
    display: flex; flex-direction: row; align-items: center; gap: 9px;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.bm-card:hover { box-shadow: 0 6px 16px rgba(31,78,140,.14); transform: translateY(-2px); border-color: #cfe0ff; }
.bm-card.is-dragging { display: none; }
.bm-card.is-pinned { border-color: #f0c14b; background: #fffdf5; }
.bm-card-icon {
    width: 38px; height: 38px; border-radius: 9px; background: #eef3fb; display: flex;
    align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: #1f4e8c;
    overflow: hidden; flex: none;
}
.bm-card-icon img { width: 24px; height: 24px; object-fit: contain; }
.bm-card-title {
    flex: 1; min-width: 0; font-size: 12px; color: #2a2f3a; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-card-actions {
    position: absolute; top: 7px; right: 6px; transform: translateY(calc(-100% - 6px));
    z-index: 2; display: none; gap: 3px;
}
/* 「管理」复选框默认不勾选：置顶/编辑/删除按钮组完全不出现（连 hover 也不触发），
   避免误触；勾选后恢复 hover 显示管理按钮组，方便整理书签 */
.bm-manage-mode .bm-card:hover .bm-card-actions { display: flex; }
.bm-card-btn {
    background: #fff; border: 1px solid #e2e6ee; border-radius: 5px; font-size: 11px;
    color: #5a6379; cursor: pointer; line-height: 1.5; padding: 2px 5px; flex: none;
    box-shadow: 0 2px 5px rgba(20,26,40,.15);
}
.bm-card-btn:hover { background: #1f4e8c; color: #fff; border-color: #1f4e8c; }
.bm-card-btn.danger:hover { background: #d9534f; color: #fff; border-color: #d9534f; }
.bm-card-btn.active { background: #f0c14b; color: #fff; border-color: #f0c14b; }
.bm-empty { color: #8a93a6; font-size: 14px; text-align: center; padding: 70px 0; margin: 0; }
.bm-tooltip {
    position: fixed; display: none; z-index: 300; background: #2a2f3a; color: #fff; font-size: 12px;
    line-height: 1.4; padding: 5px 9px; border-radius: 6px; max-width: 260px; word-break: break-all;
    box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: none;
}

/* ---- 简约模式：书签多了之后按浏览器收藏夹的密度显示，卡片缩成自适应宽度的标签，紧密换行排列。
   只覆盖尺寸/间距/字号，不改变任何 DOM 结构或 JS 交互（拖拽/tooltip/hover 操作按钮原样工作）。 ---- */
.bm-compact-mode .bm-section-body { padding: 16px 4px 10px; }
.bm-compact-mode .bm-grid { display: flex; flex-flow: row wrap; gap: 6px; }
.bm-compact-mode .bm-card {
    flex: none; width: auto; max-width: 200px; padding: 4px 8px 4px 5px; border-radius: 7px; gap: 6px;
}
.bm-compact-mode .bm-card:hover { transform: none; }
.bm-compact-mode .bm-card-icon { width: 20px; height: 20px; border-radius: 5px; font-size: 10.5px; }
.bm-compact-mode .bm-card-icon img { width: 13px; height: 13px; }
.bm-compact-mode .bm-card-title { font-size: 12px; max-width: 150px; }
/* 卡片矮了放不下悬浮在上方的操作条，改成贴在卡片右侧、渐隐叠在标题上，避免遮住上一行 */
.bm-compact-mode .bm-card-actions {
    position: absolute; inset: 0 0 0 auto; transform: none; align-items: center;
    padding-right: 4px; border-radius: 0 7px 7px 0; background: linear-gradient(to left, #fff 60%, transparent);
}
.bm-compact-mode .bm-card.is-pinned .bm-card-actions { background: linear-gradient(to left, #fffdf5 60%, transparent); }
/* 分类标题条也跟着收紧：书签本身变薄变小后，原尺寸的标题条比例上显得又高又粗 */
.bm-compact-mode .bm-section-header { padding: 5px 4px; gap: 6px; }
.bm-compact-mode .bm-section-title { font-size: 13.5px; }
.bm-compact-mode .bm-section-action-btn { font-size: 13px; padding: 2px 5px; }
.bm-compact-mode .bm-section-collapse-btn { font-size: 10.5px; }
.bm-compact-mode .bm-section-count, .bm-compact-mode .bm-section-desk-label { font-size: 11px; }

@media (max-width: 720px) {
    .bm-page-body { padding: 14px; }
    .bm-toolbar { flex-wrap: wrap; }
    .bm-mode-toggle { margin-left: 0; }
    .bm-section-header { flex-wrap: wrap; }
    .bm-section-desk-label { order: 5; width: 100%; margin-left: 26px; }
    .bm-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
}

/* ---- 网址书签：新增/编辑弹窗（bookmarks.php 共用模态框样式） ---- */
.bm-modal-overlay { position: fixed; inset: 0; background: rgba(20,26,40,.4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bm-modal { background: #fff; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.2); width: 420px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; }
.bm-modal-sm { width: 320px; }
.bm-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.bm-modal-header span { font-size: 15px; font-weight: bold; color: #1a2036; }
.bm-modal-close { background: none; border: none; font-size: 22px; color: #8a93a6; cursor: pointer; line-height: 1; padding: 0; }
.bm-modal-close:hover { color: #2a2f3a; }
.bm-modal-body { padding: 16px 20px 6px; }
.bm-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }

/* ---- Remixicon 图标字体（fonts/remixicon.css 由各页面单独引入） ----
   全站图标统一走 Remixicon，替代原先的 emoji 字符图标：emoji 由各操作系统
   自带字体渲染，Windows/macOS/Android 三端字形和着色都不同，且部分字符在
   旧版 Chrome/Edge 上退化成方框。图标字体由站点自己提供，各浏览器一致。
   注意：服务端 PDF 导出（export_pdf.php 内联 style.css 交给 dompdf）不加载
   本图标字体，故 render_question_graded/grading 的对错标记仍用 ✓/✗ 文本。 */
[class^="ri-"], [class*=" ri-"] {
    vertical-align: -.125em;   /* 图标基线与中文文本对齐，避免整行文字被顶高 */
    line-height: 1;
}
/* 图标按钮内只有图标、没有文字时，去掉可能的多余间距 */
button > [class^="ri-"]:only-child, a > [class^="ri-"]:only-child { vertical-align: -.1em; }

/* ---- 年级-班级多选器 includes/class_grade_picker.php / class_grade_picker.js ---- */
.cgp-body { display: flex; gap: 12px; border: 1px solid #e2e6ee; border-radius: 6px; overflow: hidden; }
.cgp-grades {
    display: flex; flex-direction: column; gap: 2px; width: 120px; flex-shrink: 0;
    max-height: 260px; overflow-y: auto; padding: 6px; background: #f5f7fb; border-right: 1px solid #e2e6ee;
}
.cgp-grade-btn {
    padding: 6px 8px; border: none; border-radius: 4px; background: transparent; color: #333;
    text-align: left; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.cgp-grade-btn:hover { background: #e9edf6; }
.cgp-grade-btn.active { background: #1f4e8c; color: #fff; }
.cgp-grade-badge { font-size: 12px; opacity: .8; }
.cgp-classes { flex: 1; min-width: 0; max-height: 260px; overflow-y: auto; padding: 8px; }
.cgp-class-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px 10px; }
.cgp-select-all { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6a7488; cursor: pointer; user-select: none; margin-bottom: 2px; }
.cgp-class-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2a2f3a; cursor: pointer; user-select: none; }
.cgp-class-line input, .cgp-select-all input { cursor: pointer; }
.cgp-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cgp-summary { font-size: 12px; color: #6a7488; }
.cgp-count { font-weight: bold; color: #1f4e8c; }
@media (max-width: 640px) {
    .cgp-body { flex-direction: column; }
    .cgp-grades { flex-direction: row; flex-wrap: wrap; width: auto; max-height: none; border-right: none; border-bottom: 1px solid #e2e6ee; }
}
.cgp-signin-grade-heading { flex-basis: 100%; font-size: 13px; font-weight: bold; color: #1f4e8c; margin: 10px 0 2px; }
.cgp-signin-grade-heading:first-child { margin-top: 0; }

/* ---------- 作业登记 homework.php ---------- */
.hw-panel { background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.hw-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hw-course { font-size: 18px; font-weight: bold; }
.hw-owner { font-size: 13px; color: #666; }
.hw-classes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hw-class-pill { padding: 4px 12px; border-radius: 14px; font-size: 13px; border: 2px solid #888; background: #fff; color: #333; cursor: pointer; }
.hw-class-pill.active { color: #fff; cursor: default; }
span.hw-class-pill { cursor: default; }
.hw-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hw-toolbar label { font-size: 13px; color: #555; }
.hw-toolbar select { padding: 5px 6px; min-width: 150px; }
.hw-check { display: inline-flex; align-items: center; gap: 4px; }
.hw-progress { font-size: 13px; color: #1f4e8c; }
.hw-tabs { padding-left: 0; margin-bottom: 14px; }
.hw-modes { display: flex; gap: 6px; background: #f2f2f7; border-radius: 8px; padding: 4px; margin-bottom: 14px; }
.hw-modes button { flex: 1; border: none; background: transparent; padding: 7px 0; border-radius: 6px; font-size: 14px; color: #555; cursor: pointer; }
.hw-modes button.active { background: #fff; color: #1f4e8c; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* 名单卡片（方案 A 色条）：--hwu 是放大系数，普通 1，「放大名单」开启后 1.5，卡片尺寸与字号全部按它缩放 */
.hw-panel { --hwu: 1; }
.hw-panel.hw-big { --hwu: 1.5; }
.hw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--hwu) * 150px), 1fr)); gap: calc(var(--hwu) * 8px); }
.hw-tag { display: flex; align-items: center; gap: calc(var(--hwu) * 8px); min-width: 0; padding: calc(var(--hwu) * 9px) calc(var(--hwu) * 10px); border: 1px solid #d3d8de; border-left: calc(var(--hwu) * 5px) solid #b4bcc6; border-radius: 4px; background: #fff; font-size: calc(var(--hwu) * 15px); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; line-height: 1.4; transition: background .2s, border-color .2s; }
.hw-tag.done { background: #dcecd0; border-color: #b4d29f; border-left-color: var(--xz-ink, #3d7a2a); }
.hw-tag-no { flex: none; color: #8a8f98; font-size: .72em; }
/* 姓名优先完整显示（最多占卡片 75%），右侧内容占剩余宽度、右对齐，放不下就截断内容（悬停可看全文） */
.hw-tag-name { flex: 0 0 auto; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 右侧内容：不加底色和内边距，直接显示深色粗体（区域小、内容多时更省地方） */
.hw-tag-score { flex: 1 1 0; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xz-ink, #2f6b1f); font-weight: bold; font-size: .95em; }
/* 未登记的占位用空心圆，避免和以“一”开头的标记混淆；颜色加深到看得见 */
.hw-tag-score.empty { color: #a3a9b2; font-weight: normal; }
.hw-group { border: 1px solid #eef0f4; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.hw-group:nth-child(even) { background: #f7f9fc; }
.hw-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hw-group-title { font-size: 16px; font-weight: bold; color: #1f4e8c; }
.hw-group-rate { font-size: 13px; color: #666; margin-right: auto; }
.hw-legend { font-size: 12px; color: #888; margin: 12px 0 8px; }
.hw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hw-empty { color: #888; text-align: center; padding: 24px 0; font-size: 14px; }
.hw-hint { color: #888; font-size: 12px; margin: 4px 0 0; }
.hw-cell-box { width: 420px; }
.hw-cell-newgroup input { flex: 1; padding: 7px 8px; border: 1px solid #ccd; border-radius: 4px; box-sizing: border-box; min-width: 0; }
.hw-cell-newgroup { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.hw-cell-current { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.hw-cell-curtext { margin-right: auto; color: #333; }
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; }
.hw-chip { min-width: 58px; padding: 6px 10px; border: 1px solid #cfd6e4; border-radius: 14px; background: #fff; color: #333; font-size: 13px; cursor: pointer; }
.hw-chip:hover { background: #f0f4fa; }
.hw-chip.active { background: #1f4e8c; border-color: #1f4e8c; color: #fff; cursor: default; }
.hw-confirm-bar { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; background: #fff8e1; border: 1px solid #f0d890; border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.hw-confirm-btns { display: inline-flex; gap: 6px; }
.hw-ops-row { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.hw-input-box { width: 360px; }
.hw-input-box input { width: 100%; box-sizing: border-box; padding: 10px; font-size: 18px; border: 1px solid #ccd; border-radius: 4px; }
.hw-cards-hint { grid-column: 1 / -1; margin: 0; }
/* 「放大名单」开关（右上角） */
.hw-big-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: bold; color: #333; cursor: pointer; padding: 4px 0; }
.hw-big-toggle .hw-track { width: 44px; height: 24px; border: 1px solid #9aa3ad; background: #e6e8eb; position: relative; transition: background .2s, border-color .2s; border-radius: 12px; }
.hw-big-toggle .hw-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border: 1px solid #9aa3ad; border-radius: 50%; transition: transform .2s; }
.hw-big-toggle[aria-checked="true"] .hw-track { background: var(--xz-ink, #1f4e8c); border-color: var(--xz-ink, #1f4e8c); }
.hw-big-toggle[aria-checked="true"] .hw-knob { border-color: #fff; }
.hw-big-toggle[aria-checked="true"] .hw-knob { transform: translateX(20px); }
.hw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hw-card { background: #f4f7fb; border-radius: 8px; padding: 12px; text-align: center; }
.hw-card-val { font-size: 22px; font-weight: bold; color: #1f4e8c; }
.hw-card-label { font-size: 12px; color: #666; margin-top: 4px; }
.hw-chart { width: 100%; height: 260px; margin-bottom: 8px; }
.hw-h { font-size: 15px; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.hw-table-wrap { overflow-x: auto; }
.hw-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.hw-table th, .hw-table td { border: 1px solid #e5e8ee; padding: 6px 10px; text-align: center; white-space: nowrap; }
.hw-table th { background: #f4f7fb; font-weight: normal; color: #555; }
.hw-th-asg { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.hw-row-miss { background: #fff8f6; }
.hw-miss { color: #c0392b; font-weight: bold; }
.hw-cell-no { color: #bbb; }
.hw-cell-yes { color: #3d6a0a; background: #f1fae6; }
@media (max-width: 600px) {
    .hw-grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--hwu) * 136px), 1fr)); }
    .hw-panel { padding: 12px; }
}

/* ---- 作业登记「匿名操作」---- */
.hw-guest-body { max-width: 1100px; margin: 0 auto; }
.hw-share-box { width: 480px; }
.hw-share-switch { display: flex; align-items: center; gap: 8px; font-weight: bold; margin: 10px 0 12px; font-size: 14px; }
/* .form-row label 默认是黄底块，单选项/开关的 label 需要覆盖掉 */
.form-row label.hw-check { display: flex; align-items: center; gap: 6px; background: none; padding: 0; border-radius: 0; margin: 4px 0; font-size: 13px; color: #333; }
.hw-share-eg { font-family: Consolas, monospace; color: #666; }
#hw-share-slug { width: 9em; padding: 4px 6px; border: 1px solid #ccd; border-radius: 4px; }
#hw-share-slug:disabled { background: #f2f2f2; }
.hw-share-pass { display: flex; gap: 8px; align-items: center; }
.hw-share-pass input { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid #ccd; border-radius: 4px; box-sizing: border-box; font-family: Consolas, monospace; }
.hw-share-result { margin-top: 12px; padding: 10px; background: #f4f7fb; border: 1px solid #d6e0ee; border-radius: 6px; }
.hw-share-linkrow { display: flex; gap: 8px; }
.hw-share-linkrow input { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid #ccd; border-radius: 4px; box-sizing: border-box; font-size: 13px; }
.hw-share-warn { color: #b03027; margin-top: 8px; }
@media (max-width: 600px) {
    .hw-share-box { width: auto; }
    .hw-share-linkrow { flex-wrap: wrap; }
}
/* 匿名页顶部的模式提示条；教师弹窗里的风险说明块 */
.hw-guest-banner { background: #fff4d6; border: 1px solid #e6c870; border-left: 5px solid #c99a1c; color: #5a4300; padding: 10px 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.6; border-radius: 4px; }
.hw-share-notice { background: #fff4d6; border: 1px solid #e6c870; color: #5a4300; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; line-height: 1.6; border-radius: 4px; }
/* 匿名操作：提示字号与对比度（评审：12px 灰字偏淡偏小） */
.hw-guest-banner { font-size: 15px; }
.hw-share-notice { font-size: 14px; }
.hw-share-notice > div { margin: 3px 0; }
.hw-share-box .hw-hint { font-size: 13px; color: #555; }
/* 匿名操作弹窗：三行说明行距放宽，“链接就是钥匙”这行的标签用红色强调 */
.hw-share-notice > div { margin: 5px 0; line-height: 1.7; }
.hw-share-notice > div:last-child strong { color: #b03027; }
/* 弹窗里的错误/警告：优先级要高于上面的 .hw-share-box .hw-hint（灰色提示字），否则红色会被盖掉 */
.hw-share-box .hw-share-warn { color: #b03027; font-weight: 600; background: #fdecea; border: 1px solid #f0b4ae; border-radius: 4px; padding: 8px 10px; margin-top: 10px; line-height: 1.6; overflow-wrap: anywhere; word-break: normal; }
/* 匿名操作弹窗：自定义名输入框撑满一行（与密码框成对）；示例里名字与密码用两种颜色区分 */
.hw-share-box #hw-share-slug { width: 100%; box-sizing: border-box; padding: 7px 8px; }
.hw-eg-name { color: #1f4e8c; font-weight: bold; }
.hw-eg-pass { color: #b03027; font-weight: bold; }