/* ============================================================
   DESIGN TOKENS
   Palette diturunkan dari palet chart matplotlib pada notebook
   asli (WARNA = #2563EB / #16A34A / #DC2626 / #D97706), digeser
   sedikit agar tidak identik dengan default Tailwind, dan
   dipasangkan dengan latar "paper" hangat — bukan abu-abu SaaS
   generik — sesuai asal-usulnya sebagai notebook riset.
   ============================================================ */
:root{
  --blue-50:#eef1fc;  --blue-100:#dbe3f8; --blue-500:#3454c7; --blue-600:#2941a3; --blue-700:#1f3380;
  --green-500:#2f8f5b; --green-100:#e0f0e6;
  --red-500:#c5413a;   --red-100:#f6e2e0;
  --amber-500:#b87914; --amber-100:#f3e7d2;
  --purple-500:#6d4fb0;

  --bg:#f6f5f1;
  --surface:#fdfcfa;
  --surface-2:#f0eee8;
  --border:#e3e0d6;
  --border-strong:#cfcbbd;
  --text:#1c1d1f;
  --text-muted:#62605a;
  --text-faint:#9a9788;
  --shadow-sm:0 1px 2px rgba(28,29,31,.05);
  --shadow-md:0 4px 14px -4px rgba(28,29,31,.10);
  --shadow-lg:0 18px 44px -16px rgba(28,29,31,.22);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --sidebar-w:268px;
  --ink:#15171a;
  --ink-2:#20242b;
  --font-display:'Sora', 'Inter', sans-serif;
  --font-headline:'JetBrains Mono', monospace;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg:#0e0f12;
  --surface:#17191d;
  --surface-2:#131417;
  --border:#2a2c31;
  --border-strong:#383a40;
  --text:#ece9e2;
  --text-muted:#9c9a93;
  --text-faint:#65635d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 10px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 20px 48px -16px rgba(0,0,0,.6);
  --blue-50:#161c2e; --blue-100:#1c2438;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background var(--transition), color var(--transition);
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; color:var(--text); letter-spacing:-0.01em;}
p{margin:0 0 .6em 0; line-height:1.55; color:var(--text);}
ul,ol{margin:0;padding:0;}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}
svg{width:1em;height:1em;}
.muted{color:var(--text-muted);}
.small{font-size:.82rem;}
code{font-family:var(--font-mono); background:var(--surface-2); padding:.1em .4em; border-radius:5px; font-size:.85em;}

/* ============================================================ scrollbar */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============================================================ APP SHELL */
.app-shell{display:flex; min-height:100vh;}

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:40;
  transition:transform var(--transition), background var(--transition);
}
.sidebar-brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.4rem 1.3rem 1.1rem;
}
.brand-logo{
  width:36px;height:36px;border-radius:9px;
  background:var(--ink); color:var(--blue-100);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-logo svg{width:20px;height:20px;}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-name{font-family:var(--font-mono); font-weight:600; font-size:.88rem; color:var(--text); letter-spacing:-0.01em;}
.brand-sub{font-size:.7rem; color:var(--text-muted); font-weight:500; font-family:var(--font-mono);}

.sidebar-nav{display:flex; flex-direction:column; gap:.15rem; padding:.4rem .85rem; flex:1;}
.nav-item{
  display:flex; align-items:center; gap:.75rem;
  background:none; border:none; text-align:left;
  padding:.62rem .8rem; border-radius:10px;
  color:var(--text-muted); font-size:.86rem; font-weight:500;
  transition:background var(--transition), color var(--transition);
  position:relative;
}
.nav-icon{width:18px;height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.nav-item:hover{background:var(--surface-2); color:var(--text);}
.nav-item.active{background:var(--blue-50); color:var(--blue-600); font-weight:600;}
.nav-item.active .nav-icon{stroke:var(--blue-600);}
.nav-item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.sidebar-footer{padding:.9rem; border-top:1px solid var(--border);}
.status-pill{
  display:flex; align-items:center; gap:.5rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:.5rem .8rem; font-size:.76rem; color:var(--text-muted);
}
.status-dot{width:7px;height:7px;border-radius:50%; background:var(--text-faint); flex-shrink:0;}
.status-pill.is-ready .status-dot{background:var(--green-500); box-shadow:0 0 0 3px var(--green-100);}

/* ---------------- MAIN AREA ---------------- */
.main-area{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.5rem 2rem 1rem;
  position:sticky; top:0; background:linear-gradient(var(--bg), var(--bg) 80%, transparent);
  z-index:20;
}
.topbar-title h1{font-size:1.5rem; font-weight:700;}
.topbar-title p{margin:.2rem 0 0; color:var(--text-muted); font-size:.88rem;}
.topbar-actions{display:flex; align-items:center; gap:.6rem; flex-shrink:0;}

.icon-btn{
  width:38px;height:38px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
.icon-btn svg{width:18px;height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.icon-btn:hover{background:var(--blue-50); color:var(--blue-600); transform:translateY(-1px);}

.content{padding:0 2rem 3rem; flex:1;}
.page{display:none;}
.page.active{display:block;}

/* ============================================================ HERO
   Konsep: bukan landing page SaaS, tapi panel "konsol" — meniru
   output asli notebook (Iter NNN/100  GBest CVaR = ...). Inilah
   elemen yang paling mencirikan project ini, dipakai sebagai hero.
   ============================================================ */
.hero-panel{
  background:var(--ink);
  border-radius:var(--radius-lg);
  margin-bottom:1.4rem;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero-titlebar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.3rem .8rem;
  padding:.6rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-mono); font-size:.72rem; color:rgba(237,235,227,.45);
}
.hero-titlebar .live-dot{
  width:6px;height:6px;border-radius:50%; background:#5fb583; display:inline-block; margin-right:.5rem;
  box-shadow:0 0 0 2px rgba(95,181,131,.18);
}
.hero-body{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:0;
}
.hero-text{padding:2.1rem 2.3rem 2.3rem; min-width:0; border-right:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; justify-content:center;}
.hero-text h2{
  font-family:var(--font-headline); color:#f3f1ea; font-weight:700;
  font-size:1.62rem; line-height:1.32; letter-spacing:-0.01em; margin-bottom:1rem;
  overflow-wrap:break-word;
}
.hero-text h2 .accent{color:#7e9bff;}
.hero-cta-row{display:flex; align-items:center; gap:1.1rem; margin-top:1.6rem;}
.hero-link{
  font-family:var(--font-mono); font-size:.82rem; color:rgba(237,235,227,.55);
  border:none; border-bottom:1px dashed rgba(237,235,227,.35); background:none; padding:0 0 1px; cursor:pointer;
}
.hero-link:hover{color:#fff; border-color:rgba(255,255,255,.6);}
.hero-console{
  background:#0c0d10; padding:1.6rem 1.7rem; font-family:var(--font-mono); font-size:.79rem;
  line-height:1.85; color:#9fe6a0; min-height:260px; min-width:0; overflow-x:auto;
}
.hero-console .ln{
  display:block; white-space:pre; opacity:0; transform:translateY(3px);
  animation:consoleLine .4s ease forwards; animation-delay:var(--d,0s);
}
.hero-console .ln.muted{color:#6b7280;}
.hero-console .ln.cmd{color:#e7ecf8;}
.hero-console .ln.cmd .fn{color:#7e9bff;}
.hero-console .ln.ok{color:#6fd38a;}
.hero-console .cursor{display:inline-block; width:7px; height:14px; background:#9fe6a0; vertical-align:-2px; animation:caretBlink 1s step-end infinite;}
@keyframes consoleLine{to{opacity:1; transform:translateY(0);}}
@keyframes caretBlink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .hero-console .ln{opacity:1; transform:none; animation:none;}
  .hero-console .cursor{animation:none;}
}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:9px; border:1px solid transparent;
  padding:.6rem 1.05rem; font-size:.85rem; font-weight:600;
  transition:border-color var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:#f3f1ea; color:var(--ink); border-color:#f3f1ea;}
.btn-primary:hover{background:#fff; border-color:#fff;}
.btn-ghost{background:transparent; color:rgba(237,235,227,.8); border-color:rgba(255,255,255,.25);}
.btn-ghost:hover{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--blue-500); color:var(--blue-600);}
.btn-sm{padding:.4rem .7rem; font-size:.76rem;}
.btn-lg{padding:.72rem 1.4rem; font-size:.9rem;}

/* ============================================================ STAT GRID
   Ditata seperti baris spesifikasi instrumen (hairline divider),
   bukan kartu-kartu lepas dengan shadow & hover-lift.            */
.stat-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:1.4rem; overflow:hidden;
}
.stat-card{
  padding:.95rem 1.15rem; display:flex; flex-direction:column; gap:.3rem;
  background:var(--surface);
}
.stat-label{font-size:.68rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.stat-value{font-family:var(--font-mono); font-size:1.35rem; font-weight:700; color:var(--text);}
.stat-foot{font-size:.7rem; color:var(--text-faint);}

/* ============================================================ GRIDS */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-bottom:1.1rem;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.1rem; margin-bottom:1.1rem;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.1rem;}

/* ============================================================ CARD */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); margin-bottom:1.1rem;
  transition:box-shadow var(--transition), background var(--transition);
}
.card-head{margin-bottom:1rem;}
.card-head h3{font-size:1.05rem; font-weight:700;}
.card-head p{margin-top:.3rem;}
.card-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
.card-divider{height:1px; background:var(--border); margin:1.1rem 0;}
.sub-head{font-size:.84rem; font-weight:600; color:var(--text-muted); margin:0 0 .5rem;}

/* ============================================================ ANIMATIONS */
@keyframes fadeInUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.animate-in{animation:fadeInUp .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d,0s);}
@media (prefers-reduced-motion: reduce){
  .animate-in{animation:none;}
  *{transition-duration:1ms !important;}
}

/* ============================================================ WORKFLOW LIST */
.workflow-list{display:flex; flex-direction:column; gap:1rem;}
.workflow-list li{display:flex; gap:.9rem; align-items:flex-start; list-style:none;}
.wf-num{
  width:28px;height:28px;border-radius:50%; background:var(--blue-50); color:var(--blue-600);
  font-family:var(--font-mono); font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.workflow-list strong{font-size:.9rem;}
.workflow-list p{font-size:.84rem; color:var(--text-muted); margin:.15rem 0 0;}

/* ============================================================ STATUS LIST (dashboard) */
.status-list{display:flex; flex-direction:column; gap:.6rem;}
.status-row{display:flex; align-items:center; gap:.6rem; font-size:.86rem;}
.dot{width:8px;height:8px;border-radius:50%; flex-shrink:0;}
.dot-muted{background:var(--text-faint);}
.dot-ok{background:var(--green-500); box-shadow:0 0 0 3px var(--green-100);}

/* ============================================================ UPLOAD / DATASET */
.upload-row{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:stretch;}
.dropzone{
  flex:1.6; min-width:260px;
  border:1.6px dashed var(--border-strong); border-radius:var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  padding:2rem 1rem; text-align:center; color:var(--text-muted);
  background:var(--surface-2); cursor:pointer;
  transition:border-color var(--transition), background var(--transition);
}
.dropzone:hover, .dropzone.drag-over{border-color:var(--blue-500); background:var(--blue-50); color:var(--blue-600);}
.dropzone svg{width:28px;height:28px; fill:none; stroke:currentColor; stroke-width:1.8;}
.upload-side{flex:1; min-width:200px; display:flex; flex-direction:column; gap:.7rem; justify-content:center;}

.table-toolbar{display:flex; gap:.6rem;}
.input{
  background:var(--surface); border:1px solid var(--border-strong); border-radius:9px;
  padding:.55rem .8rem; font-size:.85rem; color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.input:focus{outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100);}
.input-sm{padding:.42rem .65rem; font-size:.8rem;}

.table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:12px;}
.data-table{width:100%; border-collapse:collapse; font-size:.82rem; white-space:nowrap;}
.data-table th{
  text-align:left; padding:.65rem .9rem; background:var(--surface-2); color:var(--text-muted);
  font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;
  border-bottom:1px solid var(--border); position:sticky; top:0;
}
.data-table td{padding:.6rem .9rem; border-bottom:1px solid var(--border); font-family:var(--font-mono); color:var(--text);}
.data-table tbody tr:hover{background:var(--surface-2);}
.data-table tbody tr:last-child td{border-bottom:none;}

.pagination{display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:1rem;}
.page-btn{
  min-width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); font-size:.8rem; font-family:var(--font-mono);
}
.page-btn:hover{background:var(--blue-50); color:var(--blue-600);}
.page-btn.active{background:var(--blue-600); color:#fff; border-color:var(--blue-600);}
.page-btn:disabled{opacity:.4; cursor:not-allowed;}

/* ============================================================ EMPTY STATE */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem;
  padding:4rem 2rem; color:var(--text-muted);
}
.empty-state svg{width:42px;height:42px; fill:none; stroke:var(--text-faint); stroke-width:1.5; margin-bottom:.4rem;}
.empty-state h3{font-size:1.05rem; color:var(--text);}
.empty-state .btn{margin-top:.8rem;}

/* ============================================================ CHART BOX */
.chart-box{position:relative; height:300px;}
.chart-box-tall{height:380px;}
.chart-box-sm{height:200px;}
.chart-png-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  border-radius:8px; padding:.32rem .65rem; font-size:.72rem; font-weight:600;
}
.chart-png-btn:hover{background:var(--blue-50); color:var(--blue-600); border-color:var(--blue-100);}
.inline-controls{display:flex; align-items:center; gap:.5rem;}

/* ============================================================ FORMULAS / DEF CARDS */
.formula{font-family:var(--font-mono); font-size:.92rem; color:var(--blue-600); background:var(--blue-50); padding:.55rem .8rem; border-radius:9px; display:inline-block;}
.formula-block{margin:.6rem 0 1.2rem;}
.formula-big{font-family:var(--font-mono); font-size:1.15rem; color:var(--blue-700); background:var(--blue-50); padding:1rem 1.2rem; border-radius:12px; display:block; text-align:center;}
.def-card{background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:1rem 1.1rem;}
.def-label{font-size:.74rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:.5rem;}

/* ============================================================ KV ROW */
.kv-row{display:flex; align-items:center; justify-content:space-between; padding:.45rem 0; border-bottom:1px dashed var(--border); font-size:.84rem;}
.kv-row:last-child{border-bottom:none;}
.kv-row strong{font-family:var(--font-mono); color:var(--text);}

/* ============================================================ SEG CONTROL */
.seg-control{display:flex; gap:.3rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.25rem; flex-wrap:wrap;}
.seg-btn{
  background:none; border:none; padding:.45rem .9rem; border-radius:8px; font-size:.8rem; font-weight:600;
  color:var(--text-muted); white-space:nowrap;
  transition:background var(--transition), color var(--transition);
}
.seg-btn.active{background:var(--surface); color:var(--blue-600); box-shadow:var(--shadow-sm);}

/* ============================================================ WEIGHT SLIDERS */
.weight-sliders{display:flex; flex-direction:column; gap:.7rem; margin:1rem 0;}
.weight-slider-row{display:grid; grid-template-columns:120px 1fr 60px; gap:.8rem; align-items:center; font-size:.84rem;}
.weight-slider-row input[type="range"]{width:100%; accent-color:var(--blue-500);}
.weight-slider-row .w-val{font-family:var(--font-mono); text-align:right; color:var(--blue-600); font-weight:600;}
.obj-actions{display:flex; gap:.6rem; flex-wrap:wrap;}

/* ============================================================ METRIC CARDS */
.metric-card{
  border-radius:var(--radius-md); padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.3rem;
  border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);
}
.metric-label{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);}
.metric-value{font-family:var(--font-mono); font-size:1.4rem; font-weight:700;}
.metric-foot{font-size:.72rem; color:var(--text-faint);}
.metric-blue .metric-value{color:var(--blue-600);}
.metric-green .metric-value{color:var(--green-500);}
.metric-red .metric-value{color:var(--red-500);}
.metric-amber .metric-value{color:var(--amber-500);}
.metric-purple .metric-value{color:var(--purple-500);}

/* ============================================================ PARAM GRID (PSO page) */
.param-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.param-grid-3{grid-template-columns:repeat(3,1fr);}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:.78rem; font-weight:600; color:var(--text-muted);}
.checkbox-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.5rem;}
.chk-pill{
  display:flex; align-items:center; gap:.45rem; background:var(--surface-2); border:1px solid var(--border);
  padding:.5rem .85rem; border-radius:999px; font-size:.82rem; cursor:pointer;
}
.chk-pill input{accent-color:var(--blue-500);}
.run-row{display:flex; align-items:center; gap:1rem; margin-top:1.2rem; flex-wrap:wrap;}

/* ============================================================ PROGRESS / SPINNER */
.progress-panel{display:flex; gap:1.2rem; align-items:center; margin-bottom:1rem;}
.spinner{
  width:42px;height:42px; border-radius:50%; border:3.5px solid var(--blue-100); border-top-color:var(--blue-600);
  animation:spin .8s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}
.progress-info{flex:1; display:flex; flex-direction:column; gap:.5rem;}
.progress-row{display:flex; align-items:center; justify-content:space-between; font-size:.84rem;}
.progress-row strong{font-family:var(--font-mono); color:var(--red-500);}
.progress-bar-track{height:9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden;}
.progress-bar-fill{height:100%; width:0%; background:linear-gradient(90deg, var(--blue-500), var(--green-500)); transition:width .25s ease; border-radius:999px;}
.log-details{margin-top:.8rem;}
.log-details summary{cursor:pointer; font-size:.82rem; font-weight:600; color:var(--text-muted);}
.log-box{
  background:#0b1220; color:#9fe6a0; font-family:var(--font-mono); font-size:.74rem; line-height:1.5;
  padding:.9rem 1rem; border-radius:10px; max-height:220px; overflow-y:auto; margin-top:.6rem; white-space:pre-wrap;
}

/* ============================================================ EXPORT ACTIONS */
.export-actions{display:flex; gap:.6rem; flex-wrap:wrap;}

/* ============================================================ TOAST */
.toast-container{
  position:fixed; top:1.2rem; right:1.2rem; z-index:200;
  display:flex; flex-direction:column; gap:.6rem; pointer-events:none;
}
.toast{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--blue-500);
  border-radius:10px; padding:.8rem 1.1rem; box-shadow:var(--shadow-lg); font-size:.84rem;
  min-width:240px; max-width:340px; color:var(--text);
  display:flex; align-items:flex-start; gap:.6rem;
  animation:toastIn .25s ease both;
}
.toast.toast-success{border-left-color:var(--green-500);}
.toast.toast-error{border-left-color:var(--red-500);}
.toast.toast-warn{border-left-color:var(--amber-500);}
.toast.toast-out{animation:toastOut .2s ease both;}
@keyframes toastIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}
@keyframes toastOut{to{opacity:0; transform:translateX(20px);}}

/* ============================================================ REF LIST */
.ref-list{list-style:none; display:flex; flex-direction:column; gap:.7rem;}
.ref-list li{font-size:.86rem; color:var(--text-muted); padding-left:1.3rem; position:relative;}
.ref-list li::before{content:"";position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--blue-500);}

/* ============================================================ THEME TOGGLE ICONS */
[data-theme="dark"] .icon-sun{display:none;}
[data-theme="dark"] .icon-moon{display:block !important;}

/* ============================================================ MOBILE TOPBAR & SCRIM */
.mobile-topbar{display:none;}
.sidebar-scrim{display:none;}

/* ============================================================ RESPONSIVE */
@media (max-width: 1180px){
  .stat-grid{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .param-grid{grid-template-columns:repeat(2,1fr);}
  .hero-console{font-size:.71rem;}
}
@media (max-width: 980px){
  .grid-2, .grid-3{grid-template-columns:1fr;}
  .hero-body{grid-template-columns:1fr;}
  .hero-text{border-right:none; border-bottom:1px solid rgba(255,255,255,.08);}
  .stat-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 860px){
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1rem; background:var(--surface); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:60;
  }
  .mobile-brand{display:flex; align-items:center; gap:.1rem; font-family:var(--font-mono); font-weight:600;}
  .mobile-brand .brand-mark{color:var(--blue-600);}
  .app-shell{display:block;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; transform:translateX(-100%);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-scrim.show{
    display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:39;
  }
  .topbar{display:none;}
  .content{padding:1.2rem 1rem 3rem;}
  .hero-text{padding:1.5rem 1.4rem 1.7rem;}
  .hero-text h2{font-size:1.28rem;}
  .hero-console{padding:1.2rem 1.3rem; font-size:.72rem;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .param-grid{grid-template-columns:1fr;}
  .param-grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
  .weight-slider-row{grid-template-columns:90px 1fr 50px;}
}
@media (max-width: 540px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .hero-text h2{font-size:1.3rem;}
  .hero-console{font-size:.68rem; padding:1.1rem 1.1rem;}
}

/* ============================================================ PRINT (Export PDF) */
@media print{
  .sidebar, .mobile-topbar, .topbar, .toast-container, .chart-png-btn, .export-actions, .seg-control, #sidebar-scrim{display:none !important;}
  .page{display:none !important;}
  .page.print-active{display:block !important;}
  body{background:#fff;}
  .card{box-shadow:none; border:1px solid #ddd;}
  .content{padding:0;}
  .main-area{display:block;}
}