:root{
    --primary:#2563eb;--primary-dark:#1d4ed8;--danger:#dc2626;--warn:#f59e0b;
    --success:#16a34a;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;
    --gray-300:#cbd5e1;--gray-500:#64748b;--gray-700:#334155;--gray-900:#0f172a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--gray-100);color:var(--gray-900);line-height:1.5}
a{text-decoration:none;color:inherit}

/* 布局 */
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--gray-900);color:#fff;flex-shrink:0;padding:20px 0}
.sidebar .logo{padding:0 20px 20px;font-size:18px;font-weight:700;border-bottom:1px solid #1e293b}
.sidebar nav{padding:16px 0}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;color:#94a3b8;font-size:14px;transition:.15s}
.sidebar nav a:hover{background:#1e293b;color:#fff}
.sidebar nav a.active{background:var(--primary);color:#fff}
.sidebar nav a .ico{width:18px;text-align:center}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--gray-200);
    display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.topbar h1{font-size:16px;font-weight:600}
.user{font-size:13px;color:var(--gray-500)}
.content{padding:24px;overflow:auto}

/* 卡片 */
.card{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:20px;margin-bottom:20px}
.card-title{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card-title .sub{font-weight:400;font-size:13px;color:var(--gray-500)}

/* 表单 */
.form-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.form-item{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px}
.form-item.full{flex:0 0 100%}
.form-item label{font-size:13px;color:var(--gray-700);font-weight:500}
.form-item label .req{color:var(--danger)}
.form-item input,.form-item select,.form-item textarea{
    padding:9px 11px;border:1px solid var(--gray-300);border-radius:7px;font-size:14px;
    transition:.15s;background:#fff}
.form-item input:focus,.form-item select:focus,.form-item textarea:focus{
    outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.form-item input:disabled{background:var(--gray-100);color:var(--gray-500)}

/* 扫码输入框 */
.scanner1{position:relative}
.scanner1 input{padding-right:42px;border-color:var(--primary);background:#eff6ff}
.scanner1 .cam{position:absolute;right:8px;top:35%;transform:translateY(-50%);font-size:18px}
.scan-hint{font-size:12px;color:var(--gray-500);margin-top:6px}

.input-wrap {position: relative; align-items: center; }
.input-wrap input{padding-right:42px;border-color:var(--primary);background:#eff6ff;width:100%}
.input-wrap .cam {position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:18px}


/* 按钮 */
.btn{padding:9px 18px;border:none;border-radius:7px;font-size:14px;font-weight:500;cursor:pointer;transition:.15s;align-items:center;gap:6px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--primary-dark)}
.btn-ghost{background:var(--gray-100);color:var(--gray-700)}
.btn-ghost:hover{background:var(--gray-200)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:5px 11px;font-size:13px}

/* 表格 */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--gray-50);text-align:left;padding:10px 12px;font-weight:600;
    color:var(--gray-700);border-bottom:1px solid var(--gray-200);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
tbody tr:hover{background:#f8fafc}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500}
.tag-green{background:#dcfce7;color:#166534}
.tag-red{background:#fee2e2;color:#991b1b}
.tag-amber{background:#fef3c7;color:#92400e}
.tag-gray{background:var(--gray-200);color:var(--gray-700)}

/* 提示 */
.alert{padding:12px 14px;border-radius:8px;font-size:14px;margin-bottom:16px;display:none}
.alert.show{display:block}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

/* 书籍信息卡 */
.book-info{border:1px solid var(--gray-200);border-radius:9px;padding:16px;background:#fafbfc}
.book-info .title{font-size:17px;font-weight:600;margin-bottom:6px}
.book-info .meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--gray-500)}
.book-info .meta span b{color:var(--gray-700)}

/* 统计卡 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat .num{font-size:26px;font-weight:700}
.stat .lbl{font-size:13px;color:var(--gray-500);margin-top:2px}
.stat.blue .num{color:var(--primary)}
.stat.green .num{color:var(--success)}
.stat.red .num{color:var(--danger)}
.stat.amber .num{color:var(--warn)}

/* ============================================================
   数据看板
   ============================================================ */

/* 看板主体网格：左宽右窄两栏，窄屏自动堆叠 */
.dash-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.dash-grid > .card{margin-bottom:0}

/* 图表卡片头部：标题 + 图例 + 切换按钮 */
.chart-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:6px}
.chart-head .title{font-size:15px;font-weight:600}
.chart-head .spacer{flex:1}
.chart-head .hint{font-size:12px;color:var(--gray-500)}

/* 图例 */
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--gray-700);margin:2px 0 10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* 图表画布容器：固定高度，宽度自适应 */
.chart-box{position:relative;width:100%;height:260px}
.chart-box canvas{display:block;width:100%;height:100%}
.chart-box.tall{height:300px}
.chart-box.short{height:180px}

/* 趋势图范围切换（近 7 天 / 14 天 / 30 天 / 按月） */
.seg{display:inline-flex;border:1px solid var(--gray-300);border-radius:7px;overflow:hidden}
.seg button{padding:5px 12px;font-size:12.5px;border:none;background:#fff;color:var(--gray-700);
    cursor:pointer;border-right:1px solid var(--gray-300);transition:.15s}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--gray-100)}
.seg button.active{background:var(--primary);color:#fff;font-weight:500}

/* 排行榜：名次徽标 + 名称 + 进度条 + 数值 */
.rank-list{display:flex;flex-direction:column;gap:2px}
.rank-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--gray-100)}
.rank-item:last-child{border-bottom:none}
.rank-no{flex:0 0 22px;height:22px;line-height:22px;text-align:center;border-radius:6px;
    font-size:12px;font-weight:700;background:var(--gray-100);color:var(--gray-500)}
.rank-no.top1{background:#fef3c7;color:#92400e}
.rank-no.top2{background:#e2e8f0;color:#475569}
.rank-no.top3{background:#ffedd5;color:#9a3412}
.rank-main{flex:1;min-width:0}
.rank-name{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-meta{font-size:11.5px;color:var(--gray-500);margin-top:2px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
.rank-bar{height:4px;border-radius:2px;background:var(--gray-100);margin-top:5px;overflow:hidden}
.rank-bar span{display:block;height:100%;border-radius:2px;background:var(--primary)}
.rank-val{flex:0 0 auto;text-align:right;font-size:13px;font-weight:700;color:var(--primary);min-width:44px}
.rank-val small{display:block;font-weight:400;font-size:11px;color:var(--gray-500)}

/* 逾期分档条形图 */
.bucket-list{display:flex;flex-direction:column;gap:10px}
.bucket-row{display:flex;align-items:center;gap:10px;font-size:13px}
.bucket-row .lbl{flex:0 0 86px;color:var(--gray-700)}
.bucket-row .bar{flex:1;height:18px;background:var(--gray-100);border-radius:5px;overflow:hidden}
.bucket-row .bar span{display:block;height:100%;border-radius:5px;
    background:linear-gradient(90deg,#fbbf24,#dc2626);transition:width .4s}
.bucket-row .val{flex:0 0 46px;text-align:right;font-weight:600;color:var(--gray-900)}

/* 逾期率仪表 */
.gauge{text-align:center;padding:6px 0 2px}
.gauge .rate{font-size:34px;font-weight:700;line-height:1}
.gauge .rate.lv-ok{color:var(--success)}
.gauge .rate.lv-warn{color:var(--warn)}
.gauge .rate.lv-bad{color:var(--danger)}
.gauge .cap{font-size:12.5px;color:var(--gray-500);margin-top:6px}

/* KPI 小数字行 */
.kpi-sub{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;padding-top:14px;
    border-top:1px dashed var(--gray-200);font-size:13px;color:var(--gray-500)}
.kpi-sub b{color:var(--gray-900);font-size:15px}

/* 看板空态 */
.dash-empty{text-align:center;color:var(--gray-500);font-size:13px;padding:26px 0}

/* 加载遮罩（图表容器内） */
.chart-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:13px;color:var(--gray-500);background:rgba(255,255,255,.7)}
.chart-loading.hide{display:none}

/* 导出按钮组 */
.export-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.export-bar .spacer{flex:1}

@media(max-width:1100px){
    .dash-grid{grid-template-columns:1fr}
}

/* ============================================================
   登录 / 权限
   ============================================================ */

/* 顶栏右侧：身份 + 登录/退出按钮 */
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-right .btn{display:inline-flex;text-decoration:none;white-space:nowrap}

/* 侧边栏底部：当前身份 */
.side-foot{padding:18px 20px;margin-top:16px;border-top:1px solid #1e293b;font-size:12px;color:#64748b}
.side-foot .who{display:flex;align-items:center;gap:7px;color:#cbd5e1;font-size:13px;font-weight:500}
.side-foot .hint{margin-top:5px;line-height:1.6}
.side-foot .dot{width:7px;height:7px;border-radius:50%;background:#64748b;flex-shrink:0}
.side-foot .dot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}

/* 登录页（不套后台布局，整页居中） */
.login-body{background:linear-gradient(135deg,#eff6ff 0%,#f1f5f9 55%,#e0e7ff 100%);
    display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-wrap{width:100%;max-width:390px}
.login-card{background:#fff;border-radius:14px;padding:34px 30px 26px;
    box-shadow:0 12px 40px rgba(15,23,42,.12)}
.login-card h1{font-size:19px;text-align:center;font-weight:700}
.login-logo{font-size:44px;text-align:center;line-height:1;margin-bottom:10px}
.login-sub{text-align:center;font-size:13px;color:var(--gray-500);margin:6px 0 22px}
.login-card .form-item{margin-bottom:14px}
.login-card .form-item input{width:100%}
.btn-block{display:flex;width:100%;justify-content:center;padding:11px 18px;margin-top:6px}
.login-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-200);
    text-align:center;font-size:12.5px}
.login-foot a{color:var(--primary)}
.login-foot a:hover{text-decoration:underline}
.login-tip{margin-top:9px;color:var(--gray-500);font-size:12px;line-height:1.6}

/* 表格空态 */
.table-empty{text-align:center;color:var(--gray-500);padding:30px}

/* 工具条 */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar input,.toolbar select{padding:8px 11px;border:1px solid var(--gray-300);
    border-radius:7px;font-size:13.5px}
.toolbar .spacer{flex:1}

/* 分页 */
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px;color:var(--gray-500)}
.pager-btns button{padding:6px 12px;border:1px solid var(--gray-300);background:#fff;
    border-radius:6px;cursor:pointer;margin-left:6px}
.pager-btns button:hover:not(:disabled){background:var(--gray-100)}
.pager-btns button:disabled{opacity:.4;cursor:not-allowed}

/* 流程步骤 */
.steps{display:flex;gap:0;margin-bottom:22px}
.step{flex:1;text-align:center;padding:10px;font-size:13px;color:var(--gray-500);
    border-bottom:3px solid var(--gray-200);position:relative}
.step.done{border-color:var(--success);color:var(--success);font-weight:500}
.step.active{border-color:var(--primary);color:var(--primary);font-weight:600}

/* 结果弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;
    align-items:center;justify-content:center;z-index:100}
.modal-mask.show{display:flex}
.modal{background:#fff;border-radius:12px;padding:26px;max-width:420px;width:90%;
    box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal .big{font-size:40px;text-align:center;margin-bottom:8px}
.modal h3{text-align:center;margin-bottom:14px}
.modal .kv{font-size:14px;color:var(--gray-700);margin:6px 0}
.modal .kv b{color:var(--gray-900)}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1;justify-content:center}

@media(max-width:760px){
    .sidebar{display:none}
    .content{padding:14px}
}