@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
    --bg: #0a0f1e;
    --surface: #111827;
    --panel: #1a2235;
    --border: rgba(139,92,246,0.2);
    --primary: #8b5cf6;
    --secondary: #10b981;
    --accent: #f59e0b;
    --cathode-color: #ef4444;
    --anode-color: #3b82f6;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --ion-pos: #f87171;
    --ion-neg: #60a5fa;
}
*{ margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--text);
    width: 100%; height: 100%;
    overflow: hidden; margin: 0; padding: 0;
}

#phet-stage {
    position: absolute; top: 0; left: 0;
    width: 1280px; height: 720px;
    background: var(--bg);
    overflow: hidden; transform-origin: 0 0;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
    touch-action: none;
    display: flex; flex-direction: column;
}

/* NAV */
.sim-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:.75rem 2rem;
    background:rgba(17,24,39,0.97);
    border-bottom:1px solid var(--border);
    z-index:100;
    backdrop-filter:blur(12px);
    height: 60px;
    flex-shrink: 0;
}
.nav-left{ display:flex; align-items:center; gap:1.5rem; }
.sim-logo{ display:flex; align-items:center; gap:.6rem; font-size:1.1rem; font-weight:700; color:#fff; }
.logo-thin{ font-weight:300; }
.nav-crumbs{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); }
.nav-crumbs a{ color:var(--muted); text-decoration:none; transition:color .2s; }
.nav-crumbs a:hover{ color:var(--primary); }
.nav-crumbs .sep{ color:#2d3748; }
.nav-crumbs .cur{ color:var(--primary); font-weight:600; }
.nav-back{
    display:flex; align-items:center; gap:.5rem;
    padding:.4rem .9rem; border-radius:8px;
    background:rgba(139,92,246,.1); color:var(--primary);
    text-decoration:none; font-size:.82rem; font-weight:600;
    border:1px solid var(--border); transition:all .2s;
}
.nav-back:hover{ background:rgba(139,92,246,.2); }

/* TABS */
.tabs-bar{
    display:flex; background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:0 2rem; overflow-x:auto;
}
.tab-btn{
    padding:.85rem 1.4rem; background:none; border:none;
    border-bottom:3px solid transparent;
    color:var(--muted); font-family:'Outfit',sans-serif;
    font-size:.88rem; font-weight:600; cursor:pointer;
    white-space:nowrap; transition:all .2s;
    display:flex; align-items:center; gap:.45rem;
}
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* PAGES */
.page-content{ display:none; height: calc(100% - 60px); overflow-y: auto; flex-grow: 1; }
.page-content.active{ display:block; }

/* ════════════════ OVERVIEW PAGE ════════════════ */
.ov-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:1.5rem; padding:2rem;
    max-width:1300px; margin:0 auto;
}

.ov-card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:1.6rem;
}
.ov-card h2{
    font-size:1.05rem; font-weight:700; margin-bottom:.9rem;
    display:flex; align-items:center; gap:.5rem;
}
.ov-card p{ color:var(--muted); line-height:1.75; font-size:.91rem; margin-bottom:.7rem; }
.ov-card p:last-child{ margin-bottom:0; }

/* Comparison table */
.compare-table{ width:100%; border-collapse:collapse; font-size:.88rem; margin-top:.8rem; }
.compare-table th{ padding:.6rem .8rem; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.8px; }
.compare-table td{ padding:.6rem .8rem; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); }
.compare-table tr:hover td{ background:rgba(255,255,255,.03); }
.th-cath{ color:var(--cathode-color); background:rgba(239,68,68,.08); }
.th-anod{ color:var(--anode-color); background:rgba(59,130,246,.08); }
.th-prop{ color:var(--muted); }
.td-cath{ color:#fca5a5; }
.td-anod{ color:#93c5fd; }

/* Pills */
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.pill{
    padding:.3rem .8rem; border-radius:20px;
    font-size:.78rem; font-weight:700;
    white-space:nowrap;
}
.pill.red{ background:rgba(239,68,68,.15); color:#f87171; border:1px solid rgba(239,68,68,.3); }
.pill.blue{ background:rgba(59,130,246,.15); color:#60a5fa; border:1px solid rgba(59,130,246,.3); }
.pill.purple{ background:rgba(139,92,246,.15); color:#a78bfa; border:1px solid rgba(139,92,246,.3); }

/* SVG diagram card */
.svg-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ════════════════ SIMULATOR PAGE ════════════════ */
.sim-wrap{
    display:grid; grid-template-columns:260px 1fr 240px;
    height:100%;
    overflow:hidden;
    flex-grow: 1;
}

.sim-ctrl{
    background:var(--surface); border-right:1px solid var(--border);
    padding:1.2rem; overflow-y:auto; display:flex;
    flex-direction:column; gap:1rem;
}
.sim-stage{
    background:#040c1a;
    background-image:radial-gradient(rgba(139,92,246,.07) 1px, transparent 1px);
    background-size:28px 28px;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:1.5rem; gap:.8rem; position:relative;
    overflow:hidden;
}
.sim-info{
    background:var(--surface); border-left:1px solid var(--border);
    padding:1.2rem; overflow-y:auto; display:flex;
    flex-direction:column; gap:.9rem;
}

/* Control groups */
.ctrl-label{
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; color:var(--muted);
    border-bottom:1px solid var(--border); padding-bottom:.4rem;
}
.ctrl-row{ display:flex; flex-direction:column; gap:.3rem; }
.ctrl-row label{ display:flex; justify-content:space-between; font-size:.85rem; }
.ctrl-row label span{ font-family:'Space Grotesk',monospace; color:var(--primary); font-weight:700; }
input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:6px;
    background:rgba(139,92,246,.2); border-radius:3px; outline:none;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:16px; height:16px;
    background:var(--primary); border-radius:50%; cursor:pointer;
    border:2px solid var(--bg);
    box-shadow:0 0 8px rgba(139,92,246,.5);
}
.electrolyte-btns{ display:flex; flex-direction:column; gap:.45rem; }
.el-btn{
    padding:.5rem .8rem; border:1px solid var(--border); border-radius:8px;
    background:transparent; color:var(--muted); font-family:'Outfit',sans-serif;
    font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s;
    text-align:left; display:flex; align-items:center; gap:.5rem;
}
.el-btn .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.el-btn.active{ background:rgba(139,92,246,.15); color:var(--primary); border-color:var(--primary); }
.el-btn:hover:not(.active){ border-color:var(--primary); color:var(--primary); }
.electrode-btns{ display:flex; gap:.5rem; }
.ec-btn{
    flex:1; padding:.5rem; border:1px solid var(--border); border-radius:8px;
    background:transparent; color:var(--muted); font-family:'Outfit',sans-serif;
    font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.ec-btn.active{ background:rgba(139,92,246,.15); color:var(--primary); border-color:var(--primary); }

/* Reset btn */
.reset-btn{
    width:100%; padding:.6rem; border-radius:8px;
    background:rgba(239,68,68,.1); color:#ef4444;
    border:1px solid rgba(239,68,68,.3); font-family:'Outfit',sans-serif;
    font-weight:600; cursor:pointer; transition:all .2s;
}
.reset-btn:hover{ background:rgba(239,68,68,.2); }

/* Canvas */
#cellCanvas{ border-radius:12px; }

/* State badge */
.state-badge{
    position:absolute; top:12px; right:12px;
    padding:.35rem .9rem; border-radius:20px;
    font-size:.78rem; font-weight:700; letter-spacing:.4px;
}
.state-badge.on{ background:rgba(16,185,129,.18); color:#10b981; border:1px solid rgba(16,185,129,.4); }
.state-badge.off{ background:rgba(148,163,184,.12); color:var(--muted); border:1px solid rgba(148,163,184,.2); }

/* Readout boxes */
.rd-box{
    background:#040c1a; border:1px solid var(--border);
    border-radius:10px; padding:.9rem 1rem;
}
.rd-box .rd-lbl{ font-size:.7rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:.3rem; }
.rd-box .rd-val{ font-family:'Space Grotesk',monospace; font-size:1.3rem; font-weight:700; }
.rd-val.pos{ color:#10b981; }
.rd-val.neg{ color:#ef4444; }
.rd-val.zero{ color:var(--muted); }

/* Progress bar for deposition */
.dep-bar-wrap{ background:#040c1a; border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; }
.dep-bar-label{ font-size:.7rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:.6rem; }
.dep-bar-row{ display:flex; flex-direction:column; gap:.4rem; }
.dep-bar-item{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; }
.dep-bar-item .bar-name{ width:60px; color:var(--text); font-size:.78rem; }
.dep-bar-track{ flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.dep-bar-fill{ height:100%; border-radius:4px; transition:width .3s; }
.dep-bar-num{ width:42px; text-align:right; font-family:'Space Grotesk',monospace; font-size:.78rem; color:var(--muted); }

/* ════════════════ THEORY PAGE ════════════════ */
.theory-wrap{
    max-width:1000px; margin:0 auto; padding:2rem;
    display:flex; flex-direction:column; gap:1.8rem;
}
.th-section{
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:1.8rem;
}
.th-section h2{
    font-size:1.1rem; font-weight:700; color:var(--primary);
    margin-bottom:1.1rem; display:flex; align-items:center; gap:.6rem;
}
.th-section p{ color:var(--muted); line-height:1.78; font-size:.91rem; margin-bottom:.8rem; }
.th-section p:last-child{ margin-bottom:0; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }

.side-box{ border-radius:12px; padding:1.2rem; }
.side-box.red-box{ background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.25); }
.side-box.blue-box{ background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.25); }
.side-box h3{ font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.side-box.red-box h3{ color:#ef4444; }
.side-box.blue-box h3{ color:#3b82f6; }
.side-box ul{ color:var(--muted); font-size:.87rem; line-height:1.7; padding-left:1.2rem; }

.formula-box{
    background:#040c1a; border:1px solid rgba(139,92,246,.35);
    border-radius:10px; padding:1rem 1.2rem; margin-top:.8rem;
    font-family:'Space Grotesk',monospace; color:#c4b5fd; font-size:.93rem; line-height:1.9;
}
.formula-box span{ color:var(--accent); font-weight:700; }

.apps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-top:1rem; }
.app-item{
    background:rgba(139,92,246,.07); border:1px solid var(--border);
    border-radius:10px; padding:1rem; text-align:center;
}
.app-item .app-ic{ font-size:1.8rem; margin-bottom:.4rem; }
.app-item h4{ font-size:.82rem; color:var(--text); font-weight:700; margin-bottom:.25rem; }
.app-item p{ font-size:.76rem; color:var(--muted); margin:0; }

::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(139,92,246,.3); border-radius:3px; }