/* ============================================================
 * toolbar.css — 右侧悬浮工具栏公共组件样式
 * ============================================================
 * 服务对象：common/toolbar.html + js/course-toolbar.js
 * 由软件架构课程与数据库课程共用（经 index.html 以 <link> 引入）。
 *
 * 抽取来源：
 *   1. courses/SoftwareArchitecture/css/course.css
 *      —— 浮动工具栏 / 便签 / 画笔 / 橡皮擦 / 提醒 / 倒计时 / SVG 放大模态框
 *      共 257 条规则（含 7 个 @keyframes 动画，按原始顺序保留注释）
 *   2. css/dark-mode.css 中工具栏组件专属的 4 条深色适配
 *
 * 依赖：css/style.css 设计变量（--color-* / --theme-*）
 * 回滚：删除本文件 + 恢复课程 index.html 中的 course.css 引用即可
 * ============================================================ */

/* 全局聚焦光晕（方案三：微动效精雕） */
.chapter-item:focus-visible,
.toggle-btn:focus-visible,
.float-btn:focus-visible,
.toolbar-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.12);
}

/* ====== 右侧浮动工具条（Bootstrap 按钮美化，默认折叠垂直居中） ====== */
.floating-toolbar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* z-index 100004：置于最上层，高于画笔 canvas(100003)/便签(100000)/模态框(10001)/遮罩(10000)/导航栏(9999)，
       确保画笔激活时工具栏仍可接收鼠标事件（hover 恢复默认光标），SVG 模态框打开时遮罩不会盖住工具栏 */
    z-index: 100004;
    transition: gap 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 折叠时间距归零，保证切换按钮精确居中 */
.floating-toolbar.collapsed {
    gap: 0;
}

/* 圆形功能按钮 */
.float-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.float-btn:hover {
    background-color: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(var(--theme-primary-rgb), 0.35);
}

/* ------------------------------------------------------------------
 * 不可用状态（当前角色未被授权使用该工具）
 * 工具仍然展示，只是灰显 —— 让用户看到完整功能全景，并引导认证教师。
 * 点击时由 js/load-common.js 弹出引导提示，不会执行工具本身。
 * ---------------------------------------------------------------- */
.float-btn.tool-locked {
    opacity: .35;
    filter: grayscale(.85);
    cursor: not-allowed;
    box-shadow: none;
}

.float-btn.tool-locked:hover {
    background-color: var(--color-bg-card, #fff);
    color: inherit;
    border-color: var(--color-border, #e2e8f0);
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

[data-mode="dark"] .float-btn.tool-locked {
    opacity: .5;
    filter: grayscale(.7);
}

[data-mode="dark"] .float-btn.tool-locked:hover {
    background-color: var(--color-bg-card, #16233b);
    color: var(--color-text-primary, #e2e8f0);
    border-color: var(--color-border, #2b3a57);
    box-shadow: none;
}

/* 点击不可用工具时的引导提示浮层 */
.tool-locked-tip {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%) translateY(10px);
    max-width: min(90vw, 560px);
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-size: .85rem;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 100004;
}

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

[data-mode="dark"] .tool-locked-tip {
    background: rgba(226, 232, 240, .95);
    color: #0f172a;
}

/* 折叠状态：功能按钮收起（高度/宽度/透明度归零），切换按钮成为唯一元素自动垂直居中 */
.floating-toolbar.collapsed .float-btn:not(.toolbar-toggle-btn) {
    height: 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border-width: 0;
    pointer-events: none;
    transform: scale(0);
}

/* 切换按钮：主色调圆形，hover 仅加深背景与阴影，箭头方向由单击切换决定 */
.toolbar-toggle-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 0.95rem;
    box-shadow: 0 3px 12px rgba(var(--theme-primary-rgb), 0.4);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-toggle-btn:hover {
    background-color: var(--theme-primary-dark);
    box-shadow: 0 5px 16px rgba(var(--theme-primary-rgb), 0.5);
}

.toolbar-toggle-btn:active {
    transform: scale(0.95);
}

/* ========== 画笔标注工具 ========== */
.pen-tool-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 颜色选择浮层：在画笔按钮左侧弹出 */
.pen-color-picker {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 10px;
    background: var(--color-bg-surface);
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 10001;
    border: 1px solid var(--color-border);
}

.pen-color-picker.show {
    display: flex;
}

/* 浮层右侧小三角指示 */
.pen-color-picker::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: #fff;
}

.pen-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.pen-color-dot:hover {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pen-color-dot.selected {
    border-color: var(--color-text-primary);
    box-shadow: 0 0 0 2px var(--color-text-primary), 0 0 0 4px rgba(239, 68, 68, 0.35);
    transform: scale(1.08);
}

.pen-color-red {
    background-color: var(--color-danger);
}

.pen-color-blue {
    background-color: var(--theme-accent);
}

.pen-color-green {
    background-color: var(--color-success);
}

/* 绘图 canvas：全屏覆盖，默认隐藏，激活时接收鼠标事件 */
/* z-index 100003：高于工具栏(100002)/便签(100000)/模态框(10001)/遮罩(10000)，
   确保画笔激活时覆盖模态框，可在放大的 SVG 图片上画图标注 */
.pen-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100003;
    display: none;
}

.pen-canvas.active {
    display: block;
    pointer-events: auto;
}

/* 便签卡片：默认隐藏，.show 时显示。position:fixed 可在页面上任意位置停留 */
/* z-index 100000：高于导航栏(9999)/下拉菜单(99999)/模态框(10001)，拖动时不被遮挡 */
.note-card {
    position: fixed;
    display: none;
    flex-direction: column;
    width: 300px;
    max-height: 360px;
    background: var(--theme-accent-light);
    border: 1px solid var(--theme-accent-mid);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    z-index: 100000;
    overflow: hidden;
    user-select: none;
}

.note-card.show {
    display: flex;
}

/* 便签数量上限提示（#note-limit-toast）：复用「未开发课程」toast 样式，
   但层级需高于便签(z-index 100000)，否则屏幕中央的便签会盖住提示 */
#note-limit-toast {
    z-index: 100004;
}

/* 编辑态：正文可输入，光标为文本样式；此时不可拖动（避免影响选文字） */
.note-card.editing .note-body {
    cursor: text;
    user-select: text;
}

/* 编辑态聚焦光晕 */
.note-card.editing .note-body:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
    border-radius: 4px;
}

/* 占位符（无内容时显示提示） */
.note-card.editing .note-body:empty::before {
    content: '在此输入要记录的内容...';
    color: var(--color-text-muted);
    pointer-events: none;
}

/* 保存态（.saved）：非激活态，整个便签可拖动，光标变为移动样式 */
.note-card.saved {
    cursor: move;
}

.note-card.saved .note-body {
    cursor: move;
    user-select: none;
}

/* 拖动中禁用文本选中、过渡，保证跟手 */
.note-card.dragging {
    cursor: grabbing;
    user-select: none;
    transition: none;
}

/* SVG 放大模态框 (Bootstrap Modal 定制) */
/* 提高层级以覆盖顶部导航栏(z-index:9999) */
.svg-zoom-modal {
    z-index: 10001;
}

/* 显示时用 flex 精确居中模态框（覆盖 Bootstrap 默认 block 布局，
   保证白卡在视口中水平、垂直都严格居中） */
.svg-zoom-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.svg-zoom-modal .modal-dialog.modal-svg-zoom {
    max-width: 90vw;
    margin: 0;               /* 由父级 flex 居中，去掉 auto 避免双重居中干扰 */
    pointer-events: none;
    justify-content: center;
}

.svg-zoom-modal .modal-content.svg-modal-content {
    position: relative;
    width: fit-content;
    max-width: 90vw;
    max-height: 90vh;
    padding: 8px;            /* 四边对称，保证图片在白卡内居中 */
    background-color: var(--color-bg-surface);
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    overflow: visible;
}

.svg-zoom-modal .svg-modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 缩放滑块控件：脱离文档流，作为悬浮条挂在白卡正下方（与右上角关闭按钮呼应） */
.svg-zoom-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.svg-zoom-controls .zoom-icon-min,
.svg-zoom-controls .zoom-icon-max {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.svg-zoom-controls .zoom-icon-min:hover,
.svg-zoom-controls .zoom-icon-max:hover {
    color: var(--theme-primary-darker);
    background-color: var(--color-border);
}

.svg-zoom-controls .zoom-icon-min:active,
.svg-zoom-controls .zoom-icon-max:active {
    transform: scale(0.92);
}

.svg-zoom-controls .zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--color-border-hover);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    min-width: 120px;
}

.svg-zoom-controls .zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary-darker);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.svg-zoom-controls .zoom-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary-darker);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.svg-zoom-controls .zoom-value {
    font-size: 0.82rem;
    color: var(--theme-primary-darker);
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* ========== 倒计时工具（右侧工具栏） ========== */

/* --- 模态框层级：高于倒计时遮罩层(10600)与全局 backdrop(10000) --- */
.countdown-setup-modal,
.countdown-confirm-modal {
    z-index: 10700;
}

/* --- 设置模态框 --- */
.countdown-setup-dialog {
    max-width: 420px;
    margin: 1rem auto;
}

.countdown-setup-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 22px 26px 20px;
}

.countdown-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--color-border);
}

.countdown-setup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.countdown-setup-title i {
    color: var(--theme-primary);
    font-size: 1.1rem;
}

.countdown-setup-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 切换悬浮倒计时的小图标按钮 */
.countdown-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.countdown-mini-btn:hover {
    background: var(--color-bg-hover);
    color: var(--theme-primary);
    border-color: var(--color-border-hover);
}

.countdown-setup-body {
    padding: 20px 0 14px;
}

/* 时:分:秒 输入行 */
.countdown-input-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.countdown-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.countdown-input-group input {
    width: 76px;
    height: 62px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-appearance: textfield;
    appearance: textfield;
}

.countdown-input-group input::-webkit-outer-spin-button,
.countdown-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.countdown-input-group input:focus {
    border-color: var(--theme-primary);
    background: var(--color-bg-surface);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.12);
}

.countdown-input-group input.cd-input-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.countdown-input-label {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}

/* 冒号：双圆点垂直居中（不依赖字体基线，天然与数字对齐） */
.countdown-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 14px;
    height: 62px;
    align-self: flex-start;
    font-size: 0;
    color: transparent;
    user-select: none;
}

.countdown-colon::before,
.countdown-colon::after {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transition: background 0.2s ease;
}

/* 快捷时长 chips */
.countdown-presets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.countdown-preset-chip {
    padding: 6px 16px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.countdown-preset-chip:hover {
    color: var(--theme-primary-darker);
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.countdown-preset-chip.active {
    color: var(--theme-primary-darker);
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.12);
    font-weight: 600;
}

/* 校验错误提示 */
.countdown-error {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: #ef4444;
}

.countdown-error.show {
    display: flex;
    animation: countdown-shake 0.35s ease;
}

@keyframes countdown-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }
}

/* --- 模态框按钮（设置框与确认框共用） --- */
.countdown-setup-footer,
.countdown-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-border);
}

.countdown-confirm-footer {
    justify-content: center;
    border-top: none;
    padding-top: 20px;
}

.countdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.countdown-btn-cancel {
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
}

.countdown-btn-cancel:hover {
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
}

.countdown-btn-start {
    color: #fff;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    box-shadow: 0 3px 10px rgba(var(--theme-primary-rgb), 0.3);
}

.countdown-btn-start:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    box-shadow: 0 5px 14px rgba(var(--theme-primary-rgb), 0.4);
}

.countdown-btn-danger {
    color: #fff;
    background: #ef4444;
    border: 1px solid #ef4444;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28);
}

.countdown-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* --- 确认模态框 --- */
.countdown-confirm-dialog {
    max-width: 380px;
    margin: 1rem auto;
}

.countdown-confirm-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px 26px 22px;
    text-align: center;
}

.countdown-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
}

.countdown-confirm-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.countdown-confirm-text {
    margin-top: 6px;
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* --- 倒计时遮罩层（运行中覆盖整个页面） --- */
.countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 10600;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%,
            rgba(var(--theme-primary-rgb), 0.22),
            rgba(15, 23, 42, 0.84) 76%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.countdown-overlay.show {
    display: flex;
}

.countdown-overlay.visible {
    opacity: 1;
}

/* 右上角关闭按钮：默认隐藏，鼠标移入遮罩层时淡入 */
.countdown-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.countdown-overlay:hover .countdown-close {
    opacity: 1;
}

.countdown-close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: scale(1.06);
}

.countdown-close:active {
    transform: scale(0.96);
}

/* 中央舞台：进度环 + 时间 + 说明 */
.countdown-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transform: translateY(-2vh);
}

.countdown-ring-wrap {
    position: relative;
    width: clamp(240px, 38vmin, 340px);
    height: clamp(240px, 38vmin, 340px);
}

.countdown-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 10;
}

.countdown-ring-progress {
    fill: none;
    stroke: var(--theme-accent);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear, stroke 0.4s ease;
}

.countdown-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-time {
    font-size: clamp(2.2rem, 6vmin, 3.6rem);
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 逐位固定宽度：数字 0.62em、冒号 0.34em，整串恒定 4.4em，
   秒数跳动时总宽纹丝不动（约 72% 圆环直径，呼吸放大后仍有余量） */
.countdown-time .cd-digit,
.countdown-time .cd-colon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    text-align: center;
}

.countdown-time .cd-digit {
    width: 0.62em;
}

.countdown-time .cd-colon {
    width: 0.34em;
    opacity: 0.85;
    /* 双圆点：不依赖字体基线，与数字完美垂直对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
    height: 1em;
    color: transparent;
}

.countdown-time .cd-colon::before,
.countdown-time .cd-colon::after {
    content: '';
    width: 0.15em;
    height: 0.15em;
    border-radius: 50%;
    background: #fff;
}

.countdown-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

.countdown-caption i {
    color: var(--theme-accent);
    font-size: 1.05rem;
}

.countdown-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.42);
}

/* 剩余不足 1 分钟：进度环与文字转警示色并轻微脉冲 */
.countdown-overlay.warning .countdown-ring-progress {
    stroke: #f87171;
}

.countdown-overlay.warning .countdown-time {
    animation: countdown-pulse 1s ease-in-out infinite;
}

@keyframes countdown-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}

/* 时间到状态：环走满、文字替换为「时间到」并脉冲 */
.countdown-overlay.done .countdown-ring-progress {
    stroke: var(--theme-accent);
}

.countdown-overlay.done .countdown-time {
    font-size: clamp(2.2rem, 6vmin, 3.4rem);
    letter-spacing: 0.12em;
    animation: countdown-pulse 0.9s ease-in-out infinite;
}

/* ========== 悬浮倒计时（Mini 浮窗） ========== */
/* 讲课比赛场景：默认收起为页头高度的时间条（仅时间），hover 展开完整控制；标题栏可拖拽，松手吸附四角 */
.mini-countdown {
    position: fixed;
    top: 0;
    right: 16px;
    /* 运行态收起高度由 JS 同步；四角停靠在页头内按当前实际高度整体垂直居中 */
    --mini-cd-h: 36px;
    width: max-content;
    min-height: var(--mini-cd-h);
    display: none;
    flex-direction: column;
    background: var(--color-bg-elevated, var(--color-bg-surface));
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 100002;
    overflow: hidden;
    user-select: none;
    animation: mini-countdown-in-bottom 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* bottom 不做过渡：下角停靠时由 ResizeObserver 逐帧写入 --mini-cd-bottom，
       底边与高度动画逐帧同步（先过渡后重算会造成「先缩放、再滑位」的两段式不连贯） */
    transition: border-radius 0.22s ease;
}

/* 四角停靠：
   - 上角 top=页头中线 + translateY(-50%)，在页头高度内垂直居中；
   - 下角 bottom 由 JS 按组件高度动态决定（连续公式，无跳变）：
     bottom = max(4, 页脚半高 - 组件半高)
     · 收起态（高度小）：中心与页脚中心重合，页脚内垂直居中；
     · 展开态（高度超过页脚范围）：底边钳制在 4px，贴近页脚底边。
   高度动画的每一帧由 ResizeObserver 重算，底边与高度同步移动，动画连贯。 */
.mini-countdown[data-corner="tr"] { top: 0; right: 16px; left: auto; bottom: auto; transform: translateY(-50%); animation-name: mini-countdown-in-top; }

.mini-countdown[data-corner="tl"] { top: 0; left: 16px; right: auto; bottom: auto; transform: translateY(-50%); animation-name: mini-countdown-in-top; }

.mini-countdown[data-corner="br"] { bottom: var(--mini-cd-bottom, 16px); right: 16px; top: auto; left: auto; transform: none; animation-name: mini-countdown-in-bottom; }

.mini-countdown[data-corner="bl"] { bottom: var(--mini-cd-bottom, 16px); left: 16px; top: auto; right: auto; transform: none; animation-name: mini-countdown-in-bottom; }

.mini-countdown.show {
    display: flex;
}

/* 上角停靠：入场动画以 translateY(-50%) 为基准，避免动画结束跳位 */
@keyframes mini-countdown-in-top {
    from {
        opacity: 0;
        transform: translateY(-50%) translateY(-12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* 下角停靠：以 translateY(0) 为基准的入场动画，结束时与停靠规则一致 */
@keyframes mini-countdown-in-bottom {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

/* ---------- 收起态（运行中且未 hover/聚焦/拖拽）：仅显示时间，高度 = 页头高度 ---------- */
.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) {
    border-radius: calc(var(--mini-cd-h) / 2);
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-header {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-body {
    padding: 0;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-running {
    gap: 0;
}

.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-countdown-controls {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* ---------- 标题栏（拖拽手柄：十字移动光标） ---------- */
.mini-countdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px 7px 12px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    cursor: move;
    max-height: 40px;
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease, border-color 0.22s ease;
}

.mini-countdown-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mini-countdown-title i {
    color: var(--theme-primary);
    font-size: 0.9rem;
}

.mini-countdown-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mini-countdown-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-danger-text);
}

.mini-countdown-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    transition: padding 0.22s ease;
}

/* 设置态 */
.mini-countdown-setup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.mini-countdown-setup.hide {
    display: none;
}

.mini-countdown-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mini-countdown-field {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mini-countdown-field input {
    width: 46px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mini-countdown-field input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.12);
}

.mini-countdown-field span {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
}

.mini-countdown-colon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 10px;
    height: 36px;
    font-size: 0;
    color: transparent;
}

.mini-countdown-colon::before,
.mini-countdown-colon::after {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    transition: background 0.2s ease;
}

.mini-countdown-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--theme-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
}

.mini-countdown-start:hover {
    background: var(--theme-primary-dark);
}

.mini-countdown-start:active {
    transform: scale(0.98);
}

/* 运行态 */
.mini-countdown-running {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: gap 0.22s ease;
}

.mini-countdown-running.show {
    display: flex;
}

/* 单个数字卡 */
.mini-flip-clock .flip-unit {
    position: relative;
    width: calc(var(--mini-cd-h) * 0.6);
    height: calc(var(--mini-cd-h) - 12px);
    background: var(--color-bg-base, #f1f5f9);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mini-flip-clock .flip-num {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc((var(--mini-cd-h) - 12px) * 0.62);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 3D 翻页：旧数字绕底边向前倒下，新数字从顶边立起（翻牌钟质感） */
.mini-flip-clock .flip-unit {
    perspective: 220px;
}

.mini-flip-clock .flip-num.flip-old {
    z-index: 4;
    transform-origin: 50% 100%;
    animation: miniFlipOut 0.32s cubic-bezier(0.5, 0, 0.85, 0.55) both;
    will-change: transform, opacity;
}

.mini-flip-clock .flip-num.flip-new {
    z-index: 5;
    transform-origin: 50% 0%;
    animation: miniFlipIn 0.32s cubic-bezier(0.15, 0.75, 0.35, 1) 0.16s both;
    will-change: transform;
}

/* 翻页期间隐藏静止层：任意时刻卡片内只有一层运动数字，
   旧页下落/新页立起时背景为纯卡片底色，杜绝多层数字叠影 */
.mini-flip-clock .flip-unit.flipping .flip-num:not(.flip-old):not(.flip-new) {
    visibility: hidden;
}

@keyframes miniFlipOut {
    0% { transform: rotateX(0deg); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes miniFlipIn {
    from { transform: rotateX(90deg); }
    to { transform: rotateX(0deg); }
}

/* 运行中冒号轻微呼吸；暂停时静止 */
.mini-countdown.running:not(.paused) .flip-colon i {
    animation: flip-colon-blink 1s ease-in-out infinite;
}

@keyframes flip-colon-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* 时间到：字号与翻页数字相当；宽度由 JS 按翻页时钟宽度设置 min-width，
   保证收起态宽高、位置与运行态简易状态完全一致 */
.mini-cd-done {
    display: none;
    align-items: center;
    justify-content: center;
    height: calc(var(--mini-cd-h) - 2px); /* 与翻页时钟同高：内容区 = 组件高 - 上下边框 */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme-primary);
    box-sizing: border-box;
}

.mini-countdown.done .mini-flip-clock { display: none; }

.mini-countdown.done .mini-cd-done {
    display: flex;
    animation: countdown-pulse 0.9s ease-in-out infinite;
}

/* 警示（最后 60 秒）：数字与冒号转红 */
.mini-countdown.warning .flip-unit { border-color: rgba(239, 68, 68, 0.55); }

.mini-countdown.warning .flip-unit .flip-num { color: var(--color-danger-text); }

.mini-countdown.warning .flip-colon i { background: var(--color-danger-text); }

.mini-countdown.warning .flip-colon i { animation-duration: 0.5s; }

/* ---------- 收起态进度环：外侧描边随计时顺时针消退（顶部 12 点起始） ----------
   运行中绿色（主题色）环绕计时，最后 60 秒转红；展开态自动隐藏。
   path 由 JS 按组件当前尺寸生成（胶囊半径跟随 --mini-cd-h），pathLength=100 归一化，
   stroke-dashoffset = 100 × 已耗时占比，由每 200ms tick + linear 过渡平滑推进 */
.mini-cd-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.25s ease;
    overflow: visible;
}

.mini-cd-ring path {
    fill: none;
    stroke: var(--theme-primary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    transition: stroke 0.3s ease, stroke-dashoffset 0.2s linear;
}

/* 仅运行态收起态显示（与收起规则同条件） */
.mini-countdown.running:not(:hover):not(:focus-within):not(.dragging) .mini-cd-ring {
    opacity: 1;
}

/* 最后 60 秒边框转红 */
.mini-countdown.warning .mini-cd-ring path {
    stroke: var(--color-danger-text);
}

/* 时间到：隐藏进度环，仅保留「时间到」胶囊 */
.mini-countdown.running.done:not(:hover):not(:focus-within):not(.dragging) .mini-cd-ring {
    opacity: 0;
}

.mini-countdown-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-height: 44px;
    overflow: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}

.mini-countdown-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.mini-countdown-ctrl:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
}

.mini-countdown-ctrl:active {
    transform: scale(0.94);
}

.mini-countdown-ctrl i {
    pointer-events: none;
}

.mini-countdown-stop {
    color: #fff;
    background: #ef4444;
    border-color: #ef4444;
}

.mini-countdown-stop:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* 拖拽中：强制展开、抓取光标、加重投影；移除上角 -50% 居中变换（JS 已把 top 补回半高） */
.mini-countdown.dragging {
    cursor: grabbing;
    opacity: 0.92;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
    transform: none;
    animation: none;
}

.mini-countdown.dragging .mini-countdown-header {
    cursor: grabbing;
}

/* --- 工具栏铃铛按钮 + 今日待提醒红点 --- */
.remind-tool-btn {
    position: relative;
}

.remind-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--color-bg-surface);
    box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.3);
}

/* --- 课堂按钮消息角标（类似微信未读数） --- */
.classroom-tool-btn {
    position: relative;
}

.classroom-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid var(--color-bg-surface);
    box-shadow: 0 0 0 1.5px rgba(239, 68, 68, 0.25);
    box-sizing: border-box;
    pointer-events: none;
}

/* --- 四边呼吸光晕（纯提示，不拦截点击） --- */
#remindHalos {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100006;
}

#remindHalos .remind-halo {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#remindHalos.remind-active .remind-halo {
    animation: remind-halo-breathe 1.1s ease-in-out infinite;
}

.remind-halo-t {
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}

.remind-halo-b {
    bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}

.remind-halo-l {
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}

.remind-halo-r {
    right: 0; top: 0; bottom: 0; width: 3px;
    background: var(--remind-halo-color);
    box-shadow: 0 0 20px 4px var(--remind-halo-color);
}

#remindHalos.remind-up {
    --remind-halo-color: var(--remind-start-color);
}

#remindHalos.remind-down {
    --remind-halo-color: var(--remind-end-color);
}

@keyframes remind-halo-breathe {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.85; }
}

/* --- 右下角摇晃提醒卡片 --- */
#remindCard {
    position: fixed;
    right: 24px;
    bottom: 26px;
    z-index: 100006;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 200px;
    padding: 12px 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--remind-accent);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#remindCard.remind-up {
    --remind-accent: var(--remind-start-color);
    --remind-accent-bg: rgba(34, 197, 94, 0.12);
}

#remindCard.remind-down {
    --remind-accent: var(--remind-end-color);
    --remind-accent-bg: rgba(245, 158, 11, 0.12);
}

#remindCard.remind-show {
    opacity: 1;
    transform: translateY(0);
}

#remindCard.remind-swing {
    animation: remind-swing 1.6s ease infinite;
}

@keyframes remind-swing {
    0%   { transform: translateY(0) rotate(0deg); }
    12%  { transform: translateY(-6px) rotate(-7deg); }
    30%  { transform: translateY(-6px) rotate(6deg); }
    48%  { transform: translateY(-6px) rotate(-4deg); }
    66%  { transform: translateY(-6px) rotate(3deg); }
    84%  { transform: translateY(-6px) rotate(-2deg); }
    100% { transform: translateY(-6px) rotate(0deg); }
}

.remind-card-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--remind-accent-bg);
    color: var(--remind-accent);
    font-size: 1rem;
}

.remind-card-body {
    min-width: 0;
}

.remind-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remind-card-time {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.remind-card-hint {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--remind-accent);
}

/* --- 提醒设置模态框 --- */
#remindSettingsModal {
    z-index: 10700;
}

.remind-setup-dialog {
    max-width: 1000px;
    margin: 1rem auto;
}

/* 抽取 v3 修复：把 max-height 从 78vh 收紧到 min(72vh, 720px)
   - 避免 modal 在某些小视口下被 max-height 撑得很高，导致底部 3 块（开关/滑块/按钮）
     视觉上距离顶部过远、给用户「缺了」的错觉
   - 配合 .remind-setup-body 的 overflow-y: auto，保证任何视口下底部 3 块都稳定可见 */
.remind-setup-content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px 16px 12px;
    max-height: min(72vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.remind-setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border);
    flex-shrink: 0;
}

.remind-setup-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.remind-setup-title i {
    color: var(--theme-primary);
    font-size: 1.1rem;
}

.remind-setup-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remind-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
}

.remind-reset-btn:hover {
    background: var(--color-bg-page);
    color: var(--color-text-primary);
}

.remind-setup-body {
    padding: 10px 0 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* 时段横向三列（上午/下午/晚上并排，默认课表高度可控、无滚动条） */
.remind-cols {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.remind-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg-page);
}

.remind-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.remind-col-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.remind-col-title i {
    color: var(--theme-primary);
    font-size: 0.92rem;
}

.remind-col-count {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    background: var(--color-bg-hover);
    border-radius: 999px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.remind-col-body {
    padding: 6px 6px 5px;
}

/* 课程行：名称 + 起止时间 + 删除 */
.remind-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 6px;
}

.remind-row .remind-name {
    height: 28px;
    width: 48px;
    padding: 0 3px;
    font-size: 0.74rem;
    text-align: center;
    margin-right: 4px;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.remind-row .remind-name:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
}

/* 时/分双下拉：appearance:none + 主题色箭头，样式完全可控 */
.remind-time {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 28px;
    width: 36px;
    padding: 0 12px 0 4px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
    background: var(--color-bg-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 L5 6.5 L8 3.5' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.remind-time:hover {
    border-color: var(--color-border-hover);
}

.remind-time:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-bg);
}

.remind-colon {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    flex-shrink: 0;
}

.remind-sep {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    flex-shrink: 0;
}

/* 时间组：在名称和删除按钮之间自动撑开并居中 */
.remind-time-group {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.remind-time-group .remind-sep {
    margin: 0 8px;
}

.remind-row-del {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--color-text-tertiary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.remind-row-del:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* 列底部操作行：添加 + 清空 */
.remind-col-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.remind-add-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed var(--color-border-hover);
    border-radius: 7px;
    color: var(--color-text-secondary);
    font-size: 0.74rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.remind-add-row:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: var(--theme-primary-bg);
}

.remind-clear-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed #ef4444;
    border-radius: 7px;
    color: #ef4444;
    font-size: 0.74rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.remind-clear-row:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: #dc2626;
}

/* body 底部：提前分钟滑块（虚线分隔线上方） */
.remind-lead-section {
    border-top: 1px dashed var(--color-border);
    margin-top: 8px;
    padding: 10px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.remind-lead-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.remind-lead-row i {
    color: var(--theme-primary);
    font-size: 0.95rem;
}

.remind-lead-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.remind-lead-range {
    flex: 1;
    accent-color: var(--theme-primary);
    height: 4px;
    cursor: pointer;
}

.remind-lead-value {
    min-width: 16px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-primary);
    font-variant-numeric: tabular-nums;
}

.remind-lead-unit {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* --- 提醒开关行（三列与虚线之间：开启/暂停今日提醒） --- */
.remind-status-section {
    margin-top: 8px;
    flex-shrink: 0;
}

.remind-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remind-status-icon {
    color: var(--theme-primary);
    font-size: 0.9rem;
}

.remind-status-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.remind-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin: 0 4px;
    flex-shrink: 0;
    cursor: pointer;
}

.remind-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.remind-switch-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 18px;
    transition: background 0.25s ease;
}

.remind-switch-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.remind-switch input:checked + .remind-switch-slider {
    background: var(--theme-primary);
}

.remind-switch input:checked + .remind-switch-slider::before {
    transform: translateX(16px);
}

.remind-switch input:focus-visible + .remind-switch-slider {
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.25);
}

.remind-status-text {
    font-size: 0.8rem;
    color: var(--theme-primary);
}

.remind-status-text.remind-status-off {
    color: var(--color-text-secondary);
}

/* footer：只保留取消/保存按钮 */
.remind-setup-footer {
    flex-shrink: 0;
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
}

.remind-footer-btns {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.remind-btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.remind-btn-cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.remind-btn-cancel:hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.remind-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: #fff;
}

.remind-btn-save:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}

/* 保存成功提示层级 */
#remind-saved-toast {
    z-index: 100004;
}

/* ============================================================
 * 深色模式适配（抽取自 css/dark-mode.css 的工具栏专属规则）
 * 注意：.note-box / #svgModal svg 等课程内容规则不属于本组件，
 * 仍保留在 dark-mode.css 中，勿移入本文件。
 * ============================================================ */

/* 8.4 画笔工具浮层（小三角与色点描边硬编码白 → 深色） */
[data-mode="dark"] .pen-color-picker {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

[data-mode="dark"] .pen-color-picker::after {
    border-left-color: #182338;
}

[data-mode="dark"] .pen-color-dot {
    border-color: #2b3a57;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* 8.5 便签工具（黄色便签本身为内容色，保留；容器阴影加深即可） */
/* 输入文本与光标在浅绿底上易看不清，统一使用占位符同色的深石板灰 */
[data-mode="dark"] .note-card .note-body {
    color: var(--color-text-muted);
    caret-color: var(--color-text-muted);
}

/* ---------- 工具条与课堂面板链接统一无下划线 ---------- */
.floating-toolbar a,
.floating-toolbar a:hover,
.floating-toolbar a:focus,
.classroom-panel a,
.classroom-panel a:hover,
.classroom-panel a:focus {
    text-decoration: none;
}

/* ---------- 课堂工具条角标与图标间距微调 ---------- */
.classroom-badge {
    top: 1px;
    right: 1px;
}

.remind-badge {
    top: 4px;
    right: 4px;
}