/* base.css —— 超级管理端全局基础与共用样式（地基文件，所有页面加载） */

/* 1. 主题变量（改主题色只改这里） */
:root{
  --pri:#6366f1;--pri-l:#818cf8;--pri-d:#4f46e5;--pri-bg:#eef2ff;
  --ok:#10b981;--ok-bg:#ecfdf5;--err:#ef4444;--err-bg:#fef2f2;
  --warn:#f59e0b;--warn-bg:#fffbeb;--info:#06b6d4;--info-bg:#ecfeff;
  --bg:#f1f3f9;--card:#fff;--line:#e8eaef;--line2:#dcdfea;
  --txt:#1e2330;--txt2:#4b5563;--mut:#94a3b8;--mut2:#cbd5e1;
  --radius:12px;--radius-lg:16px;--radius-xl:20px;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02);
  --shadow-md:0 4px 12px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 8px 30px rgba(0,0,0,.08);
  --transition:.2s cubic-bezier(.4,0,.2,1);
}

/* 2. Reset & 基础 */
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,"SF Pro Text","Microsoft YaHei","Segoe UI",sans-serif;}
body{background:var(--bg);color:var(--txt);display:flex;min-height:100vh;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

/* 3. 外壳 / 侧栏 / 顶栏 / 内容区 */
#app{flex:1;width:100%;display:flex;min-height:100vh;}
.side{width:252px;background:linear-gradient(180deg,#0f1221 0%,#1a1d2e 50%,#151827 100%);color:#cfd4e6;display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;z-index:50;overflow:hidden;transition:width .22s cubic-bezier(.4,0,.2,1);}
.side::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.08),transparent);}
.brand{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.06);}
.brand .lg-img{width:36px;height:36px;border-radius:10px;object-fit:contain;flex-shrink:0;} /* 侧栏 Logo（深色背景） */
.brand span{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.3px;}

.nav{padding:12px 14px;flex:1;overflow-y:auto;overflow-x:hidden;}
.nav::-webkit-scrollbar{width:3px;}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
.nav .grp{font-size:10.5px;color:#5a6078;text-transform:uppercase;letter-spacing:1.5px;padding:18px 14px 8px;font-weight:600;}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:10px;margin-bottom:2px;color:#8b92a8;cursor:pointer;font-size:13.5px;font-weight:500;transition:var(--transition);position:relative;}
.nav a:hover{background:rgba(255,255,255,.05);color:#d0d4e4;}
.nav a.on{background:linear-gradient(135deg,rgba(99,102,241,.85),rgba(139,92,246,.7));color:#fff;box-shadow:0 4px 16px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.15);}
.nav a svg{width:19px;height:19px;flex-shrink:0;opacity:.75;transition:var(--transition);}
.nav a:hover svg,.nav a.on svg{opacity:1;}

.me{padding:16px 18px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.15);}
.me .av{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#22d3ee,#6366f1,#a78bfa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0;box-shadow:0 2px 8px rgba(99,102,241,.3);}
.me .mi{flex:1;min-width:0;}
.me .mi .nm{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.me .mi .rl{font-size:11px;color:#6b7280;margin-top:1px;}
.me button{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.15);color:#fca5a5;padding:6px 13px;border-radius:8px;cursor:pointer;font-size:11.5px;font-weight:500;transition:var(--transition);}
.me button:hover{background:rgba(239,68,68,.22);color:#fecaca;border-color:rgba(239,68,68,.25);}

.main{margin-left:252px;flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;transition:margin-left .22s cubic-bezier(.4,0,.2,1);}
.topbar{height:64px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;flex-shrink:0;position:sticky;top:0;z-index:20;}
.topbar h1{font-size:18px;font-weight:700;color:var(--txt);letter-spacing:-.3px;white-space:nowrap;flex-shrink:0;min-width:fit-content;}
.topbar .right{display:flex;align-items:center;gap:16px;color:var(--mut);font-size:13px;}
.topbar .bell{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;transition:var(--transition);}
.topbar .bell:hover{background:var(--bg);}
.topbar .bell svg{width:19px;height:19px;color:var(--mut2);}
.topbar .bell .dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--err);border:2px solid #fff;box-shadow:0 1px 3px rgba(239,68,68,.4);}
.topbar .uname{font-weight:600;color:var(--txt);font-size:13px;padding:0 2px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.content{padding:28px 32px;overflow:auto;flex:1;min-width:0;width:100%;box-sizing:border-box;}

/* 4. 通用组件：卡片 / KPI / 表格 / 按钮 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-md);transition:var(--transition);}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);}
.card h2{font-size:15.5px;font-weight:700;color:var(--txt);margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.card h2 .sub{font-size:12.5px;color:var(--mut);font-weight:400;margin-left:auto;}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column;}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;}
.kpi.pri::before{background:linear-gradient(180deg,var(--pri),var(--pri-l));}
.kpi.ok::before{background:linear-gradient(180deg,var(--ok),#34d399);}
.kpi.err::before{background:linear-gradient(180deg,var(--err),#f87171);}
.kpi.warn::before{background:linear-gradient(180deg,var(--warn),#fbbf24);}
.kpi.info::before{background:linear-gradient(180deg,var(--info),#22d3ee);}
.kpi .icon{font-size:22px;margin-bottom:8px;line-height:1;}
.kpi .n{font-size:28px;font-weight:800;color:var(--txt);letter-spacing:-.5px;line-height:1.2;}
.kpi .n.g{color:var(--ok);} .kpi .n.r{color:var(--err);} .kpi .n.a{color:var(--warn);} .kpi .n.c{color:var(--info);} .kpi .n.p{color:var(--pri);}
.kpi .l{font-size:12.5px;color:var(--mut);margin-top:6px;font-weight:500;}
.kpi .trend{font-size:11.5px;margin-top:4px;font-weight:600;}
.kpi .trend.up{color:var(--ok);} .kpi .trend.down{color:var(--err);}

.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap;}
th{color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;background:var(--bg);position:sticky;top:0;z-index:1;}
th:first-child{border-radius:8px 0 0 0;} th:last-child{border-radius:0 8px 0 0;}
tbody tr{transition:background .15s;}
tbody tr:nth-child(even){background:rgba(248,250,254,.5);}
tbody tr:hover{background:var(--pri-bg);}
td:last-child{white-space:normal;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--pri);color:#fff;border:none;padding:9px 18px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;transition:var(--transition);white-space:nowrap;line-height:1;}
.btn:hover{background:var(--pri-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.3);}
.btn:active{transform:translateY(0);}
.btn.s{background:var(--pri-bg);color:var(--pri);border:1px solid rgba(99,102,241,.2);}
.btn.s:hover{background:rgba(99,102,241,.1);}
.btn.d{background:var(--err-bg);color:var(--err);border:1px solid rgba(239,68,68,.2);}
.btn.d:hover{background:rgba(239,68,68,.1);}
.btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--txt2);}
.btn.ghost:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-bg);}
.btn.sm{padding:6px 13px;font-size:12px;border-radius:7px;}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}
.btn.s:disabled{background:var(--bg);color:var(--mut);border-color:var(--line);}
.btn.s:disabled:hover{background:var(--bg);}
.btn.lg{padding:12px 26px;font-size:15px;font-weight:600;border-radius:11px;}
.btn-icon{width:32px;height:32px;padding:0;border-radius:8px;font-size:15px;}

/* 5. 标签 / 表单 */
.tag{display:inline-flex;align-items:center;font-size:11.5px;padding:3px 10px;border-radius:6px;font-weight:600;letter-spacing:.2px;}
.tag.on{background:var(--ok-bg);color:var(--ok);} .tag.off{background:var(--err-bg);color:var(--err);}
.tag.vip{background:var(--warn-bg);color:#d97706;} .tag.cy{background:var(--info-bg);color:#0891b2;}
.tag.pri-tag{background:var(--pri-bg);color:var(--pri);}

/* 分类颜色色块（全局可用：标签管理页 / 用户详情抽屉均会用到） */
.tag-color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;border:1px solid rgba(0,0,0,.08);flex-shrink:0;}

input,select,textarea{width:100%;padding:10px 14px;border:1.5px solid var(--line2);border-radius:9px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--txt);transition:var(--transition);outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(99,102,241,.12);}
input::placeholder,textarea::placeholder{color:var(--mut2);}
textarea{resize:vertical;min-height:72px;line-height:1.55;}
label{display:block;font-size:12.5px;color:var(--txt2);font-weight:600;margin-bottom:6px;}
.row{display:flex;gap:14px;} .row>div{flex:1;}
.search{display:flex;gap:10px;margin-bottom:18px;align-items:center;}
.search input{flex:1;margin-bottom:0;border-radius:9px;}
.fg{font-size:12.5px;color:var(--mut);margin-bottom:14px;}

/* 6. 登录页 */
/* 登录页单独关掉全局 body flex，用 .login-stage 整屏居中，避免下方留白 */
body.login-page{display:block;}
.login-stage{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}

.bg-deco{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;animation:blobFloat 20s ease-in-out infinite alternate;}
.b1{width:420px;height:420px;background:linear-gradient(135deg,#6366f1,#818cf8);top:-120px;left:-100px;animation-delay:0s;}
.b2{width:360px;height:360px;background:linear-gradient(135deg,#a855f7,#ec4899);bottom:-80px;right:-60px;animation-delay:-7s;}
.b3{width:280px;height:280px;background:linear-gradient(135deg,#06b6d4,#10b981);top:50%;left:50%;transform:translate(-50%,-50%);animation:blobFloatC 22s ease-in-out infinite alternate;opacity:.25;} /* 独立动画保留居中，避免被 blobFloat 的 transform 覆盖而偏移 */
@keyframes blobFloat{
  0%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-40px) scale(1.08);}
  66%{transform:translate(-20px,20px) scale(.95);}
  100%{transform:translate(15px,30px) scale(1.05);}
}
@keyframes blobFloatC{
  0%{transform:translate(-50%,-50%) scale(1);}
  33%{transform:translate(calc(-50% + 30px),calc(-50% - 40px)) scale(1.08);}
  66%{transform:translate(calc(-50% - 20px),calc(-50% + 20px)) scale(.95);}
  100%{transform:translate(calc(-50% + 15px),calc(-50% + 30px)) scale(1.05);}
}

.login-wrap{
  position:relative;z-index:2;
  max-width:520px;margin:0;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-xl);
  padding:50px 50px 44px;
  box-shadow:0 4px 6px rgba(0,0,0,.03),0 12px 40px rgba(99,102,241,.10),0 0 0 1px rgba(99,102,241,.04);
  animation:loginCardIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes loginCardIn{from{opacity:0;transform:translateY(28px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}

.login-wrap .brand{display:flex;align-items:center;justify-content:center;gap:12px;border:none;padding:0;margin-bottom:6px;}
.login-wrap .brand span:last-child{font-size:19px;font-weight:700;background:linear-gradient(135deg,var(--pri),#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lg-img{width:52px;height:52px;border-radius:14px;object-fit:contain;box-shadow:0 4px 16px rgba(99,102,241,.25);transition:transform .3s ease,box-shadow .3s ease;flex-shrink:0;}
.lg-img:hover{transform:scale(1.08) rotate(-3deg);box-shadow:0 8px 24px rgba(99,102,241,.35);}

.login-wrap h2{text-align:center;font-size:22px;font-weight:800;color:var(--txt);margin-bottom:4px;letter-spacing:-.5px;}
.login-sub{text-align:center;font-size:13px;color:var(--mut);margin-bottom:30px;}

.field{position:relative;margin-bottom:18px;}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none;transition:color var(--transition);display:flex;align-items:center;}
.field input{width:100%;padding:13px 16px 13px 46px;border:1.5px solid var(--line2);border-radius:var(--radius);font-size:14.5px;color:var(--txt);background:rgba(255,255,255,.7);outline:none;transition:all var(--transition);box-shadow:0 1px 3px rgba(0,0,0,.02);}
.field input::placeholder{color:var(--mut2);}
.field input:hover{border-color:#b7bce0;}
.field input:focus{border-color:var(--pri);background:#fff;box-shadow:0 0 0 3.5px rgba(99,102,241,.12),0 2px 8px rgba(99,102,241,.08);}
.field input:focus ~ .input-icon,.field input:focus + .input-icon{color:var(--pri);}

.btn-login{
  position:relative;overflow:hidden;width:100%;margin-top:10px;
  background:linear-gradient(135deg,#7c3aed 0%,#6366f1 55%,#4f46e5 100%);
  color:#fff;border:none;font-size:16px;font-weight:700;padding:15px 28px;border-radius:14px;
  cursor:pointer;letter-spacing:4px;
  box-shadow:0 6px 18px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.20);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
}
.btn-login::before{ /* hover 高光扫过 */
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
}
.btn-login:hover:not(:disabled)::before{left:140%;}
.btn-login:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px rgba(99,102,241,.45),inset 0 1px 0 rgba(255,255,255,.24);}
.btn-login:active:not(:disabled){transform:translateY(0) scale(.99);}
.btn-login:disabled{opacity:.72;cursor:not-allowed;}
.btn-arrow{transition:transform .28s ease;flex-shrink:0;} /* 悬停右滑 */
.btn-login:hover:not(:disabled) .btn-arrow{transform:translateX(5px);}
.btn-spin svg.spin{animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.login-hint{text-align:center;font-size:12.5px;color:var(--mut);margin-top:20px;line-height:1.6;}
.login-hint code{background:var(--pri-bg);color:var(--pri-d);padding:1px 7px;border-radius:5px;font-size:12px;font-weight:600;}
.hidden{display:none!important;}

/* 7. 弹窗 / 抽屉（内容由 JS 注入） */
.modal-mask{position:fixed;inset:0;background:rgba(15,18,32,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-mask.show{display:flex;animation:fadeIn .2s ease;}
.modal{background:#fff;border-radius:var(--radius-xl);padding:28px;width:500px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,.25);animation:slideUp .25s ease;}
.modal h3{font-size:17px;font-weight:700;margin:0;color:var(--txt);}
.modal .dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.modal .dhead h3{font-size:17px;font-weight:700;margin:0;}
.modal .closex{background:none;border:none;font-size:22px;color:var(--mut);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:var(--transition);flex-shrink:0;}
.modal .closex:hover{background:var(--bg);color:var(--txt);}

.drawer{position:fixed;inset:0;z-index:120;display:none;}
.drawer.show{display:block;}
.drawer .dmask{position:absolute;inset:0;background:rgba(15,18,32,.4);backdrop-filter:blur(2px);animation:fadeIn .2s ease;}
.drawer .dpanel{position:absolute;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:#fff;box-shadow:-16px 0 48px rgba(0,0,0,.2);padding:24px 28px;overflow:auto;animation:slideLeft .3s ease;}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.drawer .dhead h3{font-size:17px;font-weight:700;}
.drawer .closex{background:none;border:none;font-size:22px;color:var(--mut);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:var(--transition);}
.drawer .closex:hover{background:var(--bg);color:var(--txt);}

/* 7.5 弹窗表单（全局共用，common.js / profile.js 的弹窗均依赖） */
.mform{margin-top:6px;}
.mf-group{margin-bottom:22px;}
.mf-group label{display:block;font-size:12.5px;font-weight:600;color:var(--txt2);margin-bottom:9px;}
.mf-group input,.mf-group select{
  width:100%;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:13.5px;color:var(--txt);background:var(--card);
  transition:border-color var(--transition);box-sizing:border-box;
}
.mf-group input:focus,.mf-group select:focus{
  border-color:var(--pri);outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.mf-row{display:flex;gap:16px;}
.mf-row .mf-group{flex:1;min-width:0;}
.mform-foot{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
}

/* 8. 分段控件 / 空状态 / 杂项 */
.seg{display:inline-flex;gap:4px;background:var(--bg);padding:4px;border-radius:10px;margin-bottom:18px;}
.seg button{background:transparent;border:none;padding:8px 16px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:var(--mut2);transition:var(--transition);}
.seg button:hover{color:var(--txt2);}
.seg button.on{background:var(--card);color:var(--pri);box-shadow:var(--shadow);font-weight:600;}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--mut);text-align:center;}
.empty-icon{font-size:44px;margin-bottom:12px;opacity:.5;}
.empty-text{font-size:14px;font-weight:500;}
.hint{font-size:12.5px;color:var(--mut);margin-bottom:10px;line-height:1.5;}
.thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow);}
.preview-img{max-width:100%;border-radius:12px;border:1px solid var(--line);margin-top:10px;}

/* 9. 动画 / 滚动条 / 页面切换 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.content::-webkit-scrollbar{width:6px;}
.content::-webkit-scrollbar-thumb{background:var(--mut2);border-radius:3px;}
.content::-webkit-scrollbar-thumb:hover{background:var(--mut);}
.page{animation:fadeIn .2s ease;width:100%;}

/* 10. 响应式（仅改侧栏宽/间距，内容始终 100% 撑满） */
.row{flex-wrap:wrap;}
.row>div{min-width:0;}

@media (min-width:2560px){           /* 2K */
  .side{width:276px;} .main{margin-left:276px;}
  .content{padding:34px 56px;} .kpis{gap:20px 28px;}
  .topbar{padding:0 56px;height:64px;} .topbar h1{font-size:20px;}
}
@media (min-width:3440px){           /* 超宽屏 */
  .side{width:288px;} .main{margin-left:288px;}
  .content{padding:38px 68px;} .kpis{gap:22px 32px;}
  .topbar{padding:0 68px;height:66px;} .topbar h1{font-size:21px;}
}
@media (min-width:3840px){           /* 4K */
  .side{width:300px;} .main{margin-left:300px;}
  .content{padding:44px 80px;} .kpis{gap:24px 36px;}
  .topbar{padding:0 80px;height:68px;} .topbar h1{font-size:22px;}
}
@media (max-width:1536px){           /* 中等笔记本 */
  .side{width:240px;} .main{margin-left:240px;}
  .content{padding:24px 28px;} .topbar{padding:0 28px;}
}
@media (max-width:1366px){           /* 入门笔记本 */
  .side{width:220px;} .main{margin-left:220px;}
  .content{padding:20px 22px;} .topbar{padding:0 22px;}
  .kpis{gap:14px;} .card{padding:20px;margin-bottom:16px;}
}
@media (max-width:1024px){           /* 窄屏：侧栏收起为图标栏 */
  .side{width:74px;align-items:stretch;}
  .brand{justify-content:center;padding:18px 0;}
  .brand span{display:none;}
  .nav{padding:12px 10px;} .nav .grp{display:none;}
  .nav a{gap:0;justify-content:center;padding:14px 0;font-size:0;}
  .nav a svg{width:22px;height:22px;}
  .me{flex-direction:column;gap:10px;padding:16px 8px;text-align:center;}
  .me .mi{display:none;} .me button{padding:7px 0;font-size:11px;width:100%;}
  .main{margin-left:74px;}
  .content{padding:18px 16px;} .topbar{padding:0 16px;height:56px;}
  .topbar h1{font-size:16px;} .topbar .right{gap:10px;}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
  .card{padding:16px;margin-bottom:14px;} .tbl-wrap{margin:0 -2px;}
}

/* 10. 分页条（通用，所有列表页共用） */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--mut);}
.pager-total{color:var(--txt2);font-weight:500;}
.pager-size{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pg-sel{height:30px;border:1px solid var(--line2);border-radius:7px;background:var(--card);color:var(--txt);padding:0 6px;font-size:13px;cursor:pointer;transition:var(--transition);}
.pg-sel:hover{border-color:var(--pri);}
.pg-btn,.pg-num{height:30px;min-width:32px;padding:0 10px;border:1px solid var(--line2);background:var(--card);color:var(--txt2);border-radius:7px;cursor:pointer;font-size:13px;transition:var(--transition);}
.pg-btn:hover:not(:disabled),.pg-num:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-bg);}
.pg-num.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600;cursor:default;}
.pg-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--bg);}
.pg-jump{display:inline-flex;align-items:center;gap:5px;margin-left:2px;}
.pg-input{width:52px;height:30px;border:1px solid var(--line2);border-radius:7px;background:var(--card);color:var(--txt);padding:0 6px;font-size:13px;text-align:center;transition:var(--transition);}
.pg-input:hover,.pg-input:focus{border-color:var(--pri);outline:none;}