* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #d6dae4; border-radius: 999px; }

/* ---------- 通用 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 18px; border: none; border-radius: var(--r-md);
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
  transition: transform .12s, box-shadow .2s, background .2s;
  box-shadow: 0 6px 18px -8px var(--brand);
}
.btn:hover { transform: translateY(-1px); background: var(--brand-600); }
.btn.ghost { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-default); box-shadow: none; }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn.sm { padding: 7px 13px; font-size: 13px; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand-600); }
.muted { color: var(--text-tertiary); }
.pill { padding: 2px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
.pill.info { background: #e8f0fe; color: #1d4ed8; }
.pill.warning { background: #fdf2e3; color: #b45309; }
.pill.danger { background: #fdeaea; color: #be123c; }
.pill.success { background: #e7f6ec; color: #15803d; }

/* ---------- HUB 门户 / 业务矩阵 ---------- */
.hub-top { display:flex; align-items:center; justify-content:space-between; padding:18px 40px; background:rgba(255,255,255,.82); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:10; }
.brand-logo { display:flex; align-items:center; gap:12px; font-weight:800; font-size:18px; }
.brand-logo .mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#6366f1,#4338ca); color:#fff; display:grid; place-items:center; font-size:18px; }
.hub-hero { text-align:center; padding:72px 24px 30px; position:relative; }
.hub-hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(60% 80% at 50% -10%, rgba(99,102,241,.13), transparent 60%), radial-gradient(46% 60% at 86% 8%, rgba(14,165,233,.10), transparent 55%); }
.hero-badge { display:inline-block; padding:6px 15px; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand-600); font-weight:700; font-size:13px; }
.hub-hero h1 { font-size:46px; font-weight:800; letter-spacing:-.02em; margin-top:18px; line-height:1.16; }
.hub-hero h1 .grad { background:linear-gradient(120deg,#6366f1,#0ea5e9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hub-hero p { margin-top:18px; color:var(--text-secondary); font-size:17px; max-width:680px; margin-left:auto; margin-right:auto; line-height:1.7; }
.hub-hero .chips { margin-top:24px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hub-hero .chips span { padding:7px 15px; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--r-full); font-size:13px; color:var(--text-secondary); font-weight:600; box-shadow:var(--shadow-sm); }
.matrix { max-width:1200px; margin:20px auto 70px; padding:0 40px; display:flex; flex-direction:column; gap:46px; }
.mx-group .mx-head h2 { font-size:22px; font-weight:800; display:flex; align-items:center; gap:12px; }
.mx-group .mx-head h2::before { content:""; width:5px; height:22px; border-radius:3px; background:linear-gradient(180deg,#6366f1,#4338ca); }
.mx-group .mx-head p { color:var(--text-tertiary); font-size:14px; margin-top:6px; margin-left:17px; margin-bottom:18px; }
.mx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.mx-card { position:relative; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:22px 22px 20px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .2s; overflow:hidden; display:flex; flex-direction:column; gap:13px; min-height:172px; }
.mx-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.mx-accent { position:absolute; left:0; top:0; bottom:0; width:4px; }
.mx-icon { width:46px; height:46px; border-radius:12px; color:#fff; font-weight:800; font-size:19px; display:grid; place-items:center; }
.mx-body h3 { font-size:17px; font-weight:700; }
.mx-body p { margin-top:7px; color:var(--text-secondary); font-size:14px; line-height:1.6; }
.mx-go { margin-top:auto; font-weight:700; font-size:14px; }
.hub-foot { text-align:center; padding:28px; color:var(--text-tertiary); font-size:13px; border-top:1px solid var(--border-soft); }

/* ---------- 项目入口页(组合式落地页) ---------- */
.land-top { display:flex; align-items:center; justify-content:space-between; padding:16px 40px; border-bottom:1px solid var(--border-soft); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; }
.land-top .left { display:flex; align-items:center; gap:11px; }
.land-top .mark { width:34px; height:34px; border-radius:9px; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:800; }
.land-top strong { font-size:16px; }
.land-foot { text-align:center; padding:30px; color:var(--text-tertiary); font-size:13px; border-top:1px solid var(--border-soft); margin-top:40px; }
.btn.lg { padding:13px 24px; font-size:15px; }

.hero-text h1 { font-size:42px; font-weight:800; letter-spacing:-.02em; line-height:1.16; margin-top:16px; }
.hero-text p { margin-top:16px; font-size:17px; color:var(--text-secondary); line-height:1.7; }
.hero-cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats { margin-top:30px; display:flex; gap:30px; flex-wrap:wrap; }
.hero-stats b { font-size:26px; font-weight:800; color:var(--brand-600); display:block; }
.hero-stats i { font-size:13px; color:var(--text-tertiary); font-style:normal; }
.hero-split { max-width:1160px; margin:0 auto; padding:64px 40px 36px; display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
.hero-split .hero-text h1 { font-size:40px; }
.hero-centered { max-width:880px; margin:0 auto; padding:74px 32px 30px; text-align:center; position:relative; }
.hero-centered::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(60% 70% at 50% -5%, var(--brand-ring), transparent 65%); }
.hero-centered .hero-cta { justify-content:center; }
.hero-visual.wide { max-width:640px; margin:38px auto 0; }
.hero-dark { background:#0a0f1f; color:#fff; }
.hero-dark .hero-inner { max-width:1160px; margin:0 auto; padding:64px 40px; display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
.hero-dark .hero-text h1 { color:#fff; font-size:40px; }
.hero-dark .hero-text p { color:#aab6d0; }
.hero-dark .hero-badge { background:rgba(255,255,255,.10); color:#cdd6e8; }
.hero-minimal { max-width:920px; margin:0 auto; padding:80px 40px 30px; }
.hero-minimal .hero-text h1 { font-size:48px; }

.hero-visual { display:flex; justify-content:center; }
.pv-frame { width:100%; max-width:460px; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
.pv-bar { display:flex; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border-soft); background:var(--bg-subtle); }
.pv-bar span { width:11px; height:11px; border-radius:50%; background:var(--border-strong); }
.pv-bar span:first-child { background:var(--brand); }
.pv-pad { padding:18px; }
.pv-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.pv-m { background:var(--brand-soft); border-radius:var(--r-md); padding:12px; }
.pv-m b { font-size:19px; font-weight:800; color:var(--brand-600); }
.pv-m i { font-size:11px; color:var(--text-tertiary); font-style:normal; display:block; margin-top:2px; }
.pv-chart { margin-top:16px; height:96px; display:flex; align-items:flex-end; gap:8px; }
.pv-chart span { flex:1; background:linear-gradient(180deg,var(--brand),var(--brand-600)); border-radius:5px 5px 0 0; opacity:.88; }
.pv-rows { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.pv-rows div { height:10px; border-radius:999px; background:var(--bg-subtle); }
.pv-rows div:nth-child(1){width:100%} .pv-rows div:nth-child(2){width:76%} .pv-rows div:nth-child(3){width:52%}
.pv-fn { margin-bottom:7px; }
.pv-fn span { display:block; background:var(--brand); color:#fff; font-size:11px; font-weight:600; padding:5px 10px; border-radius:6px; opacity:.92; }
.pv-chat { display:flex; flex-direction:column; gap:10px; }
.pv-msg { max-width:82%; padding:10px 13px; border-radius:12px; font-size:13px; }
.pv-msg.u { align-self:flex-end; background:var(--brand); color:#fff; }
.pv-msg.a { align-self:flex-start; background:var(--bg-subtle); }
.pv-trace { align-self:flex-start; font-size:11.5px; color:var(--brand-600); background:var(--brand-soft); padding:6px 10px; border-radius:8px; }
.pv-screen { width:100%; max-width:460px; background:#0a0f1f; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-lg); }
.pv-sc-head { display:flex; justify-content:space-between; color:#cdd6e8; font-size:13px; font-weight:600; margin-bottom:14px; }
.pv-live { display:flex; align-items:center; gap:6px; color:#34d399; font-size:11px; }
.pv-live i { width:7px; height:7px; border-radius:50%; background:#34d399; }
.pv-sc-bars { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
.pv-sc-bars div { height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.pv-sc-bars i { display:block; height:100%; background:linear-gradient(90deg,#38bdf8,#22d3ee); border-radius:999px; }
.pv-sc-feed p { font-size:12px; color:#aab6d0; padding:7px 11px; border-radius:7px; background:rgba(255,255,255,.04); border-left:3px solid #475569; margin-bottom:7px; }
.pv-sc-feed p.warn { border-left-color:#f59e0b; color:#fcd34d; }
.pv-sc-feed p.ok { border-left-color:#34d399; }

.sec { max-width:1100px; margin:0 auto; padding:46px 40px; }
.sec-head { text-align:center; margin-bottom:30px; }
.sec-head h2 { font-size:28px; font-weight:800; letter-spacing:-.01em; }
.sec-head p { margin-top:10px; color:var(--text-secondary); font-size:16px; }
.sec-stats { padding:30px 40px; }
.stats-band { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; background:var(--brand-soft); border-radius:var(--r-xl); padding:30px 24px; }
.sb-item { text-align:center; min-width:130px; }
.sb-item b { font-size:34px; font-weight:800; color:var(--brand-600); display:block; letter-spacing:-.02em; }
.sb-item i { font-size:13px; color:var(--text-secondary); font-style:normal; }
.ps-grid { display:flex; flex-direction:column; gap:14px; }
.ps-card { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--shadow-sm); }
.ps-p, .ps-s { font-size:15px; }
.ps-arrow { color:var(--brand); font-size:22px; font-weight:700; }
.ps-tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--r-full); margin-right:9px; }
.ps-tag.bad { background:#fdeaea; color:#be123c; }
.ps-tag.good { background:var(--brand-soft); color:var(--brand-600); }
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cap-card { background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .2s; }
.cap-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cap-no { font-size:14px; font-weight:800; color:var(--brand); background:var(--brand-soft); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.cap-card h3 { margin-top:16px; font-size:17px; }
.cap-card p { margin-top:8px; font-size:14px; color:var(--text-secondary); line-height:1.6; }
.agent-wrap { display:flex; flex-direction:column; gap:16px; }
.agent-card { display:flex; gap:18px; align-items:flex-start; background:linear-gradient(120deg, var(--brand-soft), var(--bg-surface)); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-sm); }
.agent-av { width:54px; height:54px; border-radius:14px; background:var(--brand); color:#fff; font-weight:800; display:grid; place-items:center; flex:none; }
.agent-name { font-size:18px; font-weight:800; }
.agent-role { font-size:13px; color:var(--brand-600); font-weight:600; margin-top:2px; }
.agent-info p { margin-top:10px; color:var(--text-secondary); font-size:15px; line-height:1.7; }
.flow-line { display:flex; gap:14px; flex-wrap:wrap; }
.flow-node { flex:1; min-width:158px; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); }
.fn-no { width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700; display:grid; place-items:center; font-size:14px; }
.fn-t { margin-top:13px; font-weight:700; font-size:15px; }
.fn-d { margin-top:5px; font-size:13px; color:var(--text-secondary); }
.scn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.scn-card { background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); border-top:3px solid var(--brand); }
.scn-tag { display:inline-block; font-size:12px; font-weight:700; color:var(--brand-600); background:var(--brand-soft); padding:3px 11px; border-radius:var(--r-full); }
.scn-card h3 { margin-top:13px; font-size:16px; }
.scn-card p { margin-top:7px; font-size:14px; color:var(--text-secondary); line-height:1.6; }
.alt-list { display:flex; flex-direction:column; gap:22px; }
.alt-row { display:grid; grid-template-columns:1fr 220px; gap:30px; align-items:center; background:var(--bg-surface); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:30px; box-shadow:var(--shadow-sm); }
.alt-row.rev { grid-template-columns:220px 1fr; }
.alt-row.rev .alt-text { order:2; } .alt-row.rev .alt-deco { order:1; }
.alt-text h3 { font-size:20px; font-weight:800; }
.alt-text p { margin-top:10px; color:var(--text-secondary); font-size:15px; line-height:1.7; }
.alt-text ul { margin-top:14px; display:flex; flex-direction:column; gap:8px; list-style:none; }
.alt-text li { font-size:14px; color:var(--text-secondary); padding-left:24px; position:relative; }
.alt-text li::before { content:"\2713"; position:absolute; left:0; color:var(--brand); font-weight:800; }
.alt-deco { height:140px; border-radius:var(--r-lg); background:linear-gradient(135deg, var(--brand-soft), var(--brand-ring)); display:grid; place-items:center; }
.alt-deco span { font-size:48px; font-weight:800; color:var(--brand); opacity:.5; }
.cmp { border:1px solid var(--border-default); border-radius:var(--r-lg); overflow:hidden; max-width:820px; margin:0 auto; }
.cmp-row { display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; }
.cmp-row:not(:last-child) { border-bottom:1px solid var(--border-soft); }
.cmp-row > div { padding:15px 18px; font-size:14px; }
.cmp-head { background:var(--bg-subtle); font-weight:700; font-size:13px; }
.cmp-label { font-weight:700; color:var(--text-secondary); }
.cmp-old { color:var(--text-tertiary); }
.cmp-new { color:var(--brand-600); font-weight:600; background:var(--brand-soft); }
.sec-cta { max-width:1100px; }
.cta-band { text-align:center; background:linear-gradient(135deg,#1f2542,#0a0f1f); color:#fff; border-radius:var(--r-xl); padding:48px 30px; }
.cta-band h2 { font-size:26px; font-weight:800; }
.cta-band p { margin-top:10px; color:#aab6d0; font-size:15px; }
.cta-band .btn { margin-top:24px; }
/* ---------- Dashboard SPA ---------- */
.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: 232px; flex: none; background: var(--bg-surface); border-right: 1px solid var(--border-soft); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; }
.sidebar .sb-brand { display: flex; align-items: center; gap: 11px; padding: 8px 8px 16px; }
.sidebar .sb-brand .mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.sidebar .sb-brand .nm { font-weight: 700; font-size: 15px; }
.sidebar .sb-brand .sub { font-size: 11px; color: var(--text-tertiary); }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
.nav-item .ic { width: 20px; text-align: center; opacity: .8; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-600); font-weight: 700; }
.sidebar .sb-foot { margin-top: auto; padding: 12px 8px; font-size: 12px; color: var(--text-tertiary); border-top: 1px solid var(--border-soft); }
.sidebar .sb-foot a { color: var(--brand-600); font-weight: 600; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,.8); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; }
.topbar .t-title { font-weight: 700; font-size: 16px; }
.topbar .t-right { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.topbar .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.page { padding: 26px 28px 60px; }
.page-head { margin-bottom: 20px; }
.page-head h2 { font-size: 20px; font-weight: 700; }
.page-head p { color: var(--text-tertiary); font-size: 14px; margin-top: 3px; }

/* metric cards */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.metric { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.metric .lbl { font-size: 13px; color: var(--text-tertiary); }
.metric .val { font-size: 28px; font-weight: 800; margin-top: 6px; letter-spacing: -.02em; }
.metric .val .u { font-size: 14px; font-weight: 600; color: var(--text-tertiary); margin-left: 3px; }
.metric .trend { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--success); }

.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

/* table */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border-default); }
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); }
table.tbl tr:hover td { background: var(--bg-hover); }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.toolbar input { padding: 9px 13px; border: 1px solid var(--border-default); border-radius: var(--r-md); font-size: 14px; width: 240px; outline: none; }
.toolbar input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.icon-btn { background: none; border: none; color: var(--text-tertiary); padding: 4px 8px; border-radius: 6px; font-size: 13px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--danger); }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 10px; }
.kcol { background: var(--bg-subtle); border-radius: var(--r-lg); padding: 12px; min-height: 220px; }
.kcol .kh { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; padding: 4px 6px 12px; }
.kcol .kh .cnt { background: var(--bg-surface); border-radius: var(--r-full); padding: 1px 9px; font-size: 12px; color: var(--text-tertiary); }
.kcard { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 13px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.kcard .kt { font-weight: 600; font-size: 14px; }
.kcard .km { margin-top: 7px; font-size: 12.5px; color: var(--text-tertiary); display: flex; justify-content: space-between; }

/* chat */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 200px); background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.chat-head { padding: 14px 20px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; }
.chat-head .pa { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; }
.chat-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 78%; }
.msg.user { align-self: flex-end; }
.msg .bubble { padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.msg.user .bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai .bubble { background: var(--bg-subtle); color: var(--text-primary); border-bottom-left-radius: 4px; }
.trace { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.trace .step { font-size: 12.5px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-surface); color: var(--text-secondary); display: flex; gap: 8px; align-items: center; }
.trace .step .k { font-weight: 700; color: var(--brand-600); }
.trace .step.thinking { color: var(--text-tertiary); }
.chat-input { border-top: 1px solid var(--border-soft); padding: 14px; display: flex; gap: 10px; }
.chat-input input { flex: 1; padding: 11px 15px; border: 1px solid var(--border-default); border-radius: var(--r-md); font-size: 14px; outline: none; }
.chat-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.suggest { padding: 0 22px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.suggest button { background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--r-full); padding: 6px 13px; font-size: 12.5px; color: var(--text-secondary); }
.suggest button:hover { background: var(--brand-soft); color: var(--brand-600); }

/* report (workflow) */
.flow-run { display: flex; flex-direction: column; gap: 0; }
.flow-step { display: flex; gap: 14px; padding: 0 0 4px; }
.flow-step .rail { display: flex; flex-direction: column; align-items: center; }
.flow-step .node { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-600); display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 2px solid var(--brand); flex: none; }
.flow-step .line { width: 2px; flex: 1; background: var(--border-default); min-height: 18px; }
.flow-step .body { padding-bottom: 18px; flex: 1; }
.flow-step .body .ti { font-weight: 700; font-size: 14px; }
.flow-step .body .sm { font-size: 13px; color: var(--text-secondary); margin-top: 3px; }
.flow-step.pending .node { background: var(--bg-subtle); color: var(--text-tertiary); border-color: var(--border-default); }

/* bigscreen */
.screen { background: #0a0f1f; border-radius: var(--r-lg); padding: 22px; color: #cdd6e8; min-height: calc(100vh - 200px); }
.screen .sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.screen .sc-head h2 { color: #fff; font-size: 20px; }
.screen .sc-head .live { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6ee7b7; }
.screen .sc-head .live .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.sc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.sc-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 16px; }
.sc-panel h4 { color: #93a4c7; font-size: 13px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em; }
.sc-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.sc-metric { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 14px 16px; }
.sc-metric .v { font-size: 26px; font-weight: 800; color: #fff; }
.sc-metric .l { font-size: 12px; color: #93a4c7; margin-top: 4px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 13px; }
.bar-row .bn { width: 84px; color: #b9c4dd; flex: none; }
.bar-row .bt { flex: 1; height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.bar-row .bt span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #22d3ee); border-radius: 999px; transition: width .6s; }
.bar-row .bv { width: 56px; text-align: right; color: #e2e8f5; }
.feed { display: flex; flex-direction: column; gap: 9px; max-height: 420px; overflow-y: auto; }
.feed .ev { padding: 11px 13px; border-radius: 9px; background: rgba(255,255,255,.04); border-left: 3px solid #475569; }
.feed .ev.warning { border-left-color: #f59e0b; background: rgba(245,158,11,.08); }
.feed .ev.danger { border-left-color: #ef4444; background: rgba(239,68,68,.10); }
.feed .ev .et { font-weight: 700; color: #fff; font-size: 13.5px; display: flex; justify-content: space-between; }
.feed .ev .ed { font-size: 12.5px; color: #aab6d0; margin-top: 3px; }

/* relation tree */
.tree { padding: 10px; overflow-x: auto; }
.tree ul { padding-left: 28px; border-left: 2px solid var(--border-default); margin-left: 10px; }
.tree li { list-style: none; margin: 10px 0; position: relative; }
.tree li::before { content: ""; position: absolute; left: -28px; top: 16px; width: 22px; height: 2px; background: var(--border-default); }
.node-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.node-chip.root { background: var(--brand); color: #fff; border-color: var(--brand); }
.node-chip.l1 { border-color: var(--brand); color: var(--brand-600); }

/* stratify (risk tiers) */
.strat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.strat-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.strat-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.strat-n { font-size: 26px; font-weight: 800; }
.strat-u { font-size: 13px; color: var(--text-tertiary); font-weight: 600; }
.strat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.strat-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border: 1px solid; border-radius: var(--r-full); background: var(--bg-surface); }
.shap-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.shap-name { width: 96px; flex: none; color: var(--text-secondary); font-weight: 600; }
.shap-bar { flex: 1; height: 14px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; }
.shap-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 999px; }
.shap-val { width: 50px; text-align: right; font-weight: 700; }

/* interactive funnel */
.fn-wrap { display: flex; flex-direction: column; gap: 7px; align-items: center; padding: 6px 0; }
.fn-stage { min-width: 120px; color: #fff; border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: transform .15s, box-shadow .2s, opacity .2s; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fn-stage:hover { transform: scale(1.02); }
.fn-stage.on { box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px currentColor; }
.fn-label { font-size: 12px; opacity: .92; }
.fn-val { font-weight: 800; font-size: 15px; }
.fn-stat { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--text-secondary); }
.fn-stat b { color: var(--text-primary); font-size: 16px; }
.fn-tip { margin-top: 14px; padding: 12px 14px; background: var(--brand-soft); border-radius: 10px; font-size: 13px; color: var(--brand-600); line-height: 1.6; }

/* skills grid */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.skill-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow-sm); }
.skill-card .sc-cat { font-size: 11px; font-weight: 700; color: var(--brand-600); background: var(--brand-soft); padding: 2px 8px; border-radius: var(--r-full); display: inline-block; }
.skill-card h4 { margin-top: 10px; font-size: 15px; }
.skill-card p { margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.skill-card .sc-when { margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }

/* charts */
.chart-svg { width: 100%; height: auto; display: block; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; }
.donut-legend .li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.donut-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.donut-wrap { display: flex; align-items: center; gap: 22px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #0d1426; color: #fff; padding: 11px 20px; border-radius: var(--r-md); font-size: 14px; box-shadow: var(--shadow-lg); z-index: 999; opacity: 0; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(13,20,38,.45); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 1000; }
.modal { background: var(--bg-surface); border-radius: var(--r-lg); width: min(440px, 92vw); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-x { background: none; border: none; color: var(--text-tertiary); font-size: 15px; }
.modal-x:hover { color: var(--text-primary); }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 13px; max-height: 60vh; overflow-y: auto; }
.mf-field { display: flex; flex-direction: column; gap: 6px; }
.mf-field span { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.mf-field input { padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--r-md); font-size: 14px; outline: none; font-family: inherit; }
.mf-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 10px; }
.row-act { white-space: nowrap; }
.row-act .edit:hover { color: var(--brand-600); background: var(--brand-soft); }
.empty { text-align: center; padding: 50px; color: var(--text-tertiary); }
.spin { width: 28px; height: 28px; border: 3px solid var(--border-default); border-top-color: var(--brand); border-radius: 50%; animation: rot .8s linear infinite; margin: 50px auto; }
@keyframes rot { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .cards-2 { grid-template-columns: 1fr; }
  .sc-grid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .strat-grid { grid-template-columns: 1fr; }
  .hero-split, .hero-dark .hero-inner { grid-template-columns: 1fr; gap: 30px; padding: 44px 24px; }
  .hero-split .hero-visual, .hero-dark .hero-visual { order: -1; }
  .hero-text h1, .hero-split .hero-text h1, .hero-dark .hero-text h1, .hero-minimal .hero-text h1 { font-size: 32px; }
  .sec { padding: 36px 24px; }
  .sec-head h2 { font-size: 23px; }
  .cap-grid, .scn-grid, .cmp-row { grid-template-columns: 1fr; }
  .ps-card { grid-template-columns: 1fr; gap: 8px; }
  .ps-arrow { transform: rotate(90deg); }
  .alt-row, .alt-row.rev { grid-template-columns: 1fr; }
  .alt-row.rev .alt-text, .alt-row.rev .alt-deco { order: 0; }
  .cmp-head { display: none; }
  .matrix { padding: 0 22px; }
}