/* =====================================================================
   jwxt 教务管理系统 · 样式（对齐原型 AdminLTE 2.x 视觉）
   顶栏 #222d32 / 侧栏 #2c3b41 / 主色 #3c8dbc / 正文 12px
   ===================================================================== */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    font-size: 12px;
    color: #333;
    background: #f4f6f8;
    -webkit-font-smoothing: antialiased;
}

a { color: #3c8dbc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================ 顶栏 ============================ */
.topbar {
    height: 48px;
    background: #222d32;
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
}

.brand {
    width: 148px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    flex: 0 0 148px;
}

.brand-logo {
    width: 22px; height: 22px;
    border-radius: 3px;
    background: linear-gradient(135deg, #26b3ad, #1b8f9b);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-name {
    font-size: 13px;
    color: #2f3b45;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modules { display: flex; }

.module {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    color: #b8c7ce;
    font-size: 13px;
    border-right: 1px solid rgba(255, 255, 255, .04);
}

.module:hover { background: #1b2529; color: #fff; text-decoration: none; }

.module.on { background: #2f8ec4; color: #fff; }

.m-ico {
    width: 20px; height: 20px;
    display: inline-block;
    object-fit: contain;
    flex: 0 0 20px;
}

.top-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    color: #b8c7ce;
    font-size: 12px;
}

.top-right .brand-tag {
    background: #fff;
    color: #2f3b45;
    padding: 2px 8px;
    border-radius: 2px;
}

.top-right .link { color: #b8c7ce; }
.top-right .link:hover { color: #fff; text-decoration: none; }

/* ============================ 侧栏 ============================ */
.wrap { display: flex; padding-top: 48px; min-height: 100vh; }

.sidebar {
    width: 148px;
    flex: 0 0 148px;
    background: #2c3b41;
    position: fixed;
    top: 48px; bottom: 0; left: 0;
    overflow-y: auto;
    z-index: 90;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #45565e; border-radius: 3px; }

.group-title {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 10px 7px;
    font-size: 12px;
    color: #d6e0e6;
    font-weight: 600;
    border-top: 1px solid #3a4a51;
    cursor: pointer;
    user-select: none;
}

.group-title:first-child { border-top: 0; }

.group-title:hover { background: #243238; }

.g-ico {
    width: 15px; height: 15px;
    object-fit: contain;
    flex: 0 0 15px;
}

.caret {
    margin-left: auto;
    color: #8fa3ad;
    font-size: 10px;
    transition: transform .18s ease;
}

.group-items { overflow: hidden; }

.menu-group.collapsed .group-items { display: none; }
.menu-group.collapsed .caret { transform: rotate(-90deg); }

.menu-item {
    display: block;
    padding: 6px 10px 6px 26px;
    font-size: 12px;
    color: #b8c7ce;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item:hover { background: #243238; color: #fff; text-decoration: none; }
.menu-item.on { background: #3c8dbc; color: #fff; }

/* ============================ 主区 ============================ */
.main {
    margin-left: 148px;
    flex: 1;
    min-width: 0;
    padding: 10px 12px 14px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e7ebef;
    padding: 7px 10px;
}

.tabs { display: flex; align-items: baseline; gap: 10px; }

.tabs .tab { color: #8a939e; font-size: 13px; }
.tabs .tab.on { color: #3c8dbc; font-weight: 600; }

.tabs .tab-name {
    color: #5b6572;
    font-size: 12px;
    padding-left: 10px;
    border-left: 1px solid #e5e9ee;
}

.head-actions { display: flex; gap: 6px; }

/* ============================ 按钮 ============================ */
.btn {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    font-family: inherit;
    border: 1px solid #d6dbe1;
    background: #fff;
    color: #555;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn:hover { background: #f5f7f9; }
.btn .i { font-size: 11px; }
.btn-blue { background: #3c8dbc; border-color: #3c8dbc; color: #fff; }
.btn-blue:hover { background: #337ab7; }
.btn-green { background: #00a65a; border-color: #00a65a; color: #fff; }
.btn-green:hover { background: #00904f; }
.btn-purple { background: #605ca8; border-color: #605ca8; color: #fff; }
.btn-purple:hover { background: #554f9c; }
.btn-red { background: #dd4b39; border-color: #dd4b39; color: #fff; }
.btn-red:hover { background: #c93f2e; }
.btn-orange { background: #ec971f; border-color: #ec971f; color: #fff; }
.btn-orange:hover { background: #d58512; }
.btn-cyan { background: #17a2b8; border-color: #17a2b8; color: #fff; }
.btn-cyan:hover { background: #138496; }
.btn-gray { background: #6c757d; border-color: #6c757d; color: #fff; }
.btn-gray:hover { background: #5a6268; }
.btn[disabled] { opacity: .6; cursor: default; }

/* ============================ 卡片 / 筛选 ============================ */
.card {
    background: #fff;
    border: 1px solid #e7ebef;
    border-top: 0;
}

.tip {
    background: #fffbe6;
    border-bottom: 1px solid #f5edc9;
    color: #8a6d3b;
    padding: 6px 10px;
    font-size: 12px;
}

/* 筛选条：条件区左、按钮区右；标签与控件强制同一基线垂直居中 */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #eef1f4;
}

.fitems { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex: 1 1 auto; min-width: 0; }
.fbtns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.fitem { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
.fitem label {
    color: #666;
    line-height: 26px;
    height: 26px;
    display: inline-block;
    white-space: nowrap;
}
.fsep { font-style: normal; color: #8a939e; line-height: 26px; }

.fsel, .ftxt, .fdate {
    height: 26px;
    box-sizing: border-box;
    vertical-align: middle;
    border: 1px solid #d9dee4;
    border-radius: 2px;
    font-size: 12px;
    font-family: inherit;
    color: #444;
    background: #fff;
    padding: 0 4px;
    outline: none;
}

.fsel { min-width: 88px; }
.ftxt { width: 130px; }
.fdate { width: 128px; }
.fsel:focus, .ftxt:focus, .fdate:focus { border-color: #3c8dbc; }

.btn-search { margin-left: 0; }
.chart-tools { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
.toolbar-tip { margin-left: 4px; color: #9aa4af; font-size: 12px; }

.reset { color: #8a939e; font-size: 12px; }

/* 工具栏：导出 / 新增 / 批量动作（对齐源站彩色按钮条） */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
}

/* ============================ 表格 ============================ */
.table-wrap { overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; }

table.grid th {
    background: #f7f8fa;
    color: #5b6572;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #e7ebef;
    white-space: nowrap;
}

table.grid td {
    padding: 7px 8px;
    border-bottom: 1px solid #f2f4f7;
    color: #3d4650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
}

table.grid tbody tr:hover { background: #fafcfe; }
table.grid .ck { width: 30px; text-align: center; }
table.grid .op { width: 96px; white-space: nowrap; }
table.grid .op a { margin-right: 8px; }
table.grid .op a.danger { color: #dd4b39; }

.al-right { text-align: right; }
.al-center { text-align: center; }
.sort { color: #c2c9d1; font-size: 10px; margin-left: 3px; }

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
    line-height: 16px;
}

.b-green { background: #e8f6ee; color: #00a65a; }
.b-orange { background: #fdf3e3; color: #d98708; }
.b-red { background: #fdeceb; color: #dd4b39; }
.b-gray { background: #f2f4f7; color: #7a838f; }

.empty { text-align: center; color: #b7bdc7; padding: 58px 0 64px; }
.empty svg { display: block; margin: 0 auto 8px; }

/* ============================ 页脚 ============================ */
.page-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #e7ebef;
    border-top: 0;
    padding: 7px 10px;
}

.foot-left { display: flex; gap: 6px; }
.foot-right { display: flex; align-items: center; gap: 10px; color: #7a838f; }

.size-sel {
    height: 24px;
    border: 1px solid #d9dee4;
    border-radius: 2px;
    font-size: 12px;
    color: #555;
    background: #fff;
}

.pager { display: inline-flex; align-items: center; gap: 8px; }

/* ============================ 弹窗 ============================ */
.mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 900;
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    /* Bootstrap 3 的 .modal 自带 right/bottom:0，会把弹窗拉满半屏，必须显式复位 */
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    /* 宽高按内容自适应：介于最小与视口上限之间，openModal 时切 flex 纵向布局 */
    width: auto;
    min-width: 420px;
    max-width: 760px;
    max-height: calc(100vh - 64px);
    background: #fff;
    border-radius: 3px;
    z-index: 901;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
    /* 纵向三段式：头/脚不压缩，中间内容区超高时滚动 */
    flex-direction: column;
}

.modal-head {
    background: #3c8dbc;
    color: #fff;
    padding: 9px 16px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-x { color: #fff; font-size: 16px; line-height: 1; }

.modal-body {
    /* 内边距交给 .modal-inner：滚动容器自身带 padding 时，
       右侧 padding 会被滚动条/横向溢出吞掉，造成「左宽右窄」 */
    padding: 0;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
}
.modal-inner { padding: 20px 28px; }
/* 字段多的表单改双列：单列 14 行会又窄又高，双列后宽高比回到常规弹窗 */
.modal.grid2 { width: 700px; }
.modal-inner .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.modal-inner .form-grid2 .finput { width: 100%; }
.modal-inner .form-grid2 .form-row > label { flex: 0 0 auto; }
.modal-inner .form-grid2 .form-row { min-width: 0; }
/* 弹窗内的多层级内容：缩进用背景+左线表达，不再靠单侧 padding 制造「左边空一大块」 */
.modal-inner .dlg-grp { margin-bottom: 6px; }
.modal-inner .dlg-grp-t { font-size: 13px; font-weight: 600; color: #333; padding: 4px 0 8px; border-bottom: 1px solid #eef1f4; margin-bottom: 10px; }
.modal-inner .dlg-sub { margin: 0 0 8px 12px; padding: 6px 0 0 12px; border-left: 2px solid #e7ebef; }
.modal-inner .dlg-sub-t { font-size: 12px; color: #888; margin-bottom: 6px; }
.modal-body .confirm-msg { padding: 8px 0 4px; line-height: 1.7; color: #3d4650; }
.modal-foot { padding: 12px 28px; text-align: right; border-top: 1px solid #eef1f4; display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ============================ 表单 ============================ */
.form-card { padding: 18px 20px; border-top: 1px solid #e7ebef; max-width: 620px; }
.form-title { font-size: 14px; color: #333; font-weight: 600; margin-bottom: 8px; }

.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* 标签列：宽度由 openModal 测量「本弹窗内最长标签」写入 --form-label-w（左对齐）。
   曾经用固定 90px + text-align:right，短标签的文字贴右，空白全堆在左侧，
   弹窗看起来就是「左边留白多、右边留白少」。左对齐后左留白恒等于 .modal-inner 的 16px。 */
.form-row label,
#modalBody .form-row label {
    width: var(--form-label-w, 76px); flex: 0 0 auto; color: #666; text-align: left;
    /* 不换行：否则「学员姓名 *」会被拆成两行，量宽也就量不准 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.finput {
    height: 28px;
    border: 1px solid #d9dee4;
    border-radius: 2px;
    padding: 0 8px;
    font-size: 12px;
    font-family: inherit;
    color: #333;
    width: 260px;
    outline: none;
}

.finput:focus { border-color: #3c8dbc; }
#modalBody .finput { width: 300px; }
/* B1 学员详情弹窗：只读字段展示 */
#modalBody .detail-grid { padding: 4px 0; }
#modalBody .fstatic { flex: 1; min-width: 0; color: #333; word-break: break-all; }

.form-msg { margin-left: calc(var(--form-label-w, 76px) + 10px); font-size: 12px; }
.form-msg.err { color: #dd4b39; }
.form-msg.ok { color: #00a65a; }

/* ============================ 提示 ============================ */
.toast {
    position: fixed;
    left: 50%;
    /* 顶部区域、压在顶栏下方：成功提示不遮挡导航，也不落到页面底部 */
    top: 56px;
    transform: translateX(-50%) translateY(-20px);
    background: #00a65a;
    color: #fff;
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: all .22s;
    z-index: 999;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 失败不再用黑色/红色 toast，改为弹窗（见 app.js fail()） */

/* ============================ 工作台 ============================ */
.wb-notice {
    background: #fff;
    border: 1px solid #e7ebef;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #5b6572;
}

.wb-notice .n-ico { color: #f39c12; }
.wb-notice .n-link { color: #3c8dbc; }
.wb-notice .n-right { margin-left: auto; color: #8a939e; }

.wb-title { text-align: center; font-size: 15px; color: #333; margin: 14px 0 10px; font-weight: 600; }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.scard { position: relative; height: 88px; border-radius: 2px; color: #fff; overflow: hidden; }
.scard.blue { background: linear-gradient(135deg, #46b8e0, #1f8ec4); }
.scard.green { background: linear-gradient(135deg, #5ecb8b, #1fa25c); }
.scard.purple { background: linear-gradient(135deg, #a97bd8, #7b4fb2); }
.scard.orange { background: linear-gradient(135deg, #f8c25a, #e58e26); }

.sc-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 0; }
.sc-ico { font-size: 18px; opacity: .9; }
.sc-num { font-size: 26px; font-weight: 700; line-height: 1; }
.sc-label { padding: 2px 14px 0; font-size: 12px; opacity: .95; }

.sc-more {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .14);
    padding: 3px 12px;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

.wb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.wb-row.wide { grid-template-columns: 2fr 1fr; }
.wb-row.three { grid-template-columns: repeat(3, 1fr); }

.panel { background: #fff; border: 1px solid #e7ebef; padding: 0 10px 8px; min-width: 0; }

.p-title {
    font-size: 12.5px;
    color: #4a545f;
    background: #f5f7f9;
    margin: 0 -10px 8px;
    padding: 7px 10px;
    border-bottom: 1px solid #eef1f4;
    font-weight: 600;
}

.p-sub { color: #8a939e; font-size: 11px; margin-bottom: 4px; }
.chart { width: 100%; }

.mini-table { max-height: 232px; overflow-y: auto; }
.mini-table table { width: 100%; border-collapse: collapse; }
.mini-table th {
    background: #f7f8fa;
    color: #6b7480;
    font-weight: 600;
    font-size: 11.5px;
    text-align: left;
    padding: 6px 8px;
    position: sticky;
    top: 0;
}
.mini-table td { padding: 6px 8px; border-bottom: 1px solid #f4f6f8; color: #3d4650; font-size: 12px; }
.mini-table td.red { color: #dd4b39; }
.mini-table td.none { text-align: center; color: #b7bdc7; padding: 16px 0; }

/* ============================ 登录页 ============================ */
.login-body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: #cdeef3;
}

.sky {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #c3e9f1 0%, #d5f0f5 38%, #e6f7f8 62%, #d9f3f3 100%);
    overflow: hidden;
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, .82);
    border-radius: 50%;
    filter: blur(1px);
}

.c1 { width: 210px; height: 62px; left: 3%; top: 8%; box-shadow: 40px 12px 0 -6px rgba(255,255,255,.8), 92px -4px 0 -14px rgba(255,255,255,.7); }
.c2 { width: 300px; height: 46px; right: -3%; top: 25%; box-shadow: -60px 8px 0 -8px rgba(255,255,255,.75); }
.c3 { width: 150px; height: 40px; left: 42%; top: 16%; opacity: .7; }

.mount {
    position: absolute;
    bottom: 0;
    height: 34%;
}

.m-left {
    left: -8%;
    width: 72%;
    background: linear-gradient(180deg, #4d8fa6 0%, #356f85 55%, #2a6075 100%);
    border-radius: 55% 55% 0 0 / 88% 88% 0 0;
}

.m-right {
    right: -10%;
    width: 78%;
    height: 30%;
    background: linear-gradient(180deg, #46879e 0%, #2f6a80 55%, #245a6d 100%);
    border-radius: 58% 58% 0 0 / 92% 92% 0 0;
}

.flowers {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6%;
    z-index: 3;
    background:
        radial-gradient(circle at 8% 40%, #f6e02a 0 5px, transparent 6px),
        radial-gradient(circle at 22% 62%, #ffe83a 0 4px, transparent 5px),
        radial-gradient(circle at 36% 30%, #f6e02a 0 5px, transparent 6px),
        radial-gradient(circle at 52% 58%, #ffe83a 0 4px, transparent 5px),
        radial-gradient(circle at 66% 36%, #f6e02a 0 5px, transparent 6px),
        radial-gradient(circle at 80% 60%, #ffe83a 0 4px, transparent 5px),
        radial-gradient(circle at 92% 34%, #f6e02a 0 5px, transparent 6px),
        linear-gradient(180deg, rgba(246, 224, 42, .9), rgba(226, 206, 30, .95));
}

.login-card {
    position: relative;
    z-index: 5;
    width: 366px;
    margin: 110px auto 0;
    background: #fff;
    border-radius: 3px;
    padding: 24px 26px 28px;
    box-shadow: 0 8px 30px rgba(20, 60, 80, .12);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    color: #21a9a0;
    font-size: 13px;
    letter-spacing: 1px;
}

.logo-mark {
    width: 20px; height: 20px;
    border-radius: 3px;
    background: linear-gradient(135deg, #34c0b6, #1a8f96);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-field {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e5e8ec;
    padding: 9px 2px;
}

.login-field .fi { font-size: 12px; opacity: .45; }
.login-field input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 12px;
    font-family: inherit;
    color: #333;
    background: transparent;
}

.login-btn {
    width: 100%;
    height: 32px;
    margin-top: 20px;
    background: #4a90e2;
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 4px;
    cursor: pointer;
}

.login-btn:hover { background: #3f83d3; }
.login-err { color: #dd4b39; font-size: 12px; height: 16px; margin-top: 6px; }

/* ============================ 错误页 ============================ */
.err-box { background: #fff; border: 1px solid #e7ebef; padding: 60px 20px; text-align: center; }
.err-code { font-size: 40px; color: #3c8dbc; font-weight: 700; }
.err-msg { color: #6b7480; margin: 8px 0 18px; }

/* ============================ 顶部页签（原型 X|Y） ============================ */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid #dfe4e9; margin: 0 0 14px; }
.tab {
    display: inline-block; padding: 8px 18px; margin-bottom: -1px;
    border: 1px solid transparent; border-bottom: none; color: #5a6470;
    font-size: 13px; text-decoration: none;
}
.tab:hover { color: #3c8dbc; }
.tab.active {
    background: #fff; border-color: #dfe4e9; border-top: 2px solid #3c8dbc;
    color: #3c8dbc; font-weight: 600;
}

/* ============================ 课堂作品卡片墙 ============================ */
.work-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 4px 0 14px; }
.work-card { border: 1px solid #e3e8ed; border-radius: 4px; background: #fff; overflow: hidden; }
.work-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .09); }
.wc-img { position: relative; height: 150px; background: #f5f7f9; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wc-img img { max-width: 100%; max-height: 100%; transition: transform .2s; }
.wc-placeholder { color: #9aa4af; font-size: 12px; }
.wc-excellent { position: absolute; top: 6px; right: 6px; background: #dd4b39; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 2px; }
.wc-body { padding: 8px 10px; }
.wc-title { font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-meta { display: flex; justify-content: space-between; color: #6b7480; font-size: 12px; margin-top: 5px; }
.wc-meta span:last-child { color: #f39c12; }
.wc-sub, .wc-date { color: #8a939e; font-size: 11px; margin-top: 3px; }
.wc-ops { border-top: 1px solid #eef1f4; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wc-ops a { font-size: 12px; }

/* ============================ 学员信息详情页 ============================ */
.detail-head { display: flex; gap: 18px; align-items: center; padding: 6px 0 16px; }
.detail-avatar { width: 74px; height: 74px; border-radius: 50%; background: #eef3f8; display: flex; align-items: center; justify-content: center; font-size: 36px; flex: none; }
.detail-who { flex: 1; min-width: 0; }
.detail-name { font-size: 17px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 10px; }
.detail-no { font-size: 12px; color: #8a939e; font-weight: 400; }
.detail-tags, .detail-wallet { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: #6b7480; margin-top: 8px; }
.detail-wallet b { color: #3c8dbc; }
.detail-foot { margin-top: 14px; display: flex; gap: 8px; }

/* ======================= 统计图表页（page/charts） ======================= */
/* 容器类名与工作台的 .stat-cards（4 等分大卡）区分开：同名会让工作台卡片退化成
   flex 内容宽，右侧留一大片空白。图表页汇总卡用 .sum-cards。 */
.sum-cards { display: flex; gap: 12px; flex-wrap: wrap; padding: 12px 0 4px; }
.stat-card {
    flex: 1 1 150px; min-width: 150px; background: #fff; border: 1px solid #e7ebef;
    border-radius: 3px; padding: 10px 14px;
}
.stat-card .sc-label { font-size: 12px; color: #888; }
.stat-card .sc-value { font-size: 20px; font-weight: 600; margin-top: 4px; }
.chart-box { border: 1px solid #e7ebef; border-radius: 3px; margin: 12px 0; padding: 8px 10px; background: #fff; }
.head-export { margin-left: 10px; color: #3c8dbc; }

/* ======================= 基本配置（page/config，三页签表单） ======================= */
.cfg-card { padding: 12px 16px 4px; }
.cfg-form { max-width: 760px; }
.cfg-sec { border-top: 1px solid #eef1f4; padding: 10px 0 4px; }
.cfg-sec:first-of-type { border-top: none; }
.cfg-sec-t { font-size: 13px; font-weight: 600; color: #33404d; margin-bottom: 10px; }
.cfg-sec-t::before {
    content: ''; display: inline-block; width: 3px; height: 12px;
    background: #3c8dbc; margin-right: 7px; vertical-align: -1px;
}
/* 表单标签列：与弹窗同一套变量，左对齐，左右留白相等 */
.cfg-sec-body { --form-label-w: 104px; }
.cfg-sec-body .form-row { margin-bottom: 10px; align-items: flex-start; }
.cfg-sec-body .form-row > label { padding-top: 7px; }
.cfg-sec-body .finput { width: 320px; }
.cfg-textarea { height: auto; padding: 6px 8px; line-height: 1.6; resize: vertical; }
.cfg-hint { font-size: 12px; color: #9aa4af; padding-top: 8px; }
.cfg-preview { display: inline-flex; align-items: center; height: 28px; }
.cfg-preview img { max-height: 28px; max-width: 96px; border: 1px solid #e3e8ed; background: #fafbfc; }
.cfg-preview em { font-style: normal; color: #b6bec7; font-size: 12px; display: none; }
.cfg-foot { display: flex; align-items: center; gap: 8px; padding: 12px 0 12px; border-top: 1px solid #eef1f4; margin-top: 6px; }
.cfg-msg { font-size: 12px; color: #8a939e; }
.cfg-msg.ok { color: #00a65a; }
.cfg-msg.err { color: #dd4b39; }
.cfg-table { margin-bottom: 10px; }
.btn-sm { height: 24px; padding: 0 8px; font-size: 12px; }

/* ======================= 排班看板（page/kanban，周视图） ======================= */
.kb-sum { margin-left: auto; color: #6b7480; font-size: 12px; }
.kb-sum b { color: #3c8dbc; }
.kanban { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 4px 0 14px; }
.kb-col { background: #f7f9fb; border: 1px solid #e9edf1; border-radius: 3px; min-height: 220px; }
.kb-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px; font-size: 12px; color: #33404d; font-weight: 600;
    background: #eef3f7; border-bottom: 1px solid #e3e9ee;
}
.kb-head em { font-style: normal; font-weight: 400; color: #8a939e; font-size: 11px; }
.kb-body { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.kb-card {
    background: #fff; border: 1px solid #e3e8ed; border-left: 3px solid #3c8dbc;
    border-radius: 3px; padding: 6px 8px; font-size: 12px;
}
.kb-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.kb-card.kb-off { border-left-color: #f39c12; background: #fffdf7; }
.kb-card.kb-done { border-left-color: #b6bec7; background: #fafbfc; }
.kb-time { color: #3c8dbc; font-weight: 600; }
.kb-name { color: #2f3a45; font-weight: 600; margin-top: 2px; }
.kb-clazz { color: #8a939e; font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: #6b7480; font-size: 11px; margin-top: 4px; }
.kb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.kb-foot a { color: #3c8dbc; }
.kb-empty { color: #b6bec7; font-size: 12px; text-align: center; padding: 16px 0; }

/* ======================= 老师考勤（page/calendar，月度日历） ======================= */
.cal-list { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 14px; }
.cal-teacher { border: 1px solid #e7ebef; border-radius: 3px; background: #fff; }
.cal-head {
    display: flex; align-items: center; gap: 16px; padding: 8px 12px;
    background: #eef3f7; border-bottom: 1px solid #e3e9ee; font-size: 12px; color: #5b6572;
}
.cal-name { font-size: 13px; font-weight: 600; color: #2f3a45; }
.cal-stat b { color: #3c8dbc; }
.cal-stat.late b { color: #f39c12; }
.cal-stat.leave b { color: #dd4b39; }
.cal-stat.plan b { color: #6b7480; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #eef1f4; padding: 1px; }
.cal-week { background: #f7f9fb; text-align: center; font-size: 11px; color: #8a939e; padding: 4px 0; }
.cal-week.we { color: #c0a06a; }
.cal-pad { background: #fff; min-height: 42px; }
.cal-cell {
    background: #fff; min-height: 42px; padding: 3px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.cal-day { font-size: 11px; color: #6b7480; }
.cal-tag { font-size: 10px; color: #9aa4af; }
.cal-cell.is-present { background: #f2fbf6; }
.cal-cell.is-present .cal-tag { color: #00a65a; }
.cal-cell.is-late { background: #fffaf0; }
.cal-cell.is-late .cal-tag { color: #f39c12; }
.cal-cell.is-leave { background: #fdf3f2; }
.cal-cell.is-leave .cal-tag { color: #dd4b39; }
.cal-cell.is-rest, .cal-cell.is-none { background: #fafbfc; }
.cal-cell.is-rest .cal-tag, .cal-cell.is-none .cal-tag { color: #b6bec7; }

/* ======================= 经营中心（page/biz） ======================= */
.biz-card { padding: 12px 16px 8px; }
.biz-goal {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, #3c8dbc, #2a6f9b); color: #fff;
    border-radius: 3px; padding: 14px 18px; margin-bottom: 12px;
}
.bg-year { font-size: 12px; opacity: .9; }
.bg-nums { margin-top: 6px; font-size: 12px; opacity: .95; }
.bg-num b { font-size: 24px; font-weight: 600; letter-spacing: .5px; }
.bg-sep { margin: 0 8px; opacity: .6; }
.bg-bar { height: 6px; background: rgba(255, 255, 255, .28); border-radius: 3px; margin-top: 10px; width: 420px; overflow: hidden; }
.bg-bar i { display: block; height: 100%; background: #ffd166; border-radius: 3px; }
.bg-rate { font-size: 30px; font-weight: 700; line-height: 1; }
.bg-rate em { font-style: normal; font-size: 14px; margin-left: 2px; }
.bg-rate-t { font-size: 12px; opacity: .9; margin-top: 6px; text-align: center; }

.biz-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.bc { background: #fff; border: 1px solid #e7ebef; border-radius: 3px; padding: 10px 14px; }
.bc-t { font-size: 12px; color: #8a939e; }
.bc-v { font-size: 20px; font-weight: 600; color: #2f3a45; margin: 4px 0 2px; }
.bc-s { font-size: 12px; color: #9aa4af; }

.biz-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; margin-bottom: 12px; }
.biz-panel { background: #fff; border: 1px solid #e7ebef; border-radius: 3px; padding: 10px 14px; }
.bp-t { font-size: 13px; font-weight: 600; color: #33404d; margin-bottom: 8px; }
.bp-kv { display: flex; justify-content: space-between; font-size: 12px; color: #6b7480; padding: 4px 0; border-bottom: 1px dashed #f0f3f6; }
.bp-kv b { color: #2f3a45; }
.bp-kv b.green { color: #00a65a; }
.bp-kv b.orange { color: #f39c12; }
.bp-kv b.gray { color: #8a939e; }
.bp-empty { font-size: 12px; color: #9aa4af; }
.bp-warn { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed #f0f3f6; }
.bp-warn span { color: #2f3a45; }
.bp-warn em { font-style: normal; color: #9aa4af; }
.bp-warn b { margin-left: auto; color: #dd4b39; }
.cb-t { font-size: 13px; font-weight: 600; color: #33404d; padding: 2px 0 4px; }

.msg-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.msg-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #eef1f4; border-radius: 3px; padding: 9px 12px; }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 13px; color: #2f3a45; }
.msg-detail { font-size: 12px; color: #8a939e; margin-top: 2px; }
.msg-at { font-size: 12px; color: #a8b0b9; }

/* ======================= 课堂作品卡片墙（page/cards） ======================= */
/* 对齐原站：一行五张（20%），图片区 5px 浅灰边框，信息区边框包住 */
.work-wall {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px 14px;
    padding: 14px 12px 6px;
}
@media (max-width: 1360px) { .work-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .work-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.work-card { min-width: 0; }
.wc-pic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 188px;
    background: #f7f9fb;
    border: 5px solid #f3f3f1;
    overflow: hidden;
}
.wc-pic img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .2s;
}
.wc-pic:hover img { transform: scale(1.02); }
.wc-noimg { color: #b6bec7; font-size: 12px; }
.wc-badge {
    position: absolute;
    left: 0;
    top: 0;
    background: #dd4b39;
    color: #fff;
    font-size: 11px;
    padding: 1px 6px;
    display: none;
}
.wc-badge.is-ex { display: inline-block; }

.wc-info {
    border: 1px solid #bbb;
    border-top: 0;
    padding: 6px 8px 7px;
    font-size: 12px;
    color: #4a5561;
}
.wc-title {
    color: #2f3a45;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.wc-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 20px;
    color: #7b848f;
}
.wc-line > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wc-star { color: #e74c3c; font-weight: 400; letter-spacing: -1px; }
.wc-date { color: #9aa4af; font-size: 11px; }
.wc-count { color: #9aa4af; font-size: 11px; }
.wc-cmt { color: #3c8dbc; font-size: 11px; }
.wc-cmt.done { color: #9aa4af; }

.wc-ops {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px dashed #eef1f4;
    margin-top: 4px;
    padding-top: 5px;
}
.wc-ops a { font-size: 12px; }
.wc-ops a.op-ex { color: #ca4300; }
.wc-ops a.op-rot { color: #0033ff; }
.wc-ops a.op-del { color: #872c95; }
.wc-ops a.op-del.danger { color: #872c95; }

.zoom-box { text-align: center; }
.zoom-box img { max-width: 100%; max-height: 62vh; }

/* 弹窗内失败提示条：不顶掉用户已填内容 */
.dlg-err {
    background: #fdf3f2;
    border: 1px solid #f5c6c0;
    color: #c0392b;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 2px;
    margin-bottom: 10px;
}
.dlg-msg { font-size: 13px; color: #4a5561; line-height: 1.7; }

/* 活动二维码弹窗 */
.qr-box { text-align: center; }
.qr-box img { width: 180px; height: 180px; display: block; margin: 4px auto 8px; }
.qr-box p { color: #8a939e; font-size: 12px; }

/* ======================= 学员详情页（page/detail） ======================= */
.detail-acts { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; }
.detail-tabs { padding: 0 12px; border-bottom: 1px solid #e7ebef; }
.detail-sum {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
}
.ds-card { border: 1px solid #e7ebef; border-radius: 3px; padding: 10px 12px; background: #fafbfc; }
.ds-t { font-size: 12px; color: #8a939e; }
.ds-v { font-size: 20px; font-weight: 600; color: #2f3a45; margin-top: 4px; }
.ds-v.warn { color: #dd4b39; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: #f5faff; }