:root { --ink:#17151d; --muted:#716d7b; --line:#e9e6ed; --paper:#fff; --wash:#f5f4f7; --purple:#6c45ed; --purple-dark:#4d2fc1; --green:#13795b; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--wash); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--wash); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(24px,3vw,36px); letter-spacing:-.045em; }
h2 { margin-bottom:8px; font-size:clamp(24px,3vw,34px); letter-spacing:-.04em; }
h3 { margin-bottom:6px; letter-spacing:-.025em; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:245px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 18px; color:white; background:#191720; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 28px; color:white; text-decoration:none; font-weight:900; letter-spacing:-.03em; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,#8d6bff,#5530d2); box-shadow:0 10px 28px rgba(109,71,238,.35); }
.main-nav { display:grid; gap:5px; }
.nav-link { width:100%; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; padding:11px 12px; border:0; border-radius:11px; color:#aaa6b2; background:transparent; text-align:left; }
.nav-link b { font-size:13px; }
.nav-link span { text-align:center; font-size:16px; }
.nav-link em { min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; border-radius:99px; color:#d9d4e1; background:#33303a; font-size:10px; font-style:normal; font-weight:900; }
.nav-link:hover,.nav-link.active { color:white; background:#2d2a34; }
.nav-link.active span { color:#9b82ff; }
.sidebar-foot { margin-top:auto; display:flex; gap:10px; align-items:center; padding:16px 10px 0; border-top:1px solid #33303a; }
.workspace-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#e9a458; color:#241708; font-size:11px; font-weight:900; }
.sidebar-foot div:last-child { display:grid; gap:3px; font-size:12px; }
.sidebar-foot small { color:#8e8998; }
.main-area { min-width:0; padding:0 clamp(22px,4vw,60px) 60px; }
.topbar { min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.demo-badge { padding:6px 9px; border:1px solid #e4c873; border-radius:8px; color:#715a0d; background:#fff7d6; font-size:10px; font-weight:900; letter-spacing:.08em; }
.eyebrow { margin-bottom:7px; color:var(--purple-dark); font-size:10px; font-weight:900; letter-spacing:.13em; }
.primary-button,.light-button { border:0; border-radius:11px; padding:11px 15px; font-weight:800; }
.primary-button { color:white; background:var(--purple); box-shadow:0 8px 20px rgba(108,69,237,.2); }
.primary-button:hover { background:var(--purple-dark); }
.light-button { color:var(--purple-dark); background:white; }
.wide { width:100%; padding:14px; }
.page { display:none; }
.page.active { display:block; animation:enter .18s ease-out; }
@keyframes enter { from { opacity:0; transform:translateY(4px); } }
.hero-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:15px; }
.ai-brief { min-height:230px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; padding:30px; border-radius:22px; color:white; background:radial-gradient(circle at 85% 15%,#845cff 0,transparent 32%),linear-gradient(145deg,#3d287f,#191621 72%); overflow:hidden; box-shadow:0 18px 50px rgba(39,25,80,.14); }
.ai-brief .eyebrow { color:#bbaaff; }
.ai-brief p:not(.eyebrow) { max-width:650px; color:#d1cbdc; line-height:1.6; }
.ai-orb { width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); box-shadow:0 0 40px rgba(152,119,255,.45); font-size:26px; }
.surface,.voice-card { padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 8px 28px rgba(35,27,49,.035); }
.voice-card { display:flex; flex-direction:column; justify-content:center; }
.voice-card p { color:var(--muted); line-height:1.55; }
.voice-card small { color:var(--muted); }
.voice-tags { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 18px; }
.voice-tags span { padding:6px 8px; border-radius:8px; color:#5237aa; background:#f0ebff; font-size:11px; font-weight:800; }
.surface-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.surface-heading h3 { margin-bottom:0; }
.health-dot { width:10px; height:10px; border-radius:50%; background:#33c18b; box-shadow:0 0 0 5px #e5f9f1; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:15px 0; }
.stat-card { padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:white; }
.stat-card span { display:block; color:var(--muted); font-size:11px; font-weight:700; }
.stat-card strong { display:block; margin:9px 0 5px; font-size:24px; letter-spacing:-.04em; }
.stat-card small { color:var(--green); font-size:10px; font-weight:700; }
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.text-button { border:0; padding:3px; color:var(--purple-dark); background:transparent; font-size:11px; font-weight:900; }
.mini-connections { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }
.platform-pill { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:800; }
.platform-icon { width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:white; background:#333; font-size:9px; font-weight:900; }
.platform-icon svg { width:17px; height:17px; display:block; color:white; }
.platform-icon.fb svg { width:10px; height:18px; }
.ig { background:linear-gradient(145deg,#a63bdd,#f45c63); }.tt { background:#16141b; }.fb { background:#1877f2; }.yt { background:#f20f20; }.li { background:#0a66c2; }.th { background:#17151d; }.x { background:#080808; }
.queue-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 0; border-top:1px solid var(--line); }
.queue-row:first-child { border-top:0; }
.queue-row p { margin-bottom:3px; font-size:12px; font-weight:800; }
.queue-row small { color:var(--muted); font-size:10px; }
.queue-row time { color:var(--muted); font-size:10px; }
.studio-grid { display:grid; grid-template-columns:minmax(350px,.85fr) 1.25fr; gap:24px; align-items:start; }
.generator-card { display:grid; gap:17px; position:sticky; top:22px; }
.subtle,.section-heading p { color:var(--muted); line-height:1.55; }
label { display:grid; gap:7px; font-size:12px; font-weight:800; }
input,textarea,select { width:100%; border:1px solid #dbd7e1; border-radius:11px; padding:11px 12px; color:var(--ink); background:white; outline:none; }
textarea { resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(108,69,237,.12); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
fieldset { margin:0; padding:0; border:0; }
legend { margin-bottom:9px; font-size:12px; font-weight:800; }
.platform-picks { display:flex; flex-wrap:wrap; gap:7px; }
.platform-pick { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:11px; }
.platform-pick input { width:auto; accent-color:var(--purple); }
.fine-print { margin:-7px 0 0; color:var(--muted); text-align:center; font-size:10px; }
.result-heading,.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.result-heading span { padding:6px 9px; border-radius:8px; color:var(--muted); background:#ebe9ef; font-size:10px; font-weight:800; }
.generated-drafts { display:grid; gap:12px; }
.draft-card { border:1px solid var(--line); border-radius:17px; background:white; overflow:hidden; }
.draft-card-head { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line); }
.draft-card-head div:nth-child(2) { display:grid; gap:2px; flex:1; }
.draft-card-head small { color:var(--muted); }
.draft-card textarea { min-height:145px; border:0; border-radius:0; padding:16px; line-height:1.55; }
.draft-actions { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#faf9fb; }
.draft-actions span { color:var(--muted); font-size:10px; }
.small-button { border:1px solid var(--line); border-radius:9px; padding:7px 10px; color:var(--ink); background:white; font-size:11px; font-weight:800; }
.empty-state { min-height:260px; display:grid; place-items:center; padding:40px; border:1px dashed #cbc5d4; border-radius:18px; color:var(--muted); text-align:center; line-height:1.6; }
.queue-board { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.queue-column { min-height:400px; padding:15px; border:1px solid var(--line); border-radius:17px; background:#efedf2; }
.queue-column h3 { display:flex; justify-content:space-between; padding:2px 2px 12px; font-size:13px; }
.queue-column h3 span { color:var(--muted); font-size:11px; }
.queue-card { margin-bottom:9px; padding:14px; border:1px solid var(--line); border-radius:13px; background:white; }
.queue-card p { margin:10px 0; font-size:12px; line-height:1.5; }
.queue-card small { color:var(--muted); font-size:10px; }
.queue-card .card-actions { display:flex; gap:6px; margin-top:12px; }
.inbox-layout { display:grid; grid-template-columns:330px 1fr; gap:14px; }
.conversation-list { padding:8px; }
.conversation-item { width:100%; display:grid; grid-template-columns:auto 1fr; gap:10px; padding:12px; border:0; border-radius:12px; background:white; text-align:left; }
.conversation-item.active { background:#f0ecff; }
.conversation-item div:last-child { min-width:0; display:grid; gap:4px; }
.conversation-item small,.conversation-detail small { color:var(--muted); }
.conversation-item p { margin:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:11px; }
.conversation-detail { display:grid; gap:17px; align-content:start; }
.conversation-detail > div:first-child { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; }
.conversation-detail > div:first-child .platform-icon { grid-row:1/3; }
blockquote { margin:8px 0; padding:20px; border-left:3px solid var(--purple); color:#35303d; background:#f7f5f9; line-height:1.6; }
.suggested-reply { padding:16px; border-radius:14px; background:#f0ebff; }
.suggested-reply p:last-child { margin-bottom:0; line-height:1.6; }
.range-select { width:auto; }
.analytics-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.chart { height:240px; display:flex; align-items:flex-end; justify-content:space-around; gap:10px; padding:28px 10px 0; border-bottom:1px solid var(--line); }
.chart i { width:8%; border-radius:7px 7px 0 0; background:linear-gradient(#8d6cff,#6241db); }
.chart-labels { display:flex; justify-content:space-around; padding-top:10px; color:var(--muted); font-size:10px; }
.insight-list p { display:grid; grid-template-columns:30px 1fr; gap:3px 10px; padding:13px 0; border-bottom:1px solid var(--line); margin:0; }
.insight-list span { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--purple-dark); background:#f0ebff; font-size:10px; font-weight:900; }
.insight-list small { color:var(--muted); }
.security-note { color:var(--green); font-size:11px; font-weight:800; }
.connection-notice { margin-bottom:16px; padding:13px 15px; border:1px solid #eedf9b; border-radius:12px; color:#6d5711; background:#fff8d8; font-size:12px; }
.connection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.connection-card { padding:18px; border:1px solid var(--line); border-radius:16px; background:white; }
.connection-card-head { display:flex; gap:11px; align-items:center; }
.connection-card-head div:last-child { display:grid; gap:3px; }
.connection-card-head small { color:var(--muted); }
.connection-card p { min-height:42px; margin:15px 0; color:var(--muted); font-size:11px; line-height:1.55; }
.connection-status { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--line); }
.connector-docs { display:inline-block; margin-top:12px; color:var(--blue); font-size:11px; text-decoration:none; }
.connector-details { display:grid; gap:5px; min-height:34px; margin-bottom:10px; color:var(--muted); overflow-wrap:anywhere; }
.connected { color:var(--green); font-size:11px; font-weight:900; }
.research-safety { margin-bottom:14px; padding:14px 16px; border:1px solid #bfe7d8; border-radius:12px; color:#176f57; background:#f1fbf7; font-size:12px; }
.research-readiness { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.research-readiness span { padding:6px 9px; border-radius:99px; color:#7a620d; background:#fff5cf; font-size:10px; font-weight:800; }
.research-readiness .ready { color:#13795b; background:#eaf8f3; }
.creator-grid { display:grid; gap:14px; }
.creator-card { padding:20px; border:1px solid var(--line); border-radius:16px; background:white; }
.creator-head { display:flex; align-items:center; gap:11px; }
.creator-head>div:nth-child(2) { min-width:0; flex:1; }
.creator-head h3 { margin:0; font-size:16px; }
.creator-head a { color:var(--blue); font-size:10px; text-transform:capitalize; }
.research-status { padding:5px 8px; border-radius:99px; color:#176f57; background:#eaf8f3; font-size:9px; font-weight:900; }
.creator-summary { margin:18px 0; color:var(--ink); font-size:13px; line-height:1.6; }
.research-overview { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.research-block { padding:13px; border-radius:11px; background:#f5f8ff; }
.research-block b,.research-list b { font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.research-block p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.research-tags { display:flex; flex-wrap:wrap; gap:6px; margin:13px 0; }
.research-tags span { padding:5px 8px; border-radius:7px; color:#0954d6; background:#edf4ff; font-size:10px; font-weight:700; }
.research-lists { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.research-list { padding:14px; border:1px solid var(--line); border-radius:11px; }
.research-list.inspiration { border-color:#bcd3ff; background:#f3f7ff; }
.research-list.inspiration b { color:var(--blue); }
.research-list ul { padding-left:16px; margin-bottom:0; color:var(--muted); font-size:11px; line-height:1.55; }
.research-empty { margin:18px 0; padding:30px 15px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); text-align:center; font-size:11px; }
.creator-card .card-actions { display:flex; gap:8px; margin-top:16px; }
.creator-empty { grid-column:1/-1; padding:60px 20px; }
.creator-empty p { color:var(--muted); }
.store-open-link { text-decoration:none; }
.store-builder { display:grid; grid-template-columns:minmax(360px,.88fr) 1.12fr; gap:20px; align-items:start; }
.store-form { display:grid; gap:22px; }
.store-form-section { display:grid; gap:11px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.profile-editor { display:grid; grid-template-columns:68px 1fr; gap:13px; align-items:center; }
.store-avatar { width:68px; height:68px; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:white; background:var(--blue); font-weight:900; }
.store-avatar img { width:100%; height:100%; object-fit:cover; }
.store-form label small { color:var(--muted); font-size:9px; font-weight:500; }
.social-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.publish-toggle { display:grid; grid-template-columns:auto 1fr; align-items:center; padding:13px; border-radius:11px; background:#f4f8ff; }
.publish-toggle input { width:18px; }
.publish-toggle span,.publish-toggle small { display:block; }
.store-side { display:grid; gap:18px; position:sticky; top:88px; }
.store-preview { position:relative; min-height:530px; display:flex; flex-direction:column; gap:22px; align-items:center; justify-content:center; padding:42px; overflow:hidden; border:1px solid var(--line); border-radius:22px; color:#172038; background:var(--store-secondary); font-family:var(--store-font),sans-serif; box-shadow:0 22px 55px rgba(29,60,109,.12); }
.store-preview.theme-bold { color:white; background:var(--store-primary); }
.store-preview.theme-editorial { border-radius:2px; background:#fff; }
.preview-profile { display:grid; justify-items:center; max-width:420px; text-align:center; }
.preview-profile>img,.preview-profile>span { width:82px; height:82px; display:grid; place-items:center; object-fit:cover; border-radius:50%; color:white; background:var(--store-primary); font-size:21px; font-weight:900; }
.preview-profile h3 { margin:14px 0 5px; font-size:22px; }
.preview-profile p { margin:0; opacity:.72; }
.preview-socials { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.preview-socials i { padding:4px 7px; border:1px solid currentColor; border-radius:99px; font-size:8px; font-style:normal; opacity:.7; }
.preview-offer { width:min(430px,100%); padding:24px; border-radius:16px; color:#172038; background:white; box-shadow:0 10px 30px rgba(23,32,56,.1); text-align:center; }
.theme-editorial .preview-offer { border:1px solid #172038; border-radius:0; box-shadow:none; }
.preview-offer small { color:var(--store-primary); font-size:9px; font-weight:900; letter-spacing:.12em; }
.preview-offer h2 { margin:8px 0; font-size:25px; }
.preview-offer p { color:#6d7689; font-size:11px; }
.preview-offer button { width:100%; padding:12px; border:0; border-radius:9px; color:white; background:var(--store-primary); font-weight:800; }
.store-preview>em { position:absolute; top:14px; right:16px; font-size:9px; font-style:normal; opacity:.65; }
.count-badge { min-width:28px; height:28px; display:grid; place-items:center; border-radius:99px; color:var(--blue); background:#edf4ff; font-size:10px; font-weight:900; }
.store-leads { margin-top:14px; }
.lead-row { display:grid; grid-template-columns:1fr minmax(110px,.6fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:11px; }
.lead-row:first-child { border-top:0; }
.lead-row div,.lead-row small { display:block; }
.lead-row small,.lead-row span,.lead-row time { color:var(--muted); font-size:9px; }
dialog { width:min(480px,calc(100% - 24px)); padding:0; border:0; border-radius:20px; box-shadow:0 30px 100px rgba(19,13,30,.3); }
dialog::backdrop { background:rgba(19,16,24,.6); backdrop-filter:blur(5px); }
.modal-card { position:relative; display:grid; justify-items:center; gap:12px; padding:28px; text-align:center; }
.close-button { position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:white; font-size:18px; }
.connect-logo { width:55px; height:55px; display:grid; place-items:center; border-radius:16px; color:white; background:#333; font-weight:900; }
.connect-logo svg { width:27px; height:27px; color:white; }
.modal-card > p:not(.eyebrow) { color:var(--muted); line-height:1.55; }
.permission-list { width:100%; display:grid; gap:8px; padding:15px; border-radius:13px; background:var(--wash); text-align:left; font-size:11px; }
.modal-card small { color:var(--muted); }
.settings-modal { justify-items:stretch; text-align:left; }
.settings-modal > h2,.settings-modal > p { text-align:center; }
.settings-fields { display:grid; gap:10px; width:100%; max-height:45vh; overflow:auto; }
.settings-fields label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:700; }
.settings-fields input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; }
.toast { position:fixed; left:50%; bottom:24px; z-index:50; transform:translate(-50%,30px); padding:12px 17px; border-radius:11px; color:white; background:#191720; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 14px 40px rgba(0,0,0,.2); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:1000px){ .app-shell{grid-template-columns:76px 1fr}.sidebar{padding:22px 11px}.brand{justify-content:center;padding-left:0;padding-right:0}.brand span:last-child,.nav-link b,.sidebar-foot>div:last-child{display:none}.nav-link{grid-template-columns:1fr auto}.sidebar-foot{justify-content:center}.hero-grid,.studio-grid{grid-template-columns:1fr}.generator-card{position:static}.connection-grid{grid-template-columns:repeat(2,1fr)}.store-builder{grid-template-columns:1fr}.store-side{position:static} }
@media(max-width:720px){ .app-shell{display:block}.sidebar{position:fixed;top:auto;bottom:0;z-index:30;width:100%;height:67px;padding:8px 6px}.brand,.sidebar-foot{display:none}.main-nav{height:100%;grid-template-columns:repeat(8,1fr);gap:1px}.nav-link{display:grid;place-items:center;padding:5px 2px}.nav-link span{font-size:16px}.nav-link em{display:none}.main-area{padding:0 15px 86px}.topbar{min-height:85px}.topbar .primary-button{display:none}.demo-badge{font-size:8px}.hero-grid,.content-grid,.analytics-grid,.inbox-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.ai-brief{grid-template-columns:1fr;padding:23px}.ai-orb{width:45px;height:45px}.queue-board{grid-template-columns:1fr}.queue-column{min-height:auto}.connection-grid,.creator-grid{grid-template-columns:1fr}.research-overview,.research-lists,.social-fields{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.section-heading{align-items:flex-end}.section-heading .primary-button{font-size:11px;padding:9px}.conversation-list{display:none}.store-preview{min-height:460px;padding:24px 16px}.lead-row{grid-template-columns:1fr auto}.lead-row span{display:none} }

/* Light dashboard direction based on the approved reference. */
:root { --ink:#131827; --muted:#738099; --line:#e1e7f0; --wash:#f8faff; --purple:#1769ed; --purple-dark:#0954d6; --green:#12a878; }
body { background:#f8faff; }
.app-shell { grid-template-columns:230px 1fr; }
.sidebar { padding:28px 24px 22px; color:var(--ink); background:#fff; border-right:1px solid var(--line); }
.brand { padding:0 10px 52px; color:var(--ink); font-size:17px; }
.brand-mark { width:31px; height:31px; border-radius:9px; background:linear-gradient(145deg,#6f7eff,#155ef0); box-shadow:0 5px 14px rgba(23,105,237,.28); }
.main-nav { gap:10px; }
.nav-link { padding:10px 12px; color:#738099; border-radius:9px; }
.nav-link b { font-size:12px; }
.nav-link span { font-size:14px; }
.nav-link em { color:#69758a; background:#f0f3f8; }
.nav-link:hover,.nav-link.active { color:#1769ed; background:#f2f6ff; }
.nav-link.active span { color:#1769ed; }
.sidebar-foot { border-top:0; padding:16px 10px 0; }
.workspace-avatar,.profile-button { display:grid; place-items:center; color:white; background:#11141c; font-weight:900; }
.sidebar-foot small { color:#8b96a8; }
.main-area { padding:0; background:linear-gradient(140deg,#fbfcff 0%,#f6f9ff 100%); }
.topbar { min-height:74px; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(14px); }
.global-search { width:min(270px,40vw); display:flex; align-items:center; gap:8px; color:#8994a7; }
.global-search input { border:0; padding:9px 4px; background:transparent; box-shadow:none; font-size:12px; }
.global-search input:focus { box-shadow:none; }
.global-search kbd { padding:4px 6px; border:1px solid var(--line); border-radius:6px; color:#9aa4b5; background:#fff; font-size:9px; }
.demo-badge { padding:9px 13px; border-color:var(--line); color:#4e596d; background:white; box-shadow:0 2px 7px rgba(28,45,78,.04); }
.demo-badge.api-live { color:#087b5b; border-color:#bcebdc; background:#effbf7; }
.profile-button { width:31px; height:31px; border:0; border-radius:50%; font-size:10px; }
.primary-button { border-radius:8px; background:#1769ed; box-shadow:0 6px 16px rgba(23,105,237,.22); }
.primary-button:hover { background:#0954d6; transform:translateY(-1px); }
.page { width:min(1160px,100%); margin:0 auto; padding:38px 32px 64px; }
.page-intro { margin-bottom:24px; }
.page-intro h1 { margin-bottom:7px; font-size:26px; }
.page-intro p { margin:0; color:var(--muted); font-size:13px; }
.hero-grid { grid-template-columns:1fr 1.06fr; gap:16px; }
.ai-brief { min-height:250px; grid-template-columns:1fr; padding:27px; border-radius:13px; background:radial-gradient(circle at 82% 66%,rgba(74,177,255,.45),transparent 35%),linear-gradient(135deg,#2165ef,#2798f5); box-shadow:none; }
.ai-brief .eyebrow { color:#c9dcff; }
.ai-brief h2 { max-width:360px; font-size:24px; }
.ai-brief p:not(.eyebrow) { max-width:440px; color:#deebff; font-size:12px; }
.ai-brief .light-button { width:max-content; border-radius:7px; color:#1769ed; font-size:11px; }
.ai-orb { display:none; }
.surface,.voice-card,.stat-card { border-color:#dde5f0; border-radius:13px; box-shadow:0 2px 8px rgba(29,60,109,.025); }
.voice-card { min-height:250px; padding:27px; justify-content:flex-start; }
.voice-body { flex:1; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.voice-card p { font-size:12px; }
.voice-card small { font-size:10px; }
.voice-tags span { padding:5px 7px; border-radius:5px; color:#1769ed; background:#edf4ff; }
.confidence-ring { width:105px; height:105px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#1769ed 0 86%,#e6ebf3 86% 100%); position:relative; }
.confidence-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:white; }
.confidence-ring b { position:relative; z-index:1; color:#1769ed; font-size:21px; }
.stats-grid { gap:16px; margin:18px 0; }
.stat-card { min-height:108px; padding:20px; }
.stat-card strong { font-size:26px; }
.content-grid { grid-template-columns:.85fr 1.45fr; gap:16px; }
.mini-connections { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.platform-pill { flex-direction:column; gap:8px; padding:4px; border:0; color:#526078; font-size:9px; }
.platform-icon { box-shadow:0 3px 9px rgba(25,39,68,.13); }
.queue-row { padding:12px 0; }
.queue-row p { font-size:11px; }
.text-button { color:#1769ed; }
.health-dot { background:#13bd88; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@media(max-width:1000px){ .app-shell{grid-template-columns:76px 1fr}.sidebar{padding:24px 10px}.page{padding-left:22px;padding-right:22px}.brand{padding-bottom:40px}.hero-grid,.studio-grid{grid-template-columns:1fr} }
@media(max-width:720px){ .sidebar{background:#fff;border-top:1px solid var(--line);border-right:0}.main-area{padding:0 0 76px}.topbar{min-height:64px;padding:0 15px}.global-search{width:48%}.global-search kbd{display:none}.page{padding:24px 15px 40px}.hero-grid,.content-grid,.analytics-grid,.inbox-layout{grid-template-columns:1fr}.voice-body{grid-template-columns:1fr}.confidence-ring{width:82px;height:82px}.mini-connections{grid-template-columns:repeat(5,1fr)}.profile-button{display:none} }
.business-safety{padding:13px 16px;border:1px solid #d8e5fb;border-radius:10px;color:#54627b;background:#f2f7ff;font-size:11px}.business-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.business-grid>.surface{padding:22px}.business-products{grid-column:1/-1}.business-row,.automation-row,.conversion-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.business-row:last-child,.automation-row:last-child,.conversion-row:last-child{border-bottom:0}.business-row small,.automation-row small,.conversion-row small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.product-type,.automation-row>span{min-width:72px;padding:5px 7px;border-radius:6px;color:#1769ed;background:#eef4ff;font-size:8px;font-weight:900;text-align:center}.row-actions{display:flex;gap:5px}.row-actions button{padding:6px 8px}.compact-form{display:grid;gap:9px;margin:14px 0}.compact-form label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:800}.compact-form input,.compact-form textarea,.compact-form select{padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit}.course-outline{padding:12px 0}.course-outline>b{font-size:14px}.course-outline section{margin-top:10px;padding:12px;border-radius:9px;background:#f7f9fc}.course-outline section>span{font-size:10px;font-weight:900;text-transform:uppercase}.course-outline p{margin:9px 0 0}.course-outline p small{display:block;margin:3px 0 0 17px;color:var(--muted)}.community-post{padding:12px 0;border-bottom:1px solid var(--line)}.community-post p{margin:5px 0}.community-post small{color:var(--muted)}.conversion-row{grid-template-columns:1fr auto}.product-modal fieldset{padding:12px;border:1px solid var(--line);border-radius:10px}.product-modal legend{color:#657087;font-size:9px;font-weight:900}.product-modal fieldset[hidden]{display:none}.business-grid .empty-state{padding:20px 10px}@media(max-width:900px){.business-grid{grid-template-columns:1fr}.business-products{grid-column:auto}.business-row{grid-template-columns:auto 1fr}.business-row .row-actions{grid-column:1/-1}}@media(max-width:560px){.business-row,.automation-row{grid-template-columns:1fr}.product-type,.automation-row>span{width:max-content}.row-actions{flex-wrap:wrap}}

@media(max-width:720px){
  body.voxel-crm .sidebar{height:calc(76px + env(safe-area-inset-bottom));padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
  body.voxel-crm .main-nav{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82px;gap:4px;padding:0 18px 0 2px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-padding-inline:6px 18px;scroll-snap-type:x proximity;scrollbar-width:none}
  body.voxel-crm .main-nav::-webkit-scrollbar{display:none}
  body.voxel-crm .nav-link{min-width:82px;min-height:58px;grid-template-columns:1fr;grid-template-rows:20px auto;gap:2px;padding:5px 4px;scroll-snap-align:start}
  body.voxel-crm .nav-link b{display:block;font-size:10px;line-height:1.05;text-align:center;white-space:normal}
  body.voxel-crm .main-area{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}