/* 电脑统计助手 · 全站浅色「清新自然绿」背景；内容宽度固定 1360px */
:root {
  --bg-top: #e7f3da;
  --bg-mid: #e7f3da;
  --bg-bot: #e7f3da;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #ffffff;
  --border: rgba(119, 148, 125, 0.28);
  --border-in: rgba(29, 43, 36, 0.10);
  --text: #111412;
  --muted: #3f4f43;
  --soft: #61705f;
  --accent: #3b5bdb;
  --green: #5a9e3d;
  --amber: #d9930d;
  --red: #d64545;
  --grad: linear-gradient(135deg, #6366f1, #38bdf8);
  --shadow: 0 18px 44px rgba(70, 100, 55, 0.10);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: 1360px;   /* 全站固定桌面版：窗口更窄时横向滚动，不再重排 */
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", sans-serif;
  color: var(--text);
  font-size: 14px;
  background: var(--bg-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
a { color: var(--accent); transition: color .18s; }
::selection { background: rgba(59,91,219,.22); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#cfe0bd; border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#b1cba0; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }

/* ---------- 统一顶部导航（三个频道共用，悬浮毛玻璃） ---------- */
.topnav { position:sticky; top:0; z-index:30; background:var(--bg-top); box-shadow:0 1px 0 rgba(47,86,180,.08); }
.tn-bar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:13px 20px; margin:10px auto 8px; background:rgba(253,254,248,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:24px; box-shadow:0 12px 34px rgba(83,110,68,.10), 0 2px 8px rgba(83,110,68,.05); }
.topnav .tn-brand { display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--text); justify-self:start; }
.tn-brand .logo { width:46px; height:46px; border-radius:15px; background:var(--grad); display:grid; place-items:center; color:#fff; font-size:22px; font-weight:800; box-shadow:0 10px 24px rgba(47,86,180,.30); transition:transform .2s; }
.tn-brand:hover .logo { transform:rotate(-6deg) scale(1.05); }
.tn-brand .t1 { font-size:21.5px; font-weight:800; letter-spacing:.5px; }
.tn-links { display:flex; gap:5px; justify-self:center; padding:6px; background:rgba(255,255,255,.78); border:1px solid var(--border-in); border-radius:18px; }
.tn-a { text-decoration:none; color:var(--text); font-size:16.5px; font-weight:700; padding:10px 26px; border-radius:13px; border:1px solid transparent; transition:.18s; position:relative; white-space:nowrap; }
.tn-a:hover { background:rgba(255,255,255,.95); border-color:var(--border); transform:translateY(-1px); }
.tn-a.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(47,86,180,.28); }
.tn-end { justify-self:end; }
.tn-get { color:var(--accent); }
.wrap { width:1360px; margin:0 auto; }

.rank-empty { color: var(--soft); font-size: 13px; text-align: center; padding: 32px 10px; border: 1.5px dashed rgba(47,86,180,.25); border-radius: 16px; background: rgba(250,253,246,.75); margin-top: 6px; }
.chart .rank-empty { margin-top: 0; }

/* ---------- /my 仪表盘（侧栏布局，浅色） ---------- */
.shell { width:1360px; margin:0 auto; display:flex; }
.sidebar { width:236px; background:rgba(255,255,255,.62); backdrop-filter:blur(8px); border-right:1px solid var(--border-in); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0; }
/* /my 侧栏高度跟内容走，不用窗口高度：手机整页等比缩放时 100vh 等于整屏（约 3000px），
   会把侧栏底部那块顶到屏幕最底下、与右侧内容脱节。改为两列同一条底线结束；
   左侧菜单滚动时吸在窗口顶部，底部小卡落在页面末尾。 */
.shell .sidebar { position:static; height:auto; }
/* 品牌行 + 菜单整块吸顶：滚动右侧内容时左列上半部分一格都不动（底色用与侧栏同一层叠的合成色，上下无缝） */
.shell .side-top { flex:0 0 auto; position:sticky; top:0; z-index:2; background:color-mix(in srgb, #fff 62%, var(--bg-top)); }
/* 底部小卡（访问官网 / 电脑 / 开机信息）钉在窗口底部不动：它在本列的最后一个位置就是页面底边，
   所以滚动全程都贴住窗口底部、不随内容移动；手机整页等比缩放时不滚动，它自然停在内容末尾。
   右列页尾留白压到与 .side-foot 相同的 14px、并去掉最后一格网格的 16px 下边距，
   两种状态下左右两列的底边都落在同一条线上。 */
.shell .side-bottom { margin-top:auto; position:sticky; bottom:0; z-index:2; }
.shell .main { padding-bottom:14px; }
.shell .main > .view > .rg:last-child { margin-bottom:0; }
.brand { padding: 20px 20px 15px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border-in); margin-bottom:8px; cursor:pointer; }
.brand .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display:grid; place-items:center; color:#fff; font-size:20px; font-weight:800; box-shadow: 0 8px 22px rgba(47,86,180,.3); flex-shrink:0; transition:transform .18s; }
.brand:hover .logo { transform:scale(1.07) rotate(-4deg); }
.brand .t1 { font-size:16px; font-weight:800; letter-spacing:.6px; }
.brand .t2 { font-size:11px; color:var(--muted); margin-top:2px; letter-spacing:.5px; }
.nav { padding: 8px 12px; flex:1; }
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; cursor:pointer; color:var(--text); font-size:14px; transition:.18s; margin-bottom:4px; user-select:none; }
.nav-item svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; opacity:.75; }
.nav-item:hover { background: rgba(255,255,255,.9); }
.nav-item.active { background: var(--grad); color:#fff; font-weight:600; box-shadow:0 8px 20px rgba(47,86,180,.28); }
.nav-item.active svg { opacity:1; }
.side-link { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; color:var(--muted); font-size:13px; text-decoration:none; margin:0 12px 6px; }
.side-link:hover { background:rgba(255,255,255,.9); color:var(--accent); }
.side-foot { padding:14px; border-top:1px solid var(--border-in); }
.live-card { background:linear-gradient(160deg, #f6fbef, #eaf5da); border:1px solid var(--border-in); border-radius:14px; padding:12px 14px; }
.live-row { display:flex; justify-content:space-between; font-size:12px; color:var(--soft); padding:3px 0; }
.live-row b { color:var(--text); font-weight:600; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; margin-right:6px; animation:pulse 2s infinite; }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background: var(--panel-solid); border:1px solid var(--border-in); font-size:14px; font-weight:600; user-select:none; white-space:nowrap; flex-shrink:0; }
.status-pill .dot { margin-right:0; width:10px; height:10px; }
.dot.paused { background:var(--amber); animation:none; }
.dot.stale { background:var(--red); animation:none; }
@keyframes pulse { 50% { opacity:.4; } }

.main { flex:1; padding:22px 26px 40px; min-width:0; overflow-x:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-title { font-size:20px; font-weight:800; line-height:1.4; }
/* 报表页顶栏两行式：第一行标题独占，第二行=周期切换（左）+ 状态/分享/卡片（右） */
.topbar.page-top { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:12px; }
.topbar.page-top .tb-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
/* flex:1 1 auto：Chromium 对 wrap 容器的 max-content 只算「不收缩最小宽」，内容撑不开自动宽，必须让它占满行余量再右对齐 */
.tb-right { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; flex:1 1 auto; }
.pt-time { min-width:130px; text-align:center; font-size:14px; font-weight:700; color:var(--accent); background:var(--panel-solid); border:1px solid var(--border-in); border-radius:10px; padding:8px 12px; line-height:1; }
.navgrp { display:inline-flex; align-items:center; gap:8px; }
.page-sub { color:var(--muted); font-size:13px; margin-top:4px; }

.arrow { background:var(--panel-solid); border:1px solid var(--border-in); color:var(--text); border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:16px; line-height:1; }
.arrow:hover { background:#eef3fd; }

.grid { display:grid; gap:16px; }
.cards { grid-template-columns:repeat(4,1fr); margin-bottom:16px; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:16px 18px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.stat:hover { transform:translateY(-2px); box-shadow:0 22px 44px rgba(83, 110, 68,.13); }
.stat .k { color:var(--soft); font-size:13px; }
.stat .v { font-size:24px; font-weight:800; margin-top:8px; font-variant-numeric:tabular-nums; }
.stat .v small { font-size:12px; color:var(--soft); font-weight:500; margin-left:4px; }
.stat .ic { position:absolute; right:14px; top:14px; opacity:.9; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:16px 18px; }
.panel h3 { margin:0 0 4px; font-size:16px; }
.panel .p-sub { color:var(--soft); font-size:13px; margin-bottom:10px; }
.chart { width:100%; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th { text-align:left; color:var(--soft); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border-in); }
table.data td { padding:9px 10px; border-bottom:1px solid rgba(24,33,47,.05); }
table.data tr:hover td { background:rgba(47,86,180,.06); }

/* ---------- 应用明细页 ---------- */
.apps-search { padding:8px 12px; border:1px solid var(--border-in); border-radius:10px; font-size:13px; background:var(--panel-solid); color:var(--text); outline:none; width:210px; }
.apps-search:focus { border-color:var(--accent); }
.apps-twrap { max-height:430px; overflow:auto; }
.apps-twrap table.data { min-width:680px; }
.apps-twrap table.data thead th { position:sticky; top:0; z-index:1; background:var(--panel-solid); }
.apps-twrap th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.apps-twrap th.sortable:hover { color:var(--accent); }
.apps-twrap table.data tr.sel td, .apps-twrap table.data tr.sel:hover td { background:rgba(47,86,180,.12); }
.pbar { display:inline-block; width:56px; height:6px; border-radius:4px; background:rgba(47,86,180,.12); overflow:hidden; vertical-align:1px; margin-right:8px; }
.pbar i { display:block; height:100%; border-radius:4px; background:var(--grad); }
.apps-empty { color:#8490a8; font-size:13px; padding:16px 2px; text-align:center; }
.apps-empty span { font-size:11px; }
.apps-recs { max-height:260px; overflow:auto; }
.apps-recs .r { display:flex; align-items:baseline; gap:10px; padding:7px 2px; border-bottom:1px dashed var(--border-in); font-size:13px; }
.apps-recs .r:last-child { border-bottom:none; }
.apps-recs .r .d { color:var(--soft); width:44px; flex:none; }
.apps-recs .r .m { margin-left:auto; color:var(--muted); }

.sess { display:flex; flex-direction:column; gap:10px; }
.sess .it { display:flex; align-items:center; gap:12px; background:#eef3fb; border:1px solid var(--border-in); border-radius:12px; padding:10px 14px; transition:transform .16s, box-shadow .16s; }
.sess .it:hover { transform:translateX(3px); box-shadow:0 8px 20px rgba(83, 110, 68,.08); }
.sess .badge { width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sess .mid { flex:1; }
.sess .n { font-weight:600; }
.sess .d { font-size:12px; color:var(--soft); }
.sess .src { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:6px; font-size:11px; color:var(--accent); background:rgba(47,86,180,.10); border:1px solid rgba(47,86,180,.25); vertical-align:2px; }

.set { display:flex; align-items:center; justify-content:space-between; padding:16px 6px; border-bottom:1px solid rgba(24,33,47,.06); gap:16px; flex-wrap:wrap; border-radius:10px; transition:background .15s; }
.set:hover { background:#f7fbf3; }
.set .l { font-size:15px; font-weight:600; }
.set .s { font-size:13px; color:var(--soft); margin-top:4px; line-height:1.7; }
.danger-zone { width:100%; border:1px solid rgba(214,69,69,.28); border-radius:12px; padding:11px 14px; background:rgba(214,69,69,.04); }
.danger-zone > summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--red); list-style:none; user-select:none; }
.danger-zone > summary::-webkit-details-marker { display:none; }
.danger-zone > summary::before { content:"▸ "; }
.danger-zone[open] > summary::before { content:"▾ "; }
label.chk { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--soft); cursor:pointer; }
label.chk input { width:auto; }
input[type=text], input[type=number], input[type=password], select, textarea {
  background:var(--panel-solid); border:1px solid var(--border-in); color:var(--text);
  border-radius:10px; padding:9px 12px; font-size:14px; outline:none; width:100%;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,91,219,.14); }
input, textarea, select { transition:border-color .18s, box-shadow .18s; }
.btn { background:var(--grad); color:#fff; border:none; border-radius:12px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; box-shadow:0 6px 16px rgba(47,86,180,.18); transition:filter .18s, transform .12s, box-shadow .18s; }
.btn.ghost { background:var(--panel-solid); color:var(--text); border:1px solid var(--border-in); box-shadow:none; }
.btn.danger { background:rgba(214,69,69,.10); color:var(--red); border:1px solid rgba(214,69,69,.3); box-shadow:none; }
.btn:hover { filter:brightness(1.05); box-shadow:0 9px 20px rgba(47,86,180,.24); }
.btn.ghost:hover { box-shadow:0 6px 14px rgba(83, 110, 68,.10); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; transform:none; }
.switch { position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#c8d2e4; border-radius:26px; cursor:pointer; transition:.2s; }
.slider:before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--grad); }
.switch input:checked + .slider:before { transform:translateX(20px); }

.toast { position:fixed; top:22px; left:50%; transform:translateX(-50%) translateY(-20px); background:#fff; border:1px solid var(--border-in); color:var(--text); padding:10px 18px; border-radius:12px; opacity:0; transition:.25s; z-index:99; box-shadow:0 10px 30px rgba(83, 110, 68,.18); font-size:13px; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.view { display:none; }
.view.active { display:block; animation:fade .25s; }
@keyframes fade { from{opacity:0; transform:translateY(4px);} }

.tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; white-space:nowrap; }
.tag.on { background:rgba(90,158,61,.12); color:var(--green); }
.tag.off { background:rgba(214,69,69,.10); color:var(--red); }
.tag.demo { background:rgba(217,147,13,.12); color:#b07808; }
.prog { height:10px; background:#e6eefb; border-radius:6px; overflow:hidden; margin:2px 0 14px; }
.prog i { display:block; height:100%; border-radius:6px; background:var(--grad); transition:width .4s; }
/* 演示数据页：单面板纵向分区（状态 → 参数 → 操作），不再用多个小面板切碎版面 */
.dm-panel { padding-bottom:14px; }
.dm-panel .panel-head { margin-bottom:8px; }
.dm-on { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.dm-on-l { font-size:12.5px; color:var(--soft); white-space:nowrap; }
.dm-status { margin:0 0 12px; padding:8px 11px; font-size:12.5px; line-height:1.6; color:var(--soft); background:#f7fbf3; border:1px solid var(--border-in); border-radius:10px; }
.dm-act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 4px 0; margin-top:10px; border-top:1px solid rgba(24,33,47,.06); }
.dm-out { margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
.dm-out:hover { text-decoration:underline; }
.dm-job { margin-top:14px; padding:13px 6px 0; border-top:1px solid rgba(24,33,47,.06); }
.dm-job-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dm-job-l { font-size:14px; font-weight:700; }
.dm-job-s { font-size:12.5px; color:var(--soft); margin-top:4px; line-height:1.65; }
.dm-job-pct { font-size:13px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.dm-tip { margin:12px 0 0; padding:9px 12px; font-size:11.5px; line-height:1.7; color:var(--soft); background:#f7fbf3; border:1px solid var(--border-in); border-radius:10px; }
/* 演示设置：8 格固定 4 列网格（上下各 4 格），参数刚好排满，不留空位 */
.dm-form { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 16px; padding:0 0 10px; max-width:900px; }
.dm-f { display:grid; grid-template-columns:60px auto auto; align-items:center; gap:5px; min-width:0; }
.dm-f > .l { font-size:13px; font-weight:600; white-space:nowrap; }
.dm-f > input[type=text] { width:150px; padding:6px 8px; border-radius:8px; }
.dm-f > input[type=number] { width:58px; padding:5px 8px; border-radius:8px; }
.dm-f > select { width:104px; padding:5px 8px; border-radius:8px; }
.dm-f input, .dm-f select { font-size:13px; }
.dm-f input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.dm-f input[type=number]::-webkit-outer-spin-button, .dm-f input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dm-f > .ctl { display:flex; align-items:center; gap:3px; min-width:0; }
.dm-f > .ctl input { width:48px; min-width:0; padding:5px 4px; border-radius:8px; }
.dm-f .u { font-size:11px; color:var(--soft); white-space:nowrap; }
#demoPOtHint { display:none; }

/* ---------- 查看密码登录（/my 未登录遮罩） ---------- */
.gate { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(235,244,224,.78); backdrop-filter:blur(10px); }
.gate-card { width:400px; background:var(--panel-solid); border:1px solid var(--border); border-radius:28px; padding:34px 32px; text-align:center; box-shadow:0 30px 80px rgba(83, 110, 68,.18); }
.gate-logo { width:56px; height:56px; margin:0 auto 12px; border-radius:16px; background:var(--grad); display:grid; place-items:center; font-size:28px; box-shadow:0 10px 26px rgba(47,86,180,.30); }
.gate-card h1 { margin:0 0 6px; font-size:20px; }
.gate-sub { color:var(--muted); font-size:13px; line-height:1.7; margin:0 0 18px; }
.gate-card input { margin-bottom:10px; text-align:center; font-size:15px; letter-spacing:2px; }
.gate-err { color:var(--red); font-size:12px; min-height:18px; margin-bottom:6px; }
.gate-btn { width:100%; padding:11px; font-size:14px; }
.gate-links { display:flex; gap:12px; margin:22px 0 2px; }
.gate-links a { flex:1; padding:12px 0; background:var(--panel-solid); border:1px solid var(--border-in); border-radius:13px; font-size:15px; font-weight:700; color:var(--accent); text-decoration:none; transition:box-shadow .18s, border-color .18s, transform .12s; }
.gate-links a:hover { border-color:rgba(59,91,219,.45); box-shadow:0 6px 14px rgba(83, 110, 68,.10); }
.gate-links a:active { transform:translateY(1px); }
/* 侧栏电脑卡（数据小卡上方）：独立蓝调软卡；单行=左「电脑」标签 + 右侧电脑名（右对齐）；多台=整卡点击展开自定义悬浮面板 */
.dev-card { position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; padding:10px 14px; background:linear-gradient(160deg,#f7faff,#eef3fd); border:1px solid rgba(59,91,219,.16); border-radius:14px; box-shadow:0 1px 3px rgba(47,86,180,.06); transition:border-color .18s, box-shadow .18s; }
.side-dev-label { flex-shrink:0; color:#5c6b8c; font-size:13px; letter-spacing:.4px; }
.dev-card-multi { cursor:pointer; user-select:none; }
.dev-card-multi:hover, .dev-card-multi:focus-within { border-color:rgba(59,91,219,.5); box-shadow:0 0 0 3px rgba(59,91,219,.12), 0 3px 10px rgba(47,86,180,.10); }
.dev-card-multi.open { border-color:rgba(59,91,219,.55); box-shadow:0 0 0 3px rgba(59,91,219,.14), 0 4px 12px rgba(47,86,180,.12); }
.devsel-wrap { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.devsel-wrap::after { content:"▾"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:12px; color:var(--accent); pointer-events:none; transition:transform .18s; }
.dev-card-multi.open .devsel-wrap::after { transform:translateY(-50%) rotate(180deg); }
.devsel-txt { flex:1; min-width:0; color:var(--text); font-size:13px; font-weight:600; text-align:right; padding-right:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-card-one b { color:var(--text); font-weight:600; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 自定义电脑切换面板（替代原生 select 弹层，原生弹层样式不可控）：白底圆角、柔和投影、悬停高亮、当前项打勾 + 状态圆点；
   卡片固定在侧栏底部，面板一律向上弹出，避免被视口下沿裁掉 */
.dev-menu { position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:60; max-height:min(288px, 60vh); overflow-y:auto; padding:6px; background:var(--panel-solid); border:1px solid rgba(59,91,219,.22); border-radius:14px; box-shadow:0 -8px 40px rgba(30,52,120,.18), 0 2px 8px rgba(30,52,120,.08); opacity:0; transform:translateY(6px) scale(.98); transform-origin:bottom center; pointer-events:none; transition:opacity .16s, transform .16s; }
.dev-card-multi.open .dev-menu { opacity:1; transform:none; pointer-events:auto; }
.dev-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text); transition:background .14s, color .14s; }
.dev-item:hover { background:rgba(59,91,219,.09); }
.dev-item.active { background:rgba(59,91,219,.12); font-weight:700; color:var(--accent); }
.dev-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:#c3cbdc; }
.dev-dot.on { background:var(--green); box-shadow:0 0 0 3px rgba(90,158,61,.15); }
.dev-dot.unbound { background:var(--amber); }
.dev-item-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-check { width:15px; height:15px; flex-shrink:0; stroke:var(--accent); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.dev-item.active .dev-check { opacity:1; }

/* ---------- 隐私政策页 ---------- */
.help-card { max-width:980px; margin:22px auto 10px; background:var(--panel); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); padding:36px 48px; }
.help-card h1 { font-size:26px; margin:0 0 14px; }
.help-card h2 { font-size:18px; margin:28px 0 10px; color:var(--accent); padding-left:12px; border-left:4px solid var(--accent); line-height:1.3; }
.help-card h3 { font-size:15px; margin:22px 0 6px; }
.help-card p { font-size:14px; line-height:1.95; color:var(--text); margin:8px 0; }
.help-card ul { margin:8px 0; padding-left:4px; list-style:none; }
.help-card li { position:relative; font-size:14px; line-height:1.95; padding-left:20px; margin:5px 0; }
.help-card li::before { content:""; position:absolute; left:4px; top:.82em; width:7px; height:7px; border-radius:50%; background:var(--grad); }
.help-card b { color:var(--accent); font-weight:700; }

/* ---------- 页脚 ---------- */
.site-foot { text-align:center; color:var(--soft); font-size:12px; padding:22px 0 34px; margin-top:24px; border-top:1px solid var(--border-in); }
.site-foot a { color:var(--soft); text-decoration:none; margin:0 6px; transition:color .18s; }
.site-foot a:hover { color:var(--accent); }
.site-foot .fl-row { margin-top:9px; }
.site-foot .fl-row a { margin:0 5px; }

/* ---------- 首页关闭公开 / 管理员预览横幅 ---------- */
.closed-card { background:var(--panel); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); padding:64px 40px; margin:64px auto 10px; max-width:580px; text-align:center; }
.closed-logo { width:74px; height:74px; margin:0 auto 18px; border-radius:22px; background:var(--grad); display:grid; place-items:center; font-size:36px; box-shadow:0 14px 32px rgba(47,86,180,.30); }
.closed-card h1 { font-size:26px; font-weight:800; margin:0 0 10px; }
.closed-card p { color:var(--muted); font-size:14px; line-height:1.9; margin:0 0 24px; }
.closed-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.preview-banner { background:rgba(217,147,13,.12); border:1px solid rgba(217,147,13,.35); color:#8a5a08; border-radius:14px; padding:11px 18px; font-size:13px; margin:16px 0 2px; text-align:center; }
.preview-banner a { color:#8a5a08; font-weight:700; text-decoration:underline; }

/* ---------- 官网门户 ---------- */
.hero { text-align:center; padding:52px 20px 8px; }
/* 首页顶部横幅：全宽柔光底 —— 由页面浅绿淡入柔白、再淡回页面浅绿，顶底均无硬边；配色取自站点调色板，与全站融为一体。
   外层 .hero-band 为全宽块（宽度=body 宽度），内层 .wrap 居中；不用 100vw，避免把滚动条宽度算进宽度导致横向溢出 */
.hero-band {
  background:
    radial-gradient(920px 420px at 50% 2%, rgba(255,255,255,.88), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(231,243,218,0) 0%, rgba(253,254,248,.72) 28%, rgba(240,247,234,.30) 64%, rgba(231,243,218,0) 100%),
    var(--bg-top); }
.hero#top { padding:68px 20px 24px; }
.hero-badge { display:inline-block; padding:6px 16px; border-radius:999px; background:rgba(59,91,219,.12); border:1px solid rgba(47,86,180,.24); color:var(--accent); font-size:12.5px; font-weight:700; letter-spacing:.5px; margin-bottom:22px; }
.hero h1 { font-size:54px; font-weight:800; letter-spacing:1px; margin:0 0 18px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub { max-width:760px; margin:0 auto; font-size:17px; line-height:1.7; color:var(--muted); }
.hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:34px 0 18px; }
.hero-dl { padding:15px 32px; font-size:15.5px; border-radius:15px; text-decoration:none; display:inline-flex; align-items:center; }
.hero-actions .btn.hero-dl { box-shadow:0 6px 16px rgba(83,110,68,.08); }
.hero-actions .btn.hero-star { background:var(--grad); color:#fff; box-shadow:0 14px 34px rgba(47,86,180,.28), 0 0 0 4px rgba(59,91,219,.13); }
.hero-note { color:var(--soft); font-size:12.5px; letter-spacing:.02em; }

/* ---------- 单页站分节：所有段同宽（=页面宽）、同节奏，锚点跳转时避开悬浮导航 ---------- */
.wrap > section[id] { scroll-margin-top:92px; }
.editions, .steps, .faq-sec, .contact-sec { margin:34px 0; }
.editions { margin-top:18px; }
.ed-head { text-align:center; margin-bottom:20px; }
.ed-k { display:inline-block; margin-bottom:10px; font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--accent); background:rgba(59,91,219,.10); border:1px solid rgba(47,86,180,.20); padding:4px 14px; border-radius:999px; }
.ed-head h2 { font-size:30px; font-weight:800; margin:0 0 8px; }
.ed-head p { margin:0; color:var(--muted); font-size:14.5px; }
/* ---------- 产品介绍段：顶部只留一行「永久免费，全功能开放」，左侧窄标签 + 右侧「网页报表」窗口大图 ----------
   左侧只留报表名、栏宽固定且紧凑；右侧大图占满余下宽度，轮播时标签同步高亮。 */
.ed-head-min { margin-bottom:24px; }
.ed-head-min .ed-free { display:inline-flex; align-items:center; gap:9px; margin:0; padding:10px 26px; font-size:17px; font-weight:800; letter-spacing:.02em; color:#2e5c1f; background:linear-gradient(180deg,#f2fae9,#e5f3d6); border:1px solid rgba(90,158,61,.32); border-radius:999px; box-shadow:0 10px 24px rgba(90,158,61,.14); }
.ed-head-min .ed-free::before { content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--green); }
.pf { display:grid; grid-template-columns:190px minmax(0,1fr); gap:30px; align-items:start; }
.pf-side { min-width:0; display:flex; flex-direction:column; gap:14px; padding-top:2px; }
.pf-tabs { display:flex; flex-direction:column; gap:10px; }
.pf-tab { position:relative; display:flex; align-items:center; width:100%; padding:15px 18px; border:1px solid transparent; border-radius:14px; background:transparent; text-align:left; font-family:inherit; cursor:pointer; transition:background .18s, border-color .18s, box-shadow .18s; }
.pf-tab::before { content:""; position:absolute; left:0; top:50%; width:3px; height:0; transform:translateY(-50%); border-radius:0 3px 3px 0; background:var(--accent); transition:height .22s; }
.pf-tab:hover { background:rgba(255,255,255,.72); border-color:var(--border-in); }
.pf-tab.on { background:rgba(255,255,255,.96); border-color:var(--border); box-shadow:0 12px 28px rgba(70,100,55,.12); }
.pf-tab.on::before { height:52%; }
.pf-tab-t { min-width:0; font-size:16px; font-weight:800; letter-spacing:.01em; color:var(--soft); transition:color .18s; }
.pf-tab.on .pf-tab-t { color:var(--text); }
.pf-media { position:relative; min-width:0; }
.pf-glow { position:absolute; inset:-4% -2% 6%; background:radial-gradient(55% 55% at 42% 45%,rgba(124,195,90,.30),rgba(56,189,248,.13) 62%,transparent 74%); filter:blur(30px); border-radius:44px; pointer-events:none; }
.pf-window { position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(29,43,36,.14); background:#fff; box-shadow:0 30px 64px rgba(70,100,55,.22), 0 2px 6px rgba(70,100,55,.06); }
.pf-bar { display:flex; align-items:center; gap:12px; padding:9px 13px; background:linear-gradient(180deg,#f8fbf5,#eef5e7); border-bottom:1px solid rgba(29,43,36,.09); }
.pf-traffic { display:flex; gap:6px; flex:0 0 auto; }
.pf-traffic i { width:9px; height:9px; border-radius:50%; background:#c9d9bf; }
.pf-traffic i:nth-child(1) { background:#e6b3a8; }
.pf-traffic i:nth-child(2) { background:#e8d3a0; }
.pf-traffic i:nth-child(3) { background:#a9c99a; }
.pf-url { flex:1 1 auto; min-width:0; max-width:420px; margin:0 auto; padding:4px 12px; text-align:center; font-size:11.5px; letter-spacing:.02em; color:var(--soft); background:rgba(255,255,255,.92); border:1px solid rgba(29,43,36,.08); border-radius:8px; }
.pf-tag { flex:0 0 auto; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#3f7a2a; background:rgba(90,158,61,.14); }
.pf-stage { position:relative; aspect-ratio:1.66; background:#f0f6ea; }
.pf-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; opacity:0; transition:opacity .45s ease; }
.pf-stage img.on { opacity:1; }

.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step-grid.four { grid-template-columns:repeat(4,1fr); }
.step { background:var(--panel); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:24px 22px; text-align:center; }
.step-n { width:46px; height:46px; margin:0 auto 16px; border-radius:50%; background:var(--grad); color:#fff; font-size:20px; font-weight:800; display:grid; place-items:center; box-shadow:0 10px 24px rgba(47,86,180,.28); }
.step h3 { margin:0 0 8px; font-size:17px; }
.step p { margin:0; font-size:13.5px; line-height:1.65; color:var(--muted); }

.cta-band { text-align:center; background:linear-gradient(135deg,rgba(120,160,250,.16),rgba(47,86,180,.10)); border:1px solid var(--border); border-radius:26px; padding:34px 28px; margin:22px 0 0; }
.cta-band h2 { font-size:27px; font-weight:800; margin:0 0 22px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-actions .btn { padding:12px 28px; font-size:14.5px; text-decoration:none; }

.page-hero { text-align:center; padding:56px 20px 26px; }
.page-hero .hero-badge { margin-bottom:18px; }
.page-hero h1 { font-size:38px; font-weight:800; margin:0 0 14px; }
.page-hero .hero-sub { font-size:16px; }

button.btn { font-family:inherit; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:0; }
.ct-card { background:var(--panel); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:30px 24px; text-align:center; transition:transform .2s, box-shadow .2s; }
.ct-card:hover { transform:translateY(-4px); box-shadow:0 24px 52px rgba(83, 110, 68,.13); }
.ct-ico { width:56px; height:56px; margin:0 auto 14px; border-radius:18px; background:rgba(59,91,219,.13); box-shadow:inset 0 0 0 1px rgba(47,86,180,.18); display:grid; place-items:center; font-size:26px; }
.ct-label { color:var(--soft); font-size:12.5px; font-weight:600; letter-spacing:.5px; }
.ct-v { font-size:19px; font-weight:800; margin-top:6px; word-break:break-all; }


/* ---------- 首页：常见问题摘要 ---------- */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.faq-item { background:var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:18px 22px; transition:transform .2s, box-shadow .2s; }
.faq-item:hover { transform:translateY(-3px); box-shadow:0 22px 48px rgba(83, 110, 68,.13); }
.faq-q { font-size:15.5px; font-weight:800; color:var(--text); margin-bottom:8px; }
.faq-q::before { content:"Q"; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:9px; border-radius:6px; background:rgba(59,91,219,.13); color:var(--accent); font-size:12px; font-weight:800; vertical-align:-3px; }
.faq-a { font-size:13.5px; color:var(--muted); line-height:1.55; }

/* ---------- 管理后台（左侧菜单布局） ---------- */
.admin-body { font-size:14px; }
.admin-login { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:20px; }
.admin-shell { width:1450px; margin:0 auto; display:flex; min-height:100vh; }
body.admin-body { min-width:1450px; }
.admin-sidebar { background:rgba(255,255,255,.72); }
.admin-main { padding:24px 30px 48px; }
.admin-main .topbar { margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border-in); }
.admin-nav .nav-item { font-weight:500; }
.admin-nav .nav-item + .nav-item { margin-top:2px; }
.atab { animation:fade .22s; }

.admin-main .cards { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); margin-bottom:16px; }
.admin-main .stat { border-radius:18px; padding:14px 16px; }
.admin-main .stat .v { font-size:22px; margin-top:6px; }
#usCards .stat .v small, #dvCards .stat .v small { display:block; margin-left:0; white-space:nowrap; font-size:12px; }
.admin-main .panel { border-radius:20px; padding:18px 20px; overflow-x:auto; }
.admin-main table.data { font-size:14px; min-width:680px; }
.admin-main table.data th { padding:10px 12px; font-size:13px; white-space:nowrap; }
.admin-main table.data td { padding:11px 12px; }
.admin-main textarea { min-height:420px; font-family:ui-monospace, Consolas, monospace; line-height:1.7; }
.admin-main .biz-cards { grid-template-columns:repeat(6, 1fr); }

.hp-badge { display:inline-block; margin-left:8px; padding:2px 11px; border-radius:999px; font-size:11px; font-weight:700; vertical-align:2px; letter-spacing:.5px; }
.hp-badge.on { background:rgba(90,158,61,.12); color:var(--green); }
.hp-badge.off { background:rgba(214,69,69,.10); color:var(--red); }

/* ---------- 官网内容：本站公告 ---------- */
/* 视觉隐藏但保留给屏幕阅读器/SEO（列表页已用面包屑表明位置，那个占半屏的大标题不再保留版面） */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* 面包屑：顶部导航与频道/正文之间的一行窄卡片，标明当前位置（首页 › 频道 › 标题）；末项当前页不可点 */
.art-crumb { display:flex; align-items:center; gap:10px; margin:2px 0 14px; padding:11px 18px; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); font-size:15px; color:var(--soft); }
.art-crumb a { color:var(--soft); text-decoration:none; }
.art-crumb a:hover { color:var(--accent); }
.art-crumb-sep { opacity:.5; }
.art-crumb-cur { flex:1 1 auto; min-width:0; color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 公告列表：1360 宽度下每排 3 张「上图下题」竖向卡片（约 441px/张），窄屏降为 2 列 / 1 列。
   整张卡片就是一个链接，点图片或点标题都进全文；图片区固定 268px 保持主导，下方文字条放「2 行标题 + 2 行摘要 + 阅读全文」 */
.art-list { max-width:none; margin:0 auto 40px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.art-item { display:flex; flex-direction:column; height:406px; background:var(--panel); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); text-decoration:none; overflow:hidden; transition:transform .15s, box-shadow .15s, border-color .15s; }
.art-item:hover { transform:translateY(-2px); border-color:rgba(90,158,61,.38); box-shadow:0 14px 40px rgba(24,33,47,.10); }
/* 图片等比完整显示（contain，不裁剪），留白处用浅色底兜住 */
.art-thumb { flex:0 0 268px; width:100%; min-height:0; object-fit:contain; border-radius:0; background:#eef3fb; }
.art-txt { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:9px 16px 10px; }
.art-txt h2 { font-size:16px; margin:0 0 3px; color:var(--text); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-ex { margin:0; font-size:13px; line-height:1.55; color:var(--soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-more { margin-top:auto; font-size:12px; color:var(--accent); font-weight:600; }
.art-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--soft); }
.art-tag { display:inline-block; padding:2px 9px; border-radius:999px; background:rgba(90,158,61,.12); color:var(--green); font-weight:600; font-size:11px; }
.art-date { color:var(--soft); }
.art-read { color:var(--soft); }
.art-empty { max-width:none; margin:0 auto 40px; padding:60px 0; text-align:center; color:var(--soft); background:var(--panel); border:1px dashed var(--border); border-radius:20px; }
.art-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:-20px 0 46px; }
.art-page-n { font-size:13px; color:var(--soft); }
/* 详情卡片撑满 1360（与站点同宽），正文由 .art-inner 居中限宽，行宽保持可读 */
.art-page { max-width:1360px; margin:0 auto 46px; background:var(--panel); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); padding:34px 48px 40px; }
.art-inner { max-width:860px; margin:0 auto; }
.art-page h1 { font-size:31px; line-height:1.34; margin:16px 0 0; }
.art-page .art-meta { margin-top:16px; }
/* 标题与正文之间的分隔线：把「标签+日期」标题区和正文明确切开，标题区不再与正文挤在一起 */
.art-hr { border:none; border-top:1px solid var(--border-in); margin:16px 0 0; }
.art-back { font-size:13px; color:var(--soft); text-decoration:none; }
.art-back:hover { color:var(--accent); }
/* 上一篇 / 下一篇：两栏卡片；只有一个方向时加 .single 占满一行，避免右侧留半格空位 */
.art-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--border-in); }
.art-nav.single { grid-template-columns:1fr; }
.art-nav-a { display:flex; flex-direction:column; gap:4px; min-width:0; padding:12px 16px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.72); text-decoration:none; transition:border-color .18s, background .18s, transform .18s; }
.art-nav-a:hover { border-color:rgba(90,158,61,.38); background:#fff; transform:translateY(-2px); }
.art-nav-a.next { text-align:right; }
.art-nav-k { font-size:12px; color:var(--soft); }
.art-nav-t { font-size:14px; font-weight:600; color:var(--text); line-height:1.5; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.art-body { margin-top:18px; font-size:15px; line-height:1.95; color:var(--text); overflow-wrap:anywhere; }
.art-body h2 { font-size:20px; margin:26px 0 12px; padding-left:12px; border-left:4px solid var(--accent); line-height:1.4; }
.art-body h3 { font-size:17px; margin:22px 0 10px; }
.art-body h4 { font-size:15px; margin:18px 0 8px; }
.art-body p { margin:12px 0; }
.art-body a { color:var(--accent); text-decoration:underline; }
.art-body img { display:block; max-width:100%; height:auto; margin:18px auto; border-radius:14px; }
.art-body figure { margin:18px 0; }
.art-body figcaption { text-align:center; font-size:12px; color:var(--soft); margin-top:8px; }
.art-body blockquote { margin:16px 0; padding:10px 18px; border-left:4px solid rgba(90,158,61,.35); background:rgba(90,158,61,.06); border-radius:0 12px 12px 0; color:var(--soft); }
.art-body ul, .art-body ol { margin:14px 0; padding-left:26px; }
.art-body li { margin:6px 0; }
.art-body pre { background:#19281f; color:#e8f5ee; border-radius:12px; padding:14px 18px; overflow:auto; font-size:13px; line-height:1.7; white-space:pre-wrap; }
.art-body code { background:rgba(47,86,180,.08); padding:1px 6px; border-radius:6px; font-size:13px; }
.art-body hr { border:none; border-top:1px solid var(--border-in); margin:26px 0; }
/* 表格 / 上下标：网页复制常带表格，前台与后台编辑器共用这套排版 */
.art-body table { width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; }
.art-body th, .art-body td { border:1px solid var(--border-in); padding:8px 12px; text-align:left; vertical-align:top; }
.art-body th { background:rgba(90,158,61,.08); font-weight:600; }
.art-body caption { text-align:left; font-size:13px; color:var(--soft); margin:6px 0; }
.art-body sup, .art-body sub { font-size:.75em; }

/* ---------- 后台 · 内容管理 / 富文本编辑器 ---------- */
.art-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* 宽度对齐前台正文列：详情页正文 .art-inner 限宽 860px，此处
   948 - 2(modal 边框) - 48(modal-body 内边距) - 2(rt-wrap 边框) - 36(rt-editor 内边距) = 860px
   → 换行位置也与网站一致，保持所见即所得 */
.modal.art-modal { width:948px; }
.art-form { display:flex; gap:12px; margin-bottom:14px; }
.art-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--soft); font-weight:600; }
.art-form .af-title { flex:1; }
.art-form select { min-width:150px; }
.art-form input, .art-form select { height:38px; }
.rt-wrap { border:1px solid var(--border-in); border-radius:14px; overflow:hidden; background:var(--panel-solid); }
.rt-bar { display:flex; align-items:center; gap:2px; padding:6px 8px; border-bottom:1px solid var(--border-in); flex-wrap:wrap; background:#f7faf5; }
.rt-bar button { border:none; background:transparent; color:var(--soft); font-size:13px; padding:6px 9px; border-radius:8px; cursor:pointer; }
.rt-bar button:hover { background:rgba(47,86,180,.09); color:var(--text); }
.rt-sep { width:1px; height:16px; background:var(--border-in); margin:0 4px; }
/* 编辑器正文排版 = 前台正文排版：编辑器元素直接挂 .art-body（views.php 里 class="art-body rt-editor"），
   全站排版规则单一来源，改 .art-body 后台自动跟随，结构上不可能再走样（所见即所得） */
.rt-editor { min-height:300px; max-height:52vh; overflow-y:auto; padding:16px 18px; outline:none; margin-top:0; }
.rt-editor:empty::before { content:attr(data-ph); color:#a8b3c8; pointer-events:none; }
.rt-editor div { margin:12px 0; }   /* 个别浏览器换行仍产生 div；保存时会转成 p，这里让它看起来一致 */
.art-opts { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; }
.art-opts .ck { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--text); cursor:pointer; }
.art-opts .p-sub { margin:0; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }

/* 业务指标卡片行 / 图表面板头 / 分段切换 */
.biz-cards { grid-template-columns:repeat(3, 1fr); margin-bottom:16px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.seg { display:inline-flex; background:var(--panel-solid); border:1px solid var(--border-in); border-radius:10px; overflow:hidden; flex-shrink:0; }
.seg button { background:transparent; border:none; color:var(--soft); padding:9px 14px; font-size:14px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
.seg button:hover { color:var(--text); background:#f1f7ea; }
.seg button.active { background:var(--grad); color:#fff; font-weight:600; }
.seg button.active:hover { background:var(--grad); color:#fff; }
.seg-page { display:inline-flex; border-radius:12px; margin-bottom:14px; }
.seg-page button { width:148px; padding:10px 0; text-align:center; border-right:1px solid var(--border-in); }
.seg-page button:last-child { border-right:none; }
.dist-cols { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center; }
.ver-list { display:flex; flex-direction:column; gap:12px; padding:4px 2px; }
.ver-k { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.ver-k span { font-weight:600; }
.ver-k b { color:var(--soft); font-weight:500; }
.ver-bar { height:8px; border-radius:8px; background:#e3edfb; overflow:hidden; }
.ver-bar i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#6366f1,#38bdf8); transition:width .3s; }

/* 电脑详情弹窗 */
.modal-mask { position:fixed; inset:0; z-index:80; background:rgba(24,33,47,.42); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-mask.show { display:flex; animation:fade .18s; }
.modal { width:760px; max-width:100%; max-height:88vh; overflow:auto; background:var(--panel-solid); border:1px solid var(--border); border-radius:24px; box-shadow:0 30px 90px rgba(25,45,105,.30); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 24px 14px; border-bottom:1px solid var(--border-in); position:sticky; top:0; background:var(--panel-solid); z-index:2; }
.modal-title { font-size:17px; font-weight:800; }
.modal-head .p-sub { margin-top:3px; }
.modal-x { width:34px; height:34px; border-radius:10px; border:1px solid var(--border-in); background:var(--panel-solid); font-size:18px; line-height:1; cursor:pointer; color:var(--soft); flex-shrink:0; }
.modal-x:hover { background:#eef3fd; color:var(--text); }
.modal-body { padding:18px 24px 22px; }
.dm-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px 16px; margin-bottom:16px; }
.dm-item { background:#eef3fb; border:1px solid var(--border-in); border-radius:12px; padding:9px 12px; }
.dm-item span { display:block; font-size:11px; color:var(--soft); margin-bottom:3px; }
.dm-item b { font-size:13px; font-weight:600; word-break:break-all; }
.dm-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px; }
.dm-stats .stat { padding:13px 15px; border-radius:14px; }
.dm-stats .stat .v { font-size:20px; margin-top:6px; }
.dm-stats .stat .ic { font-size:15px; top:12px; right:12px; }
.mini-bars { display:flex; align-items:flex-end; gap:8px; height:96px; padding-top:14px; }
.mb-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:5px; height:100%; }
.mb-bar { width:100%; max-width:34px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#38bdf8,#3b82f6); min-height:3px; }
.mb-bar.zero { background:#e3edfb; }
.mb-col span { font-size:11px; color:var(--soft); }
.dm-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }

.pager { display:flex; align-items:center; gap:12px; justify-content:center; padding:14px 0 4px; }
.pager .pg { color:var(--soft); font-size:12px; }
.btn.sm { padding:5px 10px; font-size:12px; border-radius:8px; }
table.data code { background:rgba(47,86,180,.12); border:1px solid rgba(47,86,180,.25); color:var(--accent); border-radius:6px; padding:1px 6px; font-size:12px; }

/* ---------- 分享月报图 ---------- */
.modal.share-modal { width:520px; }
.share-canvas { display:block; width:400px; height:auto; margin:0 auto; border-radius:18px; border:1px solid var(--border-in); box-shadow:0 12px 30px rgba(83, 110, 68,.12); }
.share-actions { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.share-hint { color:var(--soft); font-size:12px; }
.share-seg { display:flex; justify-content:center; margin:2px auto 14px; width:max-content; }
.share-pick { display:flex; align-items:center; justify-content:center; gap:16px; margin:2px 0 14px; }
.share-ym { font-size:16px; font-weight:800; min-width:120px; text-align:center; }
.arrow:disabled { opacity:.35; cursor:not-allowed; }
.arrow:disabled:hover { background:var(--panel-solid); }

/* ---------- 演示模式提示条 ---------- */
.demo-banner { display:flex; align-items:center; gap:4px 6px; flex-wrap:wrap; background:linear-gradient(90deg, rgba(99,102,241,.12), rgba(56,189,248,.14)); border:1px solid rgba(59,91,219,.22); color:#2f3a4e; border-radius:14px; padding:11px 16px; margin-bottom:14px; font-size:13px; }
.demo-banner b { color:var(--accent); }
.demo-banner a { color:var(--accent); font-weight:600; }

/* ---------- 报表页卡片系统（自由增删 / 调大小 / 拖拽排序） ---------- */
.rg { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.rc { background:var(--panel); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:16px 18px; position:relative; min-width:0; }
.rc.w1 { grid-column:span 1; }
.rc.w2 { grid-column:span 2; }
.rc.w4 { grid-column:span 4; }
.rc-stat { overflow:hidden; cursor:grab; transition:transform .2s, box-shadow .2s; height:112px; display:flex; flex-direction:column; }
.rc-stat:hover { transform:translateY(-2px); box-shadow:0 22px 44px rgba(83, 110, 68,.13); }
/* 统一小卡高度：全部锁定 112px（两行流量卡的自然高度），数值一律单行、放不下由 fitStatValue 逐级缩字号 */
.rc-stat .rc-body { flex:1; display:flex; flex-direction:column; justify-content:center; }
.rc.dragging { opacity:.55; outline:2px dashed var(--accent); outline-offset:-2px; transform:none !important; transition:none !important; }
body.rc-dragging { user-select:none; -webkit-user-select:none; }
body.rc-dragging * { cursor:grabbing !important; }
.rc-stat .rc-k { color:var(--soft); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-stat .rc-v { font-size:24px; font-weight:800; margin-top:8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rc-stat .rc-v small { font-size:.5em; color:var(--soft); font-weight:500; margin-left:4px; white-space:nowrap; }
.rc-stat .rc-flowv { font-size:.667em; line-height:1.55; }
.rc-panel .rc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 4px; cursor:grab; }
.rc-panel .rc-head h3 { margin:0; font-size:16px; }
.rc-head-r { display:flex; align-items:center; gap:10px; flex-shrink:1; min-width:0; flex-wrap:wrap; justify-content:flex-end; }
.rc-sub { color:var(--soft); font-size:13px; margin-bottom:10px; }
.rc-sub:empty { display:none; }
.rc-body { width:100%; }
.rc-tools { display:flex; gap:6px; opacity:0; pointer-events:none; transition:opacity .15s; }
.rc:hover .rc-tools { opacity:1; pointer-events:auto; }
.rc-stat .rc-tools { position:absolute; right:12px; top:12px; z-index:3; gap:4px; }
.rc-btn { width:26px; height:26px; border-radius:8px; border:1px solid var(--border-in); background:rgba(255,255,255,.92); color:var(--soft); font-size:13px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.rc-btn:hover { color:var(--accent); border-color:var(--accent); }
.rc-btn:disabled { opacity:.3; pointer-events:none; }
/* 小卡右上角四个按钮并排：缩到 22px，避免压住卡内数值 */
.rc-stat .rc-btn { width:22px; height:22px; border-radius:7px; font-size:12px; }
.rc-hint { grid-column:1 / -1; padding:64px 20px; text-align:center; color:#8490a8; font-size:13.5px; line-height:2; background:var(--panel); border:1px dashed var(--border-in); border-radius:20px; }

/* 卡片库弹层 */
.modal.card-modal { width:560px; }
.card-modal .modal-body { padding:16px 22px 6px; }
.card-modal-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 22px 18px; }
.clib-grp { margin-bottom:14px; }
.clib-t { font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }
.clib-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.clib-item { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border-in); border-radius:12px; padding:7px 12px; background:#fbfcff; min-width:0; }
.clib-item.on { background:#f5f8ff; }
.clib-n { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clib-tag { font-size:11.5px; color:var(--soft); flex-shrink:0; }

/* ---------- 后台「总览」页卡片栅格（复用 .rc 卡片样式，仅覆盖列数） ----------
   后台页沿用同一套 .rg/.rc 引擎，但需要更密的 6 列栅格：w1=1列、w2=3列、w4=整行，
   使 4 张数字卡并排、图表两两并排，与改造前写死布局的视觉密度一致。 */
.admin-main .rg { grid-template-columns:repeat(6,1fr); }
.admin-main .rc.w1 { grid-column:span 1; }
.admin-main .rc.w2 { grid-column:span 3; }
.admin-main .rc.w4 { grid-column:span 6; }
.admin-main .rc-stat .rc-v { font-size:22px; }
/* ---------- 后台「使用统计」独立页（rg-4：4 列栅格，两行各 4 张数字卡 + 明细表整行） ---------- */
.admin-main .rg-4 { grid-template-columns:repeat(4,1fr); }
.admin-main .rg-4 .rc.w1 { grid-column:span 1; }
.admin-main .rg-4 .rc.w2 { grid-column:span 2; }
.admin-main .rg-4 .rc.w4 { grid-column:span 4; }
.us-bar { display:flex; align-items:center; gap:8px; }
.us-bar input[type="date"] { max-width:170px; }
.us-note { margin:0 0 14px; padding:12px 16px; border-radius:14px; background:rgba(217,147,13,.10); border:1px solid rgba(217,147,13,.28); color:#8a6108; font-size:13.5px; line-height:1.6; }
.us-modes { display:flex; gap:6px; margin:0 0 12px; flex-wrap:wrap; }
.us-mode { border:1px solid var(--border-in); background:var(--panel-solid); color:var(--soft); font-size:13px; padding:6px 14px; border-radius:999px; cursor:pointer; transition:.15s; }
.us-mode:hover { color:var(--accent); border-color:var(--accent); }
.us-mode.on { background:var(--grad); color:#fff; border-color:transparent; }
.us-th { cursor:pointer; user-select:none; white-space:nowrap; }
.us-th:hover { color:var(--accent); }
.us-tbl-wrap { max-height:520px; overflow:auto; border:1px solid var(--border-in); border-radius:12px; }
.us-tbl-wrap table.data { min-width:0; }
.us-tbl-wrap thead th { position:sticky; top:0; z-index:1; background:var(--panel-solid); box-shadow:0 1px 0 var(--border-in); }
.us-tbl-note { color:var(--soft); font-size:12.5px; margin:8px 0 6px; }
.us-names { display:inline-block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
/* 使用统计 8 张小卡标题带板块前缀（如「客户端打开人数」）偏长，窄窗下会被单行省略号截断；
   这里只对本页（.rg-4）放开折行，栅格行内卡片高度自动对齐，其它页面不受影响 */
.admin-main .rg-4 .rc-stat { height:auto; min-height:112px; }
.admin-main .rg-4 .rc-stat .rc-k { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }

/* ---------- 工作时间轴页（全年热力图 + 选中日时间轴） ---------- */
.wt-panel { padding:18px 20px 14px; }
.wt-sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.wt-sec-head h3 { margin:0; font-size:16px; }
.wt-sec-head .rc-sub { margin:0; }
.wt-heat { width:100%; height:190px; }
.wt-split { height:1px; background:var(--border); margin:16px 0 12px; }
.wt-tl { width:100%; height:340px; }