/* ==========================================================================
   《应急物资储备管理》教材配套系统 · 设计系统
   纯本地样式，无任何外部字体/图标/图片引用
   ========================================================================== */

:root{
    --navy-1:#101c38;
    --navy-2:#0a1428;
    --navy-3:#182747;
    --ink:#16223b;
    --ink-2:#5b6b86;
    --ink-3:#8b9ab3;
    --bg:#f1f4fa;
    --card:#ffffff;
    --line:#e2e8f2;
    --line-2:#eef2f9;

    --primary:#2563eb;
    --primary-2:#1d4ed8;
    --primary-soft:#e8effd;
    --red:#c8102e;
    --red-soft:#fdeaed;
    --amber:#dd8b12;
    --amber-soft:#fdf3e2;
    --green:#12a06a;
    --green-soft:#e6f7f0;
    --violet:#6d45d9;
    --violet-soft:#efeafc;
    --cyan:#0f8ba8;
    --cyan-soft:#e4f5f9;

    --radius:12px;
    --radius-sm:9px;
    --radius-lg:16px;
    --shadow-1:0 1px 2px rgba(16,28,56,.05), 0 2px 8px rgba(16,28,56,.05);
    --shadow-2:0 4px 14px rgba(16,28,56,.09);
    --shadow-3:0 14px 40px rgba(16,28,56,.16);
    --shadow-side:0 0 40px rgba(6,12,26,.35);
    --side-w:236px;
    --top-h:60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
    background:var(--bg);color:var(--ink);font-size:14px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.ic{flex:0 0 auto;display:block}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#c6d1e2;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#a9b8ce}
::-webkit-scrollbar-track{background:transparent}

/* ===================== 布局 ===================== */
.layout{display:flex;min-height:100vh}

.side{
    width:var(--side-w);flex:0 0 var(--side-w);
    background:linear-gradient(180deg,var(--navy-1) 0%,var(--navy-2) 100%);
    color:#c8d5ea;display:flex;flex-direction:column;
    position:fixed;inset:0 auto 0 0;z-index:60;box-shadow:var(--shadow-side);
    transition:transform .26s ease;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-mark{
    width:40px;height:40px;border-radius:11px;flex:0 0 40px;
    background:linear-gradient(135deg,#2f6bf0,#c8102e);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:17px;letter-spacing:0;
    box-shadow:0 6px 16px rgba(37,99,235,.34);
}
.brand-txt strong{display:block;color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.4px}
.brand-txt span{display:block;font-size:11px;color:#7b8dae;margin-top:2px}

.nav{flex:1;overflow-y:auto;padding:12px 10px 22px}
.nav::-webkit-scrollbar{width:5px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}

.nav-group{margin-bottom:5px}
.nav-item{
    display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
    cursor:pointer;transition:background .16s,color .16s;position:relative;
    color:#c2d0e6;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item .ni-ic{
    width:32px;height:32px;flex:0 0 32px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;   /* 图标居中 */
    background:rgba(255,255,255,.07);color:#9fb6da;transition:.16s;
}
.nav-item .ni-t{flex:1;font-size:13.5px;font-weight:600;letter-spacing:.3px}
.nav-item .ni-arrow{transition:transform .2s;color:#6d80a3}
.nav-group.open .nav-item .ni-arrow{transform:rotate(90deg)}

.nav-group.open>.nav-item{background:rgba(37,99,235,.16);color:#fff}
.nav-group.open>.nav-item .ni-ic{background:linear-gradient(135deg,#2f6bf0,#1d4ed8);color:#fff;box-shadow:0 5px 14px rgba(37,99,235,.36)}

.nav-sub{max-height:0;overflow:hidden;transition:max-height .28s ease;margin-left:6px}
.nav-group.open .nav-sub{max-height:520px}
.nav-sub-item{
    display:flex;align-items:center;gap:8px;padding:7px 10px 7px 20px;border-radius:8px;
    font-size:13px;color:#93a6c6;position:relative;transition:.15s;margin-top:2px;
}
.nav-sub-item .ic{color:#6d80a3}
.nav-sub-item:hover{background:rgba(255,255,255,.06);color:#e3ecfb}
.nav-sub-item.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.nav-sub-item.on::before{
    content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);
    width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,#3b82f6,#60a5fa);
}
.nav-sub-item.on .ic{color:#7fb0ff}

.side-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#61748f;line-height:1.7}

/* 主区 */
.main{flex:1;margin-left:var(--side-w);min-width:0;display:flex;flex-direction:column}
.topbar{
    height:var(--top-h);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
    padding:0 22px;position:sticky;top:0;z-index:40;
}
.tb-toggle{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
    align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)}
.crumb b{color:var(--ink);font-weight:600}
.tb-spacer{flex:1}
.tb-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
    padding:6px 11px;border-radius:20px;background:#f4f7fc;border:1px solid var(--line-2)}
.tb-user{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border-radius:24px;
    border:1px solid var(--line);background:#fff;cursor:pointer;position:relative}
.tb-user:hover{border-color:#cdd9ec;box-shadow:var(--shadow-1)}

.content{padding:20px 22px 34px;flex:1}

/* ===================== 头像 ===================== */
.avt{
    width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.5px;
}
.avt.sm{width:28px;height:28px;flex:0 0 28px;border-radius:8px;font-size:11px}
.avt.lg{width:54px;height:54px;flex:0 0 54px;border-radius:15px;font-size:17px}

/* ===================== 页头 ===================== */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h2{font-size:20px;font-weight:700;letter-spacing:.4px;display:flex;align-items:center;gap:9px}
.page-head h2 .ic{color:var(--primary)}
.page-head p{font-size:12.5px;color:var(--ink-3);margin-top:4px;max-width:760px}
.page-head .ph-act{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* ===================== 卡片 ===================== */
.cards-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.cards-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-2-1{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
.grid-1-1{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.grid-2-1,.grid-1-1{grid-template-columns:1fr}}

/* 数据卡：图标在前，标题与数据在后 */
.stat{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 16px 15px;display:flex;align-items:center;gap:13px;
    transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#d3dff5}
.stat .st-ic{
    width:46px;height:46px;flex:0 0 46px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;   /* 图标居中 */
}
.stat .st-body{min-width:0;flex:1}
.stat .st-t{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .st-n{font-size:23px;font-weight:700;letter-spacing:.5px;line-height:1.25;margin-top:1px}
.stat .st-n small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:3px}
.stat .st-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.stat::after{content:"";position:absolute;right:-26px;top:-26px;width:74px;height:74px;border-radius:50%;
    background:currentColor;opacity:.045}

.bg-blue{background:var(--primary-soft);color:var(--primary)}
.bg-red{background:var(--red-soft);color:var(--red)}
.bg-amber{background:var(--amber-soft);color:var(--amber)}
.bg-green{background:var(--green-soft);color:var(--green)}
.bg-violet{background:var(--violet-soft);color:var(--violet)}
.bg-cyan{background:var(--cyan-soft);color:var(--cyan)}

/* 通用面板 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.panel-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.panel-hd h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.panel-hd h3 .ic{color:var(--primary)}
.panel-hd .ph-r{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.panel-bd{padding:18px}
.panel-bd.tight{padding:14px 18px}

/* 功能入口卡（图标居中 + 标题数据在后） */
.entry{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px;
    display:flex;align-items:center;gap:12px;transition:.18s;cursor:pointer;
}
.entry:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#d3dff5}
.entry .en-ic{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.entry .en-b{min-width:0;flex:1}
.entry .en-t{font-size:13.5px;font-weight:600}
.entry .en-d{font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== 按钮 ===================== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
    font-size:13px;font-weight:600;cursor:pointer;transition:.16s;white-space:nowrap;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
    box-shadow:0 3px 10px rgba(37,99,235,.22);
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.xs{padding:4px 9px;font-size:12px;border-radius:7px;box-shadow:none}
.btn.line{background:#fff;color:var(--ink-2);border-color:var(--line);box-shadow:none}
.btn.line:hover{border-color:#c3d2ea;color:var(--primary);background:#f8fbff}
.btn.soft{background:var(--primary-soft);color:var(--primary);box-shadow:none}
.btn.soft:hover{background:#dbe7fc}
.btn.red{background:linear-gradient(135deg,#dc2b45,#b00d24);box-shadow:0 3px 10px rgba(200,16,46,.22)}
.btn.green{background:linear-gradient(135deg,#17b276,#0e8c5c);box-shadow:0 3px 10px rgba(18,160,106,.22)}
.btn.amber{background:linear-gradient(135deg,#e9a02c,#c97d08);box-shadow:0 3px 10px rgba(221,139,18,.22)}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:#f4f7fc;color:var(--ink)}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.full{width:100%}

/* ===================== 表格 ===================== */
.tb-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}
table.tb{width:100%;border-collapse:collapse;font-size:13px;min-width:600px}
table.tb thead th{
    background:linear-gradient(180deg,#f7faff,#f2f6fd);
    color:#41557a;font-weight:600;text-align:left;padding:11px 14px;white-space:nowrap;
    border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.3px;
}
table.tb tbody td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tb tbody tr:last-child td{border-bottom:0}
table.tb tbody tr:hover{background:#f8fbff}
table.tb .c{text-align:center}
table.tb .num{font-variant-numeric:tabular-nums}
.tb-mini td,.tb-mini th{padding:8px 12px !important;font-size:12.5px}

/* ===================== 标签与徽章 ===================== */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;
    font-size:11.5px;font-weight:600;background:#f1f4fa;color:var(--ink-2);white-space:nowrap}
.tag.blue{background:var(--primary-soft);color:var(--primary)}
.tag.red{background:var(--red-soft);color:var(--red)}
.tag.amber{background:var(--amber-soft);color:#b3710c}
.tag.green{background:var(--green-soft);color:#0b7b51}
.tag.violet{background:var(--violet-soft);color:var(--violet)}
.tag.cyan{background:var(--cyan-soft);color:var(--cyan)}
.tag.line{background:#fff;border:1px solid var(--line)}

/* ===================== 表单 ===================== */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--ink-2);font-weight:600}
.field .hint{font-size:11.5px;color:var(--ink-3)}
.input,.select,.textarea{
    width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:#fff;outline:none;transition:.16s;font-size:13.5px;
}
.input:focus,.select:focus,.textarea:focus{border-color:#8fb4f5;box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.textarea{min-height:96px;resize:vertical;line-height:1.7;font-family:inherit}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8b9ab3 50%),linear-gradient(135deg,#8b9ab3 50%,transparent 50%);
    background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;color:var(--ink-2)}
.check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}

/* 工具条 */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.toolbar .grow{flex:1}
.search{position:relative;display:flex;align-items:center;min-width:230px}
.search .ic{position:absolute;left:11px;color:var(--ink-3)}
.search input{padding-left:34px}

/* 筛选胶囊（替代传统 TAB） */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
    padding:6px 14px;border-radius:22px;border:1px solid var(--line);background:#fff;
    font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:.16s;font-weight:500;
}
.chip:hover{border-color:#c3d2ea;color:var(--primary)}
.chip.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;
    box-shadow:0 4px 12px rgba(37,99,235,.24);font-weight:600}

/* 分段控件 */
.seg{display:inline-flex;background:#eff3fa;border-radius:11px;padding:3px;gap:2px}
.seg a{padding:6px 15px;border-radius:9px;font-size:12.5px;color:var(--ink-2);font-weight:600;transition:.16s}
.seg a.on{background:#fff;color:var(--primary);box-shadow:var(--shadow-1)}

/* ===================== 进度 ===================== */
.bar{height:7px;border-radius:6px;background:#eef2f9;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#3b82f6,#2563eb)}
.bar.red>i{background:linear-gradient(90deg,#f0616f,#c8102e)}
.bar.green>i{background:linear-gradient(90deg,#34c98a,#12a06a)}
.bar.amber>i{background:linear-gradient(90deg,#f0b44a,#dd8b12)}
.bar.sm{height:5px}

/* 环形进度（纯 CSS） */
.ring{--p:0;--sz:96px;--th:9px;width:var(--sz);height:var(--sz);border-radius:50%;
    background:conic-gradient(var(--primary) calc(var(--p)*1%),#eef2f9 0);
    display:flex;align-items:center;justify-content:center;position:relative}
.ring::before{content:"";position:absolute;inset:var(--th);background:#fff;border-radius:50%}
.ring>span{position:relative;font-size:17px;font-weight:700}

/* 简易柱状图 */
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .col i{width:100%;max-width:42px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#4f8bf5,#2563eb);transition:.3s}
.bars .col span{font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.35}
.bars .col b{font-size:12px;color:var(--ink-2)}

/* 横向条形（知识点掌握度） */
.hbar{display:flex;align-items:center;gap:11px;padding:8px 0}
.hbar .hb-t{width:190px;flex:0 0 190px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .hb-b{flex:1}
.hbar .hb-v{width:52px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* ===================== 列表 ===================== */
.list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.list-row:last-child{border-bottom:0}
.list-row .lr-ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.list-row .lr-b{flex:1;min-width:0}
.list-row .lr-t{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.list-row .lr-d{font-size:12px;color:var(--ink-3);margin-top:2px}
.list-row .lr-r{text-align:right;font-size:12px;color:var(--ink-3);white-space:nowrap}

/* 时间线 */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;
    background:#fff;border:2px solid var(--primary)}
.tl-item:last-child{padding-bottom:0}
.tl-item .tl-t{font-size:13px;font-weight:600}
.tl-item .tl-d{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ===================== 空状态 ===================== */
.empty{text-align:center;padding:48px 20px;color:var(--ink-3)}
.empty .ic{margin:0 auto 12px;color:#c3cfe2}
.empty p{font-size:13px}

/* ===================== 弹窗（多层） ===================== */
.modal-mask{
    position:fixed;inset:0;background:rgba(11,20,40,.5);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;z-index:200;padding:24px;
}
.modal-mask.on{display:flex;animation:fadeIn .18s ease}
.modal{
    background:#fff;border-radius:var(--radius-lg);width:100%;max-width:600px;max-height:88vh;
    display:flex;flex-direction:column;box-shadow:var(--shadow-3);animation:popIn .22s cubic-bezier(.2,.9,.3,1.2);
    overflow:hidden;
}
.modal.wide{max-width:900px}
.modal.slim{max-width:420px}
.modal-hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.modal-hd h3{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.modal-hd h3 .ic{color:var(--primary)}
.modal-hd .x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:0;background:#f3f6fb;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.modal-hd .x:hover{background:#e8eef8;color:var(--red)}
.modal-bd{padding:20px;overflow-y:auto}
.modal-ft{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px;border-top:1px solid var(--line-2);background:#fafcff}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* 抽屉 */
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:#fff;z-index:210;
    box-shadow:var(--shadow-3);transform:translateX(102%);transition:transform .28s cubic-bezier(.3,.8,.3,1);
    display:flex;flex-direction:column}
.drawer.on{transform:none}

/* ===================== 提示条 ===================== */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:9px;align-items:center}
.toast{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:11px;background:#fff;
    box-shadow:var(--shadow-3);font-size:13.5px;font-weight:600;animation:dropIn .24s ease}
.toast.ok{color:#0b7b51;border-left:4px solid var(--green)}
.toast.err{color:#b00d24;border-left:4px solid var(--red)}
.toast.info{color:var(--primary);border-left:4px solid var(--primary)}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* 提示块 */
.note{display:flex;gap:10px;padding:13px 15px;border-radius:var(--radius-sm);font-size:13px;line-height:1.75;
    background:#f5f9ff;border:1px solid #dbe8fb;color:#3a5170}
.note .ic{color:var(--primary);margin-top:2px}
.note.warn{background:var(--amber-soft);border-color:#f5e0b8;color:#8a5b06}
.note.warn .ic{color:var(--amber)}
.note.danger{background:var(--red-soft);border-color:#f7ccd3;color:#8f0a20}
.note.danger .ic{color:var(--red)}
.note.ok{background:var(--green-soft);border-color:#c4ecd9;color:#0a6647}
.note.ok .ic{color:var(--green)}

/* ===================== 分页 ===================== */
.pager{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.pg-info{font-size:12.5px;color:var(--ink-3)}
.pg-links{display:flex;gap:6px;margin-left:auto}
.pg{min-width:32px;height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--line);background:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--ink-2);transition:.15s}
.pg:hover{border-color:#c3d2ea;color:var(--primary)}
.pg.on{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;
    box-shadow:0 4px 12px rgba(37,99,235,.24);font-weight:700}

/* ===================== 题目卡 ===================== */
.q-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:13px;background:#fff;transition:.18s}
.q-card:hover{border-color:#cfdcf2}
.q-head{display:flex;align-items:center;gap:9px;margin-bottom:11px;flex-wrap:wrap}
.q-no{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--primary-soft);color:var(--primary);
    display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.q-stem{font-size:14px;line-height:1.85;margin-bottom:11px}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border:1px solid var(--line);border-radius:10px;
    cursor:pointer;transition:.15s;font-size:13.5px;line-height:1.7}
.q-opt:hover{border-color:#c3d2ea;background:#f8fbff}
.q-opt .key{width:23px;height:23px;flex:0 0 23px;border-radius:7px;background:#f1f4fa;color:var(--ink-2);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.q-opt.on{border-color:var(--primary);background:#f4f8ff;box-shadow:0 0 0 2px rgba(37,99,235,.1)}
.q-opt.on .key{background:var(--primary);color:#fff}
.q-opt.right{border-color:var(--green);background:var(--green-soft)}
.q-opt.right .key{background:var(--green);color:#fff}
.q-opt.wrong{border-color:var(--red);background:var(--red-soft)}
.q-opt.wrong .key{background:var(--red);color:#fff}
.q-ans{margin-top:12px;padding:12px 14px;border-radius:10px;background:#f7fafd;border:1px solid var(--line-2);font-size:13px;line-height:1.8}
.q-ans b{color:var(--primary)}

/* 考试计时 */
.timer{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums;font-weight:700;
    padding:7px 14px;border-radius:10px;background:var(--navy-1);color:#fff;font-size:14px}
.timer.warn{background:linear-gradient(135deg,#dc2b45,#b00d24);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.72}}

/* 答题卡面板 */
.sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sheet a{height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;display:flex;
    align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.15s}
.sheet a:hover{border-color:#c3d2ea}
.sheet a.done{background:var(--green-soft);border-color:#c4ecd9;color:#0b7b51}
.sheet a.flag{background:var(--amber-soft);border-color:#f5e0b8;color:#8a5b06}
.sheet a.cur{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff}

/* ===================== 登录页 ===================== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px;
    background:
      radial-gradient(1100px 560px at 8% -12%,rgba(37,99,235,.55) 0%,transparent 58%),
      radial-gradient(900px 520px at 102% 4%,rgba(200,16,46,.42) 0%,transparent 55%),
      linear-gradient(160deg,#0b1730,#060d1c 70%);}
.login-box{width:100%;max-width:940px;display:grid;grid-template-columns:1.05fr .95fr;background:#fff;
    border-radius:20px;overflow:hidden;box-shadow:0 34px 90px rgba(3,8,20,.6)}
.login-left{padding:44px 42px;background:linear-gradient(160deg,#12213f,#0a1428);color:#d7e2f5;position:relative;overflow:hidden}
.login-left::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.5),transparent 68%)}
.login-left .lb-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#2f6bf0,#c8102e);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:700;
    box-shadow:0 10px 26px rgba(37,99,235,.44)}
.login-left h1{font-size:24px;color:#fff;margin:22px 0 8px;letter-spacing:.5px}
.login-left .lb-sub{font-size:13px;color:#8ea3c7;line-height:1.85}
.login-feat{margin-top:26px;display:flex;flex-direction:column;gap:13px;position:relative}
.login-feat .lf{display:flex;align-items:center;gap:11px;font-size:13px;color:#b9cae4}
.login-feat .lf .ic{width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(255,255,255,.08);color:#7fb0ff}
.login-right{padding:44px 40px;display:flex;flex-direction:column;justify-content:center}
.login-right h2{font-size:19px;font-weight:700;margin-bottom:5px}
.login-right .lr-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:24px}
.login-role{display:flex;gap:8px;margin-bottom:18px}
.login-role button{flex:1;padding:10px 6px;border-radius:11px;border:1px solid var(--line);background:#fff;
    cursor:pointer;font-size:12.5px;color:var(--ink-2);font-weight:600;transition:.16s;display:flex;
    align-items:center;justify-content:center;gap:6px}
.login-role button.on{border-color:transparent;background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.28)}
.login-right .field{margin-bottom:14px}
.login-right .btn.full{padding:12px;margin-top:6px}
.login-err{margin-bottom:14px;padding:10px 13px;border-radius:10px;background:var(--red-soft);color:#b00d24;
    font-size:12.5px;display:flex;align-items:center;gap:8px}

/* ===================== 教材阅读器入口 ===================== */
.cover-card{display:flex;gap:18px;align-items:center;padding:18px;border-radius:var(--radius);
    background:linear-gradient(135deg,#13224a,#0b1428);color:#dbe6f8;border:1px solid #1d3157}
.cover-card .cc-book{width:78px;height:106px;flex:0 0 78px;border-radius:7px;
    background:linear-gradient(150deg,#1f3a6e,#0e1b34);border:1px solid #2b4677;position:relative;
    box-shadow:6px 6px 18px rgba(0,0,0,.4);overflow:hidden}
.cover-card .cc-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:rgba(0,0,0,.28)}
.cover-card .cc-book b{position:absolute;left:14px;top:16px;font-size:11.5px;color:#fff;line-height:1.5;letter-spacing:.5px}
.cover-card .cc-book i{position:absolute;left:14px;bottom:12px;font-size:9px;color:#8ea3c7;font-style:normal}
.cover-card .cc-b{flex:1}
.cover-card h4{font-size:15px;color:#fff;margin-bottom:5px}
.cover-card p{font-size:12px;color:#9db1d1;line-height:1.75}

/* ===================== 响应式 ===================== */
@media(max-width:1440px){ .cards-5{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(max-width:1200px){
    .cards-5{grid-template-columns:repeat(3,minmax(0,1fr))}
    .cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
    .side{transform:translateX(-100%)}
    .side.on{transform:none}
    .main{margin-left:0}
    .tb-toggle{display:flex}
    .login-box{grid-template-columns:1fr}
    .login-left{display:none}
    .form-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
    .cards-5,.cards-4,.cards-3,.cards-2{grid-template-columns:1fr}
    .content{padding:16px}
    .tb-user .tu-txt{display:none}
    .sheet{grid-template-columns:repeat(4,1fr)}
}

/* 打印 */
@media print{
    .side,.topbar,.page-head .ph-act,.btn{display:none !important}
    .main{margin-left:0}
    .panel{break-inside:avoid}
}