/* ============================================================
   exp3_diode.css — PN Junction Diode Lab
   Requires: global.css (handles nav, bg-mesh, blobs, base vars)
   ============================================================ */

:root {
  --bg: #eceeff;
  --surface: rgba(255,255,255,0.55);
  --border: rgba(255,255,255,0.6);
  --border-dark: rgba(0,0,0,0.08);
  --green: #10B981;
  --cyan: #06b6d4;
  --purple: #7C3AED;
  --amber: #F59E0B;
  --blue: #1A56DB;
  --rose: #F43F5E;
  --text: #0f0f1a;
  --muted: #475569;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: var(--lf-font-display);
  --font-body: var(--lf-font-body);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}
    
    /* LAYOUT */
    .page{padding-top:var(--lf-main-padding-top);max-width:1300px;margin:0 auto;padding-left:2rem;padding-right:2rem;position:relative;z-index:10}
    .page-header{padding:1.75rem 0 1.25rem;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem}
    .breadcrumb{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.65rem;color:var(--muted);margin-bottom:.6rem}
    .breadcrumb .badge{background:rgba(26,86,219,.15);border:1px solid rgba(26,86,219,.3);color:var(--blue);padding:.15rem .5rem;border-radius:999px}
    .page-header h1{font-family:var(--font-display);font-size:2.2rem;color:var(--text);margin-bottom:.35rem;letter-spacing:-0.03em}
    .page-header p{font-size:.9rem;color:var(--muted);max-width:500px}
    .header-btns{display:flex;gap:.6rem;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;text-decoration:none}
    .btn-export{background:rgba(26,86,219,.1);border:1px solid rgba(26,86,219,.2);color:var(--blue)}
    .btn-export:hover{background:rgba(26,86,219,.2)}
    .btn-reset{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);color:var(--muted)}
    .btn-reset:hover{color:var(--text)}
    
    /* MAIN GRID */
    .lab-grid{display:grid;grid-template-columns:320px 1fr;gap:1.25rem;padding-bottom:3rem}
    
    /* PANEL - Glassy */
    .panel{background:var(--surface);backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.03);border-radius:16px;padding:1.25rem}
    .panel-label{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
    
    /* BIAS TOGGLE */
    .bias-wrap{display:flex;gap:.5rem;background:rgba(0,0,0,0.04);border:1px solid var(--border-dark);border-radius:10px;padding:.3rem}
    .bias-btn{flex:1;padding:.55rem;border-radius:7px;border:none;background:none;color:var(--muted);font-family:var(--font-mono);font-size:.78rem;cursor:pointer;transition:all .2s;font-weight:600}
    .bias-btn.active{background:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(26,86,219,.3)}
    
    /* SLIDER */
    .slider-wrap{margin-bottom:.25rem}
    .slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
    .slider-label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
    .slider-val{font-family:var(--font-mono);font-size:.9rem;font-weight:700;color:var(--text)}
    input[type=range]{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;cursor:pointer;background:rgba(0,0,0,.1)}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#1A56DB;box-shadow:0 0 8px rgba(26,86,219,.4);border:2px solid #fff}
    .slider-range{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.6rem;color:var(--muted);margin-top:.35rem}
    
    /* DIODE PARAMS */
    .param-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-dark)}
    .param-row:last-child{border-bottom:none}
    .param-key{font-size:.78rem;color:var(--muted);font-weight:500}
    .param-val{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--text)}
    
    /* MULTIMETER */
    .meter-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
    .meter-card{background:rgba(255,255,255,0.6);border:1px solid var(--border);border-radius:10px;padding:.75rem;box-shadow:0 2px 12px rgba(0,0,0,0.02)}
    .meter-key{font-family:var(--font-mono);font-size:.6rem;color:var(--muted);margin-bottom:.3rem;font-weight:600}
    .meter-val{font-family:var(--font-mono);font-size:1.1rem;font-weight:700}
    
    /* OBS CARD */
    .obs-card{border-radius:10px;border:1px solid;padding:1rem;margin-top:1rem;background:var(--surface);backdrop-filter:blur(10px)}
    .obs-title{font-family:var(--font-mono);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.65rem}
    .obs-point{display:flex;gap:.5rem;font-size:.75rem;color:var(--text);margin-bottom:.4rem;line-height:1.5}
    
    /* CHART AREA */
    .chart-panel{background:var(--surface);backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,0.03);border-radius:16px;padding:1.25rem}
    .chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
    .chart-title{font-family:var(--font-mono);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
    .qpoint{font-family:var(--font-mono);font-size:.72rem;color:var(--amber);font-weight:700}
    .chart-box{height:280px;position:relative}
    
    /* EQUATION */
    .eq-box{background:rgba(255,255,255,0.6);border:1px solid var(--border);border-radius:10px;padding:1rem;text-align:center;font-family:var(--font-mono);font-size:.95rem;font-weight:600;margin:1rem 0 .5rem}
    .eq-params{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
    .eq-param{display:flex;gap:.5rem;align-items:flex-start}
    .eq-sym{font-family:var(--font-mono);font-weight:700;color:var(--amber);font-size:.85rem;width:20px}
    .eq-desc{font-size:.75rem;color:var(--muted);line-height:1.5}
    
    /* CIRCUIT SVG */
    .circuit-wrap{background:rgba(255,255,255,0.6);border:1px solid var(--border);border-radius:12px;padding:1.25rem}
    
    @media(max-width:900px){.lab-grid{grid-template-columns:1fr}}