:root { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#111827; background:#f3f4f6; }
* { box-sizing:border-box; }
body { margin:0; }
.shell { width:min(100%, 720px); margin:0 auto; padding:20px 16px 96px; }
.topbar,.row,.between { display:flex; align-items:center; }
.topbar,.between { justify-content:space-between; gap:12px; }
.eyebrow { font-size:11px; letter-spacing:.16em; font-weight:800; color:#6b7280; }
h1,h2,p { margin-top:0; }
h1 { font-size:24px; margin-bottom:0; }
h2 { font-size:18px; margin-bottom:8px; }
h3 { font-size:15px; margin:18px 0 8px; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:16px; margin-top:14px; box-shadow:0 1px 2px rgb(0 0 0 / 4%); }
label { display:block; font-size:13px; font-weight:700; margin:12px 0; }
input,select,textarea { width:100%; margin-top:6px; padding:12px; border:1px solid #d1d5db; border-radius:12px; font:inherit; background:#fff; }
textarea { min-height:96px; resize:vertical; }
button { border:0; border-radius:12px; padding:12px 14px; font:inherit; font-weight:800; background:#111827; color:#fff; cursor:pointer; }
button.secondary { background:#e5e7eb; color:#111827; }
button.ghost { background:transparent; color:#111827; border:1px solid #d1d5db; }
button:disabled { opacity:.45; cursor:not-allowed; }
.grid2,.navgrid,.kpis { display:grid; gap:10px; }
.grid2 { grid-template-columns:1fr; }
.navgrid { grid-template-columns:repeat(2,1fr); margin-top:14px; }
.kpis { grid-template-columns:1fr 1fr; margin-top:14px; }
.kpis article { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; }
.kpis strong { display:block; font-size:22px; }
.kpis span,.muted { color:#6b7280; font-size:12px; }
.command-card h2 { margin-bottom:0; }
.command-kpis article { min-height:88px; }
.pipeline-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.pipeline-item { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:10px 12px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; text-transform:capitalize; }
.pipeline-item span { font-size:12px; color:#6b7280; }
.pipeline-item strong { font-size:16px; }
.attention-high { border-left:4px solid currentColor; }
.attention-medium { border-left:4px solid #6b7280; }
.status { margin-top:14px; border-radius:12px; padding:10px 12px; background:#e5e7eb; font-size:13px; }
.status.error { background:#fee2e2; color:#991b1b; }
.status.success { background:#dcfce7; color:#166534; }
.pill { padding:6px 10px; border-radius:999px; background:#e5e7eb; font-size:12px; font-weight:800; }
.score { padding:6px 9px; border-radius:999px; background:#dcfce7; color:#166534 !important; font-size:11px !important; font-weight:800; }
.invite-result { margin-top:12px; }
.stack { display:grid; gap:10px; margin-top:10px; }
.listitem { border:1px solid #e5e7eb; border-radius:14px; padding:12px; display:grid; gap:5px; background:#fafafa; }
.listitem strong { font-size:14px; }
.listitem span { color:#6b7280; font-size:12px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.actions button { padding:9px 11px; font-size:12px; }
.demo-pitch { color:#4b5563; font-size:13px; line-height:1.5; margin:4px 0 12px; }
.demo-button { width:100%; margin-top:12px; }
.demo-readonly { position:sticky; top:8px; z-index:10; margin-top:12px; padding:9px 12px; text-align:center; border-radius:999px; background:#111827; color:#fff; font-size:12px; font-weight:800; box-shadow:0 4px 16px rgb(0 0 0 / 12%); }
.plan-grid { display:grid; gap:12px; margin-top:14px; }
.plan-card { border:1px solid #e5e7eb; border-radius:16px; padding:14px; background:#fafafa; display:grid; gap:10px; }
.plan-card.recommended { border-width:2px; border-color:#111827; background:#fff; }
.plan-card p { color:#4b5563; font-size:13px; line-height:1.45; margin:0; }
.plan-card > span { color:#6b7280; font-size:12px; }
.plan-price { font-size:22px; font-weight:900; }
.guide-card { display:grid; gap:6px; border:1px solid #e5e7eb; border-radius:14px; padding:12px; margin-top:14px; background:#f9fafb; }
.guide-card span { color:#4b5563; font-size:12px; }
#viewPlansBtn { width:100%; margin-top:10px; }
.flow-dialog { width:min(calc(100% - 24px),520px); border:0; border-radius:20px; padding:0; box-shadow:0 20px 60px rgb(0 0 0 / 25%); }
.flow-dialog::backdrop { background:rgb(17 24 39 / 55%); backdrop-filter:blur(2px); }
.flow-dialog form { padding:18px; }
.flow-dialog form > button[type="submit"] { width:100%; margin-top:8px; }
.hidden { display:none !important; }
@media (max-width:639px) { .mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:20; margin:0; padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.96); border-top:1px solid #e5e7eb; backdrop-filter:blur(10px); } .mobile-nav button { padding:10px 6px; font-size:11px; } .topbar { align-items:flex-start; } .topbar .ghost { padding:9px 10px; font-size:12px; } .flow-dialog { margin:auto 12px 12px; width:calc(100% - 24px); max-height:86vh; } }
@media (min-width:640px) { .grid2 { grid-template-columns:1fr 1fr; } .kpis { grid-template-columns:repeat(4,1fr); } .pipeline-grid { grid-template-columns:repeat(3,1fr); } .navgrid { grid-template-columns:repeat(7,1fr); } .plan-grid { grid-template-columns:repeat(3,1fr); } }