/* ===== 基础重置 ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    padding: 20px;
    background-color: #f5f5f5;
    overflow: auto;
}

/* ===== 教室视图：锁定一屏，网格按剩余高度自适应 ===== */
#classroom-view {
    height: calc(100vh - 40px);   /* 减去 body 上下 padding(20*2)，正好铺满浏览器视口 */
    display: flex;
    flex-direction: column;
    overflow: hidden;             /* 不滚动：头部固定，网格占满剩余高度 */
}

/* ===== 头部 ===== */
.header {
    text-align: center;
    margin-bottom: 4px;
    flex: 0 0 auto;               /* 头部不压缩、不参与均分 */
}

.mode-switch {
    margin-bottom: 20px;
    text-align: center;
}

.mode-switch button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    margin: 0 10px;
}

.mode-switch button.active {
    background-color: #4CAF50;
    color: white;
}

.mode-box, .category-box {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 4px 8px;
    background-color: #fafafa;
}

.mode-box button, .category-box button {
    padding: 7px 14px;
    min-height: 40px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    transition: all 0.2s;
    white-space: nowrap;
}

.mode-box button.active {
    background-color: #4CAF50;
    color: white;
}

.category-box button.active {
    background-color: #2196F3;
    color: white;
}

/* ===== 教室/座位网格（flex 行容器：卡片区 + 侧栏并排） ===== */
/* 整体容器：头部之外全部给 classroom-body */
.classroom-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    flex: 1 1 auto;       /* 在 #classroom-view 纵向 flex 中占满工具栏以下的剩余高度 */
    min-height: 0;        /* 允许在父 flex column 内收缩 */
    gap: 0;
}

.classroom {
    display: grid;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-right: 0;
    flex: 1 1 auto;       /* 占满侧栏之外的剩余宽度 */
    min-height: 0;
    min-width: 0;         /* 允许 grid 在 flex 容器内被挤压 */
    align-content: stretch;
}

/* 小组模式卡片：在锁定一屏的网格内紧凑自适应 */
.classroom .group-card {
    padding: 10px 8px;
    margin: 0;
    min-height: 72px;              /* 保证小组卡片有足够高度容纳 +/-10 按钮 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* 让分数按钮区(flex:1)占满剩余高度，避免 space-evenly 把按钮挤成细线 */
}

.seat {
    padding: 15px 12px;
    background-color: #fafafa;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 1px dashed #ddd;
}

.student {
    padding: 6px 4px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
    min-width: 0;
    min-height: 0;          /* 行高由网格 1fr 均分决定，不再用固定 min-height 撑高 */
    overflow: hidden;       /* 内容超出不撑破卡片 */
    font-size: 13px;
    line-height: 1.25;      /* 覆盖 body 的 1.6，压缩卡片内最小内容高度，防止按钮被裁掉 */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;   /* 高屏(4K)时姓名与按钮均匀分布，触控区域更大 */
}

.student.highlight {
    transform: scale(1.05);
}

.student-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    margin-bottom: 1px;
    width: 100%;
}

.student-name {
    font-weight: bold;
    font-size: 14px;
    line-height: 1.2;
    word-wrap: break-word;
    white-space: nowrap;      /* 姓名+职务徽章保持同一行，不换行挤占按钮空间 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-duty {
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 2px 5px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

.student-score {
    font-size: 17px;
    line-height: 1.2;
}

.score-buttons {
    display: grid;
    /* 第一列 +10/-10 窄列，第二列文字按钮（加排名分/标为缺席）宽列 */
    grid-template-columns: minmax(38px, 0.72fr) 1.28fr;
    /* 弹性填充卡片剩余高度：行高随空间伸缩，内容不再溢出卡片边界 */
    flex: 1 1 0;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
    gap: 3px;
    margin-top: 3px;
    width: 100%;
    padding: 0 4px;
}

/* 个人模式三列：+10/-10 | 文字按钮 | 小/大（竖排两个如厕按钮） */
.score-buttons.score-buttons-3 {
    grid-template-columns: minmax(34px, 0.62fr) 1.26fr minmax(26px, 0.46fr);
}

/* 小组模式只有 +/-10 两个按钮：等宽，保持美观 */
.group-card .score-buttons {
    grid-template-columns: 1fr 1fr;
    min-height: 40px;                 /* 防止按钮区被压成一条线 */
    grid-auto-rows: minmax(34px, 1fr);/* 行高下限，保证按钮可读 */
}
.group-card .score-buttons button {
    min-height: 34px;
    font-size: 14px;
    font-weight: bold;
}

/* 如厕按钮：小=浅蓝，大=深蓝 */
.score-buttons .break-btn {
    padding: 2px 0;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.25;
    min-height: 0;
    cursor: pointer;
    color: #fff;
    transition: transform 0.2s;
}
.break-small { background-color: #4fc3f7; }
.break-large { background-color: #0288d1; }
.score-buttons .break-btn:hover { transform: scale(1.06); }

/* 离开计时文字（🚽卡片） */
.break-elapsed {
    font-size: 11px;
    font-weight: bold;
    color: #0277bd;
    line-height: 1.2;
    margin: 1px 0;
}

/* 马桶图标上的 小/大 角标 */
.break-tag {
    display: inline-block;
    margin-left: 2px;
    font-size: 11px;
    background: #0288d1;
    color: #fff;
    border-radius: 8px;
    padding: 0 5px;
}

.score-buttons button {
    padding: 3px 4px;
    margin: 0;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.25;
    min-width: 0;
    min-height: 0;          /* 高度交给弹性行控制，空间不足时随行压缩而非溢出 */
    transition: transform 0.2s;
}

.score-buttons button strong {
    font-size: 12px;
}

.score-buttons button:hover {
    transform: scale(1.05);
}

.student-rank {
    font-size: 11px;
    color: #666;
}

.add-score {
    background-color: #4CAF50;
    color: white;
}

.subtract-score {
    background-color: #f44336;
    color: white;
}

/* ===== 通用按钮 ===== */
.export-button {
    padding: 10px 20px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.export-button:hover {
    background-color: #1976D2;
}

.random-call-button {
    padding: 10px 20px;
    background-color: #FF4081;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.random-call-button:hover {
    background-color: #F50057;
}

/* ===== 点名高亮与动画 ===== */
.student.called {
    z-index: 100;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    border: 4px solid #FF4081;
    background-color: rgba(255, 64, 129, 0.1);
    transform: scale(1.2);
    animation: pulse 2s infinite;
    transition: all 0.5s ease;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 64, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 64, 129, 0);
    }
}

.classroom.calling .student:not(.called) {
    filter: grayscale(1) brightness(0.8);
    opacity: 0.6;
    transition: all 0.5s ease;
}

.classroom.calling .student:not(.called):hover {
    opacity: 0.7;
}

.classroom.calling .student.called {
    filter: none;
    opacity: 1;
}

.shuffle {
    position: absolute;
    animation: shuffleAnimation 1s ease-in-out infinite;
}

@keyframes shuffleAnimation {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, -10px);
    }
    50% {
        transform: translate(-15px, 15px);
    }
    75% {
        transform: translate(10px, -20px);
    }
}

.flip {
    animation: flipAnimation 0.5s ease-out forwards;
}

@keyframes flipAnimation {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.seat.drop-target {
    border: 1px dashed #4CAF50;
    background-color: #eaffea;
    color: #4CAF50;
}

.student.selected {
    outline: 3px solid #4CAF50;
}

/* ===== 小组卡片 ===== */
.group-card {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.3s ease;
    margin: 8px;
    position: relative;
}

.group-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.group-average {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #4CAF50;
}

.group-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
}

.group-member {
    text-align: center;
}

.group-member-name {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
}

.group-member-score {
    font-size: 14px;
    color: #666;
}

/* ===== 点名列表：浮层（点「名单」按钮弹出，固定定位不占卡片高度） ===== */
.called-list-container {
    display: none;
    position: fixed;
    z-index: 8000;
    width: min(400px, 92vw);
    max-height: 48vh;
    overflow: auto;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.22);
    padding: 10px 14px;
}
.called-list-container.open { display: block; }

.called-list-header {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    border-bottom: 2px solid #FF4081;
    padding-bottom: 3px;
}

.called-list-content {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

/* ===== 值日显示 ===== */
.duty-container {
    margin: 10px auto 20px;
    max-width: 800px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 12px 15px;
    font-size: 14px;
    color: #333;
}

.duty-container strong {
    color: #795548;
}

/* ===== 右侧课表栏：flex 固定列（不是 fixed 浮层，不会遮挡卡片按钮） ===== */
.course-sidebar {
    flex: 0 0 80px;
    width: 80px;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    padding: 8px 6px;
    box-sizing: border-box;
    z-index: 500;
    align-self: stretch;
    overflow: hidden;
}

.course-sidebar-title {
    font-size: 13px;
    font-weight: bold;
    color: #444;
    text-align: center;
    margin-bottom: 4px;
    flex: 0 0 auto;
    white-space: nowrap;
}

#course-sidebar-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    justify-content: space-between;
}

.course-item {
    text-align: center;
    border-radius: 8px;
    padding: 4px 1px;
    margin-bottom: 3px;
    background: #f5f5f5;
    border: 2px solid transparent;
    transition: all 0.3s;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-item-time {
    font-size: 9px;
    color: #777;
    line-height: 1.1;
}

.course-item-subject {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
}

.course-item.current {
    background: #FFF3CD;
    border-color: #FFB300;
    box-shadow: 0 0 10px rgba(255, 179, 0, 0.55);
}

.course-item.current .course-item-subject {
    color: #E65100;
}

.course-item.past {
    opacity: 0.38;
}

.course-expand-btn {
    margin: 0 0 6px;
    border: none;
    background: #2196F3;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.course-expand-btn:hover {
    background: #1e88e5;
}

/* 移动端课表悬浮按钮 */
.course-fab {
    position: fixed;
    right: 10px;
    top: 14px;
    z-index: 500;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #2196F3;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

/* ===== 完整课程表模态 ===== */
.course-tabs {
    display: flex;
    gap: 8px;
}

.course-tab {
    border: 1px solid #ccc;
    background: #f7f7f7;
    color: #444;
    border-radius: 6px;
    padding: 8px 22px;
    font-size: 16px;
    cursor: pointer;
}

.course-tab.active {
    background: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.course-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 16px;
}

.course-table th,
.course-table td {
    border: 1px solid #d5d5d5;
    padding: 8px 10px;
    vertical-align: top;
    text-align: center;
    min-width: 110px;
}

.course-table th {
    background: #f0f3f7;
    font-size: 17px;
}

.course-table th.today,
.course-table td.today {
    background: #FFF8E1;
}

.course-table .course-time-cell {
    color: #555;
    white-space: nowrap;
    font-size: 14px;
}

.course-table .current-row td {
    background: #FFF3CD;
}

.course-table .cell-subject {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 4px;
}

.course-table .cell-detail {
    font-size: 16px;
    color: #333;
    white-space: normal;
    text-align: left;
    word-break: break-word;
    line-height: 1.6;
}

/* 作业/授课内容分层：作业深色加粗带图标，授课内容灰色弱化 */
.detail-homework {
    font-weight: bold;
    color: #1a1a1a;
    margin-top: 3px;
}
.detail-content {
    color: #666;
}
.detail-line {
    color: #333;
}

/* 科目顺序视图 */
.subject-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subject-block {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.subject-block-title {
    background: #eef3f8;
    font-weight: bold;
    font-size: 19px;
    padding: 10px 16px;
    color: #2c4a63;
}

.subject-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
}

.subject-day {
    flex: 1 1 200px;
    min-width: 200px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fcfcfc;
}

.subject-day.is-today {
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33,150,243,.22);
    background: #f5faff;
}

.subject-day-label {
    font-weight: bold;
    font-size: 15px;
    color: #2196F3;
    margin-bottom: 5px;
}

.subject-day-content {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.7;
    color: #333;
}

/* ===== 顶栏右侧控件：不再需要 has-course 补偿（侧栏已是 flex 真实列占位） ===== */

.class-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

.class-select-wrap select {
    padding: 5px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}

.logout-button {
    padding: 6px 14px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.logout-button:hover {
    background-color: #d32f2f;
}

/* ===== 登录/注册卡片 ===== */
.login-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 80vh;
    padding: 20px;
}

/* ===== 公开课入口 ===== */
.open-class-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 5px 18px;
    margin: 4px auto 0;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 计分板内的公开课入口栏默认隐藏（少用，把垂直空间让给学生卡片）；登录页的同名栏不受影响 */
#classroom-view .open-class-bar {
    display: none;
}

.open-class-title {
    font-weight: bold;
    color: #444;
    font-size: 16px;
}

.open-class-link {
    display: inline-block;
    background: #4a90d9;
    color: #fff;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 6px;
    font-size: 14px;
    transition: background 0.2s;
}

.open-class-link:hover {
    background: #3a7bc0;
}

.login-layout {
    display: flex;
    gap: 30px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    width: 100%;
}

.login-card {
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 30px 28px;
}

.login-card h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

.login-card input:focus {
    border-color: #4CAF50;
}

.login-card label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.login-card button[type="submit"] {
    padding: 10px;
    font-size: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
}

.login-card button[type="submit"]:hover {
    background-color: #43A047;
}

.login-card .switch-link {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: #2196F3;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.login-error {
    color: #f44336;
    font-size: 13px;
    text-align: center;
    min-height: 18px;
}

/* ===== 无座位表提示 ===== */
.no-config-view {
    max-width: 600px;
    margin: 80px auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    padding: 40px 30px;
    text-align: center;
    color: #555;
    font-size: 16px;
    line-height: 1.8;
}

.no-config-view h2 {
    color: #ff9800;
    margin-bottom: 16px;
}

/* ===== 加载提示 ===== */
.loading-tip {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 16px;
}

/* ===== 抽签（点名）全屏动画 ===== */
.draw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.draw-card {
    background: linear-gradient(135deg, #ffffff 0%, #fff8e1 100%);
    border-radius: 22px;
    box-shadow: 0 14px 60px rgba(0, 0, 0, 0.45);
    padding: 48px 90px;
    text-align: center;
    border: 6px solid #FF4081;
    min-width: 380px;
    animation: drawPop 0.35s ease-out;
}

@keyframes drawPop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.draw-label {
    font-size: 18px;
    color: #999;
    margin-bottom: 18px;
    letter-spacing: 6px;
}

.draw-name {
    font-size: 68px;
    font-weight: 900;
    color: #FF4081;
    text-shadow: 0 4px 18px rgba(255, 64, 129, 0.35);
    min-height: 90px;
    line-height: 1.2;
    word-break: keep-all;
}

.draw-name.settled {
    animation: drawSettle 0.4s ease-out;
}

@keyframes drawSettle {
    0% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ===== 手机端适配：小组模式总宽不超屏幕 ===== */
@media (max-width: 700px) {
    /* 手机端不锁定一屏，恢复自然滚动 */
    #classroom-view {
        height: auto;
        display: block;
        overflow: visible;
    }
    .classroom {
        overflow: visible;
    }
}

@media (max-width: 600px) {
    body {
        padding: 8px;
        overflow-x: hidden;
    }

    .classroom {
        gap: 4px;
        width: 100%;
        max-width: 100%;
    }

    .group-card {
        padding: 8px 4px;
        margin: 2px;
        min-width: 0;
    }

    .group-name {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .group-average {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .score-buttons {
        padding: 0;
        gap: 2px;
        grid-template-columns: minmax(30px, 0.72fr) 1.28fr;
    }

    .score-buttons.score-buttons-3 {
        grid-template-columns: minmax(24px, 0.6fr) 1.2fr minmax(22px, 0.5fr);
    }
    .score-buttons .break-btn { min-height: 20px; font-size: 11px; }

    .score-buttons button {
        min-width: 0;
        padding: 3px 2px;
        font-size: 10px;
        min-height: 20px;
    }
    .score-buttons button strong {
        font-size: 10px;
    }
}

/* ===== 考勤缺席样式 ===== */
.student.card-absent {
    opacity: 0.78;
    position: relative;
    background-color: #e3f2fd !important;
    border: 1px dashed #2196F3;
}

/* ===== 语音提醒轻提示 ===== */
.reminder-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 150, 243, 0.95);
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    z-index: 9999;
    max-width: 80vw;
    text-align: center;
    animation: reminderPop 0.4s ease-out;
}

@keyframes reminderPop {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

.zzz-overlay {
    position: absolute;
    top: 2px;
    right: 4px;
    color: #1976D2;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 1px;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    animation: zzzFloat 3s ease-in-out infinite;
}

@keyframes zzzFloat {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-3px); opacity: 1; }
}

.return-absent-btn {
    background: #2196F3 !important;
    color: #fff !important;
    grid-column: span 2 !important;
}

.mark-absent-btn {
    background: #FF9800 !important;
    color: #fff !important;
}

/* ===== 极端高度兜底：JS 检测到卡片按钮被裁切时自动启用，保证按钮永远可见 ===== */
body.ultra-compact .student { padding: 2px 3px; }
body.ultra-compact .student-name { font-size: 12px; }
body.ultra-compact .student-score { font-size: 13px; }
body.ultra-compact .score-buttons { gap: 1px; margin-top: 1px; padding: 0 2px; }
body.ultra-compact .score-buttons button { padding: 1px 2px; font-size: 9px; line-height: 1.1; }
body.ultra-compact .score-buttons button strong { font-size: 9px; }
body.ultra-compact .header { margin-bottom: 2px; }

/* ===== 头部操作按钮：按语义分组（点名抽签/考勤/危险），触控目标 ≥44px ===== */
.action-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px 24px;
    flex-wrap: wrap;
    width: 100%;
}

/* ===== 小组模式：分类规则提醒条 ===== */
.rules-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    padding: 8px 14px;
    background: linear-gradient(90deg, #fff8e1, #fff3cd);
    border: 1px solid #f0d488;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(120, 90, 20, .10);
}
.rules-title {
    font-size: 17px;
    font-weight: 800;
    color: #8a5a00;
    white-space: nowrap;
}
.rules-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.rule-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 5px 14px;
    font-size: 15px;
    color: #5d4a1f;
    background: #ffffff;
    border: 1px solid #e6cf8f;
    border-radius: 999px;
    white-space: nowrap;
}
.rule-chip b {
    font-size: 18px;
    color: #e67e22;
    font-weight: 800;
}
.rule-chip-hi {
    background: #ffe9e6;
    border-color: #f0b3aa;
}
.rule-chip-hi b {
    color: #d9483a;
}
.rule-chip-duty {
    background: #e8f1ff;
    border-color: #9cc2f5;
}
.rule-chip-duty b {
    color: #1a6fd6;
}
/* 值日小组与值日生姓名并列时的分隔 */
.duty-names {
    margin-left: 12px;
    color: #666;
    font-weight: normal;
}
.btn-group {
    display: flex;
    gap: 6px;
    align-items: center;
}
.act-btn {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    transition: transform 0.15s, filter 0.15s, background 0.15s;
}
.act-btn:active { transform: scale(0.96); }
.act-call { background: #2196F3; }
.act-call:hover { background: #1e88e5; }
.act-attend { background: #fb8c00; }
.act-attend:hover { background: #ef6c00; }
.act-subject { background: #8e24aa; }
.act-subject:hover { background: #7b1fa2; }
.act-danger {
    background: #fff;
    color: #e53935;
    border: 2px solid #e53935;
}
.act-danger:hover { background: #ffebee; }

/* ===== 右上计时区：距下课时钟 + 手动倒计时 chip + 设置齿轮 ===== */
.clock-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.class-end-clock {
    font-size: 18px;
    font-weight: bold;
    color: #37474f;
    line-height: 1.25;
    white-space: nowrap;
}
.countdown-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eceff1;
    border-radius: 999px;
    padding: 3px 6px 3px 12px;
}
.chip-label {
    font-size: 12px;
    font-weight: bold;
    color: #607d8b;
    white-space: nowrap;
}
.countdown-chip .timer-display {
    font-size: 16px;
    font-weight: bold;
    color: #263238;
    min-width: 46px;
    text-align: center;
}
.chip-btn {
    min-width: 38px;
    min-height: 34px;
    padding: 0 12px;
    border: none;
    border-radius: 999px;
    background: #cfd8dc;
    color: #263238;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
.chip-btn.chip-start { background: #43a047; color: #fff; }
.settings-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: #f5f5f5;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
.settings-btn:hover { background: #e8e8e8; }

/* ===== 设置弹窗 ===== */
.set-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 16px;
    color: #333;
}
.set-hint {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    margin-top: 2px;
}
.set-toggle, .set-plain-btn {
    min-height: 40px;
    padding: 6px 18px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.set-toggle.on {
    background: #43a047;
    color: #fff;
    border-color: #43a047;
}
.seg-mini {
    display: inline-flex;
    gap: 6px;
}
.seg-mini button {
    min-height: 40px;
    padding: 6px 18px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
}
.seg-mini button.active {
    background: #2196F3;
    color: #fff;
    border-color: #2196F3;
}
.set-danger {
    margin-top: 18px;
    border: 2px solid #ffcdd2;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff7f7;
}
.set-danger-title {
    color: #c62828;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}
.set-current-class {
    display: block;
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin: 4px 0 12px;
}
.set-logout-btn {
    width: 100%;
    min-height: 48px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.set-logout-btn:hover { background: #c62828; }
.set-version {
    text-align: center;
    color: #bbb;
    font-size: 12px;
    margin-top: 14px;
}

/* ===== 设置项：超大字号模式 ===== */
body.font-large .student-name { font-size: 17px; }
body.font-large .student-score { font-size: 22px; }
body.font-large .score-buttons button { font-size: 14px; min-height: 30px; }
body.font-large .score-buttons button strong { font-size: 14px; }
body.font-large .act-btn { font-size: 17px; }

/* ===== 设置项：隐藏课表侧栏 ===== */
body.sidebar-off .course-sidebar { display: none !important; }
body.sidebar-off .course-fab { display: none !important; }

/* ===== 宿舍模式：竖条卡片横排 ===== */
#classroom.dorm-grid {
    display: flex !important;          /* 覆盖 .classroom 的 grid */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: stretch;
    justify-content: center;           /* 宿舍少时整体居中 */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 6px;
}
.dorm-card {
    flex: 1 1 0;
    min-width: 150px;
    max-width: 230px;
    background-color: #fff;
    border: 1px solid #d3dbe4;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(30, 50, 80, 0.12);
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* 彩色标题条（按楼栋 A/B/C… 配色） */
.dorm-head {
    margin: 0 -12px 8px;
    padding: 10px 12px 8px;
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.dorm-head-c0 { background: linear-gradient(135deg, #1abc9c, #159a7f); }  /* A 绿 */
.dorm-head-c1 { background: linear-gradient(135deg, #3498db, #2471a3); }  /* B 蓝 */
.dorm-head-c2 { background: linear-gradient(135deg, #f39c34, #d97716); }  /* C 橙 */
.dorm-head-c3 { background: linear-gradient(135deg, #9b59b6, #7d3c98); }  /* D 紫 */
.dorm-head-c4 { background: linear-gradient(135deg, #17a2b8, #117a8b); }  /* E 青 */
.dorm-head-c5 { background: linear-gradient(135deg, #e74c3c, #c0392b); }  /* F 红 */
.dorm-name { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.dorm-average { font-size: 12px; opacity: .95; white-space: nowrap; }

/* 床位单列竖排，8 行均分卡片剩余高度 */
.dorm-beds {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.dorm-bed {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    padding: 1px 2px;
    border-bottom: 1px dashed #e6ebf0;
    overflow: hidden;
}
.dorm-bed:last-child { border-bottom: none; }
.dorm-pos {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef2f6;
    color: #7a8794;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dorm-bed-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2d3742;
}
.dorm-bed-empty { color: #b6bfc9; }
.dorm-bed-empty .dorm-pos { background: #f4f6f8; color: #c2cad3; }
.dorm-bed-away .dorm-bed-name { color: #a7b0ba; text-decoration: line-through; }
.dorm-bed-away .dorm-pos { background: #f6e3e3; color: #c98a8a; }

/* 红绿按钮等宽等高 */
.dorm-card .score-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    flex: 0 0 auto;
    min-height: 48px;
}
.dorm-card .score-buttons button {
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    min-height: 48px;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}
.dorm-card .score-buttons button:active { transform: scale(.96); }
.dorm-card .add-score { background: linear-gradient(135deg, #52c45f, #3da84a); }
.dorm-card .subtract-score { background: linear-gradient(135deg, #f5655a, #e0453a); }

/* 手机：竖条改为每行两间 */
@media (max-width: 700px) {
    #classroom.dorm-grid { flex-wrap: wrap; justify-content: flex-start; overflow-x: visible; }
    #classroom.dorm-grid .dorm-card { flex: 1 1 calc(50% - 12px); max-width: none; min-height: 300px; }
}

/* ===== 作业展示（点击课表科目后） ===== */
.homework-bar {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8500;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.25);
    padding: 6px 16px;
    font-size: 15px;
    max-width: 92vw;
    flex-wrap: wrap;
}
.hw-cnt { font-weight: bold; padding: 2px 10px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.hw-c-ex { background:#FFF3D6; color:#8a6d00; }
.hw-c-ok { background:#E5F3E0; color:#2e7d32; }
.hw-c-no { background:#FDE7E7; color:#c62828; }
.hw-bar-close {
    border: none; background:#eee; border-radius:999px; padding:4px 12px;
    cursor:pointer; font-size:13px; min-height:0;
}
.hw-bar-close:hover { background:#e0e0e0; }
/* 个人模式描边：优秀=金 完成=绿 未完成=红（outline 不占布局空间） */
.student.hw-excellent { outline: 3px solid #FFB300; outline-offset: -3px; }
.student.hw-done      { outline: 3px solid #43A047; outline-offset: -3px; }
.student.hw-missed    { outline: 3px solid #E53935; outline-offset: -3px; }
/* 小组模式：组卡内文字（全组完成时变为加分入口） */
.group-homework {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 6px;
}
.group-homework.hw-complete {
    background: #FFF3D6;
    color: #8a6d00;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}