:root{--primary:#1a237e;--secondary:#c62828;--accent:#2e7d32;--bg:#f5f5f5;--card:#fff;--text:#212121;--text-light:#757575;--border:#e0e0e0;--highlight:#fff9c4;--pos:#2e7d32;--neg:#c62828;--sidebar-w:280px;--error-bg:#ffebee;--error-border:#ef5350;--success-bg:#e8f5e9;--success-border:#66bb6a;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;display:flex;min-height:100vh;}
/* Sidebar */
.sidebar{width:var(--sidebar-w);background:var(--primary);color:#fff;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100;transition:transform .3s;padding:20px 0;}
.sidebar h2{padding:10px 20px 20px;font-size:1.1em;border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:10px;}
.sidebar a{display:block;padding:8px 20px;color:rgba(255,255,255,.8);text-decoration:none;font-size:.88em;transition:all .2s;border-left:3px solid transparent;}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.1);color:#fff;border-left-color:#ffab40;}
.sidebar .nav-group{font-size:.75em;color:rgba(255,255,255,.5);padding:12px 20px 4px;text-transform:uppercase;letter-spacing:1px;}
.menu-btn{display:none;position:fixed;top:10px;left:10px;z-index:200;background:var(--primary);color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:1.2em;}
/* Main */
.main{margin-left:var(--sidebar-w);flex:1;padding:30px 40px 60px;max-width:1100px;}
section{margin-bottom:50px;background:var(--card);border-radius:12px;padding:30px 35px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
h1{font-size:1.8em;color:var(--primary);margin-bottom:8px;}
h2{font-size:1.5em;color:var(--primary);margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid var(--border);}
h3{font-size:1.2em;color:var(--secondary);margin:20px 0 10px;}
h4{font-size:1.05em;color:var(--accent);margin:15px 0 8px;}
p{margin-bottom:12px;}
ul,ol{margin:0 0 12px 20px;}
li{margin-bottom:4px;}
.subtitle{color:var(--text-light);font-size:.95em;margin-bottom:25px;}
/* Accordion */
.accordion{border:1px solid var(--border);border-radius:8px;margin:12px 0;overflow:hidden;}
.accordion-header{background:#f8f9fa;padding:12px 18px;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background .2s;}
.accordion-header:hover{background:#e8eaf6;}
.accordion-header::after{content:'+';font-size:1.3em;color:var(--primary);transition:transform .3s;}
.accordion-header.open::after{content:'-';}
.accordion-body{display:none;padding:15px 18px;border-top:1px solid var(--border);background:#fff;}
.accordion-body.show{display:block;}
/* Formula card */
.formula-card{background:linear-gradient(135deg,#e8eaf6,#f3e5f5);border:2px solid #7c4dff;border-radius:10px;padding:20px 25px;margin:15px 0;cursor:pointer;transition:all .3s;}
.formula-card h3{color:#4a148c;margin-top:0;}
.formula-card .formula-grid{transition:max-height .4s ease,opacity .3s;overflow:hidden;}
.formula-card.collapsed .formula-grid{max-height:0;opacity:0;}
.formula-card:not(.collapsed) .formula-grid{max-height:500px;opacity:1;}
.formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:10px;}
.formula-item{background:#fff;padding:10px 15px;border-radius:6px;border-left:4px solid #7c4dff;font-size:.95em;}
/* Tables */
table{width:100%;border-collapse:collapse;margin:15px 0;font-size:.92em;}
th{background:var(--primary);color:#fff;padding:10px 12px;text-align:center;font-weight:600;}
td{padding:8px 12px;text-align:center;border:1px solid var(--border);}
tr:nth-child(even){background:#f8f9fa;}
tr:hover{background:#e3f2fd;}
td.highlight{background:#fff9c4;font-weight:700;}
td.correct{background:#c8e6c9;font-weight:700;}
td.wrong{background:#ffcdd2;}
/* Interactive elements */
.slider-container{display:flex;align-items:center;gap:15px;margin:12px 0;padding:10px 15px;background:#f5f5f5;border-radius:8px;}
.slider-container label{font-weight:600;min-width:120px;}
.slider-container input[type=range]{flex:1;accent-color:var(--primary);}
.slider-container .value{font-weight:700;color:var(--primary);min-width:40px;text-align:center;}
.toggle-btn{display:inline-block;padding:6px 16px;margin:4px;border:2px solid var(--primary);border-radius:20px;cursor:pointer;font-size:.85em;background:#fff;color:var(--primary);transition:all .2s;user-select:none;}
.toggle-btn.active{background:var(--primary);color:#fff;}
.toggle-btn:hover{background:#e8eaf6;}
.toggle-btn.active:hover{background:#283593;}
.chart-controls{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding:10px;background:#fafafa;border-radius:8px;}
/* Error flags */
.error-flag{background:var(--error-bg);border:2px solid var(--error-border);border-radius:8px;padding:15px 20px;margin:15px 0;}
.error-flag h4{color:var(--secondary);margin-top:0;}
.error-flag .correct-answer{background:var(--success-bg);border:1px solid var(--success-border);border-radius:6px;padding:10px 15px;margin-top:10px;}
/* Links */
.ext-links{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.ext-links a{display:inline-flex;align-items:center;padding:5px 12px;background:#e3f2fd;color:#1565c0;border-radius:15px;text-decoration:none;font-size:.82em;transition:background .2s;}
.ext-links a:hover{background:#bbdefb;}
/* Concept map */
.concept-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:15px 0;}
.concept-box{padding:15px;border-radius:8px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s;border:2px solid transparent;}
.concept-box:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.concept-box.neg{background:#ffebee;border-color:#ef5350;}
.concept-box.pos{background:#e8f5e9;border-color:#66bb6a;}
.concept-box.pec{background:#fff3e0;border-color:#ffa726;}
.concept-box.neutral{background:#e3f2fd;border-color:#42a5f5;}
.concept-box h4{margin:0 0 5px;font-size:1em;}
.concept-box p{font-size:.82em;color:var(--text-light);margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .3s,margin .3s;}
.concept-box.expanded p{max-height:200px;opacity:1;margin-top:8px;}
.expand-hint{font-size:.7em;color:var(--text-light);font-weight:400;}
/* Why box */
.why-box{background:#fffde7;border-left:4px solid #f9a825;padding:12px 18px;margin:10px 0;border-radius:0 8px 8px 0;}
.why-box strong{color:#f57f17;}
/* Step boxes */
.step{display:flex;gap:12px;margin:8px 0;padding:10px;border-radius:8px;background:#fafafa;}
.step-num{background:var(--primary);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85em;font-weight:700;flex-shrink:0;}
.step-content{flex:1;}
/* Exam practice */
.exam-box{border:2px solid #ff9800;border-radius:10px;padding:20px;margin:15px 0;background:#fff8e1;}
.exam-box h3{color:#e65100;margin-top:0;}
.fill-input{width:60px;text-align:center;border:2px solid #90a4ae;border-radius:4px;padding:4px;font-size:.9em;font-weight:700;}
.fill-input.correct{border-color:#4caf50;background:#e8f5e9;}
.fill-input.incorrect{border-color:#f44336;background:#ffebee;}
.check-btn{background:var(--primary);color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-weight:600;margin:10px 5px;transition:background .2s;}
.check-btn:hover{background:#283593;}
.reveal-btn{background:#ff9800;color:#fff;border:none;padding:8px 20px;border-radius:6px;cursor:pointer;font-weight:600;margin:10px 5px;}
.reveal-btn:hover{background:#f57c00;}
.solution-box{display:none;background:#e8f5e9;border:2px solid #66bb6a;border-radius:8px;padding:15px 20px;margin:10px 0;}
/* Surplus bar */
.surplus-bar{display:flex;flex-direction:column;gap:8px;margin:15px 0;}
.surplus-item{display:flex;align-items:center;gap:10px;}
.surplus-label{width:120px;font-weight:600;font-size:.9em;text-align:right;}
.surplus-val{padding:6px 15px;border-radius:4px;font-weight:700;color:#fff;font-size:.9em;min-width:60px;text-align:center;}
.surplus-pos{background:#4caf50;}
.surplus-neg{background:#f44336;}
.surplus-net{background:#1a237e;}
/* Comparison grid */
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:15px 0;}
.comparison-grid>div{padding:15px;border-radius:8px;}
/* Plotly chart */
.plotly-chart{width:100%;min-height:400px;margin:10px 0;}
/* Landing page */
.landing-hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#e8eaf6,#f3e5f5);border-radius:12px;margin-bottom:30px;}
.landing-hero h1{font-size:2.2em;margin-bottom:12px;}
.section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:20px 0;}
.section-card{background:#fff;border-radius:10px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s;text-decoration:none;color:var(--text);border-left:4px solid var(--primary);}
.section-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.12);}
.section-card h3{color:var(--primary);margin:0 0 8px;font-size:1.1em;}
.section-card p{color:var(--text-light);font-size:.9em;margin:0;}
.section-card.neg{border-left-color:var(--neg);}
.section-card.pos{border-left-color:var(--pos);}
.section-card.special{border-left-color:#ff9800;}
.section-card.exam{border-left-color:#9c27b0;}
/* Print */
@media print{.sidebar,.menu-btn,.chart-controls,.toggle-btn,.slider-container{display:none!important;}.main{margin-left:0;padding:10px;}section{break-inside:avoid;box-shadow:none;border:1px solid #ddd;}}
/* Mobile */
@media(max-width:768px){.sidebar{transform:translateX(-100%);}.sidebar.open{transform:translateX(0);}.menu-btn{display:block;}.main{margin-left:0;padding:15px 12px;}.formula-grid{grid-template-columns:1fr;}.concept-map{grid-template-columns:1fr 1fr;}section{padding:18px 15px;}h1{font-size:1.4em;}h2{font-size:1.2em;}.section-grid{grid-template-columns:1fr;}.landing-hero h1{font-size:1.6em;}}
@media(max-width:480px){.concept-map{grid-template-columns:1fr;}.slider-container{flex-direction:column;align-items:stretch;}.slider-container label{min-width:auto;}.comparison-grid{grid-template-columns:1fr;}}