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

:root {
    --bg: #030712;
    --surface: #0a0f1e;
    --border: #1f2937;
    --primary: #10b981; /* Organic Chemistry Emerald Green */
    --primary-dim: rgba(16, 185, 129, 0.1);
    --secondary: #10b981;
    --text: #f3f4f6;
    --muted: #9ca3af;
}

* { margin:0; padding:0; box-sizing:border-box; }
html {
    background: #030712;
}
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;
}

/* NAVBAR */
.sim-nav{
    display:flex; justify-content:space-between; align-items:center;
    padding:1rem 2rem; background:var(--surface); border-bottom:1px solid var(--border); height:70px;
    flex-shrink: 0;
}
.nav-left{ display:flex; align-items:center; gap:2rem; }
.sim-logo{ font-size:1.4rem; font-weight:800; letter-spacing:1px; }
.logo-thin{ font-weight:300; }
.nav-crumbs{ font-size:.85rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.nav-crumbs a{ color:var(--muted); text-decoration:none; transition:.2s; }
.nav-crumbs a:hover{ color:var(--primary); }
.nav-crumbs .sep{ margin:0 5px; opacity:0.5; }
.nav-crumbs .cur{ color:var(--primary); }
.nav-back{ color:var(--text); text-decoration:none; font-size:.9rem; font-weight:600; padding:.5rem 1rem; border-radius:8px; background:#1f2937; transition:.2s; }
.nav-back:hover{ background:var(--primary); color:#000; }

/* LAYOUT */
.sim-wrap{ display:flex; height: 650px; flex-grow: 1; }

/* CONTROLS (Left) */
.sim-ctrl{
    width:280px; background:var(--surface); border-right:1px solid var(--border);
    padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:1rem;
    height: 100%;
}
.ctrl-title{ font-size:.85rem; font-weight:800; text-transform:uppercase; color:var(--primary); letter-spacing:1px; display:flex; gap:.5rem; align-items:center;}

.mech-list{
    display:grid; grid-template-columns:1fr; gap:.5rem;
}
.mech-btn{
    padding:.8rem; background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:8px; color:var(--text); font-family:'Outfit'; font-weight:600; font-size: 0.9rem; cursor:pointer; text-align:left; transition:.2s;
    display:flex; justify-content:space-between; align-items:center;
}
.mech-btn:hover{ background:rgba(255,255,255,0.08); }
.mech-btn.active{
    background:var(--primary-dim); border-color:var(--primary); color:var(--primary);
}

.reaction-card{
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    border-radius:8px; padding:1rem; margin-top:.2rem;
}
.rxn-title{ font-size:.65rem; color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:1px; margin-bottom:.4rem; }
.rxn-eq{ font-size:.95rem; font-weight:700; color:var(--text); line-height: 1.3;}
.rxn-eq span{ color:var(--muted); font-size:.7rem; }

.ctrl-group{ display:flex; flex-direction:column; gap:.4rem; }
.ctrl-group label{ font-size:.75rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }

/* Custom Slider */
.styled-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
    background: #1f2937; outline: none; margin: 8px 0;
}
.styled-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--primary); cursor: pointer; box-shadow: 0 0 8px var(--primary);
}

.btn-primary, .btn-secondary{
    padding:.7rem; border-radius:8px; font-family:'Outfit'; font-weight:700; font-size:0.85rem;
    cursor:pointer; border:none; display:flex; justify-content:center; align-items:center; gap:.4rem; flex:1; transition:.2s;
}
.btn-primary{ background:var(--primary); color:#000; box-shadow:0 4px 10px rgba(16,185,129,0.3); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 15px rgba(16,185,129,0.5); }
.btn-secondary{ background:rgba(255,255,255,0.1); color:var(--text); }
.btn-secondary:hover{ background:rgba(255,255,255,0.15); }

/* STAGE (Center) */
.sim-stage{ flex-grow:1; position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; background: radial-gradient(circle at center, #0a0f1e, #030712); height: 100%; }
#simCanvas{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; }

.instr-badge{
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
    padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; z-index:10; backdrop-filter:blur(5px); transition:opacity 0.3s; pointer-events:none;
}

.mech-overlay-title {
    position:absolute; bottom:20px; right:20px; z-index:10;
    font-size: 2rem; font-weight: 800; color: rgba(255,255,255,0.05); text-transform:uppercase; pointer-events:none;
}

/* READOUTS (Right) */
.sim-info{
    width:320px; background:var(--surface); border-left:1px solid var(--border);
    padding:1rem; overflow-y:auto; display:flex; flex-direction:column; gap:1rem;
    height: 100%;
}
.rd-group {
    display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
}
.rd-box{
    background: linear-gradient(145deg, rgba(4,12,26,0.8), rgba(17,24,39,0.9)); 
    border:1px solid rgba(16,185,129,0.25);
    border-radius:10px; padding:1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.03);
    position: relative; overflow: hidden;
}
.rd-box::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0.6;
}
.rd-box:nth-child(2)::before {
    background: linear-gradient(90deg, transparent, #34d399, transparent);
}
.rd-lbl{ font-size:.65rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:.5rem; display:flex; align-items:center; gap:0.4rem; }
.rd-val{ font-family:'Space Grotesk',monospace; font-size:1.8rem; font-weight:700; color:var(--text); line-height:1.1; display:flex; align-items:baseline; gap:0.3rem;}

.info-card {
    background: rgba(255,255,255,0.03); border-left:3px solid var(--primary);
    padding:1rem; border-radius:0 8px 8px 0; font-size:0.9rem; line-height:1.5; color:var(--muted);
}

.graph-container {
    background: linear-gradient(to bottom, #040c1a, #0b1120); 
    border:1px solid var(--border); border-radius:12px; padding:1rem; height: 300px; flex-shrink: 0;
    display:flex; flex-direction:column; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
#graphCanvas {
    width: 100%; height: 100%; margin-top: 10px; flex-grow: 1; display: block;
}