@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&display=swap');
/* Keep the workspace fluid; only data tables scroll horizontally. */
html { color-scheme: dark; }
body { min-width: 0; }
.app { width: 100%; min-height: 100dvh; }
.main { min-width: 0; width: calc(100% - 210px); }
.side { overflow-y: auto; overscroll-behavior: contain; }
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.grid > *, .section > *, .plans > *, .setting-row > *, .top > *,
.panelhead > *, .spatial-head > *, .field, .alert > div { min-width: 0; }
.top, .panelhead, .spatial-head { gap: 16px; flex-wrap: wrap; }
.actions { flex-wrap: wrap; gap: 8px; }
.btn, .auth-tab, .nav button, .close { min-height: 44px; }
.close { flex: 0 0 44px; }
.avatar, .face, .dot, .auth-dot { flex-shrink: 0; }
.sub, .hint, .alert p, .url-box, .side .foot { overflow-wrap: anywhere; }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.table { min-width: 580px; }
.table th, .table td { padding-right: 16px; }
.table .pill { white-space: nowrap; }
pre { max-width: 100%; overflow-x: auto; }
input, select { min-width: 0; max-width: 100%; }
.field input, .field select { width: 100%; background: #17231e; color: var(--ink); }
.filterbar select { flex: 1 1 180px; }
.filterbar label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.spatial-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.node { min-width: 0; overflow-wrap: anywhere; }
.connector { display: none; }
.chart { margin-bottom: 28px; }
.bar { min-width: 0; }
.modalwrap { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal, .auth-modal { width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal { max-width: 720px; }
.auth-modal { max-width: 560px; }
body:has(.modalwrap.show) { overflow: hidden; }
.toast { max-width: calc(100vw - 32px); right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
:focus-visible { outline: 2px solid #9be8bc; outline-offset: 3px; }

@media (max-width: 1200px) {
  .main { padding: 28px 24px 48px; }
  .grid, .spatial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .app { display: block; }
  .side { position: relative; inset: auto; width: 100%; border-radius: 0; border-width: 0 0 1px; padding: 16px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); box-shadow: none; overflow: visible; }
  .brand { font-size: 24px; padding: 0 0 12px; }
  .nav { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
  .nav button { flex: 0 0 auto; font-size: 16px; padding: 10px 14px; white-space: nowrap; }
  .nav button::before { content: none; }
  .side .foot { display: none; }
  .main { margin-left: 0; width: 100%; padding: 24px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); }
  .title { font-size: clamp(26px, 4vw, 36px); }
}

@media (max-width: 600px) {
  .main { padding: 24px max(16px, env(safe-area-inset-right)) 36px max(16px, env(safe-area-inset-left)); }
  .top { align-items: flex-start; gap: 18px; }
  .top > div:first-child { width: 100%; }
  .actions { width: 100%; }
  .actions .avatar { margin-left: auto; }
  .btn { padding: 10px 12px; font-size: 15px; }
  .grid { gap: 10px; }
  .metric { padding: 16px 12px; }
  .metric .num { font-size: clamp(25px, 7vw, 32px); }
  .panel, .spatial, .ai-card { padding: 16px; border-radius: 14px; }
  .panelhead { align-items: flex-start; gap: 12px; }
  .panelhead .sub { margin-top: 6px; line-height: 1.5; }
  .section { gap: 16px; }
  .spatial-head { align-items: flex-start; }
  .spatial-grid { gap: 10px; margin-top: 16px; }
  .node { padding: 12px; }
  .node .btn { width: 100%; margin-top: 10px; }
  .alert { flex-wrap: wrap; gap: 10px; }
  .alert > div { flex: 1 1 calc(100% - 24px) !important; }
  .chart { height: 170px; gap: 8px; }
  .plans, .setting-row { grid-template-columns: minmax(0, 1fr); }
  .modal, .auth-modal { padding: 20px 16px; }
  .modalhead { align-items: flex-start; gap: 12px; }
  .modalhead > div { min-width: 0; }
  .modalwrap { align-items: center; }
  .auth-tabs { flex-wrap: wrap; }
  input, select { font-size: 18px; }
  .ai-card > .btn { margin-top: 8px; }
}

@media (max-width: 360px) {
  .spatial-grid { grid-template-columns: minmax(0, 1fr); }
  .actions .avatar { display: none; }
}

/* v3 visual refinement: restrained dark workspace */
:root{--ink:#e6e8e7;--muted:#858b8a;--line:#24292a;--paper:#090b0c;--card:#111415;--mint:#d7ff7a;--green:#c8ed73;--orange:#ffb26c;--shadow:0 12px 36px rgba(0,0,0,.2)}
body{background-color:#090b0c;background-image:radial-gradient(rgba(153,170,160,.16) .7px,transparent .7px);background-size:22px 22px;letter-spacing:-.01em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 0%,rgba(200,237,115,.055),transparent 35%),radial-gradient(ellipse at 15% 90%,rgba(88,152,255,.03),transparent 30%)}
.app{background:transparent}.side{background:rgba(14,17,18,.88);border-color:#24292a;box-shadow:0 14px 45px rgba(0,0,0,.35);backdrop-filter:blur(22px)}.brand{font-size:22px;letter-spacing:-.06em}.brand span{color:var(--mint)}.nav{gap:2px}.nav button{border-radius:8px;color:#8f9694;padding:10px 11px}.nav button.active{background:#1c2421;color:#ecf5e7;box-shadow:inset 2px 0 var(--mint)}.nav button:hover{background:#171d1e;color:#fff}.side .foot{border-color:#24292a;color:#707775}.main{padding:32px 42px}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--green)}.title{font-size:34px;letter-spacing:-.075em}.avatar{background:#d7ff7a;color:#121714}.btn{background:#15191a;border-color:#303637;color:#dce1df;border-radius:8px;padding:9px 13px;font-size:14px}.btn:hover{background:#202627;border-color:#4a5554}.btn.primary{background:var(--mint);color:#111712;border-color:var(--mint)}.grid{gap:10px}.metric{background:rgba(17,20,21,.92);border:1px solid #252b2c;border-radius:10px;box-shadow:none;padding:17px 18px}.metric .label{color:#818887}.metric .num{font-size:30px}.section{gap:12px}.panel{background:rgba(17,20,21,.93);border:1px solid #252b2c;border-radius:10px;box-shadow:none;padding:19px}.panel h2{font-size:19px}.panelhead{margin-bottom:13px}.chart{height:190px;border-color:#282e2e}.bar{background:#3c5b3f;border-radius:3px 3px 0 0}.bar.hot{background:#d77c43}.table{font-size:14px}.table th{color:#747d7b;font-size:12px;border-color:#252b2c}.table td{border-color:#202626;padding:12px 0}.pill{background:#33271e;color:#ffc182;border-radius:5px;font-size:12px}.face{background:#293d35}.upgrade{background:#18231c;border-color:#33442f;border-radius:9px;padding:17px}.upgrade .btn{background:#d7ff7a;color:#111712}.filterbar{background:rgba(17,20,21,.93);border-color:#252b2c;border-radius:9px;box-shadow:none;padding:10px 12px}.filterbar select,.filterbar input,.field input,.field select{background:#0f1314;color:#e6e8e7;border-color:#303637;border-radius:7px}.ai-card{background:#142018;border-color:#334c31;border-radius:9px;padding:17px}.node{background:#131819e8;border-color:#303939;border-radius:9px;box-shadow:0 10px 22px #0005}.node-ai{background:#172218;border-color:#52673b}.node-note{background:#211c16;border-color:#5c4934}.node-kicker{color:#bdda75}.spatial{background:rgba(14,18,18,.75);border-color:#252b2c;border-radius:10px;box-shadow:none}.modal,.auth-modal{background:#111516;border:1px solid #2b3232;border-radius:12px;box-shadow:0 24px 60px #000b}.modalwrap{background:#030505d9}.plan{background:#151a1b;border-color:#2d3535;border-radius:8px}.plan.featured{border-color:#b9db6c}.auth-tab{border-radius:7px}.auth-tab.active{background:var(--mint);color:#101410;border-color:var(--mint)}.auth-status{background:#162319}.toast{background:#d7ff7a;color:#101410;border-radius:7px;font-size:14px}

/* v4: premium editorial polish */
body{font-family:'Instrument Sans',Manrope,system-ui,sans-serif;background-image:radial-gradient(rgba(180,205,190,.13) .7px,transparent .7px);background-size:24px 24px}
body:after{content:"";position:fixed;z-index:-1;inset:-25%;pointer-events:none;background:conic-gradient(from 210deg at 68% 18%,transparent 0 27%,rgba(205,246,121,.045) 31%,transparent 39% 100%);filter:blur(80px);opacity:.8}
.main{padding-top:38px}.top{max-width:1180px;margin-inline:auto;margin-bottom:34px}.title{font-size:clamp(34px,4vw,48px);font-weight:600;letter-spacing:-.095em;line-height:1}.eyebrow{font-size:12px;font-weight:500}.actions .btn{letter-spacing:-.02em}.grid{max-width:1180px;margin-inline:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #252b2c;border-bottom:1px solid #252b2c;background:transparent}.metric{border:0;border-right:1px solid #252b2c;border-radius:0;background:transparent;box-shadow:none;padding:19px 22px}.metric:last-child{border-right:0}.metric .num{font-size:33px;font-weight:600;letter-spacing:-.09em}.metric .label{font-size:13px;letter-spacing:.02em}.delta{font-size:13px;color:#a9d86b}.section,.spatial,.panel[style]{max-width:1180px;margin-inline:auto}.section{margin-top:18px}.panel{border-radius:11px}.panel h2{font-weight:600;letter-spacing:-.05em}.panelhead{align-items:flex-start}.panelhead .sub{margin-top:5px}.spatial{background:linear-gradient(135deg,rgba(17,23,20,.94),rgba(13,17,17,.9));min-height:270px}.spatial-head .sub{font-family:'DM Mono';font-size:12px}.spatial-grid{margin-top:32px;gap:12px}.node{min-height:142px;padding:17px 16px;transition:transform .25s ease,border-color .25s ease,background .25s ease}.node:hover{transform:translateY(-4px);border-color:#718c55;background:#1a251c}.node h3{font-size:18px;font-weight:600;letter-spacing:-.05em}.node p{font-size:13px}.node-ai{position:relative}.node-ai:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(214,255,122,.15);pointer-events:none}.chart{height:210px}.bar{opacity:.75;transition:opacity .2s,transform .2s}.bar:hover{opacity:1;transform:translateY(-3px)}.table td:first-child{color:#727a78}.table b{font-weight:500}.table tr{transition:background .2s}.table tbody tr:hover{background:#171d1e}.pill{font-weight:500;letter-spacing:.02em}.upgrade{position:relative;overflow:hidden}.upgrade:after{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-90px;border:1px solid #b9e16a33;border-radius:50%}.ai-card{box-shadow:inset 0 0 0 1px #bedf7630}.btn{transition:background .2s,border-color .2s,transform .2s}.btn:active{transform:translateY(1px)}.side{border-radius:14px}.side .brand{font-family:'Instrument Sans';font-weight:700}.nav button{font-size:14px}
@media(max-width:1200px){.main{padding-inline:24px}.top,.grid,.section,.spatial,.panel[style]{max-width:none}}
@media(max-width:900px){.main{padding-top:24px}.grid{border-top:0;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid #252b2c}.metric{border-bottom:1px solid #252b2c}.metric:nth-child(odd){border-right:1px solid #252b2c}.metric:nth-child(even){border-right:0}.spatial-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}
@media(max-width:600px){.main{padding-inline:16px}.title{font-size:34px}.metric{padding:15px 12px}.metric .num{font-size:29px}.spatial-grid{grid-template-columns:1fr 1fr}.node{min-height:128px}.spatial-head .sub{width:100%;margin-top:6px}}
@media(max-width:360px){.spatial-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}