:root{
  --bg:#071014; --panel:#101B21; --panel2:#0B151A; --panel3:#142229; --line:#20323C; --line2:#304752;
  --ink:#EDF4F7; --ink2:#A9BBC4; --ink3:#718993;
  --amber:#F3AE43; --teal:#35C9BB; --blue:#78AEEF; --red:#EB6267; --green:#78D797; --violet:#B79BF0;
  --shadow:0 18px 50px rgba(0,0,0,.22); --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1100px 600px at 78% -8%, #12242C 0%, transparent 62%),
    var(--bg);
  color:var(--ink);
  font-family:"Vazirmatn","IRANSans","Segoe UI",Tahoma,Arial,sans-serif;
  font-size:14px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:13px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
header.top{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid rgba(86,119,132,.3);
  background:rgba(8,16,20,.94);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20;min-height:58px}
.brand{font-weight:780;font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:0;direction:ltr;margin-inline-end:7px}
.brand span{color:var(--amber)}
.brand-logo{width:31px;height:31px;object-fit:contain;flex:none;margin-inline-end:8px}
.badge{font-size:10.5px;color:var(--ink2);border:1px solid var(--line);background:rgba(18,32,39,.7);border-radius:999px;padding:3px 9px;white-space:nowrap}
.spacer{flex:1}

.layout{display:grid;grid-template-columns:minmax(350px,390px) minmax(0,1fr);gap:0;min-height:calc(100vh - 58px)}
aside{border-inline-end:1px solid var(--line);background:linear-gradient(180deg,#0B161B,#091217);padding:16px 15px 108px;overflow-y:auto;
  max-height:calc(100vh - 58px);position:sticky;top:58px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
main{padding:22px clamp(18px,2.4vw,36px) 70px;min-width:0;max-width:1680px;width:100%;margin:0 auto}
.input-intro{padding:2px 3px 13px}.input-intro strong{display:block;font-size:14px;color:var(--ink)}
.input-intro span{display:block;font-size:11px;color:var(--ink3);line-height:1.5;margin-top:2px}
.workspace-head{display:flex;align-items:flex-end;gap:22px;margin-bottom:18px;padding:0 2px}
.workspace-title{min-width:220px}.workspace-title h1{font-size:21px;line-height:1.25;margin:0;font-weight:720;letter-spacing:-.25px}
.workspace-title p{font-size:11.5px;color:var(--ink3);margin:4px 0 0}
.workspace-tools{display:flex;gap:7px;margin-top:10px}.workspace-tools .btn{padding:5px 9px;font-size:10.5px}
.context-strip{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:7px;flex:1}
.context-item{background:rgba(16,28,34,.72);border:1px solid var(--line);border-radius:9px;padding:7px 10px;min-width:0}
.context-item span{display:block;color:var(--ink3);font-size:9.5px;text-transform:uppercase;letter-spacing:.65px;line-height:1.3}
.context-item b{display:block;color:var(--ink);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-weight:650}
.dirty-notice{display:flex;align-items:center;gap:8px;margin:-7px 2px 13px;padding:7px 10px;border:1px solid rgba(243,174,67,.34);border-radius:8px;background:rgba(243,174,67,.07);color:#F2C77F;font-size:11px}
.dirty-notice::before{content:'●';color:var(--amber);font-size:8px}
body.input-collapsed .layout{grid-template-columns:0 minmax(0,1fr)}body.input-collapsed aside{visibility:hidden;padding:0;border:0;overflow:hidden}

/* ---------- controls ---------- */
.group{border:1px solid var(--line);border-radius:var(--radius);padding:13px;margin-bottom:10px;background:rgba(13,24,29,.86)}
.group>h4{margin:-2px 0 10px;font-size:11px;color:var(--amber);font-weight:750;letter-spacing:.55px;text-transform:uppercase}
.workflow-step>h4{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:10px;user-select:none}
.workflow-step>h4::after{content:'⌃';margin-inline-start:auto;color:var(--ink3);font-size:12px;transition:transform .16s}
.workflow-step.collapsed>h4{margin-bottom:-2px;color:var(--ink2)}
.workflow-step.collapsed>h4::after{transform:rotate(180deg)}
.workflow-step.collapsed>:not(h4){display:none!important}
.step-state{font-size:9px;line-height:1;border:1px solid rgba(120,215,151,.35);background:rgba(120,215,151,.09);color:var(--green);border-radius:999px;padding:4px 6px;text-transform:none;letter-spacing:0}
.workflow-step.advanced-step .step-state{border-color:var(--line2);background:var(--panel3);color:var(--ink3)}
label{display:block;font-size:11.5px;color:var(--ink2);margin:8px 0 3px}
label:first-of-type{margin-top:0}
input,select,textarea{width:100%;background:#091318;border:1px solid #2B414B;border-radius:8px;
  color:var(--ink);padding:8px 9px;transition:border-color .14s,box-shadow .14s,background .14s}
input:hover,select:hover,textarea:hover{border-color:#42606C}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(53,201,187,.09);background:#0B171C}
input:disabled,select:disabled{opacity:.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.hint{font-size:10.5px;color:var(--ink3);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{border:1px solid var(--line2);border-radius:7px;padding:5px 9px;cursor:pointer;font-size:12px;
  background:#0A1216;color:var(--ink2);user-select:none}
.chip[aria-pressed="true"]{background:rgba(242,169,59,.16);border-color:var(--amber);color:var(--amber);font-weight:700}
.btn{border:1px solid var(--line2);background:#122027;color:var(--ink);border-radius:8px;padding:8px 13px;cursor:pointer}
.btn:hover{border-color:var(--ink3)}
.btn.primary{background:linear-gradient(180deg,#F5BC5F,#E29A2D);border-color:#D58C21;color:#1B1307;font-weight:800;box-shadow:0 7px 18px rgba(226,154,45,.18)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:3px;flex-wrap:wrap;border:1px solid var(--line);padding:4px;background:#0A1419;border-radius:11px;margin-bottom:17px;position:sticky;top:69px;z-index:12;box-shadow:0 10px 25px rgba(0,0,0,.16)}
.tab{padding:7px 12px;cursor:pointer;color:var(--ink2);border:1px solid transparent;border-radius:7px;font-size:11.5px;white-space:nowrap}
.tab:hover{color:var(--ink);background:rgba(255,255,255,.025)}
.tab[aria-selected="true"]{background:var(--panel3);border-color:#34505C;color:var(--teal);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.panel{display:none}
.panel.on{display:block}

/* ---------- cards & tables ---------- */
.card{background:linear-gradient(180deg,#122027 0%,var(--panel) 100%);border:1px solid #29404B;border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card>h3{margin:0 0 13px;font-size:14px;line-height:1.45;color:#F1F6F8;font-weight:700;letter-spacing:.1px}
.card>h3 small{color:var(--ink3);font-weight:400;font-size:11px;margin-inline-start:6px}
table.hb{width:100%;border-collapse:collapse;font-size:12.5px}
table.hb th,table.hb td{border:1px solid var(--line);padding:6px 9px;text-align:start}
table.hb th{background:#0E1B22;color:var(--ink2);font-weight:700;font-size:11.5px}
table.hb tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
table.hb td.num{font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.kv div{background:#0C161B;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kv b{display:block;font-size:16px;color:var(--amber);font-variant-numeric:tabular-nums}
.licence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.licence-metric{padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
.licence-metric span{display:block;color:var(--ink2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.licence-metric b{display:block;color:var(--ink);font-size:18px;overflow-wrap:anywhere}
.licence-state{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:rgba(20,184,166,.12);color:var(--teal);font-size:12px;font-weight:700}
.licence-state:before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.kv span{font-size:11px;color:var(--ink3)}
canvas.chart{width:100%;height:340px;display:block;border:1px solid #29404A;border-radius:11px;background:#0B151A}
canvas.mapc{width:100%;height:600px;display:block;border:1px solid #29404A;border-radius:11px;background:#091217}
.map-attribution{font-size:10px;color:var(--ink3);text-align:right;margin-top:4px}
.map-attribution a{color:var(--teal);text-decoration:none}
.map-attribution a:hover{text-decoration:underline}
.readout{font-size:11.5px;color:var(--teal);min-height:20px;margin-top:6px;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1180px){.grid2{grid-template-columns:1fr}.layout{grid-template-columns:1fr}
  aside{position:static;max-height:none;border-inline-end:none;border-bottom:1px solid var(--line);padding-bottom:18px}.workspace-head{align-items:flex-start;flex-direction:column}.context-strip{width:100%}}
@media(max-width:780px){header.top .badge{display:none}.context-strip{grid-template-columns:1fr 1fr}.tabs{top:58px;overflow-x:auto;flex-wrap:nowrap}.workspace-title h1{font-size:18px}}
@media(max-width:620px){canvas.chart{height:300px}canvas.mapc{height:440px}.card{padding:11px}}

.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.pill.hi{background:rgba(229,72,77,.16);color:#FF8A8E;border:1px solid rgba(229,72,77,.4)}
.pill.md{background:rgba(242,169,59,.16);color:var(--amber);border:1px solid rgba(242,169,59,.4)}
.pill.lo{background:rgba(127,217,123,.14);color:var(--green);border:1px solid rgba(127,217,123,.35)}
.alert{border-radius:9px;padding:10px 12px;margin:10px 0;font-size:12.5px;line-height:1.9}
.alert.err{background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.45);color:#FFB4B7}
.alert.warn{background:rgba(242,169,59,.09);border:1px solid rgba(242,169,59,.4);color:#F6CE8B}
.alert.ok{background:rgba(79,211,196,.08);border:1px solid rgba(79,211,196,.35);color:#9BE7DC}
.status{font-size:12px;color:var(--teal);padding:7px 0;min-height:22px}
.empty{color:var(--ink3);font-size:12.5px;padding:22px;text-align:center;border:1px dashed var(--line2);border-radius:9px}
.legendline{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.legendline i{width:14px;height:4px;border-radius:2px;display:inline-block}
.interp p{margin:0 0 8px;font-size:12.8px}
.interp b{color:var(--amber)}
.chemsearch{position:relative}
.chemlist{max-height:170px;overflow:auto;border:1px solid var(--line2);border-radius:7px;margin-top:5px;background:#0A1216}
.chemlist div{padding:5px 9px;cursor:pointer;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.chemlist div:hover{background:rgba(242,169,59,.12)}
.chemlist div.sel{background:rgba(242,169,59,.18);color:var(--amber);font-weight:700}
.mixrow{display:grid;grid-template-columns:1fr 74px 26px;gap:6px;margin-bottom:5px;align-items:center}
.mixrow button{background:transparent;border:1px solid var(--line2);color:var(--red);border-radius:6px;
  cursor:pointer;height:31px;font-size:14px;line-height:1}
.mixprops{background:#0C161B;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:6px;
  font-size:11.5px;line-height:1.95;color:var(--ink2)}
.mixprops b{color:var(--amber)}
#roseGrid label{margin:0 0 2px;font-size:10px;text-align:center}
#roseGrid input{padding:4px 5px;font-size:11px;text-align:center}
.treebox{background:#0C161B;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:8px}
.treerow{display:grid;grid-template-columns:1fr 90px 110px;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}
.treerow:last-child{border-bottom:none}
.treerow b{color:var(--amber);font-variant-numeric:tabular-nums}

/* ---------- utilities ----------
   Markup and generated HTML use these classes instead of style="" so the
   hosted build's style-src 'self' CSP holds; tests/hosted-bundle.test.js
   rejects any inline style attribute. */
[hidden]{display:none!important}
.flex1{flex:1}
.w-auto{width:auto}
.w-120{width:120px}
.mt8{margin-top:8px}
.mt9{margin-top:9px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mb8{margin-bottom:8px}
.mb10{margin-bottom:10px}
.t-red{color:var(--red)}
.t-teal{color:var(--teal)}
.t-amber{color:var(--amber)}
.t-muted{color:var(--ink3)}
.t-note{color:var(--ink3);font-size:10.5px}
.subhead{font-size:12.5px;color:var(--teal);margin:12px 0 6px}
.subhead.tight{margin:6px 0}
.subhead.loose{margin-top:14px}
.scroll640{max-height:640px;overflow:auto}
.pill.sm{font-size:10px}
.btn.sm{padding:3px 10px;font-size:11px}
.treerow.head{color:var(--ink3);font-weight:700}
canvas.h330{height:330px}
canvas.h440{height:440px}
label.checkrow{display:flex;gap:7px;align-items:center;margin-top:9px}
#roseGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}
.action-dock{position:sticky;top:-16px;z-index:10;margin:0 -3px 11px;padding:7px 3px 8px;background:linear-gradient(180deg,#0B161B 76%,transparent)}
.action-dock .btnrow{padding:8px;border:1px solid var(--line);border-radius:11px;background:rgba(15,27,33,.97);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.action-dock .status{padding:3px 9px 0;min-height:0}

/* ---------- sign-in page (hosted web/login.html) ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login-card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px 20px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.login-brand{font-size:26px;text-align:center;justify-content:center}
.login-logo{display:block;width:92px;height:92px;object-fit:contain;margin:0 auto 8px}
.login-sub{margin:2px 0 20px;text-align:center;color:var(--ink2);font-size:12.5px}
input.login-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;
  letter-spacing:.5px;padding:10px 11px;text-align:left}
.login-btn{width:100%;margin-top:14px;padding:10px 13px;font-size:14px}
.login-note{margin-top:14px;line-height:1.8;text-align:center}
.login-langrow{margin-top:14px;text-align:center}