/*
Project: 多租户反馈平台(MultiFeedbackSystem)
Copyright (c) 2026 智维工作室 All Rights Reserved.
著作权由智维工作室对应的自然人主体持有。
本源代码受著作权法保护,仅获得许可方可使用。
禁止未经许可分发、转售、开源。
*/

/* ═══════════════════════════════════════════════════════════════
   MultiFeedbackSystem 全站视觉系统(global.css · v4.0 "Indigo Slate")
   ─────────────────────────────────────────────────────────────
   设计语言:把后台做成一块"冷调石板控制台"——
     石墨冷白底 + 靛蓝主色 + 琥珀点缀;柔和悬浮投影、中等圆角、
     全站无衬线紧排(数字亦无衬线,等宽对齐);图标为双色面性
     (半透明填充 + 1.9 描边 + 实心点缀);后台侧栏为石墨深栏 + 琥珀高亮。
   与 v3.0 "Editorial Console"(暖纸 + 松绿 + 赭铜 + 衬线数字 + 小圆角)
   形成冷暖 / 曲直 / 字体 / 图标四个维度的显著差异。
   - 页面只需引入本文件,即可获得全站一致的排版与配色;
     页面私有样式写在页面自身 <style> 内,不得再覆盖 body 底色/字体。
   - 图标统一走 admin/_icon.php 的内联 SVG(24 网格 / 双色面性),不用 emoji。
   - 版本号由引入方以 ?v=APP_VERSION 追加,升级后浏览器自动拉新。
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 一、设计令牌 ═══ */
:root{
  /* 主色:靛蓝(indigo) */
  --brand:#4f46e5;
  --brand-2:#4338ca;
  --brand-deep:#171c2b;
  --brand-soft:#eceafd;
  --brand-line:#c9c5f7;
  /* 辅色:琥珀(amber) */
  --accent:#d97706;
  --accent-soft:#fdf1e0;
  --accent-line:#f2d5ab;
  /* 墨色(深海军蓝) */
  --ink:#1a2138;
  --ink-2:#46516b;
  --muted:#7d88a1;
  /* 石面(冷调瓷白) */
  --paper:#f3f5f9;
  --paper-2:#e9edf4;
  --surface:#ffffff;
  --line:#dfe5ef;
  --line-2:#eef1f7;
  /* 语义 */
  --ok:#16a34a;      --ok-soft:#e8f6ee;   --ok-line:#b5e2c8;
  --warn:#b45309;    --warn-soft:#fdf3e3; --warn-line:#eed7ae;
  --err:#dc2626;     --err-soft:#fdecec;  --err-line:#f3c1c1;
  --info:#0284c7;    --info-soft:#e6f3fb; --info-line:#b5dcf2;
  /* 形状:中等圆角(区别于 v3.0 的 8/6 小圆角) */
  --card-r:14px;
  --ctrl-r:9px;
  --page-max:1360px;
  --page-px:28px;
  --rail-w:244px;
  --ctrl-h:38px;
  /* 投影:冷调、悬浮 */
  --shadow-1:0 1px 2px rgba(23,28,43,.05), 0 2px 6px rgba(23,28,43,.06);
  --shadow-2:0 4px 10px rgba(23,28,43,.07), 0 14px 30px rgba(23,28,43,.09);
  --shadow-3:0 18px 44px rgba(15,20,35,.20);
  /* 字体:全站无衬线紧排(数字不再衬线) */
  --font-sans:"Inter","Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Inter","Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Cascadia Mono","JetBrains Mono",Consolas,"Courier New",monospace;
}

/* ═══ 二、底色 / 字体 / 全局行为 ═══ */
body:not(.vcenter){
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body:not(.vcenter) > .ufoot{ margin-top:auto; }
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(900px 360px at 14% -140px, rgba(79,70,229,.10), transparent 66%),
    radial-gradient(760px 320px at 92% -120px, rgba(217,119,6,.07), transparent 64%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{ background:#dcd9fb; color:var(--brand-2); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#c3cbdc; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#a4b0c8; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
:focus-visible{ outline:2px solid rgba(79,70,229,.5); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{ letter-spacing:-.015em; }
a{ color:var(--brand); }
input[type=checkbox], input[type=radio]{ accent-color:var(--brand); }
strong, b{ font-weight:700; }
code, kbd{ font-family:var(--font-mono); font-size:.92em; }

/* 数字:表格数字对齐(v4.0 数字用无衬线,不再衬线做焦点) */
.num, .kpi .num, .stat-chip .num, .fig{ font-variant-numeric:tabular-nums; }

/* ═══ 三、图标(与 admin/_icon.php 双色面性配套) ═══ */
.ic{ display:inline-block; vertical-align:-.15em; flex:none; }
.ic-xs{ width:14px; height:14px; }
.ic-sm{ width:16px; height:16px; }
.ic-lg{ width:24px; height:24px; }
.ic-xl{ width:32px; height:32px; }
.ico-box{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand);
  border:1px solid var(--brand-line); flex:none;
}
.ico-box.ico-box--accent{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.ico-box.ico-box--plain{ background:var(--paper-2); color:var(--ink-2); border-color:var(--line); }

/* ═══ 四、排版原语:小标 / 区块标题 / 分隔 ═══ */
.kicker{
  display:block;
  font-size:10.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:6px;
}
.kicker--brand{ color:var(--brand); }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.sec-head h2, .sec-head h3{ margin:0; font-size:16px; font-weight:700; color:var(--ink); }
.sec-head .sec-sub{ font-size:12.5px; color:var(--muted); font-weight:400; margin-top:3px; }
.sec-head .sec-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sec-head a.sec-more{ font-size:12.5px; color:var(--brand); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.sec-head a.sec-more:hover{ text-decoration:underline; }
.rule{ height:1px; background:var(--line); border:0; margin:24px 0; }
.rule--dot{ height:auto; background:none; text-align:center; }
.rule--dot::before{ content:"· · ·"; color:var(--line); letter-spacing:.6em; font-size:12px; }

/* ═══ 五、页面容器 ═══ */
.wrap, .content, .layout, .main, main{
  box-sizing:border-box;
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding:28px var(--page-px) 44px;
}
.form-wrap{ box-sizing:border-box; width:100%; max-width:var(--page-max); margin:0 auto; padding:28px var(--page-px) 96px; }

/* ═══ 六、页题(新版式:小标 + 主标 + 说明 + 操作) ═══ */
.phcard{
  display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-r);
  box-shadow:var(--shadow-1);
  padding:20px 22px; margin:0 0 20px; max-width:100%;
  position:relative; overflow:hidden;
}
.phcard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--brand),var(--accent));
}
.ph-main{ min-width:0; flex:1 1 380px; }
.ph-main .ph-top{ display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.ph-titles{ min-width:0; }
.ph-titles .kicker{ margin-bottom:3px; }
.ph-main h1{ font-size:21px; font-weight:800; color:var(--ink); margin:0; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ph-tag{
  display:inline-flex; align-items:center; padding:1px 9px; border-radius:var(--ctrl-r);
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
.ph-desc{ margin:0; color:var(--ink-2); font-size:13px; line-height:1.8; max-width:72ch; }
.ph-extra{ flex-shrink:0; display:flex; align-items:center; gap:8px; padding-top:26px; flex-wrap:wrap; }
.ph-extra:empty{ display:none; }

/* 旧式页面标题(无 _pagehead 的页面) */
.page-title{ margin:6px 0 16px; padding-left:12px; border-left:3px solid var(--brand); }
.page-title h1{ font-size:19px; font-weight:800; color:var(--ink); margin:0; }
.page-title .sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }

/* ═══ 七、卡片 ═══ */
.card, .box, .info-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-1);
  transition:box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.card{ padding:20px 22px; }
.box{ padding:20px 22px; }
.card:hover, .box:hover, .info-card:hover{ box-shadow:var(--shadow-2); }
.hoverable:hover{ transform:translateY(-2px); }
.card--flush{ padding:0; overflow:hidden; }
.card--flush > .sec-head{ margin:0; padding:16px 20px 12px; border-bottom:1px solid var(--line-2); }
.card--tint{ background:var(--paper-2); box-shadow:none; }

/* KPI / 统计块 */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--card-r); overflow:hidden; }
.kpi, .stat-card{
  background:var(--surface); padding:18px 20px; text-decoration:none; color:inherit;
  display:block; position:relative;
  transition:background .2s ease;
}
.kpi:hover, .stat-card:hover{ background:#fbfcff; }
.kpi::after, .stat-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .24s ease;
}
.kpi:hover::after, .stat-card:hover::after{ transform:scaleX(1); }
.kpi .lbl, .stat-card .lbl{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-weight:500; }
.kpi .num, .stat-card .num{ font-size:30px; font-weight:800; line-height:1.15; margin-top:8px; color:var(--ink); font-family:var(--font-sans); letter-spacing:-.02em; }
.kpi .num.warn{ color:var(--warn); } .kpi .num.ok, .kpi .num.good{ color:var(--ok); }
.kpi .num.blue, .kpi .num.brand{ color:var(--brand); } .kpi .num.err{ color:var(--err); }
.kpi .cmp, .stat-card .cmp{ font-size:11.5px; margin-top:6px; color:var(--muted); }
.kpi .cmp b.up{ color:var(--ok); } .kpi .cmp b.down{ color:var(--err); }

/* 空状态 */
.empty{
  text-align:center; color:var(--muted); padding:44px 16px; font-size:13px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty .ic{ color:var(--line); }
.empty-state{ text-align:center; padding:52px 20px; color:var(--muted); }
.empty-state .ic{ color:var(--line); margin-bottom:10px; }
.error-state{
  text-align:center; padding:18px 20px; background:var(--warn-soft);
  border:1px solid var(--warn-line); border-radius:var(--card-r); color:var(--warn);
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ═══ 八、栅格 ═══ */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-side{ grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); }
.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row--end{ justify-content:flex-end; }
.spacer{ flex:1 1 auto; }

/* ═══ 九、按钮 ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:var(--ctrl-r); min-height:var(--ctrl-h); padding:8px 18px;
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  box-shadow:0 2px 6px rgba(79,70,229,.28);
  transition:background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn:disabled, .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-default, .btn-ghost, .btn-secondary{
  background:var(--surface); color:var(--ink-2); border:1px solid var(--line); box-shadow:none;
}
.btn-default:hover, .btn-ghost:hover, .btn-secondary:hover{
  background:#fff; color:var(--ink); border-color:var(--brand-line); transform:translateY(-1px); box-shadow:var(--shadow-1);
}
.btn-accent{ background:var(--accent); border-color:var(--accent); box-shadow:0 2px 6px rgba(217,119,6,.28); }
.btn-accent:hover{ background:#b45309; border-color:#b45309; }
.btn-danger, .btn-err{ background:var(--err); border-color:var(--err); box-shadow:0 2px 6px rgba(220,38,38,.26); }
.btn-danger:hover{ background:#b91c1c; border-color:#b91c1c; }
.btn-sm, .btn.mini{ min-height:30px; padding:4px 11px; font-size:12.5px; border-radius:7px; }
.btn-lg{ min-height:44px; padding:10px 26px; font-size:15px; }
.btn-block{ width:100%; }
.btn-link{ background:none; border:none; color:var(--brand); box-shadow:none; padding:0; min-height:0; font-weight:500; }
.btn-link:hover{ background:none; transform:none; box-shadow:none; text-decoration:underline; }
.login-box button[type=submit], .box button[type=submit], .login-box .btn, .box .btn{
  background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:var(--ctrl-r);
  box-shadow:0 2px 6px rgba(79,70,229,.28);
  transition:background .16s ease, transform .16s ease;
}
.login-box button[type=submit]:hover, .box button[type=submit]:hover,
.login-box .btn:hover, .box .btn:hover{ background:var(--brand-2); transform:translateY(-1px); }

/* 快捷动作组 */
.quick-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.quick-actions a, .quick-actions button{
  display:inline-flex; align-items:center; gap:6px; padding:8px 13px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--ctrl-r);
  font-size:13px; color:var(--ink-2); text-decoration:none;
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.quick-actions a:hover, .quick-actions button:hover{ border-color:var(--brand-line); color:var(--brand); transform:translateY(-1px); }

/* ═══ 十、表单 ═══ */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=search], input[type=url], input[type=date],
input[type=datetime-local], input[type=password], select, textarea{
  min-height:var(--ctrl-h); padding:8px 12px; font-family:inherit; font-size:14px; line-height:1.5;
  border:1px solid var(--line); border-radius:var(--ctrl-r);
  background:var(--surface); color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  width:100%;
}
textarea{ padding:10px 12px; line-height:1.7; resize:vertical; }
select{ cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d88a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:32px;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 3px rgba(79,70,229,.14);
}
input::placeholder, textarea::placeholder{ color:#a6afc2; }
input:disabled, select:disabled, textarea:disabled{ background:var(--paper-2); color:var(--muted); cursor:not-allowed; }
label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.form-row{ margin-bottom:16px; }
.form-row > label{ display:block; margin-bottom:6px; }
.form-hint{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.6; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

/* ═══ 十一、表格 ═══ */
table{ border-collapse:collapse; width:100%; }
th{
  color:var(--muted); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 14px; text-align:left; white-space:nowrap;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
td{ padding:11px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tbody tr, table tr{ transition:background .15s ease; }
tbody tr:hover, table.recent tr:hover td{ background:#f7f9ff; }
tbody tr:last-child td{ border-bottom:0; }
.table-wrap{
  border:1px solid var(--line); border-radius:var(--card-r); overflow:auto;
  background:var(--surface); box-shadow:var(--shadow-1);
}
.table-wrap td{ max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.table-wrap td:last-child, .table-wrap td.act{ white-space:normal; overflow:visible; max-width:none; }
table.recent td{ padding:10px 14px; border-bottom:1px dashed var(--line-2); }
table.recent th{ background:transparent; border-bottom:1px solid var(--line); }
.td-muted{ color:var(--muted); }
.td-mono{ font-family:var(--font-mono); font-size:12.5px; }
.td-strong{ font-weight:600; color:var(--ink); }

/* ═══ 十二、徽章 / 状态 / 标签页 ═══ */
.badge{
  display:inline-flex; align-items:center; gap:5px; border-radius:var(--ctrl-r);
  font-size:12px; font-weight:600; padding:2px 9px; line-height:1.7;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line);
}
.badge-brand{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-line); }
.badge-accent{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.badge-ok{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.badge-err{ background:var(--err-soft); color:var(--err); border-color:var(--err-line); }
.badge-info{ background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
/* 状态点:前置 6px 实心圆点 */
.st, .status-badge{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12px; font-weight:600; padding:2px 9px; line-height:1.7;
  border-radius:var(--ctrl-r); background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line);
}
.st::before, .status-badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
.st-st0, .status-pending{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.st-st1, .status-doing{ background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.st-st2, .status-done{ background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.st-st3, .status-closed{ background:var(--paper-2); color:var(--muted); border-color:var(--line); }
.tabs{ display:flex; gap:2px; flex-wrap:wrap; padding:4px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--card-r); }
.tabs a{
  display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:6px 14px;
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:500;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.tabs a:hover{ color:var(--brand); background:rgba(255,255,255,.75); }
.tabs a.active{ background:var(--surface); color:var(--brand); font-weight:700; box-shadow:var(--shadow-1); }
.tabs a .cnt{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.tabs a.active .cnt{ color:var(--brand); }

/* 工具条 / 筛选条 */
.toolbar, .filters, .search-box{ display:flex; align-items:center; gap:10px; }
.stats-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stats-bar > *{ flex:0 0 auto; }

/* ═══ 十三、提示条 ═══ */
.msg{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; line-height:1.7; padding:12px 15px;
  border:1px solid var(--line); border-radius:var(--card-r); background:var(--paper-2);
}
.msg.ok, .ok{ background:var(--ok-soft); border-color:var(--ok-line); color:#166534; }
.msg.error, .msg.err, .err{ background:var(--err-soft); border-color:var(--err-line); color:#991b1b; }
.msg.warn, .warnbar{ background:var(--warn-soft); border-color:var(--warn-line); color:#92400e; }
.msg.info{ background:var(--info-soft); border-color:var(--info-line); color:#075985; }
.warnbar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13px; padding:12px 15px; margin-bottom:16px;
}
.warnbar a{ color:var(--warn); font-weight:700; }

/* ═══ 十四、面包屑 ═══ */
.crumbs{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px var(--page-px); font-size:12.5px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.crumbs a{ color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.crumbs a:hover{ color:var(--brand); }
.crumbs .sep{ color:var(--line); }
.crumbs .cur{ color:var(--ink); font-weight:600; }

/* ═══ 十五、代码块 / JSON 折叠 / 键值表 ═══ */
.code-wrap{
  border-radius:var(--card-r); overflow:hidden; border:1px solid var(--line);
  background:#f7f9fc; box-shadow:var(--shadow-1);
}
.code-wrap pre, pre{
  margin:0; padding:14px 16px; background:#f7f9fc; color:var(--ink-2);
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;
  overflow:auto; white-space:pre-wrap; word-break:break-all;
}
details.jsonbox{ display:inline-block; min-width:120px; }
details.jsonbox summary{
  cursor:pointer; color:var(--brand); font-size:12.5px; user-select:none;
  display:inline-flex; align-items:center; gap:5px;
}
details.jsonbox summary::marker{ display:none; }
details.jsonbox summary::before{ content:"▸"; font-size:10px; transition:transform .18s; }
details.jsonbox[open] summary::before{ transform:rotate(90deg); }
details.jsonbox pre{
  margin:8px 0 0; padding:12px 14px; background:#151a29; color:#d5dcef;
  border-radius:var(--ctrl-r); max-height:300px; font-size:12px; line-height:1.65;
  text-align:left; max-width:560px; white-space:pre; word-break:normal;
}
.info-item{
  background:#f7f9fc; border:1px solid var(--line-2); border-radius:var(--ctrl-r);
  padding:11px 13px;
}
.kv{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; }
.kv dt{ color:var(--muted); }
.kv dd{ margin:0; color:var(--ink); word-break:break-all; }

/* ═══ 十六、页脚 ═══ */
.ufoot{
  position:relative; text-align:center; padding:24px 16px 30px;
  color:var(--muted); font-size:12px; margin-top:40px;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.ufoot .ufoot-in{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.ufoot .ufoot-in > span:first-child{ color:var(--brand); display:inline-flex; }
.ufoot .ufoot-ver{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:1px 7px;
}
.ufoot .ufoot-sep{ color:var(--line); }
.ufoot a{ color:var(--muted); text-decoration:none; }
.ufoot a:hover{ color:var(--brand); }

/* ═══════════════════════════════════════════════════════════
   十七、认证页外壳(登录 / 注册):左侧石墨深栏 + 右侧表单栏
   ═══════════════════════════════════════════════════════════ */
.auth{
  display:grid; grid-template-columns:1.04fr .96fr;
  width:min(960px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow-3);
  overflow:hidden;
  animation:pageIn .4s ease both;
}
.auth__brand{
  position:relative; overflow:hidden;
  background:var(--brand-deep); color:#e6eaf5;
  padding:46px 42px 40px;
  display:flex; flex-direction:column;
}
.auth__brand::after{                     /* 极细斜纹,做石墨质感 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px);
}
.auth__mark{
  width:46px; height:46px; border-radius:12px; margin-bottom:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(79,70,229,.28); border:1px solid rgba(129,120,255,.4); color:#f5d9a8;
  position:relative; z-index:1;
}
.auth__kicker{
  font-size:10.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); position:relative; z-index:1;
}
.auth__title{
  font-size:29px; font-weight:800; line-height:1.35; color:#f4f6fc;
  margin:10px 0 12px; letter-spacing:-.02em; position:relative; z-index:1;
}
.auth__lead{
  font-size:13.5px; line-height:1.9; color:rgba(230,234,245,.72);
  max-width:34ch; position:relative; z-index:1;
}
.auth__facts{
  list-style:none; margin:auto 0 0; padding:28px 0 0; position:relative; z-index:1;
  display:flex; flex-direction:column; gap:13px;
  border-top:1px solid rgba(255,255,255,.12);
}
.auth__facts li{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.7; color:rgba(230,234,245,.78); }
.auth__facts .ic{ color:var(--accent); margin-top:2px; }
.auth__facts b{ display:block; color:#e6eaf5; font-weight:600; font-size:13px; }
.auth__panel{ padding:42px 40px 30px; display:flex; flex-direction:column; }
.auth__panel h2{ font-size:21px; font-weight:800; color:var(--ink); margin:0 0 6px; }
.auth__panel .sub{ font-size:13px; color:var(--muted); margin:0 0 22px; }
.auth__foot{ margin-top:auto; padding-top:24px; text-align:center; font-size:12px; color:var(--muted); }
.auth__foot .version{
  font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:1px 8px; display:inline-block; margin-bottom:8px;
}
.auth__foot a{ color:var(--brand); text-decoration:none; font-weight:600; }
.auth__foot a:hover{ text-decoration:underline; }

/* 认证页表单行 */
.form-item{ margin-bottom:16px; }
.form-item label{ display:block; font-size:12.5px; color:var(--ink-2); margin-bottom:6px; font-weight:600; }
.form-item input{ font-size:14.5px; }
.form-item input::placeholder{ color:#a6afc2; }

@media (max-width: 860px){
  .auth{ grid-template-columns:1fr; }
  .auth__brand{ padding:30px 26px 26px; }
  .auth__mark{ margin-bottom:16px; }
  .auth__title{ font-size:23px; }
  .auth__facts{ display:none; }
  .auth__panel{ padding:28px 24px 24px; }
}

/* ═══════════════════════════════════════════════════════════
   十八、后台外壳:左侧石墨导航栏(admin/_navbar.php)
   ═══════════════════════════════════════════════════════════ */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w); z-index:900;
  display:flex; flex-direction:column;
  background:var(--brand-deep); color:#e6eaf5;
  border-right:1px solid rgba(0,0,0,.28);
}
body.has-rail{ padding-left:var(--rail-w); }

.rail__brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px 18px; color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.rail__mark{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(79,70,229,.32); border:1px solid rgba(129,120,255,.42);
  color:#f5d9a8;
}
.rail__name{ display:flex; flex-direction:column; min-width:0; }
.rail__name b{ font-size:14.5px; font-weight:700; letter-spacing:.01em; line-height:1.3; }
.rail__name span{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(230,234,245,.55); }

.rail__nav{ flex:1 1 auto; overflow-y:auto; padding:14px 12px 8px; }
.rail__group{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(230,234,245,.42); padding:14px 10px 7px; font-weight:700;
}
.rail__nav a{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; margin-bottom:2px; border-radius:var(--ctrl-r);
  color:rgba(230,234,245,.78); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:background .16s ease, color .16s ease;
}
.rail__nav a .ic{ color:rgba(230,234,245,.55); transition:color .16s ease; }
.rail__nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.rail__nav a:hover .ic{ color:#f5d9a8; }
.rail__nav a.on{ background:rgba(79,70,229,.34); color:#fff; font-weight:600; box-shadow:inset 2px 0 0 var(--accent); }
.rail__nav a.on .ic{ color:var(--accent); }

.rail__foot{ padding:12px; border-top:1px solid rgba(255,255,255,.10); }
.udrop{ position:relative; }
.udrop__name{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 11px; border-radius:var(--ctrl-r); cursor:pointer; user-select:none;
  color:rgba(230,234,245,.9); font-size:13px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10); text-align:left;
  font-family:inherit; transition:background .16s ease;
}
.udrop__name:hover, .udrop.open .udrop__name{ background:rgba(255,255,255,.12); }
.udrop__name .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; }
.udrop__name .ic{ color:rgba(230,234,245,.6); }
.udrop__caret{ font-size:9px; transition:transform .18s; opacity:.6; }
.udrop.open .udrop__caret{ transform:rotate(180deg); }
.udrop__menu{
  position:absolute; left:12px; right:12px; bottom:calc(100% + 8px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--card-r);
  box-shadow:var(--shadow-3); padding:5px; display:none; z-index:960;
  animation:popIn .16s ease;
}
.udrop.open .udrop__menu{ display:block; }
.udrop__head{
  padding:9px 11px; font-size:12.5px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--line-2); margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.udrop__head small{ display:block; font-weight:400; font-size:11px; color:var(--muted); }
.udrop__menu a{
  display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:13px;
  color:var(--ink-2); text-decoration:none; border-radius:8px; transition:background .14s;
}
.udrop__menu a:hover{ background:var(--brand-soft); color:var(--brand); }
.udrop__menu .udrop__quit{ border-top:1px solid var(--line-2); margin-top:5px; padding-top:9px; color:var(--err); }
.udrop__menu .udrop__quit:hover{ background:var(--err-soft); color:var(--err); }
.rail__login{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:9px 12px; border-radius:var(--ctrl-r);
  background:rgba(79,70,229,.30); border:1px solid rgba(129,120,255,.4);
  color:#fff; text-decoration:none; font-size:13px; font-weight:600;
  transition:background .16s ease;
}
.rail__login:hover{ background:rgba(79,70,229,.46); }
.rail__toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:970;
  width:38px; height:38px; border-radius:var(--ctrl-r);
  background:var(--brand-deep); color:#fff; border:1px solid rgba(255,255,255,.2);
  align-items:center; justify-content:center; cursor:pointer;
}

/* ═══════════════════════════════════════════════════════════
   十九、公开页外壳:冷白报头(admin/_navbar.php 公开分支)
   ═══════════════════════════════════════════════════════════ */
.masthead{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead__in{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--page-px);
  min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.masthead__brand{
  display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; padding:12px 0;
}
.masthead__brand .mast-mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand); color:#fff; box-shadow:0 2px 6px rgba(79,70,229,.3);
}
.masthead__brand b{ font-size:15px; font-weight:800; letter-spacing:.01em; }
.masthead__brand span{ display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.masthead__links{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.masthead__links a{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--ctrl-r);
  color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500;
  transition:background .16s ease, color .16s ease;
}
.masthead__links a:hover{ background:var(--brand-soft); color:var(--brand); }
.masthead__links a.on{ color:var(--brand); font-weight:700; }
.masthead__cta{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border-radius:var(--ctrl-r); background:var(--brand); color:#fff; text-decoration:none;
  font-size:13px; font-weight:600; border:1px solid var(--brand);
  box-shadow:0 2px 6px rgba(79,70,229,.3);
  transition:background .16s ease, transform .16s ease;
}
.masthead__cta:hover{ background:var(--brand-2); transform:translateY(-1px); }

/* ═══ 二十、页面入场动画 ═══
   只动 transform,不动 opacity —— 这是刻意的安全性取舍:
   整页容器做 opacity 淡入时,一旦动画被环境冻结(后台标签页打开、
   内嵌 webview、file:// 预览等),fill-mode:both 会把整页内容永久
   锁在 opacity:0,用户看到的是一片空白。transform 被冻结最多整体
   下移 8px,不可感知,内容永远可读。 */
.wrap, .content, .form-wrap, .layout, .box, .login-box, .card, .auth{
  animation:pageIn .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pageIn{ from{ transform:translateY(8px); } to{ transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(6px) scale(.98);} to{ opacity:1; transform:none;} }

/* ═══ 二十一、Toast ═══ */
#toastBox{
  position:fixed; top:74px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none;
  width:max-content; max-width:92vw;
}
.toast{
  pointer-events:auto; min-width:200px; max-width:86vw; padding:11px 18px; border-radius:var(--ctrl-r);
  font-size:13px; font-weight:500; color:#fff; box-shadow:var(--shadow-3);
  border:1px solid rgba(255,255,255,.16);
  animation:toastIn .26s cubic-bezier(.34,1.3,.64,1);
}
.toast.ok{ background:#16a34a; }
.toast.err{ background:#dc2626; }
.toast.info{ background:var(--brand); }
.toast.out{ opacity:0; transform:translateY(-6px); transition:all .28s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-10px) scale(.96);} to{ opacity:1; transform:none;} }

/* ═══════════════════════════════════════════════════════════
   二十二、终端标记钩子:global.js 按视口实时设置 html[data-terminal]
   ═══════════════════════════════════════════════════════════ */
html[data-terminal="mobile"] .ph-desc{ font-size:12.5px; }
html[data-terminal="mobile"] .masthead__links a .ic{ display:none; }

/* ═══════════════════════════════════════════════════════════
   二十三、自适应断点
   ═══════════════════════════════════════════════════════════ */

/* ── 后台侧栏收起(≤1080px):改为抽屉 ── */
@media (max-width:1080px){
  .rail{ transform:translateX(-100%); transition:transform .24s ease; box-shadow:var(--shadow-3); }
  body.has-rail{ padding-left:0; }
  body.has-rail.rail-open .rail{ transform:none; }
  .rail__toggle{ display:inline-flex; }
  .rail-open::after{
    content:""; position:fixed; inset:0; background:rgba(23,28,43,.42); z-index:890;
  }
}
@media (max-width:1200px){
  :root{ --page-max:100%; --page-px:22px; }
  .grid{ gap:14px; }
}
@media (max-width:1024px){
  .ph-main h1{ font-size:19px; }
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  .grid-side, .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .toolbar, .filters, .search-box{ flex-wrap:wrap; }
  .search-box{ margin-left:0; width:100%; }
  .stats-bar{ flex-wrap:wrap; }
  .stats-bar > *{ flex:1 1 140px; }
  .crumbs{ padding:8px 16px; }
  .grid{ grid-template-columns:1fr; }
  .ph-extra{ padding-top:0; }
}
@media (max-width:760px){
  :root{ --page-px:14px; --ctrl-h:36px; }
  .wrap, .content, .layout, .main, main, .form-wrap{ padding:18px var(--page-px) 34px; }
  .card, .box{ padding:16px; }
  .phcard{ padding:16px 16px 16px 18px; }
  .ph-main h1{ font-size:18px; }
  .page-title h1{ font-size:17px; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  td, th{ padding:9px 11px; }
  .quick-actions{ flex-wrap:wrap; }
  .kpi .num, .stat-card .num{ font-size:26px; }
  .masthead__in{ min-height:54px; }
  .masthead__links{ width:100%; order:3; padding-bottom:8px; }
}
@media (max-width:560px){
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .kpi, .stat-card{ padding:14px 15px; }
  .kpi .num, .stat-card .num{ font-size:23px; }
  .btn{ width:100%; }
  .btn-row{ width:auto; }
  #toastBox{ top:80px; width:92vw; }
  .toast{ min-width:0; width:100%; }
  .udrop__menu{ left:8px; right:8px; }
}

/* ═══ 二十四、动效克制(无障碍) ═══ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}