:root {
  --ink: #0d1738; --muted: #7180a4; --line: #e4ebfb; --paper: #fff; --wash: #f5f8ff;
  --blue: #1756ff; --blue-2: #4d7bff; --violet: #7a42f4; --cyan: #5de4ee;
  --shadow: 0 22px 60px rgba(52, 81, 155, .11); --radius: 20px; --display: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #f5f8ff, #fff 48%, #f9fbff); font-family: var(--display); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #9fb8ff; outline-offset: 3px; }
.skip-link { position: fixed; top: -60px; left: 18px; z-index: 20; padding: 12px 16px; background: #fff; border-radius: 10px; box-shadow: var(--shadow); }
.skip-link:focus { top: 18px; }
.shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 30px; height: 72px; padding: 0 clamp(20px, 4vw, 64px); background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(228,235,251,.8); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-weight: 800; font-size: 20px; white-space: nowrap; letter-spacing: -.8px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; border-radius: 11px 14px 14px 4px; background: linear-gradient(135deg, #1c5dff, #8e4cf5); box-shadow: 0 8px 18px rgba(46,83,248,.26); transform: rotate(-7deg); }
.brand-mark svg { width: 20px; height: 20px; transform: rotate(7deg); }
.nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 46px); margin-left: auto; }
.nav a { position: relative; padding: 27px 0 23px; color: #4a587d; font-size: 14px; font-weight: 600; }
.nav a:hover, .nav a.active { color: var(--blue); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 3px; border-radius: 9px; background: var(--blue); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); color: var(--muted); background: #fff; border-radius: 50%; }
.icon-button:hover { color: var(--blue); border-color: #a8bdfd; }
.menu-button { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; color: #fff; border-radius: 12px; background: linear-gradient(115deg, #2467ff, #503cff 67%, #a550f5); box-shadow: 0 9px 22px rgba(44,73,236,.2), inset 0 1px rgba(255,255,255,.55); font-weight: 750; transition: transform .2s, filter .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(44,73,236,.25), inset 0 1px rgba(255,255,255,.55); }
.btn.secondary { color: var(--blue); background: #fff; border: 1px solid #cddaff; box-shadow: none; }
.btn.ghost { color: #5c6b8e; background: transparent; box-shadow: none; }
.btn.small { min-height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.hero { position: relative; overflow: hidden; min-height: 620px; padding: 110px max(7vw, 24px) 88px; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% 0; background: radial-gradient(circle at 16% 35%, #d6e4ff 0 7%, transparent 32%), radial-gradient(circle at 88% 30%, #eee4ff 0 8%, transparent 30%), linear-gradient(115deg, #f9fbff, #f0f6ff 52%, #faf7ff); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr); gap: 64px; align-items: center; max-width: 1300px; margin: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #5f6f9a; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 27px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--violet)); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin: 24px 0 18px; font-size: clamp(43px, 6vw, 76px); line-height: 1.08; letter-spacing: -.07em; }
.gradient-text { color: var(--blue); background: linear-gradient(90deg, #1151ff, #7c3ff5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy p { max-width: 530px; color: #657395; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 31px 0 30px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 18px; color: #7f8cab; font-size: 13px; }
.hero-note span { display: inline-flex; gap: 7px; align-items: center; }
.hero-note span::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; color: #2360ff; background: #e7efff; border-radius: 50%; font-weight: 900; }
.hero-art { position: relative; min-height: 420px; padding: 30px; }
.halo { position: absolute; inset: 10% 3% 6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.82), transparent 68%); border: 1px solid #dbe6ff; box-shadow: inset 0 0 80px #fff; }
.signal { position: absolute; width: 94%; height: 64%; right: -7%; top: 19%; border: 1px solid #c8d9ff; border-left-color: transparent; border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 0 0 18px rgba(219,232,255,.2), 0 0 0 38px rgba(219,232,255,.15); }
.product-window { position: relative; z-index: 1; width: min(100%, 590px); margin: 18px auto; padding: 16px; border: 1px solid #fff; border-radius: 24px; background: rgba(255,255,255,.85); box-shadow: 0 30px 70px rgba(74, 104, 187, .17); transform: rotate(2deg); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: rotate(-1deg) translateY(-8px); } }
.window-top { display: flex; align-items: center; gap: 7px; padding: 4px 5px 13px; border-bottom: 1px solid #eef2fb; }
.window-top i { width: 8px; height: 8px; border-radius: 50%; background: #d8e2fb; }
.window-top i:first-child { background: #7fafff; }
.window-top strong { margin-left: auto; color: #7282a6; font-size: 11px; }
.window-body { display: grid; grid-template-columns: 1.06fr .94fr; gap: 12px; padding-top: 15px; }
.metric-card, .mini-chart { padding: 14px; border-radius: 16px; background: #f7f9ff; }
.metric-card .label, .mini-chart .label { color: #8a98b9; font-size: 10px; }
.metric-card strong { display: block; margin: 9px 0 14px; font-size: 29px; letter-spacing: -.05em; }
.metric-card strong em { color: #31b997; font-size: 12px; font-style: normal; letter-spacing: 0; }
.bars { display: flex; align-items: end; gap: 8px; height: 95px; }
.bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(#86aaff, #245bff); }
.bars i:nth-child(1){height:40%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:48%}.bars i:nth-child(4){height:75%}.bars i:nth-child(5){height:63%}.bars i:nth-child(6){height:90%}.bars i:nth-child(7){height:82%}
.scan-pill { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding: 12px; color:#52638c; border:1px solid #e2eafe; border-radius:12px; background:#fff; font-size:11px; }
.scan-pill b { color:#1c5cff; }
.section { max-width: 1240px; margin: 0 auto; padding: 108px max(24px, 3vw); }
.section.narrow { max-width: 1080px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap: 20px; margin-bottom: 34px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(29px, 4vw, 48px); letter-spacing: -.06em; line-height:1.16; }
.section-head p { max-width: 480px; margin-bottom: 0; color: var(--muted); line-height: 1.8; }
.section.tint { max-width: none; background: #f3f7ff; }
.feature-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { position: relative; min-height: 236px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.77); overflow: hidden; }
.feature::after { content:""; position:absolute; width:130px; height:130px; right:-50px; bottom:-50px; border-radius:50%; background: #e9f0ff; }
.feature .num { display:grid; place-items:center; width:38px; height:38px; color:#fff; border-radius:13px; background:linear-gradient(135deg,#1b5fff,#7651f4); font-weight:800; }
.feature h3 { margin: 21px 0 9px; font-size: 20px; }
.feature p { margin-bottom:0; color:var(--muted); line-height:1.8; font-size:14px; }
.workflow { display:grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.step { position:relative; padding: 22px 15px; border-top: 2px solid #c5d6ff; }
.step::after { content:"→"; position:absolute; top:-19px; right:-8px; color:#6b8cff; font-size:23px; }
.step:last-child::after{display:none}.step b { color:var(--blue); font-size:13px; }.step h3 { margin:10px 0 6px; font-size:16px; }.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.case-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }.case { min-height: 260px; padding: 30px; border-radius: 24px; background: linear-gradient(135deg,#122348,#293e84); color:#fff; overflow:hidden; position:relative; }.case:nth-child(2){background:linear-gradient(135deg,#eef4ff,#f7f0ff);color:var(--ink)}.case h3{font-size:25px;margin-bottom:10px}.case p{max-width:430px;color:rgba(255,255,255,.73);line-height:1.8}.case:nth-child(2) p{color:var(--muted)}.case .case-stats{position:absolute;right:30px;bottom:28px;display:flex;gap:25px}.case strong{display:block;font-size:31px}.case small{color:#9bb3ff}.case:nth-child(2) small{color:var(--muted)}
.pricing-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.pricing-table { width:100%; min-width:850px; border-collapse:collapse; }.pricing-table th,.pricing-table td{padding:17px 15px;text-align:left;border-bottom:1px solid var(--line);font-size:13px}.pricing-table th{background:#f7f9ff;color:#52638c}.pricing-table td:not(:first-child),.pricing-table th:not(:first-child){text-align:center}.pricing-table tr:last-child td{border-bottom:0}.pricing-table .featured{background:#f6f1ff}.pricing-table strong{font-size:22px;color:var(--blue)}
.faq-list { display:grid; grid-template-columns:1fr 1fr; gap: 12px; }.faq { border:1px solid var(--line); border-radius:16px; background:#fff; }.faq summary{padding:18px 20px;cursor:pointer;list-style:none;font-weight:750}.faq summary::-webkit-details-marker{display:none}.faq p{padding:0 20px 18px;margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.page-hero { padding: 92px max(24px, 7vw) 68px; background:linear-gradient(130deg,#f5f8ff,#fbf9ff); border-bottom:1px solid var(--line); }.page-hero h1{max-width:800px;font-size:clamp(38px,5vw,66px);margin:18px 0}.page-hero p{max-width:650px;color:var(--muted);font-size:17px;line-height:1.9;margin-bottom:0}
.feature-detail { display:grid; grid-template-columns: .8fr 1.2fr; gap:55px; align-items:center; padding:72px 0; border-bottom:1px solid var(--line); }.feature-detail:last-child{border-bottom:0}.feature-detail.reverse{grid-template-columns:1.2fr .8fr}.detail-number{font-size:88px;line-height:1;color:#e4ebfb;font-weight:900}.detail-panel{padding:26px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow)}.detail-panel h3{font-size:25px;margin:0 0 11px}.detail-panel p{color:var(--muted);line-height:1.8}.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.tag{padding:7px 11px;color:#2458e7;border-radius:999px;background:#edf3ff;font-size:12px;font-weight:700}
.dashboard { display:grid; grid-template-columns: 250px minmax(0,1fr); min-height: calc(100vh - 72px); }.sidebar { padding:25px 17px; border-right:1px solid var(--line); background:#fbfcff; }.workspace-switch{display:flex;align-items:center;gap:10px;padding:12px 10px;margin-bottom:23px;border:1px solid var(--line);border-radius:13px;background:#fff;font-size:13px;font-weight:750}.workspace-switch span{display:grid;place-items:center;width:28px;height:28px;color:#fff;border-radius:9px;background:linear-gradient(135deg,#1d60ff,#8448f1)}.side-nav{display:grid;gap:5px}.side-nav button{display:flex;align-items:center;gap:10px;padding:12px 12px;color:#6b7798;border-radius:11px;background:transparent;text-align:left;font-size:13px}.side-nav button:hover,.side-nav button.active{color:#1d55e8;background:#eaf0ff;font-weight:750}.side-nav .section-label{padding:18px 12px 5px;color:#9aa6c3;font-size:10px;text-transform:uppercase;letter-spacing:.14em}.dashboard-main{padding:32px clamp(20px,4vw,60px);background:#fff}.dash-header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:25px}.dash-header h2{margin:0 0 7px;font-size:31px;letter-spacing:-.05em}.dash-header p{margin:0;color:var(--muted);font-size:13px}.dash-actions{display:flex;gap:10px}.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:17px}.stat{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff}.stat small{color:var(--muted);font-size:12px}.stat strong{display:block;margin:10px 0 3px;font-size:29px;letter-spacing:-.06em}.stat em{color:#26a882;font-style:normal;font-size:12px}.dash-columns{display:grid;grid-template-columns:1.16fr .84fr;gap:17px}.panel{padding:21px;border:1px solid var(--line);border-radius:18px;background:#fff}.panel h3{margin:0 0 16px;font-size:17px}.chart{height:220px;position:relative;display:flex;align-items:end;gap:15px;padding:20px 10px 0;border-bottom:1px solid #dce6fa;background:repeating-linear-gradient(to top,#f5f8ff 0 1px,transparent 1px 44px)}.chart .column{flex:1;position:relative;min-height:20px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#7e9fff,#2a60ff)}.chart .column span{position:absolute;top:-23px;left:50%;transform:translateX(-50%);color:#6c7a9b;font-size:10px}.legend{display:flex;gap:16px;margin-top:12px;color:var(--muted);font-size:11px}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#2e64ff}.list{display:grid;gap:11px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid #eef2fa;font-size:12px}.list-row:last-child{padding-bottom:0;border-bottom:0}.list-row b{font-size:13px}.status{padding:4px 8px;color:#22946e;background:#e9fbf4;border-radius:999px;font-size:10px;font-weight:750}.status.warn{color:#bd7d18;background:#fff6df}.status.blue{color:#2a59e2;background:#edf3ff}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 8px;text-align:left;border-bottom:1px solid #edf1f8;color:#647391;font-size:12px}.table th{color:#9ba7c0;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.table td strong{color:var(--ink)}.tabbar{display:flex;gap:7px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}.tabbar button{padding:8px 11px;color:#7b89a8;background:transparent;border-radius:8px;font-size:12px}.tabbar button.active{color:var(--blue);background:#edf3ff;font-weight:750}.empty{padding:38px;text-align:center;color:var(--muted);border:1px dashed #cad8f7;border-radius:16px}.empty strong{display:block;margin-bottom:6px;color:var(--ink)}
.modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(22,34,70,.42); backdrop-filter:blur(8px); }.modal[hidden]{display:none}.modal-card{position:relative;width:min(600px,100%);max-height:90vh;overflow:auto;padding:30px;border:1px solid #fff;border-radius:25px;background:#fff;box-shadow:0 30px 90px rgba(16,31,80,.25);animation:appear .18s ease-out}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.modal-card h2{margin:0 0 8px;font-size:27px;letter-spacing:-.05em}.modal-card>p{color:var(--muted);line-height:1.7}.close-modal{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;color:#7e8ba7;background:#f5f7fc}.form-grid{display:grid;gap:13px;margin-top:22px}.form-grid label{display:grid;gap:7px;color:#647290;font-size:12px;font-weight:700}.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:12px 13px;color:var(--ink);border:1px solid #d9e2f7;border-radius:11px;background:#fbfcff}.form-grid textarea{min-height:90px;resize:vertical}.modal-actions{display:flex;justify-content:end;gap:9px;margin-top:21px}.plan-options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.plan-option{padding:15px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff}.plan-option.selected{border-color:#7c5df5;background:#f7f2ff;box-shadow:0 0 0 3px #e6dcff}.plan-option strong{display:block;font-size:19px}.plan-option small{color:var(--muted)}
.toast{position:fixed;z-index:40;right:24px;bottom:24px;max-width:330px;padding:13px 16px;color:#fff;border-radius:12px;background:#15234b;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
.footer { padding: 55px max(24px, 7vw) 30px; color: #7c89a7; background: #f2f6ff; border-top:1px solid var(--line); }.footer-inner{max-width:1240px;margin:auto;display:flex;justify-content:space-between;gap:30px}.footer p{margin:0;font-size:12px}.footer-links{display:flex;gap:20px;font-size:12px}.copyright{text-align:center;margin:37px 0 0;font-size:11px}
@media (max-width: 900px){.nav{gap:15px}.nav a{font-size:12px}.hero-grid{grid-template-columns:1fr}.hero{padding-top:80px}.hero-art{min-height:350px}.feature-grid{grid-template-columns:repeat(2,1fr)}.workflow{grid-template-columns:repeat(2,1fr)}.step::after{display:none}.case-grid{grid-template-columns:1fr}.dashboard{grid-template-columns:1fr}.sidebar{display:none}.dash-grid{grid-template-columns:repeat(2,1fr)}.dash-columns{grid-template-columns:1fr}.feature-detail,.feature-detail.reverse{grid-template-columns:1fr;gap:20px}.detail-number{font-size:55px}.faq-list{grid-template-columns:1fr}}
@media (max-width: 640px){.topbar{height:62px;padding:0 16px}.menu-button{display:block}.nav{position:absolute;display:none;left:12px;right:12px;top:58px;padding:10px;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.nav.open{display:flex}.nav a{padding:12px 14px}.nav a.active::after{display:none}.top-actions .btn{display:none}.hero{min-height:auto;padding-top:65px}.hero-copy p{font-size:15px}.hero-actions .btn{width:100%}.hero-art{min-height:270px;padding:0}.product-window{margin-top:22px}.window-body{grid-template-columns:1fr}.window-body .mini-chart{display:none}.section{padding-top:72px;padding-bottom:72px}.section-head{display:block}.section-head p{margin-top:15px}.feature-grid{grid-template-columns:1fr}.workflow{grid-template-columns:1fr}.pricing-table th,.pricing-table td{padding:13px 10px}.page-hero{padding-top:65px}.page-hero h1{font-size:42px}.dash-header{display:block}.dash-actions{margin-top:16px}.dash-grid{grid-template-columns:1fr 1fr}.dash-grid .stat strong{font-size:24px}.footer-inner{display:block}.footer-links{margin-top:17px;flex-wrap:wrap}.modal-card{padding:23px}.plan-options{grid-template-columns:1fr}}

body.dark { --ink:#eef3ff; --muted:#aab8d8; --line:#2b3b67; --paper:#111b38; --wash:#0c1530; background:#0b1228; color:var(--ink); }
body.dark .topbar { background:rgba(13,23,50,.92); border-color:#25345d; }
body.dark .nav a, body.dark .icon-button, body.dark .btn.ghost { color:#a9b8d8; }
body.dark .icon-button, body.dark .btn.secondary { background:#162344; border-color:#2b3b67; }
body.dark .hero::before { background:radial-gradient(circle at 16% 35%,#192e62 0 7%,transparent 32%),radial-gradient(circle at 88% 30%,#30245b 0 8%,transparent 30%),linear-gradient(115deg,#0e1934,#121f40 52%,#181431); }
body.dark .halo { background:radial-gradient(ellipse,rgba(38,57,104,.7),transparent 68%); border-color:#2b437b; box-shadow:inset 0 0 80px #17264e; }
body.dark .product-window, body.dark .metric-card, body.dark .mini-chart, body.dark .scan-pill, body.dark .feature, body.dark .pricing-table-wrap, body.dark .pricing-table th, body.dark .faq, body.dark .panel, body.dark .stat, body.dark .modal-card, body.dark .plan-option { background:#142140; border-color:#2b3b67; color:var(--ink); }
body.dark .window-top { border-color:#29395f; }
body.dark .metric-card, body.dark .mini-chart { background:#1a2a4c; }
body.dark .section.tint, body.dark .page-hero, body.dark .footer { background:#101b37; border-color:#26375f; }
body.dark .pricing-table th { color:#b8c6e2; }
body.dark .pricing-table td, body.dark .table td { border-color:#27385f; color:#b5c3df; }
body.dark .feature::after { background:#1e3159; }
body.dark .case:nth-child(2) { background:linear-gradient(135deg,#1b2b4b,#282044); color:var(--ink); }
body.dark .case:nth-child(2) p, body.dark .case:nth-child(2) small { color:#aab8d8; }
body.dark .nav { background:#142140; }
body.dark .form-grid input, body.dark .form-grid textarea, body.dark .form-grid select { background:#101a34; border-color:#2b3b67; color:var(--ink); }
body.dark .tabbar { border-color:#2b3b67; }
body.dark .chart { background:repeating-linear-gradient(to top,#1b2b4c 0 1px,transparent 1px 44px); border-color:#2b3b67; }
body.dark .empty { border-color:#3a4e7d; }

/* Readable local-workspace states and mobile navigation. */
.demo-notice { padding: 13px 16px; margin: 0 0 24px; color: #725215; background: #fff6df; border: 1px solid #ead7a9; border-radius: 12px; font-size: 13px; line-height: 1.8; }
.user-content { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; line-height: 1.7; color: var(--muted); }
.list-row > div { min-width: 0; overflow-wrap: anywhere; }
.list-row > button { flex-shrink: 0; }
:focus-visible { outline: 3px solid #8e71ff; outline-offset: 3px; }
body.dark .dashboard-main, body.dark .sidebar, body.dark .workspace-switch, body.dark .detail-panel { background: #111b38; color: var(--ink); border-color: var(--line); }
body.dark .demo-notice { color: #f4d696; background: #392e19; border-color: #68552c; }
body.dark .plan-option.selected, body.dark .pricing-table .featured { background: #2b2350; }
body.dark .side-nav button, body.dark .form-grid label, body.dark .hero-copy p, body.dark .hero-note, body.dark .eyebrow { color: #b8c6e2; }
body.dark .side-nav button.active, body.dark .side-nav button:hover, body.dark .tabbar button.active { background: #24396a; color: #d9e6ff; }
body.dark .brand, body.dark .btn.secondary, body.dark .scan-pill b { color: #a7c2ff; }
@media (max-width:900px) {
 .sidebar { display: block; padding: 12px 18px; border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; }
 .workspace-switch, .sidebar > .btn, .side-nav .section-label { display: none; }
 .side-nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 5px; }
 .side-nav button { flex: 0 0 auto; min-height: 44px; }
 .dashboard-main { min-width: 0; }
 .panel { overflow-x: auto; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.workspace-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.workspace-controls label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.workspace-controls select { max-width: 280px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper, white); color: var(--ink); }
button:disabled { opacity: .55; cursor: wait; }