/* ===== 基础 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#F7F8FA; --card:#ffffff; --border:#E8EBF1;
  --primary:#D97757; --primary-hover:#C15F3C;
  --brand:#0F172A; --brand-soft:#EFF1F6; --primary-soft:#FBF0EA;
  --green:#047857; --green-soft:#E6F4EF;
  --amber:#B45309; --amber-soft:#FFF3E0;
  --red:#DC2626; --red-soft:#FCE8E8;
  --slate:#5A6472; --dark:#0F172A; --muted:#8A93A4;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 26px rgba(15,23,42,.055);
  /* 全站唯一字体栈：只改这一处，所有页面（含表单控件）一起生效 */
  --font:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
}
html,body { height:100%; }
html { font-family:var(--font); }
body {
  font-family:var(--font);
  background:var(--bg); color:var(--dark); font-size:14px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit; }
/* 表单控件必须显式统一字体：浏览器默认会给 input/select/textarea 套 Arial / monospace，
   并把字号顶成 13.3333px，这正是「预警中心」等页面字体不一致的原因。 */
button, input, select, textarea, optgroup,
.input, .search-input, .cell-input, .field input, .field select, .field textarea {
  font-family:var(--font);
  font-size:13px;
  letter-spacing:normal;
}
input[type=date], input[type=datetime-local], input[type=month],
input[type=number], input[type=time] { font-family:var(--font); }
input[type=number] { font-variant-numeric:tabular-nums; }
select, input, textarea { color:var(--dark); }
::placeholder { color:#A6AEBC; opacity:1; }

/* ===== 布局 ===== */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:224px; flex-shrink:0; background:#111827; color:#e5e7eb;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.logo { padding:16px 14px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #1e293b; }
.logo-mark { width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; font-weight:800; font-size:17px; box-shadow:0 8px 20px rgba(37,99,235,.25); }
.logo-text { line-height:1.25; min-width:0; }
.logo-name { font-size:15px; font-weight:800; color:#fff; letter-spacing:1px; }
.logo-sub { font-size:11px; color:#94a3b8; margin-top:2px; }
.logo-icon { font-size:22px; }
.nav { padding:12px 10px; flex:1; overflow-y:auto; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  color:#cbd5e1; font-size:14px; margin-bottom:2px; transition:background .15s;
}
.nav-item:hover { background:#1e293b; color:#fff; }
.nav-item.active { background:var(--primary); color:#fff; font-weight:600; }
.nav-ico { width:20px; text-align:center; }
.badge { margin-left:auto; background:var(--red); color:#fff; border-radius:10px; padding:1px 7px; font-size:12px; font-weight:700; }
.sidebar-foot { padding:14px 18px; font-size:12px; color:#64748b; border-top:1px solid #1e293b; }

.main { flex:1; min-width:0; padding:22px 26px 40px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.topbar h1 { font-size:23px; font-weight:750; letter-spacing:-.01em; }
.sub { color:var(--slate); font-size:13px; margin-top:4px; }
.topbar-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.date-chip { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--slate); font-size:13px; box-shadow:0 1px 2px rgba(16,24,40,.03); }

/* ===== 视图 ===== */
.view { display:none; }
.view.active { display:block; animation:fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to {opacity:1; transform:none;} }

/* ===== 卡片 ===== */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
.card-title { font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card-title .hint { font-size:12px; color:var(--muted); font-weight:400; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:1fr 1fr; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1200px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }

/* ===== KPI 卡片 ===== */
.kpi { padding:16px 18px; }
.kpi-label { color:var(--slate); font-size:13px; display:flex; justify-content:space-between; align-items:center; }
.kpi-value { font-size:26px; font-weight:800; margin-top:8px; font-variant-numeric:tabular-nums; }
.kpi-value.small { font-size:20px; }
.kpi-sub { font-size:12px; color:var(--muted); margin-top:4px; }
.kpi.up { color:var(--green); } .kpi.down { color:var(--red); }

/* ===== 表格 ===== */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th { background:#F8FAFC; color:var(--slate); font-weight:600; position:sticky; top:0; }
tr:hover td { background:#f8fafc; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.clickable { cursor:pointer; }
.empty { text-align:center; color:var(--muted); padding:36px 0; }
.empty .big { font-size:40px; display:block; margin-bottom:10px; }

/* ===== 标签 ===== */
.tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.tag-green { background:var(--green-soft); color:var(--green); }
.tag-red { background:var(--red-soft); color:var(--red); }
.tag-amber { background:var(--amber-soft); color:var(--amber); }
.tag-blue { background:var(--primary-soft); color:var(--primary); }
.tag-gray { background:#f1f5f9; color:var(--slate); }

/* ===== 按钮 ===== */
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--card); color:var(--dark); padding:8px 14px; border-radius:10px; cursor:pointer; font-size:13px; font-weight:600; transition:all .15s; box-shadow:0 1px 2px rgba(16,24,40,.03); }
.btn:hover { border-color:var(--primary); color:var(--primary); }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); color:#fff; }
.btn-danger { background:var(--red); border-color:var(--red); color:#fff; }
.btn-danger:hover { background:#b91c1c; color:#fff; }
.btn-ghost { background:transparent; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ===== 表单 ===== */
.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px 16px; }
.field label { display:block; font-size:12px; color:var(--slate); margin-bottom:5px; font-weight:600; }
.field input, .field select, .field textarea {
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:10px; font-size:13px; background:#fff; color:var(--dark); outline:none; transition:border-color .15s,box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.field textarea { resize:vertical; min-height:60px; }
.form-actions { display:flex; gap:10px; margin-top:16px; justify-content:flex-end; }

/* ===== 弹窗 ===== */
.modal-mask { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:400; padding:20px; }
.modal { background:#fff; border-radius:16px; width:680px; max-width:100%; max-height:90vh; overflow-y:auto; padding:24px; box-shadow:0 24px 70px rgba(16,24,40,.18); }
.modal h3 { font-size:17px; margin-bottom:16px; }
.modal.store-history-modal { width: 1060px; max-height: 92vh; }
.store-history-controls { display:grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; gap:12px; align-items:end; margin:16px 0 12px; }
.store-history-controls .field { margin:0; }
.store-history-controls .field > span { display:block; font-size:12px; color:var(--slate); margin-bottom:5px; font-weight:600; }
.store-history-controls .field input, .store-history-controls .field select { width:100%; }
.store-history-arch { display:flex; align-items:center; gap:7px; min-height:38px; color:var(--slate); font-size:13px; white-space:nowrap; }
.store-history-status { padding:10px 12px; border-radius:10px; background:var(--primary-soft); color:var(--slate); font-size:12px; line-height:1.65; }
.store-history-status.is-error { background:#fef2f2; color:#b91c1c; }
.store-history-preview { margin-top:12px; max-height:46vh; overflow:auto; border:1px solid var(--border); border-radius:12px; }
.store-history-preview .table-wrap { max-height:none; overflow:visible; }
.store-history-preview thead th { position:sticky; top:0; z-index:1; background:#f8fafc; }
.store-history-empty { padding:32px 20px; text-align:center; color:var(--muted); }
@media (max-width: 860px) {
  .store-history-controls { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .modal.store-history-modal { padding:18px; }
  .store-history-controls { grid-template-columns:1fr; }
}
.modal .form-actions { margin-top:20px; }

/* ===== 预警 ===== */
.alert-item { display:flex; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; background:#fff; align-items:flex-start; }
.alert-item .lvl { width:10px; height:10px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.alert-item.lvl-high { border-left:4px solid var(--red); }
.alert-item.lvl-medium { border-left:4px solid var(--amber); }
.alert-item.lvl-low { border-left:4px solid var(--primary); }
.alert-item .a-title { font-weight:700; }
.alert-item .a-meta { color:var(--muted); font-size:12px; margin-top:3px; }
.alert-item .a-desc { color:var(--slate); margin-top:4px; font-size:13px; }

/* ===== 图表 ===== */
.chart { width:100%; height:320px; }
.chart.sm { height:260px; }

/* ===== 工具条 ===== */
.toolbar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.toolbar .spacer { flex:1; }
.search-input { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; width:220px; outline:none; }
.search-input:focus { border-color:var(--primary); }

/* ===== Toast ===== */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--dark); color:#fff; padding:10px 20px; border-radius:8px; font-size:13px; z-index:200; opacity:0; pointer-events:none; transition:opacity .25s; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.toast.show { opacity:1; }
.toast.ok { background:#15803d; }
.toast.err { background:#b91c1c; }

/* ===== 导入向导 ===== */
.import-step { margin-bottom:16px; }
.progress-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.progress-bar > div { height:100%; background:var(--primary); width:0%; transition:width .2s; }
.drop-zone { border:2px dashed var(--border); border-radius:12px; padding:36px; text-align:center; color:var(--slate); cursor:pointer; transition:all .2s; }
.drop-zone:hover, .drop-zone.drag { border-color:var(--primary); background:var(--primary-soft); }
.drop-zone .dz-icon { font-size:40px; display:block; margin-bottom:8px; }

/* ===== 进度条 ===== */
.mini-progress { height:6px; background:var(--border); border-radius:4px; overflow:hidden; min-width:80px; }
.mini-progress > div { height:100%; border-radius:4px; }
.meter { display:flex; align-items:center; gap:8px; }

/* misc */
.muted { color:var(--muted); }
.small { font-size:12px; }
.flex { display:flex; gap:8px; align-items:center; }
.mt { margin-top:12px; } .mb { margin-bottom:12px; }
.right { text-align:right; }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

/* ===== 登录 ===== */
.login-mask { position:fixed; inset:0; background:linear-gradient(135deg,#101828 0%,#3a2a18 55%,#7a3411 100%); display:flex; align-items:center; justify-content:center; z-index:300; }
.login-box { background:#fff; border-radius:18px; padding:32px 36px 28px; width:380px; max-width:92vw; box-shadow:0 24px 70px rgba(16,24,40,.22); text-align:center; }
.login-mark { width:58px; height:58px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; font-size:28px; font-weight:800; box-shadow:0 14px 34px rgba(37,99,235,.25); }
.login-brand { font-size:24px; font-weight:800; color:var(--dark); letter-spacing:6px; margin:4px 0 2px; text-indent:6px; }
.login-system { font-size:14px; color:var(--slate); margin-top:4px; }
.login-slogan { display:inline-block; margin:12px auto 0; font-size:13px; font-weight:600; color:var(--brand); letter-spacing:2px; background:var(--brand-soft); padding:4px 16px; border-radius:20px; }
.login-divider { height:1px; background:var(--border); margin:18px 0 16px; }
.login-box .field { margin-bottom:14px; text-align:left; }
.login-btn { width:100%; justify-content:center; padding:10px; font-size:15px; margin-top:6px; }
.login-err { color:var(--red); font-size:12px; min-height:16px; margin:4px 0; text-align:left; }

/* ================= AI / 数据分析 / 日报 / 监控 新增样式 ================= */
.flex { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flex-1 { flex:1; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-card { background:var(--card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:14px 16px; }
.stat-card .num { font-size:22px; font-weight:700; color:var(--primary,#2563eb); }
.stat-card .lbl { font-size:12px; color:#64748b; margin-top:2px; }
.stat-card .sub { font-size:12px; color:#94a3b8; margin-top:2px; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; line-height:18px; }
.tag-green { background:#e7f6ec; color:#15803d; }
.tag-red { background:#fde8e8; color:#b91c1c; }
.tag-orange { background:#fff3e0; color:#b45309; }
.tag-gray { background:#f1f5f9; color:#64748b; }
.tag-blue { background:#e8f0fe; color:#1d4ed8; }
.tag-purple { background:#f3e8ff; color:#7c3aed; }
/* AI 聊天 */
.ai-chat { display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding:4px; }
.ai-msg { max-width:88%; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.ai-msg.user { align-self:flex-end; background:var(--primary,#2563eb); color:#fff; border-bottom-right-radius:4px; }
.ai-msg.ai { align-self:flex-start; background:#f1f5f9; border:1px solid var(--border,#e5e7eb); border-bottom-left-radius:4px; }
.ai-msg.err { align-self:flex-start; background:#fde8e8; color:#b91c1c; border:1px solid #fecaca; }
.ai-input-row { display:flex; gap:8px; margin-top:10px; }
.ai-input-row input { flex:1; }
.ai-meta { font-size:12px; color:#94a3b8; }
/* markdown 方案渲染 */
.plan-body { font-size:13px; line-height:1.7; color:#1e293b; }
.plan-body h1, .plan-body h2, .plan-body h3 { margin:14px 0 6px; }
.plan-body h1 { font-size:17px; } .plan-body h2 { font-size:15px; } .plan-body h3 { font-size:14px; }
.plan-body table { border-collapse:collapse; width:100%; margin:8px 0; font-size:12px; }
.plan-body th, .plan-body td { border:1px solid var(--border,#e5e7eb); padding:6px 8px; text-align:left; }
.plan-body th { background:#F8FAFC; }
.plan-body ul, .plan-body ol { padding-left:20px; margin:6px 0; }
.plan-body code { background:#f1f5f9; padding:1px 5px; border-radius:4px; font-size:12px; }
.plan-body blockquote { border-left:3px solid var(--primary,#2563eb); margin:8px 0; padding:2px 10px; color:#475569; background:#f8fafc; }
.mindmap-box { width:100%; height:460px; border:1px solid var(--border,#e5e7eb); border-radius:10px; }
.chat-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* 日报 */
.daily-list { display:flex; flex-direction:column; gap:10px; }
.daily-card { border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:12px 14px; background:#fff; }
.daily-card .head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.daily-card .date { font-weight:600; }
.daily-card .body { font-size:13px; color:#334155; margin-top:8px; white-space:pre-wrap; }
.daily-card .meta { font-size:12px; color:#94a3b8; margin-top:6px; }
.field textarea { width:100%; min-height:70px; }
.field textarea.tall { min-height:110px; }
/* 监控 */
.task-card { border:1px solid var(--border,#e5e7eb); border-radius:10px; padding:12px 14px; background:#fff; }
.task-card .head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.task-name { font-weight:600; }
.task-desc { font-size:12px; color:#64748b; margin-top:4px; }
.task-progress { font-size:12px; color:#475569; margin-top:8px; }
.progress-bar { height:8px; border-radius:999px; background:#e2e8f0; margin-top:6px; overflow:hidden; }
.progress-bar > div { height:100%; background:var(--primary,#2563eb); border-radius:999px; }
.delay-list { display:flex; flex-direction:column; gap:8px; }
.delay-item { border:1px solid #fecaca; background:#fff7f7; border-radius:8px; padding:8px 12px; font-size:13px; }
.delay-item b { color:#b91c1c; }
.monitor-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
@media (max-width:900px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

/* ===== 扩展新功能样式 ===== */
.ptabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.ptab{background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 16px;cursor:pointer;color:#475569}
.ptab.active{background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);color:#fff;font-weight:600}
.srow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;flex-wrap:wrap}
.srow:hover{border-color:var(--primary,#2563eb)}
.platform-only{display:none}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
.tag-blue{background:#dbeafe;color:#1d4ed8}

/* ===== App 自动采集 ===== */
.dot { width:10px; height:10px; border-radius:50%; background:#94a3b8; display:inline-block; flex:0 0 auto; }
.dot.ok { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); }
.row { display:flex; }
.row + .row { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.progress { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.progress .bar { height:100%; background:var(--primary); width:0%; transition:width .2s; }
.badge.ok { background:#16a34a; }
table.kv { width:100%; border-collapse:collapse; }
table.kv td { padding:5px 8px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:top; }
table.kv td:first-child { width:96px; color:var(--slate); }

/* ===== 问题预警表格 ===== */
.alerts-table{width:100%;border-collapse:collapse;font-size:13px}
.alerts-table th,.alerts-table td{border:1px solid var(--border,#e5e7eb);padding:7px 9px;text-align:left;vertical-align:top;white-space:nowrap}
.alerts-table th{background:rgba(0,0,0,.03);font-weight:600}
.alerts-table .al-desc{white-space:normal;min-width:260px;max-width:520px}
.alerts-table tr:nth-child(even){background:rgba(0,0,0,.015)}
.alerts-table .empty{text-align:center;padding:24px;color:#888}

.demo-badge{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:600;vertical-align:middle}

/* ============ 简约高级风 · 全界面重设计 ============ */
body { background:var(--bg); color:var(--dark); font-family:var(--font); }
.sidebar { background:#FBFBFD; color:#4A5361; border-right:1px solid var(--border); }
.logo { padding:18px 18px 14px; border-bottom:1px solid var(--border); justify-content:flex-start; }
.side-logo { height:34px; width:auto; display:block; }
.logo-mark,.logo-text,.logo-name,.logo-sub { display:none; }
.nav { padding:12px 12px; }
.nav-item { border-radius:10px; padding:10px 12px; color:#5A6472; margin-bottom:3px; }
.nav-item:hover { background:#F1F3F8; color:#0F172A; }
.nav-item.active { background:#FBEDE6; color:#C15F3C; font-weight:700; }
.badge { background:var(--primary); }
.sidebar-foot { color:#8A93A4; border-top:1px solid var(--border); }
.topbar h1 { color:var(--dark); letter-spacing:-.02em; }
.sub { color:var(--slate); }
.date-chip { background:var(--card); border:1px solid var(--border); border-radius:12px; }
.card { border-radius:16px; border-color:var(--border); }
.btn { border-radius:12px; }
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
.btn:hover { border-color:var(--primary); color:var(--primary); }
.kpi-value { letter-spacing:-.02em; }
.search-input { border-radius:12px; }
.field input,.field select,.field textarea { border-radius:12px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(217,119,87,.14); }
.search-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(217,119,87,.14); }
.modal { border-radius:20px; }
.modal h3 { font-weight:800; }
.login-mask { background:#F6F7FA; }
.login-box { background:#fff; border:1px solid var(--border); border-radius:24px; padding:36px; width:400px; box-shadow:0 30px 80px rgba(15,23,42,.10); }
.login-logo-wrap { display:flex; justify-content:center; margin-bottom:6px; }
.login-logo { height:56px; width:auto; }
.login-brand,.login-system { display:none; }
.login-slogan { color:var(--primary-hover); background:var(--primary-soft); border-radius:999px; }
.login-btn { border-radius:12px; }
.tag-blue { background:var(--primary-soft); color:var(--primary-hover); }
.stat-card .num { color:var(--primary); }
.ai-msg.user { background:var(--primary); }
.ptab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.progress-bar > div { background:var(--primary); }
.progress .bar { background:var(--primary); }
.alert-item.lvl-low { border-left-color:var(--primary); }
.plan-body blockquote { border-left-color:var(--primary); }
.nav-ico svg { width:19px; height:19px; display:block; margin:0 auto; }
.ico { width:16px; height:16px; display:inline-block; vertical-align:-2px; flex:0 0 auto; }
h3 > .ico, .card-title > .ico { width:18px; height:18px; vertical-align:-3px; }
.btn .ico { width:16px; height:16px; }
.empty .big .ico, .big .ico { width:44px; height:44px; }
.dz-icon .ico { width:42px; height:42px; }

/* ============ 侧边导航 · 分组折叠 ============ */
#nav > .nav-item { margin-bottom: 8px; }
.nav-group { margin: 2px 0 6px; }
.nav-group[hidden] { display: none; }
.nav-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 6px; border-radius: 10px; cursor: pointer;
  color: #A19C92; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  -webkit-user-select: none; user-select: none;
  transition: color .15s ease, background .15s ease;
}
.nav-group-head:hover { color: #0F172A; background: #F1F3F8; }
.nav-group-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nav-group-ico { flex: 0 0 15px; width: 15px; height: 15px; display: block; opacity: .85; }
.nav-group-ico svg { width: 15px; height: 15px; display: block; }
.nav-group-caret { margin-left: auto; width: 13px; height: 13px; flex: 0 0 13px; opacity: .5; transition: transform .18s ease; }
.nav-group.collapsed .nav-group-caret { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }
.nav-group-body { display: block; padding-bottom: 2px; }
.nav-group-body .nav-item { margin-bottom: 3px; }
.nav-group-body .nav-item:last-child { margin-bottom: 0; }

/* ============================================================
   2026-09-14 · 动态视觉层
   目标：简约质感 + 克制的动态反馈（不影响功能、不干扰阅读）
   ============================================================ */

@keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes popIn  { from { opacity:0; transform:scale(.96); }      to { opacity:1; transform:none; } }

/* ---------- 1. 全站环境光：极缓慢流动的柔光背景 ---------- */
.main {
  background-image:
    radial-gradient(760px 460px at 10% -10%, rgba(99,102,241,.105), rgba(99,102,241,0) 62%),
    radial-gradient(620px 420px at 92% 2%,   rgba(14,116,144,.075), rgba(14,116,144,0) 60%),
    radial-gradient(900px 520px at 50% 108%, rgba(217,119,87,.045), rgba(217,119,87,0) 66%);
  background-repeat: no-repeat;
  background-size: 150% 130%, 140% 125%, 160% 140%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  animation: ambient 34s ease-in-out infinite alternate;
}
@keyframes ambient {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%  { background-position: 26% 9%, 74% 7%,  44% 84%; }
  100% { background-position: 50% 15%, 52% 13%, 38% 76%; }
}

/* 侧栏 logo 下方一条缓慢游走的细光带 */
.logo { position: relative; }
.logo::after {
  content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:1px; pointer-events:none;
  background: linear-gradient(90deg, rgba(217,119,87,0) 0%, rgba(217,119,87,.55) 48%, rgba(217,119,87,0) 100%);
  background-size: 230% 100%;
  animation: lineSlide 7s ease-in-out infinite;
}
@keyframes lineSlide { 0% { background-position:190% 0; } 100% { background-position:-90% 0; } }

/* ---------- 2. 视图切换动效 ---------- */
.view.active { animation: riseIn .42s cubic-bezier(.22,.75,.25,1); }

/* ---------- 3. 卡片 / KPI / 面板 微交互 ---------- */
.card { transition: box-shadow .3s ease, border-color .3s ease; }
.kpi, .stat-card, .daily-card, .task-card, .plan-body, .drop-zone, .import-step, .mindmap-box, .alert-item, .delay-item {
  transition: transform .3s cubic-bezier(.22,.75,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.kpi:hover, .stat-card:hover, .daily-card:hover, .task-card:hover, .plan-body:hover, .drop-zone:hover, .mindmap-box:hover, .alert-item:hover, .delay-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px rgba(15,23,42,.09);
  border-color: #DCE3F0;
}
.kpi-value { transition: color .3s ease; }

/* ---------- 4. 侧边导航 ---------- */
.nav-item { position: relative; overflow: hidden; }
.nav-item::before {
  content:''; position:absolute; left:0; top:50%; width:3px; height:18px; border-radius:0 3px 3px 0;
  background: var(--primary); opacity:0;
  transform: translateY(-50%) scaleY(.25);
  transition: opacity .24s ease, transform .24s cubic-bezier(.22,.75,.25,1);
}
.nav-item.active::before { opacity:1; transform: translateY(-50%) scaleY(1); }
.nav-item::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 68%);
  transform: translateX(-110%);
}
.nav-item:hover::after { opacity:1; animation: sweepX .75s ease; }
@keyframes sweepX { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.nav { scroll-behavior: smooth; }

/* ---------- 5. 按钮 ---------- */
.btn { position: relative; overflow: hidden; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .22s ease, transform .12s ease; }
.btn:active { transform: scale(.985); }
.btn-primary { box-shadow: 0 1px 2px rgba(217,119,87,.16), 0 8px 22px rgba(217,119,87,.18); }
.btn-primary:hover { box-shadow: 0 2px 5px rgba(217,119,87,.18), 0 14px 32px rgba(217,119,87,.26); }
.btn-primary::after {
  content:''; position:absolute; top:0; bottom:0; width:40%; pointer-events:none;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
  transform: translateX(-170%);
}
.btn-primary:hover::after { animation: btnSheen .8s ease; }
@keyframes btnSheen { to { transform: translateX(320%); } }

/* ---------- 6. 表格行 ---------- */
tbody tr { transition: background .18s ease; }
tbody tr:hover td { background: rgba(99,102,241,.055); }
.alerts-table tbody tr:hover, .alerts-table tr:hover { background: rgba(99,102,241,.055); }

/* ---------- 7. 进度条流动 ---------- */
.progress .bar, .progress-bar > div { position: relative; overflow: hidden; transition: width .7s cubic-bezier(.22,.75,.25,1); }
.progress .bar::after, .progress-bar > div::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  transform: translateX(-100%);
  animation: barFlow 2.4s ease-in-out infinite;
}
@keyframes barFlow { 0% { transform: translateX(-100%); } 65%,100% { transform: translateX(100%); } }

/* ---------- 8. Toast / 弹窗 ---------- */
@keyframes toastIn { from { opacity:0; transform: translate(-50%, 16px) scale(.96); } to { opacity:1; transform: translate(-50%, 0) scale(1); } }
.toast { transform: translate(-50%, 0); }
.toast.show { animation: toastIn .34s cubic-bezier(.22,.9,.3,1); }
.modal-mask { animation: maskIn .22s ease; }
@keyframes maskIn { from { opacity:0; } to { opacity:1; } }
.modal { animation: popIn .34s cubic-bezier(.22,.9,.3,1); }

/* ---------- 9. 标签 / 状态点 轻呼吸 ---------- */
.tag { transition: transform .2s ease, box-shadow .2s ease; }
.dot.ok { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.20); }
  50%     { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}

/* ============================================================
   登录页 · 左右分栏（表单在右）+ 动态背景
   ============================================================ */
.login-mask {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  display: flex; align-items: stretch; justify-content: center;
  background: #F6F7FA;
}
.login-stage { display: flex; width: 100%; min-height: 100%; }

/* ----- 左侧视觉区 ----- */
.login-art {
  position: relative; flex: 1 1 56%; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #FAF6F0 0%, #F5EBE1 48%, #F1E7DB 100%);
}
/* 统一整体色感：在色块之上、文字之下压一层柔光 */
.login-art::after {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.55) 80%, #FFFFFF 100%),
    linear-gradient(180deg, rgba(250,249,245,.05) 0%, rgba(250,249,245,.28) 58%, rgba(250,249,245,.60) 100%);
}
.art-blob { position: absolute; border-radius: 50%; filter: blur(74px); pointer-events: none; }
.art-blob.b1 { width: 470px; height: 470px; left: -7%;  top: 4%;    background: radial-gradient(circle, rgba(217,119,87,.30), rgba(217,119,87,0) 70%); animation: float1 22s ease-in-out infinite alternate; }
.art-blob.b2 { width: 390px; height: 390px; right: 1%;  top: 20%;   background: radial-gradient(circle, rgba(206,176,138,.32), rgba(206,176,138,0) 70%); animation: float2 27s ease-in-out infinite alternate; }
.art-blob.b3 { width: 540px; height: 540px; left: 16%;  bottom: -16%; background: radial-gradient(circle, rgba(186,176,158,.26), rgba(186,176,158,0) 70%); animation: float3 31s ease-in-out infinite alternate; }
@keyframes float1 { from { transform: translate(0,0) scale(1); }      to { transform: translate(48px,40px) scale(1.12); } }
@keyframes float2 { from { transform: translate(0,0) scale(1.06); }   to { transform: translate(-54px,26px) scale(.95); } }
@keyframes float3 { from { transform: translate(0,0) scale(1); }      to { transform: translate(36px,-42px) scale(1.1); } }

.art-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 42% 42%, #000 0%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 42% 42%, #000 0%, rgba(0,0,0,0) 72%);
}

.art-inner { position: relative; z-index: 1; max-width: 480px; padding: 48px 40px; }
.art-logo { height: 48px; width: auto; display: block; margin-bottom: 34px; animation: riseIn .7s cubic-bezier(.22,.8,.28,1) both; }
.art-title { font-size: 40px; line-height: 1.24; font-weight: 800; letter-spacing: -.02em; color: #1C1B18; margin-bottom: 16px; animation: riseIn .7s .08s cubic-bezier(.22,.8,.28,1) both; }
.art-desc { color: #6B6862; font-size: 15px; margin-bottom: 28px; animation: riseIn .7s .16s cubic-bezier(.22,.8,.28,1) both; }
.art-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.art-list li { display: flex; align-items: center; gap: 11px; color: #4E4B45; font-size: 14px; animation: riseIn .7s cubic-bezier(.22,.8,.28,1) both; }
.art-list li:nth-child(1) { animation-delay: .22s; }
.art-list li:nth-child(2) { animation-delay: .30s; }
.art-list li:nth-child(3) { animation-delay: .38s; }
.art-list i {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--primary);
  animation: dotBreathe 2.8s ease-in-out infinite;
}
.art-list li:nth-child(2) i { animation-delay: .35s; }
.art-list li:nth-child(3) i { animation-delay: .7s; }
@keyframes dotBreathe {
  0%,100% { box-shadow: 0 0 0 4px rgba(217,119,87,.16); }
  50%     { box-shadow: 0 0 0 7px rgba(217,119,87,.07); }
}
.art-foot { margin-top: 42px; font-size: 12.5px; letter-spacing: .18em; color: #9A9488; animation: riseIn .7s .46s cubic-bezier(.22,.8,.28,1) both; }

/* ----- 右侧登录面板 ----- */
.login-panel {
  position: relative; flex: 0 0 44%; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 40px 32px;
}
/* 右侧面板保持纯白：与左侧渐隐到 #fff 的收尾无缝衔接，不再画分界线 */
.login-box {
  width: 100%; max-width: 380px; padding: 0; margin: 0;
  background: none; border: 0; box-shadow: none; border-radius: 0; text-align: left;
  animation: riseIn .6s .1s cubic-bezier(.22,.8,.28,1) both;
}
.login-box .login-logo { height: 40px; width: auto; display: block; margin: 0 0 20px; }
.login-title { font-size: 21px; font-weight: 800; color: var(--dark); letter-spacing: -.01em; margin-bottom: 22px; }
.login-title span { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 6px; letter-spacing: 0; }
.login-box .field { margin-bottom: 14px; }
.login-box .field input { width: 100%; }
.login-btn { width: 100%; justify-content: center; padding: 11px; font-size: 15px; margin-top: 6px; border-radius: 12px; }
.login-btn-quiet { margin-top: 10px; background: transparent; border: 1px dashed var(--border); color: var(--primary); }
.login-btn-quiet:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); }
.login-err { min-height: 16px; margin: 2px 0 6px; }
/* 登录方式切换（密码登录 / 手机号登录） */
.login-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: rgba(15,23,42,.05); border-radius: 12px; }
.login-tab { flex: 1; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); border-radius: 9px; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.login-tab:hover { color: var(--dark); }
.login-tab.active { background: #fff; color: var(--dark); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1 1 auto; min-width: 0; }
.login-box .code-row input { width: auto; }
.code-row .code-send { flex: 0 0 auto; padding: 0 12px; font-size: 13px; white-space: nowrap; border-radius: 12px; }
.code-row .code-send:disabled { opacity: .55; cursor: not-allowed; }
.login-foot { margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center; }

/* 窄屏：隐藏左侧视觉区，登录表单铺满 */
@media (max-width: 960px) {
  .login-art { display: none; }
  .login-panel { flex: 1 1 100%; background: #F6F7FA; }
  .login-panel::before { display: none; }
  .login-box { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; max-width: 400px; box-shadow: var(--shadow); }
}

/* ---------- 无障碍：用户开启「减少动态效果」时全部静态化 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* ============================================================
   10. 内页动态层：卡片 / 表格 / 图表 / 图标
   配合 js/motion.js 使用；未加载 motion.js 时全部静态，不影响功能
   ============================================================ */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.994); }
  to   { opacity: 1; transform: none; }
}
@keyframes rowIn {
  from { opacity: 0; background: rgba(99,102,241,.10); }
  to   { opacity: 1; background: transparent; }
}
@keyframes iconPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* 卡片 / 指标卡：切页时逐个上浮进入 */
.view.active.mo-enter .card,
.view.active.mo-enter .kpi,
.view.active.mo-enter .stat-card,
.view.active.mo-enter .daily-card,
.view.active.mo-enter .task-card,
.view.active.mo-enter .plan-body,
.view.active.mo-enter .alert-item,
.view.active.mo-enter .delay-item,
.view.active.mo-enter .mindmap-box {
  animation: cardIn .52s cubic-bezier(.22,.8,.28,1) both;
}

/* 表格行：逐行淡入（只动透明度，避免影响表头 sticky 定位） */
.view.active.mo-enter tbody tr { animation: rowIn .46s cubic-bezier(.22,.8,.28,1) both; }

/* 图表容器：不单独加入场动画，避免与外层 .card 叠加透明度显得慢半拍；其生长动画由 ECharts 自身完成 */
.chart canvas { transition: filter .35s ease; }
.card:hover .chart canvas { filter: saturate(1.08); }

/* 导航图标：悬停微抬 + 选中弹一下 */
.nav-ico { display: inline-flex; transition: transform .3s cubic-bezier(.22,.8,.28,1); }
.nav-item:hover .nav-ico { transform: translateY(-1.5px) scale(1.08); }
.nav-item.active .nav-ico { animation: iconPop .55s cubic-bezier(.22,.8,.28,1); }
.nav-group-ico svg { transition: transform .32s cubic-bezier(.22,.8,.28,1); }
.nav-group-head:hover .nav-group-ico svg { transform: rotate(-7deg) scale(1.09); }
.nav-group-head[aria-expanded="true"] .nav-group-caret { transform: rotate(180deg); transition: transform .3s cubic-bezier(.22,.8,.28,1); }
.nav-group-head[aria-expanded="false"] .nav-group-caret { transform: rotate(0deg); transition: transform .3s cubic-bezier(.22,.8,.28,1); }

/* 徽标 / 标签：悬停轻微反馈 */
.badge { transition: transform .25s cubic-bezier(.22,.8,.28,1), box-shadow .25s ease; }
.nav-item:hover .badge { transform: scale(1.12); }
.tag { transition: transform .22s cubic-bezier(.22,.8,.28,1), box-shadow .22s ease; }
tbody tr:hover .tag { transform: translateY(-1px); }

/* 表格行悬停时数字轻微强调 */
tbody tr:hover td.num { color: var(--primary); transition: color .2s ease; }

/* 无障碍：用户开启「减少动态效果」时内页同样静态化 */
@media (prefers-reduced-motion: reduce) {
  .view.active.mo-enter .card, .view.active.mo-enter .kpi, .view.active.mo-enter .stat-card,
  .view.active.mo-enter .daily-card, .view.active.mo-enter .task-card, .view.active.mo-enter .plan-body,
  .view.active.mo-enter .alert-item, .view.active.mo-enter .delay-item, .view.active.mo-enter .mindmap-box,
  .view.active.mo-enter tbody tr { animation: none !important; }
}

/* ============================================================
   11. 全站动态层扩充（2026-09-15）
   目标：每个页面都有克制的动态反馈；未加载 motion.js 时静态降级，不影响功能
   ============================================================ */

/* ---------- 数字排版统一：等宽数字，列表不再跳动 ---------- */
table td, table th, .num, .kpi-value, .stat-card .num, .alerts-table td { font-variant-numeric: tabular-nums; }

/* ---------- 表单控件：悬停 / 聚焦的平滑反馈 ---------- */
.input, .search-input, .cell-input, .field input, .field select, .field textarea,
input[type=text], input[type=number], input[type=date], select, textarea {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input:hover, .search-input:hover, input[type=text]:hover, select:hover, textarea:hover { border-color:#D5DDEA; }
.input:focus, .search-input:focus, select:focus, input:focus, textarea:focus { box-shadow:0 0 0 3px rgba(217,119,87,.13); }

/* ---------- 标签页 / 分段控件 ---------- */
.ptab, .tab, .seg, .seg-item {
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              transform .18s var(--ease), box-shadow .22s ease;
}
.ptab:hover, .tab:hover { transform: translateY(-1px); }
.ptab.active { box-shadow: 0 6px 16px rgba(217,119,87,.20); }

/* ---------- 导航项：悬停轻微右移 ---------- */
.nav-item { transition: background .2s ease, color .2s ease, padding-left .24s var(--ease); }
.nav-item:hover { padding-left: 15px; }

/* ---------- 徽标：有待办时轻微心跳（由 motion.js 挂 class） ---------- */
.badge.pulse { animation: badgePulse 2.6s ease-in-out infinite; }
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.42); }
  50%     { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ---------- 数字变化脉冲 ---------- */
.num-flash { animation: numFlash .8s var(--ease); }
@keyframes numFlash {
  0%   { transform: translateY(-3px); filter: brightness(1.28); }
  60%  { transform: none; }
  100% { filter: none; }
}

/* ---------- 点击涟漪 ---------- */
.ripple {
  position:absolute; border-radius:50%; pointer-events:none;
  background: currentColor; opacity:.26; transform: scale(0);
  animation: rippleGo .62s ease-out forwards;
}
@keyframes rippleGo { to { transform: scale(2.4); opacity: 0; } }

/* ---------- 滚动到视口才入场（长页面不再一次性播完） ---------- */
.reveal-init { opacity:0; transform: translateY(14px); }
.reveal-in { animation: cardIn .5s var(--ease) both; }

/* ---------- 侧栏分组：平滑展开 / 收起 ---------- */
.nav-group-body { overflow:hidden; transition: max-height .34s var(--ease), opacity .26s ease; }
.nav-group:not(.collapsed) .nav-group-body { max-height:460px; opacity:1; }
.nav-group.collapsed .nav-group-body { display:block; max-height:0; opacity:0; }

/* ---------- 顶部标题：随页面切换轻微上浮 ---------- */
.view.active .topbar h1 { animation: riseIn .5s var(--ease) both; }
.view.active .topbar .sub { animation: riseIn .5s .06s var(--ease) both; }

/* ---------- 表格：悬停高亮 + 左侧强调条 ---------- */
thead th { transition: background .25s ease, box-shadow .25s ease; }
.alerts-table tbody tr { transition: background .2s ease, box-shadow .2s ease; }
.alerts-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--primary); }

/* ---------- 列表型卡片：悬停位移 ---------- */
.srow, .alert-item, .delay-item, .mindmap-box {
  transition: transform .22s var(--ease), box-shadow .22s ease, border-color .22s ease;
}
.srow:hover { transform: translateX(2px); box-shadow: 0 6px 18px rgba(15,23,42,.06); }

/* ---------- 异步结果 / AI 输出：淡入 ---------- */
.ai-out, .result-card, .kp-result { animation: riseIn .44s var(--ease) both; }

/* ---------- 无障碍：减少动态效果时全部静态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity:1 !important; transform:none !important; }
  .ripple { display:none !important; }
  .badge.pulse, .num-flash { animation:none !important; }
  .nav-item:hover { padding-left: 12px; }
}

/* ============================================================
   12. 图标动效 + 图表动效（2026-09-15 · 第二轮）
   目标：全站每一个内联图标都有可感知的动态反馈
   ============================================================ */
@keyframes icoIn { from { opacity:0; transform: translateY(5px) scale(.7) rotate(-10deg); } to { opacity:1; transform:none; } }
@keyframes icoPop { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(7deg); } 100% { transform: scale(1); } }
@keyframes icoBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes bellSwing {
  0%,70%,100% { transform: rotate(0); }
  76% { transform: rotate(13deg); }
  82% { transform: rotate(-10deg); }
  88% { transform: rotate(6deg); }
  94% { transform: rotate(-3deg); }
}

/* 内联图标统一过渡，保证 hover 动效不突兀 */
.card-title svg, .card-title .ico, h3 > .ico, .kpi .ico, .stat-card .ico,
.btn svg, .btn .ico, th svg, .a-title svg, .tag svg, .nav-ico svg {
  transition: transform .3s var(--ease), opacity .3s ease;
}
.card-title svg, .card-title .ico, h3 > .ico { transform-origin: 50% 50%; }

/* 切页时：标题类图标逐个弹入（延迟由 motion.js 分配） */
.view.active.mo-enter .card-title svg,
.view.active.mo-enter .card-title .ico,
.view.active.mo-enter h3 > .ico,
.view.active.mo-enter .stat-card .ico,
.view.active.mo-enter .kpi .ico { animation: icoIn .55s var(--ease) both; }

/* 悬停：图标轻抬 / 轻转 */
.btn:hover svg, .btn:hover .ico { transform: translateY(-1.5px) scale(1.12); }
.btn:active svg, .btn:active .ico { transform: scale(.94); }
.card:hover .card-title svg, .card:hover .card-title .ico { transform: rotate(-9deg) scale(1.1); }
tbody tr:hover .tag svg { transform: scale(1.14); }

/* 点击：图标弹一下（由 motion.js 挂 class） */
svg.ico-pop { animation: icoPop .5s var(--ease); }

/* 常驻微动：预警铃铛会摇、工作监控图标会呼吸 */
.nav-item[data-view="alerts"] .nav-ico svg { transform-origin: 50% 6%; }
.nav-item.active[data-view="alerts"] .nav-ico svg { animation: bellSwing 3.8s ease-in-out infinite .6s; }
.nav-item.active[data-view="monitor"] .nav-ico svg { animation: icoBreathe 3.6s ease-in-out infinite; }

/* 图表：提示框 / 图例的过渡（数值格式化在 charts.js 内统一） */
.chart canvas { transition: filter .35s ease; }

/* 无障碍：减少动态效果时图标同样静态 */
@media (prefers-reduced-motion: reduce) {
  .view.active.mo-enter .card-title svg, .view.active.mo-enter .card-title .ico,
  .view.active.mo-enter h3 > .ico, .view.active.mo-enter .stat-card .ico, .view.active.mo-enter .kpi .ico,
  svg.ico-pop, .nav-item.active[data-view="alerts"] .nav-ico svg,
  .nav-item.active[data-view="monitor"] .nav-ico svg { animation: none !important; }
}

/* 成长计划任务列表（套餐与计费页） */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.task-main { flex: 1; min-width: 0; }
.task-name { font-weight: 600; font-size: 13.5px; }
.task-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 720px) {
  .task-row { flex-direction: column; align-items: flex-start; }
  .task-side { align-self: flex-end; }
}

/* ============================================================
   登录页 · 桌面 AI 工作台下载入口 + 详细介绍浮层（2026-09-18 新增）
   配色只沿用既有变量：--primary / --primary-soft / --border / --dark / --shadow
   ============================================================ */

/* 窗口较矮时整页可滚动，避免登录表单与下载卡片被裁掉 */
/* 窗口较矮时整页可滚动，避免登录表单与下载卡片被裁掉。
  同时把 align-items 从 stretch 改成 flex-start：内容比窗口高时顶边不会再被切掉 */
.login-mask { overflow-y: auto; overflow-x: hidden; align-items: flex-start; }

/* 登录表单 + 下载卡片：竖排一列 */
.login-stack { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.login-stack .login-box { max-width: none; }

/* ---------- 下载卡片（登录页） ---------- */
.dl-card {
  border: 1px solid var(--border); background: #fff; border-radius: 16px;
  padding: 14px 14px 12px; box-shadow: var(--shadow);
  animation: riseIn .6s .22s cubic-bezier(.22,.8,.28,1) both;
}
.dl-card-main {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 6px 12px; border-radius: 12px; cursor: pointer;
  transition: background .2s ease;
}
.dl-card-main:hover, .dl-card-main:focus-visible { background: var(--primary-soft); outline: none; }
.dl-card-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  background: #2E2A27; box-shadow: 0 1px 2px rgba(15,23,42,.16);
  transition: transform .25s var(--ease);
}
.dl-card-ico img { width: 100%; height: 100%; display: block; }
.dl-card-main:hover .dl-card-ico { transform: translateY(-1px); }
.dl-card-text { flex: 1 1 auto; min-width: 0; }
.dl-card-title { font-size: 13.5px; font-weight: 800; color: var(--dark); letter-spacing: -.01em; line-height: 1.35; }
.dl-card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.dl-card-arrow { flex: 0 0 auto; display: flex; color: var(--muted); transition: transform .2s var(--ease), color .2s ease; }
.dl-card-arrow svg { width: 18px; height: 18px; }
.dl-card-main:hover .dl-card-arrow { transform: translateX(3px); color: var(--primary); }
.dl-card-actions { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.dl-card-btn { flex: 1 1 0; justify-content: center; padding: 9px 10px; border-radius: 11px; font-size: 13px; }

/* ---------- 详细介绍浮层（2026-10-12 第六十六轮改版） ---------- */
/* 参照 accio.com/work/installGuide 的水准重排：首屏居中大标题 + 彩色概览卡 + 折叠 FAQ。
   配色与节奏仍走我们自己的令牌（暖橙 --primary / 冷灰 --slate），不照抄对方配色。
   注意：本段整体替换了旧版 .dl-* 规则，浮层结构里用到的 .dl-viz / .dlv-* 原样保留。 */
body.dl-lock { overflow: hidden; }
.dl-sheet {
  position: fixed; inset: 0; z-index: 340; display: none; flex-direction: column;
  background: var(--bg); font-family: var(--font); color: var(--dark);
}
.dl-sheet.open { display: flex; animation: maskIn .22s ease; }
.dl-sheet-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 26px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dl-sheet-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dl-brand-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: block;
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.dl-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dl-brand-text b { font-size: 13.5px; font-weight: 800; letter-spacing: .07em; color: var(--dark); }
.dl-brand-text i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.dl-sheet-tools { display: flex; align-items: center; gap: 10px; }
.dl-sheet-close {
  width: 34px; height: 34px; border: 1px solid var(--border); background: #fff; border-radius: 10px;
  color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.dl-sheet-close:hover { background: var(--brand-soft); color: var(--dark); border-color: #D8DDE7; }
.dl-sheet-close:active { transform: scale(.94); }
.dl-sheet-close svg { width: 18px; height: 18px; }
.dl-sheet-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 40px 60px; }
.dl-wrap { max-width: 1060px; margin: 0 auto; }

/* 首屏：居中大标题 */
.dl-hero { position: relative; text-align: center; padding: 64px 0 48px; }
.dl-hero::before {
  content: ""; position: absolute; left: -80px; right: -80px; top: -120px; height: 420px;
  background:
    radial-gradient(46% 92% at 50% 0%, rgba(217,119,87,.11), rgba(217,119,87,0) 72%),
    radial-gradient(38% 80% at 78% 12%, rgba(217,119,87,.055), rgba(217,119,87,0) 70%);
  pointer-events: none; z-index: 0;
}
.dl-hero > * { position: relative; z-index: 1; }
.dl-tag {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--primary-soft); border: 1px solid rgba(217,119,87,.22);
  padding: 5px 13px; border-radius: 999px;
}
.dl-hero-title {
  margin: 20px auto 16px; font-size: 42px; line-height: 1.3;
  font-weight: 800; letter-spacing: -.03em; color: var(--dark);
  max-width: 24em; text-wrap: balance;
}
.dl-hero-title em { font-style: normal; color: var(--primary); }
.dl-hero-desc { margin: 0 auto; font-size: 15px; line-height: 2; color: var(--slate); max-width: 60ch; }
.dl-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dl-btn-lg { padding: 12px 24px; border-radius: 12px; font-size: 14px; }
.dl-hero-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.dl-ver-chip { color: var(--slate); }
.dl-hero-stats { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.dl-stat { padding: 0 26px; border-left: 1px solid var(--border); }
.dl-stat:first-child { border-left: 0; }
.dl-stat b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.03em; color: var(--dark); }
.dl-stat span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }

/* 概览卡组（左侧高卡 + 右侧三卡） */
.dl-bento { display: grid; grid-template-columns: 1.06fr 1fr 1fr; gap: 16px; margin-top: 46px; }
.dl-bcard {
  border-radius: 22px; padding: 30px 30px 26px; border: 1px solid transparent;
  display: flex; flex-direction: column; min-width: 0;
}
.dl-bcard h3 { margin: 0; font-size: 21px; line-height: 1.42; font-weight: 800; letter-spacing: -.024em; }
.dl-bcard p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.9; }
.dl-bcard.is-a { background: #F3F1EE; border-color: #E7E3DE; grid-row: 1 / span 2; }
.dl-bcard.is-a p { color: var(--slate); }
.dl-bcard.is-b { background: #16130F; border-color: #16130F; color: #F6F4F2; }
.dl-bcard.is-b h3 { color: #FFFFFF; }
.dl-bcard.is-b p { color: #A7A19B; }
.dl-bcard.is-c { background: #FBEDE5; border-color: #F1DACD; }
.dl-bcard.is-c p { color: #7B6255; }
.dl-bcard.is-d { background: #E9EEF6; border-color: #DBE4F0; grid-column: 2 / span 2; }
.dl-bcard.is-d p { color: #576273; }
.dl-bcard-foot { margin-top: auto; padding-top: 24px; }

/* 卡1：团队分工示意 */
.dl-mock { background: #fff; border: 1px solid #E7E3DE; border-radius: 16px; padding: 15px 15px 13px; box-shadow: 0 8px 22px rgba(15,23,42,.06); }
.dl-mock-tag { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.dl-mock-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(217,119,87,.16); }
.dl-mock-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.dl-mock-av {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800;
}
.dl-mock-row b { display: block; font-size: 12.5px; font-weight: 700; color: var(--dark); }
.dl-mock-bubble { margin-top: 6px; background: #F4F5F7; border-radius: 10px; padding: 7px 11px; font-size: 11.5px; line-height: 1.7; color: var(--slate); }

/* 卡2：后台图标矩阵 */
.dl-apps { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.dl-app {
  width: 54px; height: 54px; border-radius: 15px; font-size: 11px; font-weight: 700; color: #EFEBE8;
  background: rgba(255,255,255,.085); border: 1px solid rgba(255,255,255,.11);
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25;
}
.dl-app.is-on { background: rgba(217,119,87,.20); border-color: rgba(217,119,87,.42); color: #FFE9DF; }

/* 卡3：数据自主权 */
.dl-shield { margin-top: auto; padding-top: 26px; display: flex; justify-content: flex-end; }
.dl-shield svg { width: 62px; height: 62px; }

/* 卡4：斜叠成品卡 */
.dl-stack { margin-top: auto; padding-top: 26px; display: flex; gap: 12px; align-items: flex-end; }
.dl-stack-card {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid #DCE4F0; border-radius: 13px;
  padding: 13px 13px 12px; box-shadow: 0 10px 24px rgba(15,23,42,.10);
  font-size: 12px; font-weight: 700; color: var(--dark); line-height: 1.4;
}
.dl-stack-card i { display: block; margin-top: 5px; font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }
.dl-stack-card:nth-child(1) { transform: rotate(-2.4deg); }
.dl-stack-card:nth-child(2) { transform: rotate(.8deg); }
.dl-stack-card:nth-child(3) { transform: rotate(2.6deg); }

/* 分节 */
.dl-sec { padding: 52px 0 24px; }
.dl-sec + .dl-sec { border-top: 1px solid var(--border); }
.dl-sec-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--dark); }
.dl-sec-desc { margin: 12px 0 0; font-size: 13.5px; line-height: 1.95; color: var(--slate); max-width: 76ch; }

/* 能力卡 */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.dl-fcard {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px;
  box-shadow: var(--shadow);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
}
.dl-fcard:hover { transform: translateY(-3px); border-color: rgba(217,119,87,.34); box-shadow: 0 2px 6px rgba(15,23,42,.05), 0 18px 40px rgba(15,23,42,.09); }
.dl-fcard-ico {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
}
.dl-fcard-ico svg { width: 19px; height: 19px; }
.dl-fcard h4 { margin: 0 0 9px; font-size: 15px; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
.dl-fcard p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--slate); }
.dl-more-line { margin-top: 22px; font-size: 12.5px; line-height: 1.85; color: var(--muted); }

/* 步骤 */
.dl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.dl-steps.is-3 { grid-template-columns: repeat(3, 1fr); }
.dl-step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 20px; box-shadow: var(--shadow); }
.dl-step-n { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; color: var(--primary); }
.dl-step h4 { margin: 10px 0 7px; font-size: 14.5px; font-weight: 700; color: var(--dark); }
.dl-step p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--muted); }

/* 运行环境 */
.dl-req {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 26px 0 4px;
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 14px; padding: 16px 20px; font-size: 13px; color: var(--slate);
}
.dl-req b { color: var(--dark); font-weight: 700; margin-right: 6px; }

/* 折叠 FAQ（照 accio 那条「安装遇到问题」的位置与形态） */
.dl-faq { margin-top: 56px; }
.dl-faq-head { text-align: center; font-size: 13px; color: var(--muted); }
.dl-faq-head b { color: var(--dark); font-weight: 700; }
.dl-faq-list { max-width: 760px; margin: 18px auto 0; }
.dl-faq-item { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.dl-faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 20px; font-size: 13.5px; font-weight: 650; color: var(--dark);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  transition: background .18s ease;
}
.dl-faq-item summary::-webkit-details-marker { display: none; }
.dl-faq-item summary:hover { background: #FBFBFC; }
.dl-faq-item summary svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--muted); transition: transform .22s var(--ease); }
.dl-faq-item[open] summary svg { transform: rotate(180deg); }
.dl-faq-item[open] summary { border-bottom: 1px solid var(--border); }
.dl-faq-body { padding: 14px 20px 18px; font-size: 13px; line-height: 2; color: var(--slate); }
.dl-faq-body b { color: var(--dark); font-weight: 700; }
.dl-faq-body code {
  font-family: Consolas, "Courier New", monospace; font-size: 12px;
  background: var(--brand-soft); border-radius: 6px; padding: 1px 6px; color: #3C4557;
}

/* 底部行动条 */
.dl-cta {
  margin-top: 48px; padding: 34px 36px; border-radius: 20px;
  background: linear-gradient(135deg, #FBF0EA 0%, #FDF8F4 58%, #FFFFFF 100%);
  border: 1px solid rgba(217,119,87,.22);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dl-cta h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.018em; color: var(--dark); }
.dl-cta p { margin: 9px 0 0; font-size: 13px; line-height: 1.85; color: var(--slate); max-width: 62ch; }
.dl-sheet-foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 40px; border-top: 1px solid var(--border); background: #fff;
  font-size: 12px; color: var(--muted);
}
.dl-sheet-foot b { font-weight: 600; color: var(--slate); }

/* 登录页：矮窗口（1366×768 这类）压缩纵向留白，保证登录按钮与下载卡片都在首屏 */
@media (max-height: 820px) {
  .login-panel { padding: 22px 32px; }
  .login-box .login-logo { height: 34px; margin: 0 0 14px; }
  .login-title { font-size: 19px; margin-bottom: 16px; }
  .login-box .field { margin-bottom: 10px; }
  .login-box .field label { margin-bottom: 4px; }
  .login-foot { margin-top: 12px; }
  .dl-card { padding: 12px 12px 10px; }
  .dl-card-main { padding: 2px 6px 10px; }
  .dl-card-actions { padding-top: 10px; }
  .dl-card-btn { padding: 8px 10px; }
  .dl-hero { padding: 38px 0 30px; }
  .dl-hero-title { font-size: 33px; margin: 16px auto 13px; }
  .dl-hero-stats { margin-top: 24px; }
  .dl-sec { padding: 34px 0 16px; }
  .dl-bento { margin-top: 30px; }
  .dl-cta { padding: 28px 30px; margin-top: 34px; }
  .dl-sheet-body { padding-bottom: 40px; }
}

/* 中屏：概览卡组两列 */
@media (max-width: 1080px) {
  .dl-bento { grid-template-columns: 1fr 1fr; }
  /* 首屏光晕左右外扩要收窄：不收会撑出横向溢出（实测 430 宽时多 62px） */
  .dl-hero::before { left: -24px; right: -24px; }
  .dl-bcard.is-a { grid-row: auto; grid-column: 1 / -1; }
  .dl-bcard.is-d { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .dl-sheet-body { padding: 0 26px 52px; }
  .dl-hero { padding: 48px 0 36px; }
  .dl-hero-title { font-size: 33px; }
  .dl-grid { grid-template-columns: 1fr 1fr; }
  .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
  .dl-sheet-bar { padding: 10px 16px; }
  .dl-sheet-body { padding: 0 18px 42px; }
  .dl-sheet-foot { padding: 14px 18px; }
  .dl-hero { padding: 34px 0 26px; }
  .dl-hero-title { font-size: 26px; letter-spacing: -.02em; }
  .dl-hero::before { left: 0; right: 0; top: -70px; height: 320px; }
  .dl-hero-title { max-width: none; }
  .dl-hero-desc { font-size: 13.5px; }
  .dl-btn-lg { width: 100%; justify-content: center; }
  .dl-hero-stats { margin-top: 26px; }
  /* 窄屏四项排成 2×2，避免第四项孤零零挂在下一行 */
  .dl-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; width: 100%; max-width: 320px; margin: 26px auto 0; }
  .dl-stat { padding: 0 12px; border-left: 0; }
  .dl-stat:nth-child(even) { border-left: 1px solid var(--border); }
  .dl-stat b { font-size: 19px; }
  .dl-bento { grid-template-columns: 1fr; margin-top: 30px; }
  .dl-bcard { padding: 24px 22px 22px; border-radius: 18px; }
  .dl-bcard h3 { font-size: 18px; }
  .dl-stack { gap: 8px; }
  .dl-sec { padding: 38px 0 18px; }
  .dl-grid, .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr; }
  .dl-faq { margin-top: 38px; }
  .dl-cta { padding: 26px 20px; margin-top: 38px; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
  .dl-brand-text b { letter-spacing: .05em; }
}

/* ===== 介绍浮层 · 配图：团队编排与一个窗口（2026-09-18 第六轮） ===== */
.dl-viz {
  margin: 26px 0 0;
  padding: 26px 26px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #FBFCFD 0%, #F6F7F9 100%);
}
.dl-viz svg { display: block; width: 100%; height: auto; }
.dl-viz figcaption {
  margin: 16px 2px 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--muted);
}
.dl-viz-scroll { overflow: visible; }

/* —— 图一：团队编排（inline SVG） —— */
.dlv-card { fill: #fff; stroke: var(--border); stroke-width: 1.4; }
.dlv-wire { fill: none; stroke: rgba(217,119,87,.44); stroke-width: 1.6; stroke-dasharray: 5 7; stroke-linecap: round; }
.dlv-name { font-size: 14.5px; font-weight: 700; fill: #0F172A; }
.dlv-sub { font-size: 12.5px; fill: #8A93A4; }
.dlv-out { font-size: 16px; font-weight: 700; fill: #0F172A; text-anchor: middle; }
.dlv-subm { font-size: 12.5px; fill: #8A93A4; text-anchor: middle; }
.dlv-bar {
  stroke: #D97757;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: dlvFill 6.6s cubic-bezier(.22,.8,.28,1) infinite;
}
@keyframes dlvFill {
  0%   { stroke-dashoffset: 170; }
  38%  { stroke-dashoffset: 0; }
  72%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 170; }
}

/* —— 图一的窄屏版：竖版流程 —— */
.dlv-flow { display: none; }
.dlv-fw { max-width: 420px; margin: 0 auto; }
.dlv-fcard { padding: 13px 15px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.dlv-fcard + .dlv-fcard { margin-top: 9px; }
.dlv-fcard b { display: block; font-size: 13.5px; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
.dlv-fcard span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.75; color: var(--muted); }
.dlv-fcard.is-goal { border-color: rgba(217,119,87,.36); background: #FFFDFC; }
.dlv-fcard.is-goal b { color: var(--primary-hover); }
.dlv-fcard.is-out { background: #FBFCFD; }
.dlv-agent { padding: 0; }
.dlv-fbar { display: block; height: 3px; margin-top: 11px; border-radius: 2px; background: #D97757; opacity: .85; }
.dlv-fline { width: 1px; height: 16px; margin: 0 auto; border-left: 1px dashed rgba(217,119,87,.5); }

/* —— 图二：一个窗口（HTML/CSS 画的窗口示意） —— */
.dlv-win {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 44px rgba(15,23,42,.07);
  overflow: hidden;
}
.dlv-win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #FCFCFD;
}
.dlv-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E3E7EE; }
.dlv-win-bar span { margin-left: 10px; font-size: 12px; color: var(--muted); }
.dlv-win-body { display: grid; grid-template-columns: 1fr 1.15fr; }
.dlv-col { padding: 18px 20px 20px; }
.dlv-col-task { background: #FCFCFD; border-right: 1px solid var(--border); }
.dlv-col-t { margin-bottom: 10px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.dlv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(15,23,42,.06);
}
.dlv-row:last-child { border-bottom: 0; }
.dlv-row b { font-size: 13px; font-weight: 600; color: var(--dark); }
.dlv-row em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
.dlv-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #E3E7EE; }
.dlv-dot.is-ok { background: #047857; }
.dlv-dot.is-run { background: #D97757; box-shadow: 0 0 0 4px rgba(217,119,87,.13); animation: dlvPulse 2.8s cubic-bezier(.22,.8,.28,1) infinite; }
@keyframes dlvPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,119,87,.10); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,87,.18); }
}
.dlv-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.dlv-tabs span { padding: 5px 11px; border-radius: 8px; font-size: 11.5px; color: var(--muted); background: #F2F4F7; }
.dlv-tabs span.is-on { background: var(--primary-soft); color: var(--primary-hover); font-weight: 600; }
.dlv-paper { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.dlv-paper .dlv-line { height: 8px; margin-bottom: 9px; border-radius: 4px; background: #EEF1F5; }
.dlv-paper .dlv-line.is-title { width: 54%; height: 12px; background: #E3E7EE; }
.dlv-paper .dlv-line.is-short { width: 62%; }
.dlv-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 64px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15,23,42,.07);
}
.dlv-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, rgba(217,119,87,.86), rgba(217,119,87,.40)); }

@media (prefers-reduced-motion: reduce) {
  .dlv-bar { animation: none; stroke-dashoffset: 0; }
  .dlv-dot.is-run { animation: none; }
}

@media (max-height: 820px) {
  .dl-viz { margin-top: 20px; padding: 20px 20px 16px; }
  .dl-viz figcaption { margin-top: 12px; }
}

@media (max-width: 1000px) {
  .dl-viz { padding: 20px 20px 16px; }
}

/* 窄屏：图一换成竖版流程，避免横向滚动条 */
@media (max-width: 860px) {
  .dl-viz-scroll { display: none; }
  .dlv-flow { display: block; }
  .dlv-win-body { grid-template-columns: 1fr; }
  .dlv-col-task { border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 660px) {
  .dl-viz { margin-top: 18px; padding: 14px 12px 12px; border-radius: 16px; }
  .dlv-win { border-radius: 14px; }
  .dlv-col { padding: 15px 16px 16px; }
  .dlv-fw { max-width: none; }
  .dlv-flow .dlv-fbar { display: none; }
}

/* ===== 账号胶囊 + 切换登录菜单（2026-09-18 第七轮） ===== */
.user-area { position: relative; }
.user-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--dark); cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease);
}
.user-chip:hover { border-color: rgba(217,119,87,.45); background: #FFFDFC; }
.user-chip[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,119,87,.12); }
.user-avatar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #F3E2DA, #FBF0EA);
  color: var(--primary-hover); font-size: 13px; font-weight: 700;
}
.user-avatar.is-lg { width: 38px; height: 38px; border-radius: 12px; font-size: 16px; }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.user-meta b { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.user-meta i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.user-caret { width: 15px; height: 15px; color: #B4BBC7; transition: transform .2s var(--ease); }
.user-area.is-open .user-caret { transform: rotate(180deg); }
.user-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 264px; padding: 8px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--card);
  box-shadow: 0 18px 44px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.05);
  animation: umIn .18s var(--ease) both;
}
.user-menu[hidden] { display: none; }
@keyframes umIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.user-menu-head {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.user-menu-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-menu-who b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.user-menu-who i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.user-menu-item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px; border: 0; border-radius: 11px; background: transparent;
  color: var(--dark); text-align: left; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.user-menu-item:hover { background: #F6F7F9; }
.user-menu-item .ico { flex: 0 0 auto; width: 17px; height: 17px; color: #9AA3B2; }
.user-menu-item:hover .ico { color: var(--primary); }
.user-menu-text { display: flex; flex-direction: column; gap: 2px; }
.user-menu-text b { font-size: 13px; font-weight: 650; }
.user-menu-text i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.user-menu-item.is-danger .ico { color: #C9CFD9; }
.user-menu-item.is-danger:hover { background: var(--red-soft); }
.user-menu-item.is-danger:hover .ico,
.user-menu-item.is-danger:hover .user-menu-text b { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .user-menu { animation: none; }
}

@media (max-height: 820px) {
  .user-menu { top: calc(100% + 8px); }
  .dl-viz { margin-top: 20px; padding: 20px 20px 16px; }
  .dl-viz figcaption { margin-top: 12px; }
}

@media (max-width: 1000px) {
  .user-meta i { display: none; }
  .dl-viz { padding: 20px 20px 16px; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
}

@media (max-width: 860px) {
  .dl-viz-scroll { display: none; }
  .dlv-flow { display: block; }
  .dlv-win-body { grid-template-columns: 1fr; }
  .dlv-col-task { border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 660px) {
  .user-chip { padding: 6px 8px 6px 6px; }
  .user-meta { display: none; }
  .user-menu { right: -6px; min-width: 236px; }
  .dl-viz { margin-top: 18px; padding: 14px 12px 12px; border-radius: 16px; }
  .dlv-win { border-radius: 14px; }
  .dlv-col { padding: 15px 16px 16px; }
  .dlv-fw { max-width: none; }
  .dlv-flow .dlv-fbar { display: none; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== 套餐与计费改版（1.9.159） ===== */
.bl-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.35fr 1fr;gap:22px;
  background:linear-gradient(135deg,#1B2436 0%,#0F172A 58%,#2A2018 100%);
  color:#fff;border-radius:18px;padding:26px 28px;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 18px 44px rgba(15,23,42,.16);}
.bl-hero::after{content:"";position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(217,119,87,.5),rgba(217,119,87,0) 62%);pointer-events:none;}
.bl-hero-main{position:relative;z-index:1;min-width:0;}
.bl-hero-eyebrow{font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55);}
.bl-hero-plan{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:8px 0 6px;line-height:1.15;}
.bl-hero-sub{font-size:13px;color:rgba(255,255,255,.66);}
.bl-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.bl-cta{border:0;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:700;
  padding:10px 18px;border-radius:11px;background:var(--primary);color:#fff;
  transition:transform .16s var(--ease),background .16s var(--ease);box-shadow:0 6px 18px rgba(217,119,87,.34);}
.bl-cta:hover{background:var(--primary-hover);transform:translateY(-1px);}
.bl-cta.is-ghost{background:rgba(255,255,255,.12);box-shadow:none;color:#fff;}
.bl-cta.is-ghost:hover{background:rgba(255,255,255,.2);}
.bl-cta.is-line{background:transparent;border:1px solid rgba(255,255,255,.28);box-shadow:none;}
.bl-cta.is-line:hover{background:rgba(255,255,255,.1);}
.bl-hero-stats{position:relative;z-index:1;display:grid;gap:10px;align-content:start;}
.bl-mini{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;}
.bl-mini b{display:block;font-size:24px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.bl-mini span{display:block;font-size:12px;color:rgba(255,255,255,.62);margin-top:2px;}
.bl-mini i{display:block;font-size:11px;font-style:normal;color:rgba(255,255,255,.45);margin-top:6px;}
.bl-sec{border-radius:18px;}
.bl-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.bl-sec-title{font-size:17px;font-weight:800;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;}
.bl-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--primary-soft);color:var(--primary);}
.bl-chip.is-quiet{background:var(--brand-soft);color:var(--slate);}
.bl-sec-sub{font-size:12px;color:var(--muted);margin-top:5px;max-width:620px;line-height:1.6;}
.bl-rate{font-size:12px;font-weight:700;color:var(--primary);background:var(--primary-soft);border-radius:20px;padding:5px 12px;white-space:nowrap;}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;}
.bl-tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:20px 18px 18px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);}
.bl-tier:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,23,42,.04),0 18px 36px rgba(15,23,42,.1);}
.bl-tier.is-first{border-color:rgba(217,119,87,.45);box-shadow:0 2px 4px rgba(15,23,42,.04),0 14px 30px rgba(217,119,87,.13);}
.bl-tier.is-hot{border-color:var(--primary);background:linear-gradient(180deg,#FFF8F4 0%,#fff 42%);}
.bl-badge{position:absolute;top:-10px;left:18px;background:var(--primary);color:#fff;font-size:11px;font-weight:800;
  padding:4px 11px;border-radius:20px;box-shadow:0 6px 16px rgba(217,119,87,.34);}
.bl-tier-head{display:flex;align-items:center;gap:8px;}
.bl-tier-name{font-size:14px;font-weight:700;color:var(--dark);}
.bl-tier-price{font-size:32px;font-weight:800;color:var(--dark);letter-spacing:-1px;line-height:1.05;margin:10px 0 4px;}
.bl-tier-price em{font-style:normal;font-size:16px;font-weight:700;margin-right:2px;}
.bl-tier-price span{font-size:12px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0;}
.bl-tier-points{font-size:15px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;}
.bl-tier-points i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);margin-left:4px;}
.bl-tier-desc{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 16px;flex:1;}
.bl-tier-cta{margin-top:auto;width:100%;border:1px solid var(--primary);background:var(--primary);color:#fff;
  font-family:var(--font);font-size:13px;font-weight:700;padding:10px 14px;border-radius:11px;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease);}
.bl-tier-cta:hover{background:var(--primary-hover);border-color:var(--primary-hover);}
.bl-tier-cta.is-ghost{background:transparent;color:var(--primary);}
.bl-tier-cta.is-ghost:hover{background:var(--primary-soft);}
.bl-foot{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6;}
.bl-topup-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.bl-top{display:flex;flex-direction:column;gap:2px;align-items:flex-start;cursor:pointer;text-align:left;background:#fff;
  border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-family:var(--font);
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);}
.bl-top:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 12px 26px rgba(217,119,87,.14);}
.bl-top b{font-size:22px;font-weight:800;color:var(--dark);letter-spacing:-.5px;}
.bl-top span{font-size:12px;font-weight:700;color:var(--primary);}
.bl-top i{font-style:normal;font-size:11px;color:var(--muted);margin-top:4px;}
.bl-topup-custom{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;}
.bl-topup-custom .search-input{width:200px;}
.bl-topup-custom .bl-tier-cta{width:auto;margin-top:0;padding:9px 20px;}
.bl-record{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:960px){
  .bl-hero{grid-template-columns:1fr;padding:22px;}
  .bl-hero-plan{font-size:25px;}
  .bl-record{grid-template-columns:1fr;}
}
/* 第31轮精修：信息密度 + 品牌质感 + 可访问性 */
.bl-mini b em{font-style:normal;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);}
.bl-tier-price{font-variant-numeric:tabular-nums;}
.bl-tier-rate{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--slate);
  background:var(--brand-soft);border-radius:8px;padding:3px 9px;margin:9px 0 0;font-variant-numeric:tabular-nums;}
.bl-badge{letter-spacing:.02em;}
.bl-cta:focus-visible,.bl-tier-cta:focus-visible,.bl-top:focus-visible,.bl-topup-custom .search-input:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;}
.bl-tier-cta{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   第32轮：套餐与计费整页重做（高级质感 + 动效）
   —— 只加样式，不动任何 id / 接口；动效全部走 transform / opacity，
      并统一尊重 prefers-reduced-motion，不引入任何依赖。
   ========================================================================== */
@keyframes blUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes blFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-16px,20px,0) scale(1.06)}}
@keyframes blBreath{0%,100%{box-shadow:0 6px 16px rgba(217,119,87,.28)}50%{box-shadow:0 10px 26px rgba(217,119,87,.48)}}
.bl-reveal{animation:blUp .5s var(--ease) both}

/* —— 概览卡 —— */
.bl-hero{border-radius:20px;padding:30px 32px;gap:26px;background:
  radial-gradient(120% 130% at 102% -10%,rgba(217,119,87,.30),transparent 56%),
  linear-gradient(135deg,#1B2436 0%,#0F172A 56%,#241C17 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 26px 60px rgba(15,23,42,.20);}
.bl-hero-glow{position:absolute;right:-90px;top:-130px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(217,119,87,.42),rgba(217,119,87,0) 62%);animation:blFloat 9s ease-in-out infinite;}
.bl-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.5);}
.bl-hero-plan{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:10px 0 8px;}
.bl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#94A3B8;margin-right:7px;vertical-align:middle;}
.bl-dot.is-on{background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18);}
.bl-hero-sub{display:flex;align-items:center;font-size:13px;color:rgba(255,255,255,.66);}
.bl-mini{border-radius:16px;padding:15px 18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease);}
.bl-mini:hover{transform:translateY(-2px);background:rgba(255,255,255,.105);border-color:rgba(255,255,255,.18);}
.bl-mini b{font-size:26px;}
.bl-cta{position:relative;overflow:hidden;padding:11px 20px;border-radius:12px;}
.bl-cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);
  transition:left .55s var(--ease);}
.bl-cta:hover::after{left:130%;}

/* —— 分段切换（滑动脉丸） —— */
.bl-tabs{position:relative;display:inline-flex;gap:2px;padding:6px;margin:2px 0 16px;background:#fff;
  border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px rgba(15,23,42,.06);}
.bl-tab{position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:0;background:transparent;cursor:pointer;font-family:var(--font);font-size:13.5px;font-weight:700;
  color:var(--slate);padding:9px 18px;border-radius:11px;white-space:nowrap;transition:color .22s var(--ease);}
.bl-tab em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);transition:color .22s var(--ease);}
.bl-tab:hover:not(.is-on){color:var(--primary);}
.bl-tab.is-on{color:#fff;}
.bl-tab.is-on em{color:rgba(255,255,255,.72);}
.bl-tab-pill{position:absolute;left:0;top:6px;bottom:6px;width:0;border-radius:11px;z-index:0;
  background:linear-gradient(135deg,#25314A,#0F172A);box-shadow:0 10px 22px rgba(15,23,42,.24);
  transition:transform .36s var(--ease),width .36s var(--ease);}
.bl-panel{display:none;}
.bl-panel.is-on{display:block;animation:blUp .36s var(--ease) both;}

/* —— 套餐卡 —— */
.bl-sec{border-radius:18px;}
.bl-sec-head{margin-bottom:16px;}
.bl-sec-title{font-size:17.5px;}
.bl-tier{border-radius:18px;padding:22px 20px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04);
  animation:blUp .45s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms);}
.bl-tier::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 100% 0%,rgba(217,119,87,.12),transparent 58%);
  transition:opacity .26s var(--ease);}
.bl-tier:hover::after{opacity:1;}
.bl-tier:hover{transform:translateY(-4px);border-color:rgba(217,119,87,.45);
  box-shadow:0 3px 6px rgba(15,23,42,.05),0 22px 44px rgba(15,23,42,.12);}
.bl-tier.is-hot{background:linear-gradient(180deg,#FFF7F2 0%,#fff 46%);}
.bl-badge{top:-11px;padding:5px 12px;font-size:11px;animation:blBreath 2.8s ease-in-out infinite;}
.bl-tier-head{justify-content:space-between;}
.bl-tier-head .bl-tier-rate{margin:0;font-size:11px;padding:3px 8px;}
.bl-price{display:flex;align-items:baseline;font-variant-numeric:tabular-nums;margin:13px 0 6px;letter-spacing:-.03em;}
.bl-price b{font-size:42px;font-weight:800;line-height:1;color:var(--dark);}
.bl-price .bl-cur{font-size:18px;font-weight:700;color:var(--dark);margin-right:2px;}
.bl-price .bl-per{font-size:12px;font-weight:600;color:var(--muted);margin-left:7px;letter-spacing:0;}
.bl-tier-points{font-size:15px;}
.bl-feats{list-style:none;margin:13px 0 18px;padding:0;display:grid;gap:7px;flex:1;}
.bl-feats li{position:relative;padding-left:21px;font-size:12.5px;color:var(--slate);line-height:1.55;}
.bl-feats li::before{content:"";position:absolute;left:2px;top:5px;width:11px;height:6px;
  border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg);border-radius:1px;}
.bl-tier-cta{position:relative;overflow:hidden;margin-top:auto;padding:12px 14px;border-radius:12px;font-size:13.5px;
  box-shadow:0 8px 20px rgba(217,119,87,.20);}
.bl-tier-cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);
  transition:left .55s var(--ease);}
.bl-tier-cta:hover::after{left:130%;}
.bl-tier-cta.is-ghost{box-shadow:none;}
.bl-top{border-radius:16px;padding:16px 18px;}
.bl-top:hover{transform:translateY(-3px);}

/* —— 常见问题（纯 <details>，零 JS） —— */
.bl-faq-wrap{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px 24px;
  margin-bottom:16px;box-shadow:var(--shadow);}
.bl-faq-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.bl-faq-head h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;}
.bl-faq-head p{font-size:12px;color:var(--muted);margin:0;}
.bl-faq details{border-top:1px solid var(--border);}
.bl-faq details:first-child{border-top:0;}
.bl-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 2px;font-size:13.5px;font-weight:700;color:var(--dark);transition:color .2s var(--ease);}
.bl-faq summary:hover{color:var(--primary);}
.bl-faq summary::-webkit-details-marker{display:none;}
.bl-faq-plus{position:relative;width:12px;height:12px;flex:0 0 12px;}
.bl-faq-plus::before,.bl-faq-plus::after{content:"";position:absolute;background:var(--primary);border-radius:2px;
  transition:transform .28s var(--ease),opacity .28s var(--ease);}
.bl-faq-plus::before{left:0;top:5px;width:12px;height:2px;}
.bl-faq-plus::after{left:5px;top:0;width:2px;height:12px;}
.bl-faq details[open] .bl-faq-plus::after{transform:rotate(90deg);opacity:0;}
.bl-faq details p{font-size:13px;color:var(--slate);line-height:1.75;margin:0;padding:0 2px 15px;}
.bl-faq details[open] p{animation:blUp .3s var(--ease) both;}

@media (max-width:960px){
  .bl-hero{padding:24px;}
  .bl-hero-plan{font-size:27px;}
  .bl-price b{font-size:36px;}
  .bl-tabs{display:flex;width:100%;}
  .bl-tab{flex:1;align-items:center;padding:8px 10px;}
}
@media (prefers-reduced-motion:reduce){
  .bl-reveal,.bl-panel.is-on,.bl-tier,.bl-hero-glow,.bl-badge,.bl-faq details[open] p{animation:none !important;}
  .bl-tab-pill,.bl-tier,.bl-mini,.bl-cta::after,.bl-tier-cta::after{transition:none !important;}
  .bl-tier:hover{transform:none;}
}

/* 窄屏导航：把 224px 纵向侧栏收成顶部单行横向导航，避免挤压业务页面。 */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden;}
  .layout{display:block;min-height:100vh;}
  .sidebar{position:sticky;top:0;z-index:120;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--border);}
  .sidebar .logo,.sidebar .sidebar-foot{display:none;}
  .sidebar .nav{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .sidebar .nav::-webkit-scrollbar{display:none;}
  .sidebar .nav > *, .sidebar .nav-group{display:contents;}
  .sidebar .nav-group-head{display:none;}
  .sidebar .nav-group-body{display:contents !important;max-height:none !important;opacity:1 !important;overflow:visible !important;}
  .sidebar .nav-item{flex:0 0 auto;margin:0;padding:8px 10px;white-space:nowrap;font-size:13px;}
  .sidebar .nav-ico{width:18px;flex:0 0 18px;}
  .main{width:100%;padding:16px 12px 34px;}
  .topbar{gap:10px;margin-bottom:14px;}
  .topbar h1{font-size:21px;}
  .topbar-actions{width:100%;gap:8px;}
  .topbar-actions .btn{min-height:38px;}
  #syncPill{right:10px !important;bottom:10px !important;max-width:calc(100vw - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}