/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0a; --s1:#111; --s2:#181818; --s3:#202020;
  --border:#252525; --border2:#2e2e2e;
  --text:#bbb; --text2:#777; --text3:#444;
  --accent:#e0e0e0; --hi:#ffffff;
  --green:#3a6b4a; --green-t:#1a3323; --green-text:#5a9b6e;
  --amber:#6b5020; --amber-t:#2a1e0a; --amber-text:#c4832e;
  --blue:#1a3a5c; --blue-t:#0a1a2a; --blue-text:#4a90c4;
  --red:#5c1a1a; --red-t:#2a0a0a; --red-text:#c44a4a;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',sans-serif;
  --r:2px; --r2:4px;
}
html,body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.6;min-height:100vh}

/* ── Layout ────────────────────────────────────────────── */
.app{display:grid;grid-template-rows:auto 1fr;min-height:100vh}
.topbar{border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:52px;background:var(--s1)}
.logo-mark{font-size:16px;font-weight:500;color:var(--hi);letter-spacing:.08em}
.logo-sub{font-size:10px;color:var(--text3);letter-spacing:.15em;text-transform:uppercase;margin-left:12px}
.topbar-right{display:flex;align-items:center;gap:16px}
.user-pill{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:8px}
.tier-badge{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--border2);border-radius:var(--r);color:var(--text2)}
.tier-badge.pro{border-color:var(--green);color:var(--green-text)}
.tier-badge.team{border-color:var(--blue);color:var(--blue-text)}

/* ── Main content ──────────────────────────────────────── */
.main{display:grid;grid-template-columns:220px 1fr;min-height:0}
.sidebar{border-right:1px solid var(--border);padding:28px 0;background:var(--s1)}
.content{padding:32px;overflow-y:auto}

/* ── Sidebar nav ───────────────────────────────────────── */
.nav-section{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);padding:0 20px;margin-bottom:8px;margin-top:20px}
.nav-section:first-child{margin-top:0}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;color:var(--text2);font-size:12px;transition:color .12s;border-left:2px solid transparent}
.nav-item:hover{color:var(--text)}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--s2)}
.nav-item .n{font-size:10px;color:var(--text3);min-width:16px}
.nav-item .lock{font-size:10px;color:var(--text3);margin-left:auto}

/* ── Section headings ──────────────────────────────────── */
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.section-title{font-size:15px;color:var(--hi);font-weight:400;letter-spacing:.02em}
.section-sub{font-size:11px;color:var(--text3)}
.divider{height:1px;background:var(--border);margin:24px 0}

/* ── Field label ───────────────────────────────────────── */
.flabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);display:block;margin-bottom:10px;font-weight:500}

/* ── Grid panels ───────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:1px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:1px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.panel{background:var(--s1);padding:18px 22px}
.panel.span2{grid-column:span 2}

/* ── Form controls ─────────────────────────────────────── */
select,input[type=number],input[type=text],input[type=email],input[type=password]{
  width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);
  color:var(--accent);font-family:var(--mono);font-size:13px;padding:9px 12px;
  outline:none;appearance:none;transition:border-color .12s}
select:focus,input:focus{border-color:var(--text3)}
select option{background:#1a1a1a}

.range-wrap{display:flex;align-items:center;gap:10px;position:relative}
.range-bounds{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:5px;letter-spacing:.05em}
.range-unit{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:4px}
.param-desc{font-size:11px;color:var(--text3);line-height:1.5;margin-top:8px;min-height:16px;transition:color .2s}
.panel:hover .param-desc{color:var(--text2)}
input[type=range]{flex:1;-webkit-appearance:none;height:2px;background:var(--border2);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--border2);transition:transform .1s}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2)}
.range-val{font-size:14px;color:var(--hi);font-family:var(--mono);min-width:80px;text-align:right;font-weight:500}

/* ── Buttons ───────────────────────────────────────────── */
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:var(--r);padding:9px 22px;border:1px solid;transition:all .12s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{background:#fff;border-color:#fff}
.btn-primary:disabled{opacity:.35;cursor:default}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border2)}
.btn-ghost:hover{color:var(--text);border-color:var(--text3)}
.btn-danger{background:transparent;color:var(--red-text);border-color:var(--red)}
.btn-danger:hover{background:var(--red)}
.action-row{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--s1);border:1px solid var(--border);border-top:none}
.spacer{flex:1}

/* ── Result blocks ─────────────────────────────────────── */
.exp-block{background:var(--s1);padding:18px 22px}
.exp-val{font-size:26px;color:var(--hi);font-weight:300;letter-spacing:.02em}
.exp-frac{font-size:13px;color:var(--text2);margin-top:3px}
.exp-name{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.15em;margin-bottom:8px}

.badge{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r)}
.badge-ok{background:var(--green-t);color:var(--green-text);border:1px solid var(--green)}
.badge-warn{background:var(--amber-t);color:var(--amber-text);border:1px solid var(--amber)}
.badge-locked{background:var(--s2);color:var(--text3);border:1px solid var(--border2)}
.badge-pro{background:var(--blue-t);color:var(--blue-text);border:1px solid var(--blue)}

/* ── Scaling law ───────────────────────────────────────── */
.law-box{background:var(--s2);border:1px solid var(--border);padding:14px 22px;font-size:14px;color:var(--accent);letter-spacing:.02em;margin-top:1px}

/* ── Canvas ────────────────────────────────────────────── */
.canvas-wrap{background:var(--s1);border:1px solid var(--border);position:relative;height:200px;margin-top:1px}
canvas#curve{width:100%;height:100%}
.canvas-label{position:absolute;font-size:10px;color:var(--text3);font-family:var(--mono)}
.canvas-label.x{bottom:8px;right:12px}
.canvas-label.y{top:8px;left:12px}
.opt-marker{position:absolute;top:0;bottom:0;width:1px;background:var(--green);pointer-events:none;display:none}
.opt-label{position:absolute;font-size:10px;color:var(--green-text);bottom:26px;white-space:nowrap}

/* ── Candidates ────────────────────────────────────────── */
.cand-row{display:flex;align-items:center;justify-content:space-between;padding:11px 22px;border-bottom:1px solid var(--border);background:var(--s1);gap:16px}
.cand-row:last-child{border-bottom:none}
.cand-row.locked{opacity:.35}
.cand-name{font-size:12px;color:var(--accent);font-weight:400}
.cand-meta{font-size:11px;color:var(--text2);margin-top:2px}
.cand-rank{font-size:11px;color:var(--text3);min-width:20px;text-align:right}

/* ── Export panel ──────────────────────────────────────── */
.export-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.export-opt{background:var(--s1);padding:16px 18px;cursor:pointer;transition:background .12s;text-align:center}
.export-opt:hover:not(.locked){background:var(--s2)}
.export-opt.locked{cursor:default}
.export-opt .ico{font-size:20px;margin-bottom:8px;display:block;color:var(--text2)}
.export-opt .ename{font-size:12px;color:var(--accent)}
.export-opt .edesc{font-size:10px;color:var(--text3);margin-top:3px}

/* ── Progress steps ────────────────────────────────────── */
.steps{display:flex;align-items:center;gap:0;margin-bottom:28px}
.step-item{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:11px;
	color:var(--text3);
	padding:0 16px 0 0;
	cursor:pointer;
	}
.step-item:hover{color:var(--text)}
.step-item:first-child{padding-left:0}
.step-num{width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.step-item.done .step-num{background:var(--green-t);border-color:var(--green);color:var(--green-text)}
.step-item.active .step-num{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.step-item.active{color:var(--accent)}
.step-sep{width:24px;height:1px;background:var(--border2);flex-shrink:0;margin-right:16px}

/* ── Auth screen ───────────────────────────────────────── */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.auth-card{width:380px;border:1px solid var(--border);background:var(--s1)}
.auth-head{padding:28px 32px 20px;border-bottom:1px solid var(--border)}
.auth-body{padding:28px 32px}
.auth-field{margin-bottom:16px}
.auth-demo{font-size:11px;color:var(--text3);padding:12px 32px;border-top:1px solid var(--border);line-height:1.8}
.auth-demo code{color:var(--text2)}
.auth-tabs{display:flex;border-bottom:1px solid var(--border)}
.auth-tab{flex:1;padding:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:transparent;border:none;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.auth-tab:hover{color:var(--accent)}
.auth-tab.active{color:var(--hi);border-bottom-color:var(--accent)}
.auth-msg{font-size:12px;padding:10px 14px;border-radius:2px;margin-bottom:16px;display:none;line-height:1.6}
.auth-msg.ok{background:var(--green-t);color:var(--green-text);border:1px solid var(--green)}
.auth-msg.err{background:var(--red-t);color:var(--red-text);border:1px solid var(--red)}
.auth-link{font-size:11px;color:var(--text2);background:none;border:none;cursor:pointer;font-family:var(--mono);padding:0;text-decoration:underline;text-underline-offset:3px;transition:color .12s}
.auth-link:hover{color:var(--accent)}
.pw-strength{height:2px;background:var(--border2);border-radius:2px;margin-top:6px;overflow:hidden}
.pw-strength-fill{height:100%;width:0%;border-radius:2px;transition:width .3s,background .3s}

/* ── Meter bar ─────────────────────────────────────────── */
.meter{height:3px;background:var(--border2);border-radius:2px;margin-top:6px;overflow:hidden}
.meter-fill{height:100%;background:var(--green);transition:width .3s}
.meter-fill.warn{background:var(--amber-text)}
.meter-fill.full{background:var(--red-text)}

/* ── Loader ────────────────────────────────────────────── */
#loader-line{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);width:0;position:fixed;top:0;left:0;right:0;transition:width .4s;z-index:999;display:none}

/* ── Notifications ─────────────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--s2);border:1px solid var(--border2);padding:12px 18px;font-size:12px;color:var(--text);border-radius:var(--r2);z-index:1000;opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{border-color:var(--red);color:var(--red-text)}

/* ── Upgrade nudge ─────────────────────────────────────── */
.upgrade-bar{background:var(--blue-t);border:1px solid var(--blue);padding:10px 22px;font-size:12px;color:var(--blue-text);display:flex;align-items:center;justify-content:space-between;margin-top:1px}

/* ── System selector cards ─────────────────────────────── */
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.sys-card{background:var(--s1);padding:18px 22px;cursor:pointer;border-left:3px solid transparent;transition:all .12s}
.sys-card:hover:not(.locked){background:var(--s2)}
.sys-card.selected{border-left-color:var(--accent);background:var(--s2)}
.sys-card.locked{opacity:.4;cursor:default}
.sys-name{font-size:13px;color:var(--accent);margin-bottom:4px}
.sys-sub{font-size:11px;color:var(--text2)}
.sys-dim{font-size:10px;color:var(--text3);margin-top:6px}

/* ── Profile switcher (topbar) ─────────────────────────── */
.pswitcher{display:none;align-items:center;gap:8px}
.pswitcher-lbl{font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase}
.ptabs{display:flex;background:var(--s2);border:1px solid var(--border2);border-radius:var(--r2);padding:3px;gap:2px}
.ptab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r);cursor:pointer;transition:all .15s;color:var(--text3);border:none;background:transparent;font-family:var(--mono)}
.ptab:hover{color:var(--text)}
.ptab.on{background:var(--accent);color:var(--bg)}
/* ── Onboarding ────────────────────────────────────────── */
.onboard{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.ob-inner{width:100%;max-width:580px;padding:32px}
.ob-title{font-size:20px;color:var(--hi);font-weight:400;margin-bottom:6px}
.ob-sub{font-size:12px;color:var(--text2);margin-bottom:28px;line-height:1.8}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:16px}
.pcard{background:var(--s1);padding:22px 24px;cursor:pointer;border-left:3px solid transparent;transition:all .15s}
.pcard:hover{background:var(--s2)}
.pcard.on{border-left-color:var(--accent);background:var(--s2)}
.pc-name{font-size:15px;color:var(--accent);font-weight:400;margin-bottom:8px;font-family:var(--sans)}
.pc-desc{font-size:12px;color:var(--text2);line-height:1.75}
.pc-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:11px;color:var(--text2);line-height:2.1}
.pc-list span{color:var(--text3);margin-right:4px}
.ob-note{font-size:11px;color:var(--text3);text-align:center;margin-bottom:14px}
.btn-ob{width:100%;background:var(--accent);color:var(--bg);border:none;padding:11px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;border-radius:var(--r)}
.btn-ob:hover{background:var(--hi)}
.btn-ob:disabled{opacity:.3;cursor:default}
/* ── Researcher-only ─────────────────────────────────── */
.inv-only{display:none}
/* ── Responsive ────────────────────────────────────────── */
@media(max-width:700px){
  .main{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:20px}
  .grid2,.grid3,.grid4,.export-grid{grid-template-columns:1fr}
  .steps{flex-wrap:wrap;gap:8px}
  .step-sep{display:none}
  .pcards{grid-template-columns:1fr}
}

/* ── Hub ──────────────────────────────────────────────── */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:1px}
.hub-card{background:var(--s1);padding:22px 20px 20px;cursor:pointer;position:relative;overflow:hidden;transition:background .15s}
.hub-card:hover{background:var(--s2)}
.hub-card.selected{background:var(--s2)}
.hub-card.selected::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.hc-badge{position:absolute;top:14px;right:14px;font-size:9px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid}
.hc-badge.live{color:var(--green-text);border-color:var(--green-text)}
.hc-badge.beta{color:var(--accent);border-color:var(--accent)}
.hc-icon{font-family:var(--mono);font-size:14px;color:var(--accent);margin-bottom:14px;letter-spacing:-.01em}
.hc-label{font-family:var(--mono);font-size:12px;color:var(--hi);margin-bottom:6px}
.hc-desc{font-size:11px;color:var(--text3);line-height:1.7;margin-bottom:14px}
.hc-tags{display:flex;flex-direction:column;gap:4px}
.hc-tag{font-size:10px;color:var(--text2);font-family:var(--mono);display:flex;align-items:center;gap:6px}
.hc-tag::before{content:'→';color:var(--accent);font-size:9px}
.hub-foot{border:1px solid var(--border);border-top:none;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.hub-foot-note{font-size:11px;color:var(--text3);font-family:var(--mono)}

/* ── Result rows (Chem / Cosmo) ───────────────────────── */
.result-row-chem{display:flex;justify-content:space-between;align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--border);font-size:12px}
.rk{color:var(--text2);font-family:var(--mono)}
.rv{color:var(--hi);font-family:var(--mono)}
.rv.hi{color:var(--accent)}
.rv.ok{color:var(--green-text)}
.rv.warn{color:#e09a3a}
.rv.bad{color:var(--red)}
.hc-badge.soon{color:var(--text3);border-color:var(--border2)}
.hub-card-soon{cursor:default;pointer-events:none}

/* ── Hub grid — 4 domains ─────────────────────────────────────────── */
.hub-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.hub-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Admin ArXe panel ─────────────────────────────────────────────── */
.arxe-admin-panel{display:none;border:1px solid #2a1a0a;border-top:none;background:#0f0a04}
.arxe-admin-panel.visible{display:block}
.arxe-admin-header{padding:8px 16px;font-size:9px;color:#8a6a2a;letter-spacing:.16em;text-transform:uppercase;font-family:var(--mono);border-bottom:1px solid #2a1a0a;display:flex;align-items:center;gap:8px}
.arxe-admin-header::before{content:'⬡';font-size:10px}
.arxe-admin-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 16px;border-bottom:1px solid #1a1005;font-size:11px}
.arxe-admin-row:last-child{border-bottom:none}
.arxe-admin-k{color:#6a5020;font-family:var(--mono)}
.arxe-admin-v{color:#c8a96e;font-family:var(--mono)}