/* ===== 基础 ===== */
* { 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:#1d4ed8; 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 .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 34px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
  transition: transform .25s var(--ease);
}
.dl-card-ico svg { width: 18px; height: 18px; }
.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: 14px; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
.dl-card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.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; }

/* ---------- 详细介绍浮层 ---------- */
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: 13px 26px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dl-sheet-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-sheet-brand img { height: 28px; width: auto; display: block; }
.dl-sheet-brand i { width: 1px; height: 18px; background: var(--border); display: block; }
.dl-sheet-brand b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.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 26px 44px; }
.dl-wrap { max-width: 1020px; margin: 0 auto; }

/* 首屏 */
.dl-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: center; padding: 54px 0 34px; }
.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 12px; border-radius: 999px;
}
.dl-hero-title { margin: 18px 0 14px; font-size: 34px; line-height: 1.32; font-weight: 800; letter-spacing: -.022em; color: var(--dark); }
.dl-hero-desc { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--slate); max-width: 60ch; }
.dl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dl-btn-lg { padding: 11px 22px; border-radius: 12px; font-size: 14px; }
.dl-hero-note { margin-top: 15px; font-size: 12.5px; color: var(--muted); }
.dl-ver-chip { color: var(--slate); }
.dl-hero-side { display: flex; flex-direction: column; gap: 12px; }
.dl-hero-item {
  display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--border); border-radius: 16px; padding: 15px 18px; box-shadow: var(--shadow);
}
.dl-hero-item i { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(217,119,87,.14); }
.dl-hero-item b { display: block; font-size: 13.5px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.dl-hero-item span { font-size: 12.5px; line-height: 1.75; color: var(--muted); }

/* 分节 */
.dl-sec { padding: 34px 0 8px; }
.dl-sec + .dl-sec { border-top: 1px solid var(--border); }
.dl-sec-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.018em; color: var(--dark); }
.dl-sec-desc { margin: 10px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--slate); max-width: 76ch; }

/* 能力卡 */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.dl-fcard {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px;
  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 8px; font-size: 15px; font-weight: 700; color: var(--dark); letter-spacing: -.01em; }
.dl-fcard p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--slate); }
.dl-more-line { margin-top: 16px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* 步骤 */
.dl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.dl-steps.is-3 { grid-template-columns: repeat(3, 1fr); }
.dl-step { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px; 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.8; color: var(--muted); }

/* 运行环境 */
.dl-req {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 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; }

/* 底部行动条 */
.dl-cta {
  margin-top: 30px; padding: 30px 28px; 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: 22px; 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.8; 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: 14px 26px; 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; }
}

/* 小屏 */
@media (max-width: 1000px) {
  .dl-hero { grid-template-columns: 1fr; gap: 24px; padding: 34px 0 26px; }
  .dl-hero-title { font-size: 27px; }
  .dl-grid { grid-template-columns: 1fr 1fr; }
  .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .login-stack { max-width: 400px; }
}
@media (max-width: 660px) {
  .dl-sheet-bar { padding: 12px 16px; }
  .dl-sheet-body { padding: 0 16px 34px; }
  .dl-sheet-foot { padding: 12px 16px; }
  .dl-grid, .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr; }
  .dl-hero-title { font-size: 22px; }
  .dl-btn-lg { width: 100%; justify-content: center; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== 介绍浮层 · 留白与节奏（2026-09-18 第三轮） ===== */
/* 诉求：排版更松弛，接近产品概览页那种疏朗感。
   这一段在文件最末，会盖住前面的同名规则，所以紧接着把矮窗 / 窄屏的重排再写一遍。 */
.dl-sheet-body { padding: 0 40px 76px; }
.dl-wrap { max-width: 1080px; }

.dl-hero { grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: center; padding: 82px 0 62px; }
.dl-hero-title { margin: 24px 0 20px; font-size: 38px; line-height: 1.44; letter-spacing: -.026em; }
.dl-hero-desc { font-size: 15px; line-height: 2.1; max-width: 42ch; }
.dl-hero-actions { gap: 14px; margin-top: 36px; }
.dl-btn-lg { padding: 12px 26px; font-size: 14px; }
.dl-hero-note { margin-top: 22px; }
.dl-hero-side { gap: 18px; }
.dl-hero-item { padding: 19px 22px; }
.dl-hero-item b { margin-bottom: 6px; }
.dl-hero-item span { line-height: 1.95; }

.dl-sec { padding: 64px 0 34px; }
.dl-sec-title { font-size: 22px; letter-spacing: -.02em; }
.dl-sec-desc { margin-top: 16px; line-height: 2.05; }
.dl-grid { gap: 18px; margin-top: 36px; }
.dl-fcard { padding: 30px 26px; }
.dl-fcard h4 { margin: 0 0 12px; }
.dl-fcard p { line-height: 2.05; }
.dl-more-line { margin-top: 28px; }
.dl-steps { gap: 18px; margin-top: 36px; }
.dl-step { padding: 27px 24px; }
.dl-step h4 { margin: 12px 0 9px; }
.dl-step p { line-height: 2; }
.dl-req { margin: 34px 0 6px; padding: 18px 22px; }
.dl-cta { margin-top: 70px; padding: 46px 50px; gap: 30px; }
.dl-cta p { margin-top: 12px; }
.dl-sheet-foot { padding: 18px 40px; }

@media (max-height: 820px) {
  .dl-hero { padding: 42px 0 28px; gap: 32px; }
  .dl-hero-title { font-size: 30px; margin: 16px 0 13px; }
  .dl-sec { padding: 36px 0 18px; }
  .dl-sheet-body { padding-bottom: 42px; }
  .dl-cta { padding: 30px 34px; margin-top: 42px; }
}

@media (max-width: 1000px) {
  .dl-hero { grid-template-columns: 1fr; gap: 34px; padding: 50px 0 36px; }
  .dl-hero-title { font-size: 29px; }
  .dl-sheet-body { padding: 0 28px 58px; }
  .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: 12px 16px; }
  .dl-sheet-body { padding: 0 18px 46px; }
  .dl-sheet-foot { padding: 14px 18px; }
  .dl-hero { padding: 34px 0 28px; }
  .dl-hero-title { font-size: 23px; }
  .dl-sec { padding: 42px 0 20px; }
  .dl-cta { padding: 28px 22px; margin-top: 46px; }
  .dl-grid, .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr; }
  .dl-btn-lg { width: 100%; justify-content: center; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== 介绍浮层 · 节奏回调（2026-09-18 第四轮） ===== */
/* 上一轮留白放得太大，整页看着空。这一轮把节奏收回一档：
   分节间距 64→44、首屏 82/62→54/40、卡片内边距 30/26→24/22、行动条外边距 70→46。
   这一段仍在文件最末，会盖住前面同名规则，所以响应式规则照样再写一遍。 */
.dl-sheet-body { padding: 0 40px 60px; }
.dl-wrap { max-width: 1060px; }

.dl-hero { grid-template-columns: 1.3fr 1fr; gap: 52px; align-items: center; padding: 54px 0 40px; }
.dl-hero-title { margin: 18px 0 14px; font-size: 36px; line-height: 1.38; letter-spacing: -.024em; }
.dl-hero-desc { font-size: 15px; line-height: 1.95; max-width: 48ch; }
.dl-hero-actions { gap: 12px; margin-top: 28px; }
.dl-hero-note { margin-top: 17px; }
.dl-hero-side { gap: 14px; }
.dl-hero-item { padding: 16px 20px; }
.dl-hero-item b { margin-bottom: 5px; }
.dl-hero-item span { line-height: 1.9; }

.dl-sec { padding: 44px 0 22px; }
.dl-sec-title { font-size: 21px; }
.dl-sec-desc { margin-top: 12px; line-height: 1.95; }
.dl-grid { gap: 16px; margin-top: 26px; }
.dl-fcard { padding: 24px 22px; }
.dl-fcard h4 { margin: 0 0 9px; }
.dl-fcard p { font-size: 13px; line-height: 1.95; }
.dl-more-line { margin-top: 20px; }
.dl-steps { gap: 16px; margin-top: 26px; }
.dl-step { padding: 22px 20px; }
.dl-step h4 { margin: 10px 0 7px; }
.dl-step p { line-height: 1.9; }
.dl-req { margin: 26px 0 4px; padding: 16px 20px; }
.dl-cta { margin-top: 46px; padding: 34px 36px; gap: 24px; }
.dl-cta p { margin-top: 9px; }
.dl-sheet-foot { padding: 16px 40px; }

/* 首屏垫一层极淡的暖色光晕：大面积纯白才不会显得空，也跟登录页的暖色调用同一个语汇 */
.dl-hero { position: relative; }
.dl-hero::before {
  content: ""; position: absolute; left: -60px; right: -60px; top: -70px; height: 340px;
  background: radial-gradient(58% 100% at 28% 0%, rgba(217,119,87,.085), rgba(217,119,87,0) 72%);
  pointer-events: none; z-index: 0;
}
.dl-hero > * { position: relative; z-index: 1; }

@media (max-height: 820px) {
  .dl-hero { padding: 32px 0 22px; gap: 30px; }
  .dl-hero-title { font-size: 28px; margin: 14px 0 11px; }
  .dl-sec { padding: 30px 0 14px; }
  .dl-sheet-body { padding-bottom: 36px; }
  .dl-cta { padding: 26px 28px; margin-top: 34px; }
}

@media (max-width: 1000px) {
  .dl-hero { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 30px; }
  .dl-hero-title { font-size: 28px; }
  .dl-sheet-body { padding: 0 26px 48px; }
  .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: 12px 16px; }
  .dl-sheet-body { padding: 0 18px 40px; }
  .dl-sheet-foot { padding: 14px 18px; }
  .dl-hero { padding: 30px 0 24px; }
  .dl-hero-title { font-size: 23px; }
  .dl-hero::before { left: -18px; right: -18px; }
  .dl-sec { padding: 34px 0 18px; }
  .dl-cta { padding: 26px 20px; margin-top: 38px; }
  .dl-grid, .dl-steps, .dl-steps.is-3 { grid-template-columns: 1fr; }
  .dl-btn-lg { width: 100%; justify-content: center; }
  .dl-sheet-tools .btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ===== 介绍浮层 · 配图：团队编排与一个窗口（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; }
}