@charset "UTF-8";
/* ===== 全局禁止拖动时误选文字（输入框/文本域/可编辑区域例外） ===== */
html { height: 100%; }
body, body * { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
/* 仍允许按住 Ctrl/Cmd 强制选中 */
body:active { user-select: none; }

/* ===== 核心布局 ===== */
body { height: 100%; overflow: hidden; background-color: #EDF1F7 !important; }
#mainConsole { display: none; height: 100vh; overflow: hidden; flex: none; }
#mainArea { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-x: hidden; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { #mainArea { overflow-y: scroll; } }

#sidebar {
    width: 256px;
    flex-shrink: 0;
    background-color: #0F172A;
    background-image:
        radial-gradient(circle at 97% 16px, rgba(255, 255, 255, .04) 0, rgba(255, 255, 255, .04) 64px, transparent 65px),
        radial-gradient(circle at -36px 97%, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) 200px, transparent 201px),
        radial-gradient(circle at 6% 96%, rgba(99, 102, 241, .07), transparent 30%);
}
#sidebar.collapsed { width: 72px; }
/* 刷新时处于折叠态：head 内联脚本给 <html> 加该标记，让 sidebar 首次渲染即为 72px，避免「先展开再收起」闪烁 */
html.sidebar-prefolded #sidebar { width: 72px; }
/* prefolded 期间按钮内部也直接按折叠态渲染并禁用过渡：
   否则 DOMContentLoaded 补上 collapsed 时，图标会因 padding/gap/文字收缩的过渡动画先左移再右移，产生抖动 */
@media (min-width: 768px) {
    html.sidebar-prefolded #sidebar .nav-text,
    html.sidebar-prefolded #sidebar .brand-text { max-width: 0; opacity: 0; margin-left: 0; padding: 0; transition: none; }
    /* 折叠态保持 flex-start，用 padding-left 把图标推至居中。
       nav 本身有 p-4（1rem）内边距，按钮可用宽 = 72-16*2 = 40px，
       图标 24px 居中 → padding-left = (40-24)/2 = 8px = 0.5rem。
       justify-content 切换不可过渡，用 center 会在折叠瞬间跳位导致图标抖动 */
    html.sidebar-prefolded #sidebar .nav-btn,
    html.sidebar-prefolded #sidebar .nav-group-head {
        justify-content: flex-start;
        padding: 0 0 0 0.5rem;
        gap: 0;
        height: 3rem;
        overflow: hidden;
        transition: none;
    }
    html.sidebar-prefolded #sidebar .nav-group-arrow { display: none; }
    /* 分组子项首帧即收起，避免补上 collapsed 类时产生收起动画 */
    html.sidebar-prefolded #sidebar .nav-group-body { grid-template-rows: 0fr !important; transition: none; }
    html.sidebar-prefolded #sidebar .nav-group-sub { padding-left: 0 !important; }
    html.sidebar-prefolded #sidebar .sidebar-toggle-icon { transform: rotate(180deg); }
    html.sidebar-prefolded #sidebar .brand-header { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
    html.sidebar-prefolded #sidebar .brand-logo-wrap { display: none; }
}

html.is-logged-in #mainConsole { display: flex !important; }

html.is-logged-in #loginModal { display: none !important; }

/* ===== 通用操作按钮（查询/添加/导出等） ===== */
.query-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.375rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1;
    box-sizing: border-box;
}
/* 按钮加载态：降低透明度 + 禁止点击 */
.query-btn.is-loading { opacity: 0.65; cursor: not-allowed; }

/* ---- 概览页---- */
#today_schedule_box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
#today_schedule_box::-webkit-scrollbar-track {
    background: transparent;
}
#today_schedule_box::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
    border-radius: 999px;
}
#today_schedule_box::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, .55);
}

/* ---- 群配置文本域滚动条：淡色细条 ---- */
#cf_send_content {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

/* ---- 配置表单两栏布局---- */
.config-split {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #f1f5f9;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
}
/* 左栏右侧对称留白，保证两栏内容区等宽、中间竖线居中 */
.config-split > :first-child {
    padding-right: 44px;
}
.config-split-right {
    border-left: 1px solid #e2e8f0;
    padding-left: 44px;
}
@media (max-width: 1000px) {
    .config-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .config-split > :first-child {
        padding-right: 0;
    }
    .config-split-right {
        border-left: none;
        padding-left: 0;
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid #f1f5f9;
    }
}

/* ---- 主持人排班 ---- */
.schedule-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.schedule-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 9px 12px;
}
.schedule-tip i {
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}


.schedule-tip b { color: #475569; font-weight: 600; }

/* 折叠/展开动画：max-height 从 0 到实际高度平滑过渡（动画期间裁剪内容，平时 overflow 可见以免裁剪下拉菜单） */
.sec-body.sec-anim { overflow: hidden; transition: max-height .32s ease; }
.sec-body.sec-collapsed { overflow: hidden; max-height: 0 !important; }
.schedule-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 12px;
}
.schedule-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.schedule-field label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}
.schedule-sep {
    font-size: 12px;
    color: #94a3b8;
    padding-bottom: 10px;
}
.schedule-host-field { flex: 1; min-width: 150px; }
.schedule-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.schedule-input:focus {
    border-color: #5E6BE3;
    box-shadow: 0 0 0 3px rgba(94, 107, 227, .12);
}
.schedule-input::placeholder { color: #cbd5e1; }
.schedule-btn-add {
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 9px;
    background: #5E6BE3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .15s, box-shadow .15s;
}
.schedule-btn-add:hover { background: #4A56CC; }
.schedule-btn-cancel {
    height: 38px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.schedule-btn-cancel:hover { background: #f1f5f9; }
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schedule-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}
.sc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 9px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.sc-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.sc-time {
    font-family: "Cascadia Code", Consolas, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    color: #5E6BE3;
    background: #eef2ff;
    border-radius: 7px;
    padding: 4px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sc-host {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-host i { font-size: 11px; color: #94a3b8; }
.sc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.sc-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sc-btn-edit { background: #f1f5f9; color: #64748b; }
.sc-btn-edit:hover { background: #eef2ff; color: #5E6BE3; }
.sc-btn-del { background: #f1f5f9; color: #64748b; }
.sc-btn-del:hover { background: #fee2e2; color: #dc2626; }

/* ================================================================
 * ===== Tailwind JIT 缺类兜底（tailwind.css 静态构建产物不含以下类）=====
 * 说明：tailwind.css 为 JIT 静态构建，仅包含构建时扫描到的类。
 *      以下为项目实际使用但构建时缺失的工具类，在此集中兜底。
 *      新增缺类请追加到本区块，不要分散到各处。
 * ================================================================ */

/* ---- hover 变体（tailwind.css 只构建了 hover:bg-slate-200 等少数类） ---- */
.hover\:bg-indigo-600:hover { --tw-bg-opacity: 1; background-color: rgb(107 110 228 / var(--tw-bg-opacity)); }
.hover\:text-indigo-600:hover { --tw-text-opacity: 1; color: rgb(107 110 228 / var(--tw-text-opacity)); }
.hover\:bg-slate-100:hover { background-color: rgb(241 245 249); }
.hover\:bg-slate-50:hover { background-color: rgb(248 250 252); }
.hover\:bg-emerald-100:hover { background-color: #d1fae5; }
.hover\:bg-slate-50\/60:hover { background-color: rgb(248 250 252 / .6); }
.hover\:bg-rose-600:hover { --tw-bg-opacity: 1; background-color: rgb(225 29 72 / var(--tw-bg-opacity)); }
.hover\:text-white:hover { color: #fff !important; }

/* ---- 颜色 500 档（tailwind.css 只构建了 600 档） ---- */
.text-red-500 { color: #F87171; }
.text-amber-500 { color: #FBBF24; }
.text-sky-500 { color: #38BDF8; }
.text-emerald-500 { color: #34D399; }
.text-violet-500 { color: #7B85EF; }
.bg-violet-500 { background-color: #7B85EF; }
.border-violet-200 { border-color: #E0E7FF; }

/* ---- 间距/尺寸（tailwind.css 缺以下原子类） ---- */
.bottom-4 { bottom: 1rem; }
.mr-1\.5 { margin-right: .375rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: .25rem; }
.gap-1\.5 { gap: .375rem; }
.ml-auto { margin-left: auto; }

/* ===== 概览页===== */
/* ---- 群信息概览卡片：顶部靛蓝渐变装饰条 ---- */
.ov-head-card { position: relative; overflow: hidden; }
.ov-head-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5E6BE3, #7B85EF 55%, #38BDF8);
}
.ov-head-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #EEF2FF;
    color: #5E6BE3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* ---- 统计卡片：彩色主题（--ov-c 主色 / --ov-c-soft 浅底） ---- */
.ov-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.ov-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--ov-c), var(--ov-c-2, var(--ov-c)));
}
.ov-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}
.ov-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--ov-c-soft);
    color: var(--ov-c);
    flex-shrink: 0;
}
.ov-card-num { color: var(--ov-c); }
.ov-card-1 { --ov-c: #5E6BE3; --ov-c-2: #7B85EF; --ov-c-soft: #EEF2FF; }
.ov-card-2 { --ov-c: #38BDF8; --ov-c-2: #22D3EE; --ov-c-soft: #E0F2FE; }
.ov-card-3 { --ov-c: #FBBF24; --ov-c-2: #FCD34D; --ov-c-soft: #FEF3C7; }
.ov-card-4 { --ov-c: #7B85EF; --ov-c-2: #C084FC; --ov-c-soft: #EDE9FE; }
.ov-card-5 { --ov-c: #34D399; --ov-c-2: #2DD4BF; --ov-c-soft: #D1FAE5; }
.ov-card-6 { --ov-c: #FB7185; --ov-c-2: #F472B6; --ov-c-soft: #FFE4E6; }

/* ===== 工资设置弹窗（tab 方式；作用域 #salaryConfigModal，不依赖 Tailwind 构建产物，避免静态 tailwind.css 缺类导致样式错乱） ===== */
/* 遮罩 + 弹窗主体 */
#salaryConfigModal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}
/* 覆盖上面的 display:flex，确保 hidden 类能隐藏弹窗 */
#salaryConfigModal.hidden { display: none !important; }
#salaryConfigModal .scm-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .28);
    overflow: hidden;
}

/* 头部 */
#salaryConfigModal .scm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
#salaryConfigModal .scm-title { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; }
#salaryConfigModal .scm-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
#salaryConfigModal .scm-close:hover { background: #f1f5f9; color: #475569; }

/* tab 栏 */
#salaryConfigModal .scm-tabs {
    display: flex;
    gap: 2px;
    padding: 14px 24px 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
#salaryConfigModal .scm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 22px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s;
}
#salaryConfigModal .scm-tab i { font-size: 13px; }
#salaryConfigModal .scm-tab:hover { color: #4A56CC; }
#salaryConfigModal .scm-tab.active {
    color: #4A56CC;
    background: #fff;
    border-bottom-color: #5E6BE3;
}

/* 内容区 */
#salaryConfigModal .scm-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px 24px;
}
#salaryConfigModal .scm-panel { display: none; }
#salaryConfigModal .scm-panel.active { display: block; }
#salaryConfigModal .scm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
#salaryConfigModal .scm-panel-title { font-size: 15px; font-weight: 700; color: #334155; }
#salaryConfigModal .scm-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: #5E6BE3;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 10px;
    transition: background .15s;
}
#salaryConfigModal .scm-add:hover { background: #eef2ff; }
#salaryConfigModal .scm-add i { font-size: 12px; }

/* 档位卡片：双列网格（窄屏单列） */
#salaryConfigModal .scm-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 640px) {
    #salaryConfigModal .scm-tiers { grid-template-columns: minmax(0, 1fr); }
}
#salaryConfigModal .scm-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: 14px;
    padding: 14px;
}
#salaryConfigModal .scm-tier-sg { border-color: #a7f3d0; }
#salaryConfigModal .scm-tier-head { display: flex; align-items: center; gap: 10px; }
#salaryConfigModal .scm-tier-name { flex: 1; min-width: 0; }
#salaryConfigModal .scm-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
#salaryConfigModal .scm-field-label {
    font-size: 12px;
    color: #818cf8;
    margin-bottom: 4px;
}
#salaryConfigModal .scm-tier-sg .scm-field-label { color: #10b981; }
#salaryConfigModal .scm-input {
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #1e293b;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
#salaryConfigModal .scm-input:focus { border-color: #5E6BE3; box-shadow: 0 0 0 3px rgba(94, 107, 227, .12); }
#salaryConfigModal .scm-input::placeholder { color: #cbd5e1; }
#salaryConfigModal .scm-tier-del {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
#salaryConfigModal .scm-tier-del:hover { background: #fecaca; }
#salaryConfigModal .scm-tier-del-round {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    font-size: 13px;
}
#salaryConfigModal .scm-hint {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: #94a3b8;
}

/* 底部按钮（复用项目中已有的按钮样式类） */
#salaryConfigModal .scm-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;
}

/* ===== 侧边栏折叠分组（统计报表：麦序/任务/收光） ===== */
/* 子菜单缩进（覆盖按钮 px-3.5 的左内边距，JS 高亮时保留该类） */
.nav-group-sub { padding-left: 2.375rem !important; }
/* 分组标题箭头：靠右对齐（ID 级选择器，覆盖 space-x 的 margin-left 干扰），展开时旋转 180° */
#nav-group-stats .nav-group-arrow { margin-left: auto; transition: transform .3s ease; }
#nav-group-stats.nav-group-open .nav-group-arrow { transform: rotate(180deg); }
/* 分组展开/收起动画：CSS grid 0fr↔1fr，无需 JS 计算高度，收起时内容由 inner 自动裁剪 */
.nav-group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.nav-group-body > .nav-group-inner { overflow: hidden; min-height: 0; }
#nav-group-stats.nav-group-open + #nav-group-body-stats { grid-template-rows: 1fr; }
/* 桌面端侧边栏折叠（72px）时：分组标题图标居中、隐藏箭头，分组子项完全收起仅保留标题图标 */
@media (min-width: 768px) {
    /* 折叠态：按钮保持 flex-start，用 padding-left 把图标推至居中。
       nav 本身有 p-4（1rem）内边距，按钮可用宽 = 72-16*2 = 40px，
       图标 24px 居中 → padding-left = (40-24)/2 = 8px = 0.5rem。
       justify-content 切换不可过渡会跳位抖动；文字在图标右侧收缩，宽度变化不影响图标位置。
       overflow hidden 裁剪文字收缩过程中的溢出，避免文字叠到内容区 */
    #sidebar.collapsed .nav-btn,
    #sidebar.collapsed .nav-group-head {
        justify-content: flex-start;
        padding: 0 0 0 0.5rem;
        gap: 0;
        height: 3rem;
        overflow: hidden;
    }
    #sidebar.collapsed .nav-group-arrow { display: none; }
    #sidebar.collapsed .nav-group-body { grid-template-rows: 0fr !important; }
}
/* 移动端抽屉：始终完整展示，恢复分组标题与子菜单缩进、显示箭头，分组展开状态由 nav-group-open 决定 */
@media (max-width: 767px) {
    #sidebar.collapsed .nav-group-head { justify-content: flex-start; padding: 0.625rem 0.875rem; gap: 0.75rem; height: auto; }
    #sidebar.collapsed .nav-group-head i.fa-solid { font-size: 1.0625rem; width: 1.5rem; }
    #sidebar.collapsed .nav-group-arrow { display: inline-block; }
    #sidebar.collapsed .nav-group-sub { padding-left: 2.375rem !important; }
}

/* ===== 组件级工具类 ===== */
/* 验证码按钮（登录/找回密码页）：左间距 + 靛蓝样式 */
.auth-code-btn {
    margin-left: 0.75rem; flex-shrink: 0; padding: 0 1rem; border-radius: 0.75rem;
    font-size: 0.75rem; font-weight: 600; color: #fff; background: #6366f1;
    transition: background .15s; border: none; cursor: pointer;
}
.auth-code-btn:hover { background: #4f46e5; }
.auth-code-btn:active { transform: scale(0.95); }
/* 小型确认弹窗最大宽度（320px） */
.modal-sm { max-width: 320px; }

/* ===== 侧边栏折叠 ===== */
/* 宽度切换：直接折叠/展开，取消宽度过渡，避免 40×48 这种细长中间态 */
.sidebar-transition { transition: none; }
.sidebar-toggle-icon { transition: transform 0.3s ease; }
/* 固定品牌头部高度（展开 93px）：折叠后 logo 区 display:none 会让头部塌陷到 85px，
   导致导航上下跳动。min-height 保证展开/折叠两态高度一致。 */
.brand-header { min-height: 5.8125rem; }
.nav-text, .brand-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .2s ease, max-width .3s ease;
}
.nav-text { max-width: 6rem; }
.brand-text { max-width: 12rem; }
#sidebar.collapsed .nav-text,
#sidebar.collapsed .brand-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    padding: 0;
}
#sidebar.collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
/* 折叠后隐藏品牌区，头部仅剩按钮并水平居中 */
#sidebar.collapsed .brand-header { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; }
#sidebar.collapsed .brand-logo-wrap { display: none; }

/* 隐藏滚动条工具类 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== 全局滚动条：细条淡色（页面/弹窗变小出现滚动时，不再显示浏览器默认宽滚动条） =====
   局部 ID 样式（如 #today_schedule_box 4px、#cf_send_content）优先级更高，不受影响 */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .35); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .55); }
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .35) transparent; }

/* ===== 原生 select 美化：去掉浏览器默认外观，自定义箭头 ===== */
select.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 L8 10 L11.5 6.5' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.85rem;
    padding-right: 2rem;
    cursor: pointer;
    min-height: 2.25rem;
    vertical-align: middle;
}
select.filter-select:hover { border-color: #cbd5e1; }
select.filter-select option { color: #334155; background: #fff; }

/* ===== 自定义下拉组件（替代原生 select 展开面板） ===== */
.custom-select { position: relative; display: inline-block; vertical-align: middle; }
.custom-select-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    min-height: 2.25rem; padding: 0.375rem 0.875rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.375rem;
    font-size: 0.875rem; color: #334155; line-height: 1.25rem;
    cursor: pointer; white-space: nowrap; user-select: none;
}
.custom-select-btn:hover { border-color: #cbd5e1; }
.custom-select-btn.open { border-color: #5E6BE3; box-shadow: 0 0 0 3px rgba(94,107,227,0.15); }
.custom-select-arrow { color: #94a3b8; transition: transform 0.2s; flex-shrink: 0; margin-left: auto; }
.custom-select-btn.open .custom-select-arrow { transform: rotate(180deg); }
/* 块级全宽变体（表单内独占一行的下拉） */
.custom-select--block { display: block; width: 100%; vertical-align: auto; }
/* 大尺寸按钮变体（黑名单添加弹窗等：更高的可点击区域） */
.custom-select-btn--lg { width: 100%; min-height: 44px; padding: 0.7rem 0.875rem; border-radius: 0.75rem; }
.custom-select-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    min-width: 100%; max-width: 320px; max-height: 280px; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.375rem;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12); padding: 0.25rem;
}
.custom-select-menu.hidden { display: none; }
.custom-select-menu li {
    list-style: none; margin: 0; padding: 0.5rem 0.75rem; border-radius: 0.25rem;
    font-size: 0.875rem; color: #334155; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 0.5rem;
}
.custom-select-menu li:hover { background: #f1f5f9; }
.custom-select-menu li.selected { background: #eef2ff; color: #4A56CC; font-weight: 600; }
.custom-select-label { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 下拉选项头像：纯展示，不参与提交 */
.cs-opt-avatar { position: relative; width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.cs-opt-avatar .cs-opt-ph {
    width: 1.75rem; height: 1.75rem; border-radius: 9999px;
    background: #e0e7ff; color: #4A56CC; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
}
.cs-opt-avatar img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 9999px; object-fit: cover;
}
.cs-opt-text { overflow: hidden; text-overflow: ellipsis; }

/* ===== 服务器状态徽标 ===== */
#serverState.online { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
#serverState.offline { background: #fff1f2; color: #e11d48; border-color: #fecdd3; }
#serverState.online #serverDot { color: #10b981; }
#serverState.offline #serverDot { color: #f43f5e; }

/* ===== Toast 全局提示 ===== */
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 99;
         background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 13px;
         box-shadow: 0 10px 30px rgba(15, 23, 42, .25); opacity: 0; pointer-events: none; transition: all .3s ease; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok { background: #059669; }
#toast.err { background: #e11d48; }

/* ===== 登录界面美化 ===== */
#loginModal {
    background:
        radial-gradient(900px 520px at 15% 15%, rgba(99,102,241,.32), transparent 60%),
        radial-gradient(820px 520px at 85% 85%, rgba(139,92,246,.28), transparent 60%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #312e81 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.login-card {
    animation: loginCardIn .45s cubic-bezier(.16,1,.3,1) both;
    box-shadow: 0 25px 60px -12px rgba(2,6,23,.55), 0 0 45px rgba(99,102,241,.18);
}
@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 20;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef, #6366f1);
    background-size: 200% 100%;
    animation: loginBarFlow 4s linear infinite;
}
@keyframes loginBarFlow { to { background-position: -200% 0; } }
.login-field .login-field-icon { transition: color .2s ease; position: absolute; inset-block: 0; left: 0; padding-left: 0.875rem; display: flex; align-items: center; color: #94a3b8; }
.login-field .login-field-icon i { transition: transform .2s ease; }
.login-field:focus-within .login-field-icon { color: #6366f1; }
.login-field:focus-within .login-field-icon i { transform: scale(1.12); }
.login-btn {
    display: block; width: 100%; color: #fff; font-weight: 600;
    padding: 0.75rem 0; border-radius: 0.75rem; font-size: 0.875rem;
    transition: all .2s ease; border: none; cursor: pointer;
    position: relative; overflow: hidden; letter-spacing: .02em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.6);
}
.login-btn:active { transform: scale(0.98); }
.login-btn::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: loginBtnShine 3.2s ease-in-out infinite;
}
@keyframes loginBtnShine {
    0%, 55% { left: -120%; }
    100% { left: 220%; }
}
.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -6px rgba(99,102,241,.7);
}

/* ===== Tailwind 内置色柔化覆盖 → Cobalt 钴蓝配色系统 ===== */
.bg-indigo-500 { background-color: #5E6BE3 !important; }
.bg-indigo-600 { background-color: #5E6BE3 !important; }
.text-indigo-500 { color: #5E6BE3 !important; }
.text-indigo-600 { color: #5E6BE3 !important; }
.hover\:bg-indigo-500:hover { background-color: #5E6BE3 !important; }
.hover\:bg-indigo-600:hover { background-color: #4A56CC !important; }
.hover\:text-indigo-500:hover { color: #4A56CC !important; }
.hover\:text-indigo-600:hover { color: #4A56CC !important; }
.shadow-indigo-500\/30 { --tw-shadow-color: rgba(94,107,227,.30); }
.bg-indigo-500\/10 { background-color: rgba(94,107,227,.10) !important; }
.bg-indigo-500\/20 { background-color: rgba(94,107,227,.20) !important; }
.bg-violet-500\/10 { background-color: rgba(123,133,239,.10) !important; }
#headerRechargeBtn { background-color: #5E6BE3 !important; }

/* ===== 登录页作用域 Tailwind 类局部覆盖（恢复原始配色） ===== */
#loginModal .bg-indigo-600 { background-color: #6366f1 !important; }
#loginModal .bg-indigo-500\/30 { --tw-shadow-color: rgba(99,102,241,.30); }
#loginModal .bg-indigo-500\/10 { background-color: rgba(99,102,241,.10) !important; }
#loginModal .shadow-indigo-500\/30 { --tw-shadow-color: rgba(99,102,241,.30); }
#loginModal .text-indigo-500 { color: #6366f1 !important; }
#loginModal .text-indigo-600 { color: #6366f1 !important; }

/* ===== 侧边栏作用域 Tailwind 类局部覆盖（恢复原始配色） ===== */
#sidebar .bg-indigo-600 { background-color: #6366f1 !important; }
#sidebar .text-indigo-600 { color: #6366f1 !important; }
#sidebar .bg-indigo-500\/20 { background-color: rgba(99,102,241,.20) !important; }
#sidebar .text-indigo-400 { color: #818CF8 !important; }

/* ===== 日期选择器统一样式（自定义日历图标 + 与搜索框等高） ===== */
.date-input {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: light;
    min-height: 2.375rem;
    width: 9.25rem;
    box-sizing: border-box;
    background-color: #f8fafc;
    --date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E");
    background-image: var(--date-icon);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #334155;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.date-input:hover {
    background-color: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(94,107,227,0.10);
}
.date-input::placeholder {
    color: #94a3b8;
    font-size: 0.8rem;
    opacity: 1;
    transition: color .18s ease;
}
.date-input:focus::placeholder { color: #c7d2fe; }
.date-input:focus,
.date-input.active {
    background-color: #fff;
    border-color: #5E6BE3;
    --date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236366f1'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 3px rgba(94,107,227,0.16), 0 4px 14px rgba(94,107,227,0.14);
}

/* ===== flatpickr 日期弹窗：全新样式（重做） ===== */
/* 弹窗外壳：白底卡片，细边框 + 柔和阴影 */
.flatpickr-calendar {
    width: 20rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,0.22);
    font-family: inherit;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.5;
}
.flatpickr-calendar.open { animation: fpDropIn .18s ease-out; }
@keyframes fpDropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.flatpickr-calendar.arrowTop:before { border-bottom-color: #e2e8f0; }
.flatpickr-calendar.arrowTop:after  { border-bottom-color: #ffffff; }
.flatpickr-calendar.arrowBottom:before { border-top-color: #e2e8f0; }
.flatpickr-calendar.arrowBottom:after  { border-top-color: #ffffff; }

/* 顶部栏：纯白底 + 底部细分割线，左右按钮与中间年月等距 */
.flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.flatpickr-month {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

/* 左右翻月按钮：浅灰圆形，hover 变 indigo
   注意：必须用高特异性选择器，覆盖库默认的 absolute 定位（left:0/right:0），
   否则按钮会被钉在弹窗内边缘，padding 无法推开 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    fill: #64748b;
    padding: 0;
    line-height: 1;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 1rem; height: 1rem; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: #e0e7ff; color: #4A56CC; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #4A56CC; }
.flatpickr-months .flatpickr-prev-month:hover { transform: translateX(-1px); }
.flatpickr-months .flatpickr-next-month:hover { transform: translateX(1px); }

/* 中间年月：年份在前、月份在后，平铺深色文字 */
.flatpickr-current-month {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.flatpickr-current-month .cur-month { display: none; }

/* 月份下拉：文字 + 小箭头，hover 浅灰底 */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.1rem center;
    background-size: 0.8rem;
    border: none;
    border-radius: 0.25rem;
    padding: 0.3rem 1.25rem 0.3rem 0.5rem;
    min-width: 4.4rem;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color .15s ease;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background-color: #f1f5f9; }
.flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: #334155;
    background: #fff;
    font-weight: 500;
    font-size: 0.85rem;
}

/* 年份输入：与月份同款文字样式，隐藏微调箭头 */
.flatpickr-current-month .numInputWrapper {
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    padding: 0 0.35rem;
    min-width: 3.2rem;
    transition: background-color .15s ease;
}
.flatpickr-current-month .numInputWrapper:hover { background-color: #f1f5f9; }
.flatpickr-current-month input.cur-year {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    border: none;
    padding: 0.3rem 0;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown { display: none; }

/* 星期标签：浅灰小字，居中 */
.flatpickr-weekdays {
    padding: 0.55rem 0.6rem 0.4rem;
    border-bottom: 1px solid #f8fafc;
}
.flatpickr-weekday {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* 日期区：覆盖库默认固定宽 307.875px，改为随弹窗自适应，防止 7 列错位 */
.flatpickr-days {
    padding: 0.6rem 0.6rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
}
.flatpickr-days .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

/* 日期格：撑满列宽的正方形，7 列填满整个日期区，消除右侧留白 */
.flatpickr-day {
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.78rem;
    max-width: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.flatpickr-day:hover { background: #eef2ff; border-color: #eef2ff; color: #4A56CC; }
/* 今天：品牌色描边圆环 + 浅紫底 + 加粗着色，与普通日期明确区分 */
.flatpickr-day.today {
    border-color: #c7d2fe;
    color: #4A56CC;
    font-weight: 700;
    background: #eef2ff;
    box-shadow: 0 0 0 1.5px #5E6BE3;
}
.flatpickr-day.today:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #3730a3;
    box-shadow: 0 0 0 1.5px #4A56CC;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: #5E6BE3;
    border-color: #5E6BE3;
    box-shadow: 0 3px 10px rgba(94,107,227,0.3);
    color: #fff;
    font-weight: 600;
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #4A56CC;
    border-color: #4A56CC;
    color: #fff;
}
.flatpickr-day.inRange { background: #eef2ff; border-color: #eef2ff; box-shadow: none; color: #3730a3; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: #e2e8f0; background: transparent; }
/* 隐藏非本月日期（上/下月补位）：visibility 保持占位，保证 1 号对齐不左移 */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { visibility: hidden; pointer-events: none; }
/* JS 判断整行均为补位时隐藏该行，消除多余的空白行 */
.flatpickr-day.fp-hide-row { display: none; }

/* ===== 日期弹窗：月份自定义下拉（替代浏览器原生 select 列表） ===== */
.fp-month-picker { position: relative; display: inline-flex; }
.fp-month-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    height: 1.9rem; padding: 0 0.55rem;
    background: transparent; border: none; border-radius: 0.25rem;
    font-size: 0.75rem; font-weight: 600; color: #1e293b;
    cursor: pointer; white-space: nowrap; user-select: none;
    transition: background-color .15s ease;
}
.fp-month-btn:hover, .fp-month-btn.open { background-color: #f1f5f9; }
.fp-month-btn svg { color: #64748b; flex-shrink: 0; transition: transform .2s; }
.fp-month-btn.open svg { transform: rotate(180deg); }
.fp-month-menu {
    position: fixed; z-index: 100000;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.375rem;
    box-shadow: 0 10px 30px rgba(15,23,42,0.15);
    padding: 0.25rem; max-height: 280px; overflow-x: hidden; overflow-y: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.fp-month-menu::-webkit-scrollbar { display: none; }
.fp-month-menu.hidden { display: none; }
.fp-month-opt {
    padding: 0.45rem 0.6rem; border-radius: 0.25rem;
    font-size: 0.75rem; color: #334155; cursor: pointer; white-space: nowrap;
    text-align: center;
    transition: background-color .15s ease;
}
.fp-month-opt:hover { background: #f1f5f9; }
.fp-month-opt.selected { background: #eef2ff; color: #4A56CC; font-weight: 600; }

/* ================= 移动端适配（<768px）：侧边栏抽屉化 ================= */
.mobile-menu-btn { display: none; }
#sidebarMask { display: none; }

@media (max-width: 767px) {
    .mobile-menu-btn { display: inline-flex; }

    /* 侧边栏改为抽屉：默认滑出屏幕，点击汉堡按钮滑入 */
    #sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; width: 256px !important;
        transform: translateX(-100%);
        transition: transform .28s ease;
        z-index: 50; box-shadow: none;
    }
    #sidebar.sidebar-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(2,6,23,.45); }

    /* 手机上忽略折叠态，始终完整展示菜单 */
    #sidebar.collapsed { width: 256px !important; }
    #sidebar.collapsed .nav-text,
    #sidebar.collapsed .brand-text { max-width: 6rem; opacity: 1; }
    #sidebar.collapsed .nav-btn { justify-content: flex-start; padding: 0.625rem 0.875rem; gap: 0.75rem; height: auto; }
    #sidebar.collapsed .nav-btn i { font-size: 1.0625rem; width: 1.5rem; }
    /* 移动端菜单始终完整展示，高度自适应（覆盖桌面固定 3rem） */
    #sidebar .nav-btn, #sidebar .nav-group-head { height: auto; }
    #sidebar.collapsed .brand-header { justify-content: space-between; padding-left: 1.5rem; padding-right: 1.5rem; }
    #sidebar.collapsed .brand-logo-wrap { display: flex; }
    #sidebar.collapsed .sidebar-toggle-icon { transform: rotate(0deg); }
    .sidebar-fold-btn { display: none !important; }

    /* 抽屉遮罩 */
    #sidebarMask { position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 40; }
    #sidebarMask.show { display: block; }

    /* 主区域占满全宽 */
    #mainArea { width: 100% !important; }
    #mainConsole { height: 100dvh; }

    /* 内容与顶栏紧凑化 */
    #pageContainer { padding: 0.75rem 0.75rem 1.25rem; }
    .p-6 { padding: 1rem; }
    #pageTitle { font-size: 1.0625rem; }
}

/* ================= 群配置表单（app.js 动态生成） ================= */
/* 大卡片容器 */
.cfg-card { padding: 22px; }

/* 表单两列网格：基本信息/麦序规则/取排规则等 */
.cfg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* 紧凑两列：麦序规则、报备规则（间距更小） */
.cfg-grid-2-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
/* 块级间距：报备规则中开关/下拉之间的纵向间距 */
.cfg-block-gap { margin-top: 14px; }

/* 必填星号 */
.cfg-star { font-size: 16px; font-style: normal; font-weight: 700; }
/* 标签内提示文字（如「机器人所在微信群ID」） */
.cfg-label-hint { font-weight: 400; font-size: 10px; color: #94a3b8; margin-left: 4px; }

/* 输入框外层：用于承载绝对定位的左侧图标 */
.cfg-input-wrap { position: relative; }
/* 输入框左侧图标：绝对定位居中 */
.cfg-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: #94a3b8; pointer-events: none;
}
/* 输入框 padding 变体（默认/lg/sm 三种，与图标位置匹配） */
.cfg-input-pd-default { padding: 10px 36px 10px 48px; }
.cfg-input-pd-lg { padding: 10px 36px 10px 52px; }
.cfg-input-pd-sm { padding: 10px 32px 10px 44px; }
/* 带右侧后缀的 padding 变体：右侧留空给后缀文字 */
.cfg-input-pd-default-suffix { padding: 10px 52px 10px 48px; }
.cfg-input-pd-sm-suffix { padding: 10px 48px 10px 44px; }
/* 输入框右侧后缀文字（如「分钟」） */
.cfg-input-suffix {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: #94a3b8; pointer-events: none; user-select: none;
}
/* 只读输入框：禁用选中和指针 */
.cfg-input-ro { user-select: none; -webkit-user-select: none; cursor: not-allowed; }

/* ---- custom-select 配置页变体 ---- */
/* 带左侧图标的下拉按钮：42px 高、左内边距留出图标空间 */
.custom-select-btn--cfg {
    position: relative; width: 100%; height: 42px;
    padding: 0 15px 0 44px; justify-content: flex-start; text-align: left;
}
/* 排班时段下拉按钮：38px 高、小圆角 */
.custom-select-btn--schedule {
    width: 100%; height: 38px; padding: 0 10px; border-radius: 8px;
}

/* ---- 配置开关（switchField） ---- */
.cfg-switch {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px; padding: 12px 14px;
}
.cfg-switch-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cfg-switch-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: #e2e8f0; transition: background .2s;
}
.cfg-switch-icon.on { background: #5E6BE3; }
.cfg-switch-icon i { color: #fff; font-size: 14px; }
.cfg-switch-text { min-width: 0; }
.cfg-switch-label { font-size: 14px; font-weight: 600; color: #1e293b; }
.cfg-switch-tip { font-size: 11px; color: #94a3b8; margin-top: 2px; }
/* toggle 滑块容器 */
.cfg-toggle {
    position: relative; display: inline-block;
    width: 48px; height: 26px; flex: 0 0 48px; max-width: 48px; flex-shrink: 0;
    cursor: pointer;
}
.cfg-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cfg-toggle-track {
    position: absolute; inset: 0; border-radius: 9999px;
    background: #cbd5e1; transition: background .2s;
}
.cfg-toggle-track.on { background: #5E6BE3; }
.cfg-toggle-dot {
    position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px; background: #fff; border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
}
.cfg-toggle-dot.on { transform: translateX(22px); }

/* ===== 配置分区（section） ===== */
/* 标题栏基础：点击态/悬停态 */
.cfg-section-head { transition: background .2s; }
.cfg-section-clickable:hover { background: #f1f5f9; }
.cfg-section-clickable:active { background: #e8edf5; }
/* 区块间分隔线（非首个区块） */
.cfg-section-gap { margin-top: 22px; padding-top: 22px; border-top: 1px solid #f1f5f9; }
/* 标题栏：可折叠态（带点击区域外扩） */
.cfg-section-head--collapsible {
    margin: -6px -6px 8px; padding: 6px; border-radius: 12px;
    cursor: pointer; user-select: none;
}
/* 标题栏：不可折叠态（仅底部留白） */
.cfg-section-head--static { padding-bottom: 14px; }
/* 标题图标块 */
.cfg-section-icon {
    width: 36px; height: 36px; border-radius: 10px; background: #eef2ff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cfg-section-icon i { color: #5E6BE3; font-size: 14px; }
/* 标题文字区 */
.cfg-section-text { min-width: 0; }
.cfg-section-title { font-size: 14px; font-weight: 700; color: #1e293b; }
.cfg-section-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }
/* 标题栏右侧操作区（如编辑公告按钮） */
.cfg-section-right { margin-left: auto; flex-shrink: 0; }
/* 折叠箭头基础 */
.cfg-section-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eef2ff;
    color: #5E6BE3;
    flex-shrink: 0;
    margin-right: 6px;
    transition: background .2s;
}
.cfg-section-arrow i { font-size: 11px; transition: transform .3s; }
.cfg-section-arrow i.expanded { transform: rotate(180deg); }
/* 折叠箭头：非靠右时占满左侧空间 */
.cfg-section-arrow--ml { margin-left: auto; }
/* 折叠箭头悬停态 */
.cfg-section-clickable:hover .cfg-section-arrow { background: #e0e7ff; }
.cfg-section-clickable:hover .cfg-section-arrow i { color: #4A56CC; }

/* ---- 公告预览卡片 ---- */
.cfg-ann-preview {
    background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px;
    padding: 12px 14px; font-size: 13px; line-height: 1.7;
    white-space: pre-wrap; word-break: break-word;
    max-height: 220px; overflow: auto;
}
.cfg-ann-preview.empty { color: #94a3b8; }
.cfg-ann-preview.filled { color: #334155; }
/* 编辑公告按钮 */
.cfg-ann-edit-btn {
    height: 36px; display: inline-flex; align-items: center; justify-content: center;
}

/* ---- 隐藏的 textarea（收集提交值用） ---- */
.cfg-hidden-textarea { display: none; }

/* ---- 保存按钮内文字宽度对齐 ---- */
.cfg-save-label { display: inline-block; width: 64px; text-align: center; }

/* ================= 公告编辑弹窗（app.js 动态生成） ================= */
#annEditorModal {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 50;
    visibility: hidden; opacity: 0;
    transition: opacity .2s ease, visibility .2s;
}
#annEditorModal.show { visibility: visible; opacity: 1; }
.ann-dialog {
    background: #fff; border-radius: 16px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .35);
    width: 100%; max-width: 560px; margin: 0 16px; overflow: hidden;
    transform: scale(.96);
    transition: transform .2s ease;
}
#annEditorModal.show .ann-dialog { transform: scale(1); }
.ann-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px 14px; border-bottom: 1px solid #f1f5f9;
}
.ann-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.ann-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ann-close {
    width: 32px; height: 32px; border-radius: 999px;
    background: #f1f5f9; color: #64748b; font-size: 18px; line-height: 1;
    cursor: pointer; border: none;
    display: flex; align-items: center; justify-content: center;
}
.ann-close:hover { background: #e2e8f0; }
.ann-body { padding: 20px 24px; }
.ann-textarea {
    width: 100%; height: 280px; box-sizing: border-box;
    padding: 12px 14px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 12px;
    font-size: 13px; line-height: 1.7; color: #334155;
    outline: none; resize: none;
    transition: border-color .15s, box-shadow .15s;
}
.ann-textarea:focus { border-color: #5E6BE3; box-shadow: 0 0 0 3px rgba(94, 107, 227, .15); }
.ann-hint { font-size: 11px; color: #94a3b8; margin-top: 8px; }
.ann-foot {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; padding: 0 24px 20px;
}
.ann-btn-cancel {
    padding: 8px 16px; border-radius: 12px;
    background: #f1f5f9; color: #475569;
    font-size: 13px; font-weight: 500; cursor: pointer; border: none;
    transition: background .2s;
}
.ann-btn-cancel:hover { background: #e2e8f0; }
.ann-btn-save {
    padding: 8px 20px; border-radius: 12px;
    background: #5E6BE3; color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer; border: none;
    box-shadow: 0 4px 12px rgba(94, 107, 227, .35);
    transition: background .2s;
}
.ann-btn-save:hover { background: #4A56CC; }

/* ================= 登录表单语义类（从 HTML Tailwind 工具类抽取） ================= */
/* 表单标签（手机号/密码/验证码等） */
.login-label {
    display: block; font-size: 0.75rem; font-weight: 700; color: #475569;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
/* 登录输入框（带左侧图标 padding） */
.login-input {
    width: 100%; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem;
    padding-left: 2.5rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
    font-size: 0.875rem; transition: background .15s, border-color .15s, box-shadow .15s;
}
.login-input:focus { background: #fff; outline: none; border-color: transparent; box-shadow: 0 0 0 2px #6366f1; }
/* 错误提示条（默认隐藏，showAuthErr 时移除 .hidden） */
.login-error {
    font-size: 0.75rem; color: #f43f5e; font-weight: 600; text-align: center;
    background: #fff1f2; padding: 0.625rem; border-radius: 0.75rem; border: 1px solid #ffe4e6;
}
.login-error.hidden { display: none; }
/* 链接按钮（注册/忘记密码/返回登录） */
.login-link { color: #4f46e5; font-weight: 500; transition: color .15s; }
.login-link:hover { color: #4338ca; }

/* ================= 导航按钮语义类（从 HTML Tailwind 工具类抽取） ================= */
/* 基础按钮：布局 + 尺寸 + 过渡（激活/非激活态共用） */
.nav-btn {
    width: 100%; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.875rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 500; transition: all .15s ease;
    /* 固定高度 3rem：折叠态与展开态一致，折叠/展开切换时按钮高度完全不变，菜单高度不跳变 */
    height: 3rem;
}
/* 激活态：白字 + indigo 底 + 阴影 */
.nav-btn--active { color: #fff; background: #6366f1; box-shadow: 0 10px 15px -3px rgba(99,102,241,.3); }
/* 非激活态：灰字 + hover 高亮 */
.nav-btn--idle { color: #94a3b8; }
.nav-btn--idle:hover { background: #1e293b; color: #e2e8f0; }
/* 导航分组标题（与 .nav-btn 基础布局一致，带折叠箭头） */
.nav-group-head {
    width: 100%; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem 0.875rem; border-radius: 0.75rem;
    font-size: 0.875rem; font-weight: 500; transition: all .15s ease;
    color: #94a3b8;
    /* 同 .nav-btn：固定展开态高度，折叠↔展开平滑过渡 */
    height: 3rem;
}
.nav-group-head:hover { background: #1e293b; color: #e2e8f0; }

/* ================= 弹窗组件语义类（从 HTML Tailwind 工具类抽取） ================= */
/* 弹窗遮罩层（fixed 全屏 + 毛玻璃 + 居中） */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15,23,42,.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 50;
}
/* .hidden 优先级兜底：确保弹窗默认隐藏（app.css 在 tailwind.css 之后加载，
   单类选择器优先级相同，需用 .modal-overlay.hidden 提权覆盖 display:flex） */
.modal-overlay.hidden { display: none; }
/* 关闭按钮（×） */
.modal-close { color: #94a3b8; font-size: 1.5rem; line-height: 1; transition: color .15s; }
.modal-close:hover { color: #475569; }
/* 取消按钮（灰底） */
.modal-cancel-btn {
    padding: 0.5rem 1rem; background: #f1f5f9; color: #475569;
    border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500;
    transition: background .15s; border: none; cursor: pointer;
}
.modal-cancel-btn:hover { background: #e2e8f0; }
/* 确认按钮（红底） */
.modal-confirm-btn {
    padding: 0.5rem 1rem; background: #e11d48; color: #fff;
    border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transition: background .15s;
    border: none; cursor: pointer;
}
.modal-confirm-btn:hover { background: #be123c; }
/* 按钮操作行（右对齐 + 间距） */
.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 0.25rem; }

/* ================= 表格与弹窗容器语义类 ================= */
/* 数据表格：统一消除浏览器默认 border-spacing */
.data-table { border-spacing: 0; }
/* 弹窗内容容器：标准 640px 宽 / 85vh 高 */
.modal-container { max-width: 640px; max-height: 85vh; }
/* 弹窗内容容器：大号 920px 宽 */
.modal-container--lg { max-width: 920px; max-height: 85vh; }
/* 统计数字：等宽数字排版，对齐美观 */
.stat-num { font-variant-numeric: tabular-nums; }

/* ================= 概览页：群功能开关组件 ================= */
.ov-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 0; border-top: 1px solid #f1f5f9; }
.ov-switch-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ov-switch-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #e2e8f0; transition: background .2s; }
.ov-switch-icon i { color: #fff; font-size: 15px; }
.ov-switch-text { min-width: 0; }
.ov-switch-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.ov-switch-desc { font-size: 12px; color: #94a3b8; margin-top: 3px; line-height: 1.5; }
/* 开关组件：替代原 run-switch 死类 */
.ov-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex: 0 0 48px; max-width: 48px; flex-shrink: 0; cursor: pointer; }
.ov-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ov-switch-track { position: absolute; inset: 0; border-radius: 9999px; background: #cbd5e1; transition: background .2s; }
.ov-switch-dot { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }

/* ================= 群设置页标题与保存按钮 ================= */
.cfg-page-title { font-weight: 700; font-size: 18px; color: #1e293b; }
.cfg-page-desc { font-size: 12px; color: #94a3b8; margin-top: 4px; }
.cfg-save-label-text { display: inline-block; width: 64px; text-align: center; }

/* ================= 概览页：今日主持滚动容器 ================= */
.ov-schedule-box { max-height: 260px; overflow-y: auto; overflow-x: hidden; padding-right: 14px; }

/* ===== 语义化组件类（封装高频 Tailwind 组合；颜色类仍保留在 HTML 中） ===== */
/* 说明：div/span 类用 :where() 包裹使特异性为 0，HTML 保留的 Tailwind 类可覆盖。
   但应用到 button/input 等原生元素的类（btn-primary / page-btn / btn-soft /
   input-field）必须用普通类：Tailwind preflight 的 button,input{...} 元素选择器
   （特异性 0,0,1）会重置 padding、background-color、font-size，覆盖 :where()（0,0,0），
   导致按钮/输入框样式丢失；普通类（0,1,0）可正常胜过 preflight。
   边框只写宽度与样式，border-color 始终由 Tailwind 颜色类提供。 */

/* 页面主卡片 */
:where(.page-card) {
    background: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 232, 240, .8);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.page-card > * + * { margin-top: 1rem; }

/* 卡片头（标题与右侧操作行） */
:where(.card-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .75rem;
    border-bottom: 1px solid #f1f5f9;
}

/* 按钮/控件组（替代 flex items-center space-x-3） */
:where(.toolbar) {
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* 筛选栏（替代 flex flex-wrap items-center justify-between gap-3） */
:where(.filter-bar) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* 输入框公共样式（背景/宽度类仍由 HTML 提供；普通类胜过 preflight 的 padding/font-size 重置） */
.input-field {
    border-width: 1px;
    border-style: solid;
    border-color: #e2e8f0;
    border-radius: .75rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-field:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #6366f1;
}

/* 主操作按钮（查询/新增/保存；普通类胜过 preflight 的背景/padding 重置） */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    background: #6366f1;
    color: #fff;
    border-radius: .75rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { background: #4f46e5; }

/* 分页/导出按钮 */
.page-btn {
    padding: .375rem .875rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: .75rem;
    font-size: .75rem;
    font-weight: 500;
    transition: background-color .15s ease;
}
.page-btn:hover { background: #e2e8f0; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 表格底栏（分页工具条） */
:where(.table-toolbar) {
    padding-top: .75rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* 表头单元格 / 可排序附加 / 数据单元格 */
:where(.th-cell) { padding: .875rem; background: #f8fafc; font-weight: 600; }
:where(.th-sortable) { cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; transition: color .15s ease; }
:where(.th-sortable):hover { color: #6366f1; }
:where(.td-cell) { padding: .875rem; }

/* 明细弹窗（底部弹起，桌面端居中圆角） */
:where(.detail-sheet) {
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    :where(.detail-sheet) {
        border-radius: 1.5rem;
        margin-bottom: 3rem;
    }
}
:where(.detail-sheet-head) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
:where(.detail-sheet-foot) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

/* 统计卡片（主色类 bg-{c}-50 border border-{c}-200 仍由 HTML 提供） */
:where(.stat-card) {
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* 统计图标（主色类 bg-{c}-500 仍由 HTML 提供） */
:where(.stat-icon) {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    color: #fff;
}
/* 统计标签（主色类 text-{c}-500/600 仍由 HTML 提供） */
:where(.stat-label) { font-size: .75rem; font-weight: 500; }
/* 统计数值（主色类 text-{c}-600/700 仍由 HTML 提供） */
:where(.stat-value) { font-size: 1.25rem; font-weight: 700; margin-top: .125rem; }

/* 状态徽章（边框/底色类仍由 HTML 提供） */
:where(.badge) {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    border-width: 1px;
    border-style: solid;
}

/* 辅助提示文字 */
:where(.hint-text) { font-size: .75rem; color: #94a3b8; }

/* 次要操作按钮（查看明细/发卡/编辑/删除，颜色类保留；普通类胜过 preflight 重置） */
.btn-soft {
    display: inline-flex;
    align-items: center;
    padding: .375rem .875rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

/* 固定档切换按钮：未固定=绿 / 已固定=红；hover 实色填充、文字与图标变白（独立 CSS，避免依赖 Tailwind 编译类） */
.member-fix-btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}
.member-fix-btn i { margin-right: .3rem; }
.member-fix-btn:disabled { opacity: .55; cursor: wait; }
.member-fix-off { background: #ecfdf5; color: #059669; }
.member-fix-off:hover { background: #10b981; color: #fff; }
.member-fix-on { background: #fff1f2; color: #e11d48; }
.member-fix-on:hover { background: #e11d48; color: #fff; }