/* ==========================================================================
   NaichaCMS 后台样式
   与前台 site.css 共用同一套设计令牌，保证前后台视觉一致。
   ========================================================================== */

:root{
  /* ==========================================================
     色板与 naicha.cloud 官网后台 admin/sidebar.php 保持一致（逐值对齐）
     ========================================================== */
  --banner:linear-gradient(135deg,#006bbd,#0078d4 55%,#0f9be0);
  --primary:#0078d4;
  --brand:#0078d4;
  --brand-2:#0f9be0;
  --brand-3:#0059a8;
  --grad:linear-gradient(135deg,#0f9be0 0%,#0078d4 100%);
  --grad-soft:linear-gradient(135deg,#eaf4fa,#f4faff);

  --text:#1a2b3c;
  --ink:#1a2b3c; --ink-2:#44586b; --muted:#8899aa;
  --line:#eef2f6; --line-2:#f4f8fb; --bg:#f1f5f9; --card:#fff;
  --ok:#22b07d; --warn:#f0a020; --danger:#d5483c;

  --r-xs:8px; --r-sm:11px; --r:14px; --r-lg:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(13,27,42,.04), 0 2px 6px rgba(13,27,42,.05);
  --sh-2:0 6px 16px rgba(13,27,42,.06), 0 16px 40px rgba(13,27,42,.07);
  --sh-brand:0 8px 24px rgba(0,120,212,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

/* 内联 SVG 兜底尺寸：防止只写 viewBox 的裸 svg 撑成默认 300×150 */
svg{width:16px;height:16px;flex:none;vertical-align:-0.18em}

html,body{background:var(--bg)}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--brand-2)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#c9d8e6;border-radius:6px;border:2px solid var(--bg)}

/* ============================ 顶栏 ============================ */
.topbar{
  background:var(--banner);color:#fff;padding:0 26px;height:66px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 2px 18px rgba(0,80,150,.22);
  position:sticky;top:0;z-index:30;
}
.topbar:before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 220px at 12% -50%,rgba(255,255,255,.20),transparent 70%),
    radial-gradient(420px 200px at 88% 130%,rgba(255,255,255,.10),transparent 70%);
}
.topbar:after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.tb-left,.tb-right{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.tb-brand{display:flex;align-items:center;gap:12px;color:#fff;min-width:0}
.tb-brand:hover{color:#fff}
.tb-logo{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.26);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.tb-logo svg{width:19px;height:19px}
.tb-name{
  font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tb-tag{
  font-size:11.5px;font-weight:600;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);padding:3px 11px;border-radius:var(--r-full);
}
.tb-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  padding:5px 12px;border-radius:var(--r-full);
}
.tb-chip i{width:6px;height:6px;border-radius:50%;background:#7df5c4;box-shadow:0 0 0 3px rgba(125,245,196,.22)}
.tb-chip.warn i{background:#ffd479;box-shadow:0 0 0 3px rgba(255,212,121,.22)}
.tb-sep{width:1px;height:22px;background:rgba(255,255,255,.2)}
.tb-bell{
  position:relative;color:#fff;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;transition:background .18s var(--ease);
}
.tb-bell:hover{background:rgba(255,255,255,.16)}
.tb-bell svg{width:19px;height:19px}
.tb-dot{
  position:absolute;top:3px;right:3px;background:#ff5b5b;color:#fff;font-size:10px;line-height:1;
  padding:3px 5px;border-radius:var(--r-full);font-weight:700;border:2px solid #0f60a8;
}
.tb-user{
  display:flex;align-items:center;gap:9px;color:#fff;font-size:13.5px;font-weight:500;
  padding:5px 14px 5px 5px;border-radius:var(--r-full);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  transition:background .18s var(--ease);min-width:0;
}
.tb-user:hover{background:rgba(255,255,255,.20);color:#fff}
.tb-avatar{
  width:30px;height:30px;border-radius:var(--r-full);flex:none;
  background:rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;
}
.tb-avatar svg{width:16px;height:16px}
.tb-logout{
  display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.88);font-size:13px;
  padding:9px 14px;border-radius:11px;transition:background .18s var(--ease);
}
.tb-logout:hover{background:rgba(255,255,255,.16);color:#fff}
.tb-logout svg{width:15px;height:15px}

/* ============================ 布局 ============================ */
.admin-grid{
  display:grid;grid-template-columns:214px minmax(0,1fr);gap:22px;
  max-width:1720px;margin:26px auto;padding:0 26px;align-items:start;
}
.admin-grid .side{
  grid-column:1;position:sticky;top:84px;background:#fff;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--sh-2);min-width:0;overflow:hidden;
  max-height:calc(100vh - 108px);display:flex;flex-direction:column;
}

/* --- 侧栏品牌头 --- */
.side-brand{
  display:flex;align-items:center;gap:11px;padding:18px 16px;
  border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#f7fbff,#fff);
}
.side-brand .sb-logo{
  width:38px;height:38px;border-radius:12px;background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-brand);
}
.side-brand .sb-logo svg{width:20px;height:20px;color:#fff}
.side-brand .sb-meta{min-width:0}
.side-brand b{font-size:14.5px;display:block;letter-spacing:-.01em;color:var(--text)}
.side-brand i{
  font-style:normal;display:inline-block;font-size:10.5px;font-weight:600;color:var(--primary);
  background:var(--grad-soft);padding:1px 8px;border-radius:var(--r-full);margin-top:3px;
}

/* --- 导航 --- */
.side-nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;overflow-y:auto;flex:1}
.side-nav .g{
  font-size:10.5px;color:#9db0c6;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:14px 10px 7px;
}
.side-nav a{
  display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:10px;
  font-size:13.5px;color:var(--ink-2);transition:background .18s var(--ease),color .18s var(--ease);
  position:relative;
}
.side-nav a .nav-ic{
  width:28px;height:28px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease);
}
.side-nav a .nav-ic svg{width:16px;height:16px;color:#93a7bc;transition:color .18s var(--ease)}
.side-nav a:hover{background:#f2f8fe;color:var(--primary)}
.side-nav a:hover .nav-ic{background:#e3f1fd}
.side-nav a:hover .nav-ic svg{color:var(--primary)}
/* 选中态：渐变实底，是整个侧栏的视觉重点 */
.side-nav a.active{
  background:var(--grad);color:#fff;font-weight:600;
  box-shadow:0 5px 16px rgba(0,120,212,.28);
}
.side-nav a.active .nav-ic{background:rgba(255,255,255,.2)}
.side-nav a.active .nav-ic svg{color:#fff}
.side-nav a .n{
  margin-left:auto;background:#ff5b5b;color:#fff;font-size:10.5px;padding:2px 7px;
  border-radius:var(--r-full);font-weight:700;line-height:1.5;
}
.side-nav a.active .n{background:rgba(255,255,255,.26)}

/* --- 侧栏底部用户卡 --- */
.side-foot{padding:12px 14px 14px;border-top:1px solid var(--line-2);background:#fafcfe}
.side-user{display:flex;align-items:center;gap:10px;min-width:0}
.side-user .su-avatar{
  width:34px;height:34px;border-radius:var(--r-full);background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,120,212,.24);
}
.side-user .su-avatar svg{width:17px;height:17px;color:#fff}
.side-user .su-meta{flex:1;min-width:0}
.side-user b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.side-user i{font-style:normal;font-size:11px;color:var(--muted)}
.side-user .su-out{
  width:30px;height:30px;border-radius:8px;flex:none;color:#9db0c6;
  display:flex;align-items:center;justify-content:center;transition:.18s var(--ease);
}
.side-user .su-out:hover{background:#fdeceb;color:var(--danger)}
.side-user .su-out svg{width:15px;height:15px}

.main{grid-column:2;min-width:0}

/* ============================ 页头 ============================ */
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.page-h h2{font-size:21px;letter-spacing:-.015em}
.page-h p{font-size:13px;color:var(--muted);margin-top:4px}

/* ============================ 卡片 ============================ */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:22px 24px;margin-bottom:18px;min-width:0;
}
.card>h3{font-size:15px;margin-bottom:18px;display:flex;align-items:center;gap:9px;font-weight:600}
.card>h3 svg{width:17px;height:17px;color:var(--brand)}
.card.flush{padding:0;overflow:hidden}
.card.flush>h3{padding:20px 24px 0;margin-bottom:14px}

/* ============================ 统计 ============================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:18px}
.stat{
  background:var(--grad);border-radius:var(--r);padding:20px;color:#fff;
  box-shadow:var(--sh-brand);position:relative;overflow:hidden;
}
.stat:before{content:'';position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.stat .ico{
  width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;
}
.stat .ico svg{width:19px;height:19px}
.stat b{font-size:26px;font-weight:800;display:block;line-height:1.25;letter-spacing:-.02em;position:relative}
.stat span{font-size:12px;color:rgba(255,255,255,.86);position:relative}
.stat.plain{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--ink)}
.stat.plain:before{display:none}
.stat.plain b{color:var(--ink)}
.stat.plain span{color:var(--muted)}
.stat.plain .ico{background:var(--grad-soft)}
.stat.plain .ico svg{color:var(--brand)}

/* ============================ 仪表盘：欢迎横幅 ============================ */
.dash-hero{position:relative;overflow:hidden;background:var(--banner);border-radius:var(--r);padding:26px 28px;color:#fff;box-shadow:0 10px 30px rgba(0,120,212,.20);margin-bottom:18px}
.dash-hero:before{content:'';position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.10)}
.dash-hero:after{content:'';position:absolute;right:70px;bottom:-100px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.07)}
.dash-hero-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dash-hero h2{font-size:22px;color:#fff;margin-bottom:7px;letter-spacing:-.015em}
.dash-hero .sub{font-size:13.5px;color:rgba(255,255,255,.9);display:flex;gap:14px;flex-wrap:wrap}
.dash-hero .sub span{display:inline-flex;align-items:center;gap:6px}
.dash-hero .sub svg{width:14px;height:14px;opacity:.85}
.dash-hero .btn{background:#fff;color:var(--primary);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.dash-hero .btn:hover{color:var(--primary);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.dash-hero .btn.ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.32);box-shadow:none}
.dash-hero .btn.ghost:hover{background:rgba(255,255,255,.24);color:#fff}

/* ============================ 仪表盘：KPI 卡 ============================ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:18px}
.kpi{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1);overflow:hidden;transition:.2s var(--ease)}
.kpi:hover{box-shadow:var(--sh-2);border-color:#d3e8fb;transform:translateY(-2px)}
.kpi .k-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.kpi .k-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.kpi .k-ico{width:38px;height:38px;border-radius:11px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center}
.kpi .k-ico svg{width:19px;height:19px;color:var(--primary)}
.kpi .k-delta{font-size:11.5px;font-weight:600;color:#0d7a4b;background:#e9f9f1;padding:3px 9px;border-radius:var(--r-full)}
.kpi .k-delta.flat{color:#64748b;background:#eef2f7}
.kpi b{font-size:27px;font-weight:800;display:block;line-height:1.25;letter-spacing:-.025em;color:var(--text)}
.kpi span{font-size:12.5px;color:var(--muted)}

/* 迷你趋势条 */
.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:12px}
.spark i{flex:1;background:linear-gradient(180deg,#8fd0ff,#cfe8fb);border-radius:3px 3px 1px 1px;min-height:3px}
.spark i.hi{background:var(--grad)}

/* ============================ 仪表盘：待办 ============================ */
.todo{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-xs);background:#f8fbfe;border:1px solid var(--line);margin-bottom:9px;transition:.15s var(--ease)}
.todo:hover{border-color:#cfe4f7;background:#f4faff}
.todo .t-ico{width:34px;height:34px;border-radius:10px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;flex:none}
.todo .t-ico svg{width:17px;height:17px;color:var(--primary)}
.todo .t-txt{flex:1;min-width:0}
.todo .t-txt b{display:block;font-size:13.5px}
.todo .t-txt i{font-style:normal;font-size:11.5px;color:var(--muted)}
.todo .t-num{font-size:19px;font-weight:800;color:var(--primary);flex:none}
.todo.warn{border-color:#ffe6c2;background:#fffaf2}
.todo.warn .t-ico{background:#fff1dc}
.todo.warn .t-ico svg,.todo.warn .t-num{color:#b25e00}

/* ============================ 表格 ============================ */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-xs)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;padding:12px 14px;color:var(--muted);font-weight:600;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line);background:#f8fbfe;white-space:nowrap;
}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .15s var(--ease)}
.tbl tbody tr:hover{background:#fafcff}
.tbl .t-title{font-weight:600;color:var(--ink)}
.tbl .t-title:hover{color:var(--brand)}
.tbl .nowrap{white-space:nowrap}
.muted{color:var(--muted)}

/* ============================ 徽章 ============================ */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;white-space:nowrap}
.badge.green{background:#e9f9f1;color:#0d7a4b}
.badge.blue{background:var(--grad-soft);color:var(--brand)}
.badge.orange{background:#fff5e6;color:#b25e00}
.badge.red{background:#fdeceb;color:#b3261e}
.badge.gray{background:#eef2f7;color:#64748b}

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 18px;border-radius:var(--r-xs);border:1px solid transparent;
  font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;
  background:var(--grad);color:#fff;box-shadow:var(--sh-brand);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,120,212,.28);color:#fff}
.btn svg{width:15px;height:15px}
.btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--line);box-shadow:var(--sh-1)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);box-shadow:0 6px 18px rgba(0,120,212,.12)}
.btn.danger{background:linear-gradient(135deg,#ef4444,#c62828);box-shadow:0 6px 18px rgba(239,68,68,.24)}
.btn.danger:hover{box-shadow:0 10px 26px rgba(239,68,68,.3)}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px;border-radius:7px}
.btn.lg{height:46px;padding:0 24px;font-size:14.5px}
.btn.block{width:100%}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ============================ 表单 ============================ */
.field{margin-bottom:18px}
.field>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-size:13.5px;font-family:inherit;color:var(--ink);background:#fff;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{height:auto;min-height:100px;padding:11px 13px;line-height:1.8;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,120,212,.1)}
.field input[readonly]{background:#f6f9fc;color:var(--muted)}
.field input::placeholder,.field textarea::placeholder{color:#aebccd}
.field textarea.tall{min-height:340px;font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.8}
.hint{font-size:11.5px;color:var(--muted);margin-top:7px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.checks{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.checks label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);font-weight:500;cursor:pointer}
.checks input{width:auto;height:auto;accent-color:var(--brand)}

/* ============================ 提示 ============================ */
.alert{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--r-xs);font-size:13.5px;margin-bottom:18px;border:1px solid transparent}
.alert.ok{background:#e9f9f1;color:#0d7a4b;border-color:#c3eeda}
.alert.err{background:#fdeceb;color:#b3261e;border-color:#f8cfcc}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}
.empty svg{width:44px;height:44px;color:#c9d8e6;margin:0 auto 14px}
.empty h3{font-size:16px;color:var(--ink-2);margin-bottom:6px}
.empty p{font-size:13.5px}

/* ============================ 分页 ============================ */
.pager{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:18px}
.pager a,.pager span{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 11px;
  border-radius:var(--r-xs);background:#fff;border:1px solid var(--line);font-size:13px;color:var(--ink-2);
}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .on{background:var(--grad);color:#fff;border-color:transparent;font-weight:600}
.pager .off{color:#c9d8e6}
.pager .info{margin-left:10px;border:none;background:none;color:var(--muted);font-size:12.5px}

/* ============================ 登录页 ============================ */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--banner);position:relative;overflow:hidden;
}
.login-page:before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(700px 420px at 20% 10%,rgba(255,255,255,.16),transparent 62%),
             radial-gradient(600px 400px at 85% 90%,rgba(0,255,224,.12),transparent 62%);
}
.login-page:after{
  content:'';position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);
  background-size:48px 48px;
}
.login-card{
  position:relative;background:#fff;border-radius:var(--r-lg);padding:38px 36px;width:100%;max-width:420px;
  box-shadow:0 30px 80px rgba(4,20,34,.36);
}
.login-card .logo-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.login-card .logo-row .logo{
  width:44px;height:44px;border-radius:13px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;box-shadow:var(--sh-brand);
}
.login-card h1{font-size:20px;margin-bottom:3px}
.login-card p.sub{font-size:13px;color:var(--muted)}
.login-card .btn{width:100%;margin-top:10px}
.login-foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.8}

/* ============================ 迷你趋势图 ============================ */
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:10px}
.bars .b{flex:1;background:var(--grad-soft);border-radius:6px 6px 2px 2px;position:relative;min-height:4px;transition:.2s var(--ease)}
.bars .b:hover{background:var(--grad)}
.bars .b span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);white-space:nowrap}

/* ============================ 权限矩阵 ============================ */
.perm-group{margin-bottom:18px}
.perm-group-name{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#9db0c6;padding-bottom:8px;margin-bottom:11px;border-bottom:1px solid var(--line-2);
}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px}
.perm-item{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:#fff;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);min-width:0;
}
.perm-item:hover{border-color:#cfe4f7;background:#fafcff}
.perm-item.on{border-color:var(--primary);background:var(--grad-soft)}
.perm-item input{width:auto;height:auto;accent-color:var(--primary);flex:none}
.perm-item .pi-label{font-size:13px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perm-item .pi-key{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--muted);flex:none}

/* ============================ 响应式 ============================ */
@media(max-width:1000px){
  .admin-grid{grid-template-columns:1fr;gap:14px;margin:16px auto;padding:0 14px}
  .admin-grid .side{position:static;top:auto;max-height:none}
  .main{grid-column:1}
  .topbar{padding:0 16px;height:58px}
  .topbar .brand{font-size:15px}
  .topbar .brand em{display:none}
  .tb-user .uname{display:none}
  .grid2{grid-template-columns:1fr}
}

/* 验证码（后台同款） */
.captcha-row{display:flex;align-items:center;gap:10px}
.captcha-row input{max-width:130px}
.captcha-q{display:inline-flex;align-items:center;justify-content:center;
  min-width:96px;height:38px;padding:0 14px;border-radius:9px;
  background:#f5f9fd;border:1px solid var(--line,#e3ecf3);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;
  font-weight:600;color:#1e293b;letter-spacing:.04em;
  user-select:none;-webkit-user-select:none}