/* ELFAG v0.25 — shared visual theme only. No workflow or calculation rules live here. */
:root{
  color-scheme:dark;
  --bg:#04111d;--bg-soft:#071b2b;--surface:#0d2435;--surface-2:#112d42;
  --surface-3:#17384d;--ink:#f4f9ff;--muted:#9db9cc;--line:#294b61;
  --electric:#16a8ff;--cyan:#58d9ff;--green:#35d49a;--orange:#ffad48;
  --purple:#a57bff;--pink:#ff6f9e;--gold:#ffd266;--danger:#ff737d;
  --shadow:0 18px 46px rgba(0,0,0,.28);--glow:0 0 30px rgba(22,168,255,.16)
}
html{background:var(--bg)}
body{background:radial-gradient(circle at 82% -10%,#174a715c 0,transparent 38%),radial-gradient(circle at 5% 70%,#102f4a55 0,transparent 34%),linear-gradient(145deg,#04111d,#071827 55%,#061522);color:var(--ink)}
.app{background:transparent;color:var(--ink)}
.app>header{background:linear-gradient(180deg,rgba(7,27,43,.96),rgba(7,25,40,.82));border-bottom:1px solid #24465d;box-shadow:0 13px 35px rgba(0,0,0,.18);backdrop-filter:blur(18px)}
.brand>span{background:linear-gradient(145deg,#21c7ff,#0872ff 62%,#5a55ef);box-shadow:0 0 28px #0e91ff66;color:#fff}
.brand b,.view h1,.view h2,.view h3,.page-title h1,.section-heading h2,.bar h2{color:#fff}
.brand small,.page-title p,.section-heading span,.hint,.footnote,.lead,.helper{color:var(--muted)}
.pill{background:#0c2d3c;border-color:#28617b;color:#bcecff;box-shadow:inset 0 0 18px #36d7b313}
.pill:before{background:var(--green);box-shadow:0 0 10px var(--green)}
.icon-button,.bar button{background:#102c40;color:#9edcff;border-color:#315a73;box-shadow:0 7px 20px rgba(0,0,0,.18)}
.icon-button:hover,.bar button:hover{background:#16415d;border-color:#40b9f5;color:#fff}

/* Navigation */
.sidebar{background:linear-gradient(180deg,#061521 0%,#092338 56%,#101d36 100%);border-color:#23455c;box-shadow:16px 0 44px rgba(0,0,0,.24)}
.sidebar .side-brand{color:#fff;text-shadow:0 0 20px #1baaff66}
.side-caption{color:#57caff}.side-link{color:#adc5d6}
.side-link:hover,.side-link.selected{background:linear-gradient(100deg,#0b6ca8,#155484 62%,#4c3c84);border-color:#278ecc;color:#fff;box-shadow:0 8px 24px #02101c66}
.side-link.selected .ico{color:#77e3ff;filter:drop-shadow(0 0 6px #20bfff)}
.side-foot{color:#7898ae;border-color:#24465b}
.app>nav{background:linear-gradient(100deg,rgba(5,24,39,.98),rgba(16,30,57,.98));border-color:#31516d;box-shadow:0 -10px 30px rgba(0,0,0,.3);backdrop-filter:blur(18px)}
.app>nav button{color:#86a6bc}.app>nav button.active{color:#52d8ff;text-shadow:0 0 14px #22b8ff}

/* Home and graphic cards */
.hero{border-color:#35789f;background:#102c45 url('assets/hero.png') center/cover;box-shadow:var(--shadow),0 0 0 1px #18415a inset}
.hero:before{background:linear-gradient(90deg,#031421f2 0,#052137d9 40%,rgba(5,25,42,.22) 82%)}
.hero-copy h1{text-shadow:0 4px 26px #000}.hero-copy p:not(.eyebrow){color:#c7dbe9}
.eyebrow{color:#5bd7ff}.primary{background:linear-gradient(120deg,#0ca6f5,#0871da 58%,#555ce0);border-color:#59c9ff;box-shadow:0 10px 26px rgba(0,127,226,.28);color:#fff}
.secondary{background:#12354c;color:#d8f1ff;border-color:#356782}.subtle{color:#76d6ff}
.section-heading .subtle{background:#0b2b40;border-color:#2f647f;color:#73d4ff}
.module-grid{gap:16px}.module{border-width:1px;box-shadow:0 15px 36px rgba(0,0,0,.25);overflow:hidden}
.module:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 38%);pointer-events:none}
.module:nth-child(6n+1){background:linear-gradient(145deg,#0879bd,#064f85);border-color:#38bdff}
.module:nth-child(6n+2),.module.green{background:linear-gradient(145deg,#078867,#07503f);border-color:#43deb0}
.module:nth-child(6n+3),.module.orange{background:linear-gradient(145deg,#d9651f,#8b3b13);border-color:#ffc06b}
.module:nth-child(6n+4),.module.purple{background:linear-gradient(145deg,#704bc8,#44317f);border-color:#b99aff}
.module:nth-child(6n+5),.module.gold{background:linear-gradient(145deg,#b57a16,#745016);border-color:#ffda79}
.module:nth-child(6n){background:linear-gradient(145deg,#b43468,#77254b);border-color:#ff8bb6}
.module .module-icon{background:rgba(3,19,31,.27);border-color:rgba(255,255,255,.32);color:#fff;box-shadow:inset 0 0 20px rgba(255,255,255,.08)}
.module b,.module small,.module .arrow{color:#fff}.module small{opacity:.86}.module:hover{border-color:#fff;box-shadow:0 20px 44px rgba(0,0,0,.34),0 0 25px rgba(42,184,255,.18)}
.ask-banner,.ai-roadmap,.practice-hero{background:linear-gradient(120deg,#087caf,#2354a6 60%,#683b98);border-color:#4fcfff;box-shadow:var(--shadow)}
.ask-banner b,.ask-banner small,.ai-roadmap p,.practice-hero p{color:#fff}

/* Shared surfaces on every page */
.panel,.tool-card,.project-row,.bank-card,.network-card,.flow-aside,.workflow-panel,.schematic-panel,.circuit-branch,.saved-circuit,.assignment-review,.h1-course-head,.h1-question,.h1-summary,.dimension-step,.dimension-chain,.chain-fuse-panel{
  background:linear-gradient(145deg,rgba(18,45,65,.98),rgba(10,29,44,.98));
  border-color:#315770;color:var(--ink);box-shadow:0 13px 32px rgba(0,0,0,.2)
}
.panel p,.tool-card small,.project-row small,.bank-card small,.bank-card span,.flow-aside p,.network-raw,.case-text{color:#a9c3d5}
.tool-card,.bank-card,.project-row{transition:transform .18s,border-color .18s,box-shadow .18s}
.tool-card:hover,.bank-card:hover,.project-row:hover{transform:translateY(-2px);border-color:#3fb6ee;box-shadow:0 16px 34px rgba(0,0,0,.28)}
.tool-card{position:relative;overflow:hidden}.tool-card:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#33d4ff,#2684ff)}
.tool-card:nth-child(3n+2):before{background:linear-gradient(#ffca64,#ff794f)}.tool-card:nth-child(3n):before{background:linear-gradient(#55e3ad,#15a5e8)}
.page-title>.ico,.chapter-art>.ico{background:linear-gradient(145deg,#123d59,#233866);color:#6ddcff;border-radius:14px;box-shadow:inset 0 0 20px #28bfff1a}
.tabs,.seg{background:#071d2d;border-color:#2b5068}.tabs button,.seg button{color:#9bb8cb}.tabs button.selected,.seg button.sel{background:linear-gradient(120deg,#0a94da,#225ee0);color:#fff;box-shadow:0 7px 18px #03121f88}

/* Inputs stay bright and readable, like the reference screens. */
.view label,.form label,.form-grid label,.dimension-step label{color:#bed5e4}
input:not([type=checkbox]),select,textarea,.form input,.form select,.form textarea,.study-search input,.guide-search input,.converter-panel input,.converter-panel select{
  background:#eaf2f9!important;color:#10283a!important;border:1px solid #7fa9c2!important;box-shadow:inset 0 2px 5px rgba(14,49,72,.09);border-radius:10px
}
input::placeholder,textarea::placeholder{color:#607889}input:focus,select:focus,textarea:focus{outline:3px solid #21a9f0!important;outline-offset:1px;border-color:#fff!important}

/* Results and explanations */
.result,.metric{background:linear-gradient(145deg,#0d4a63,#0b3049);border-color:#42a8ca;box-shadow:0 14px 32px rgba(0,0,0,.25),inset 0 0 24px rgba(52,197,255,.05)}
.result strong,.metric strong{color:#fff}.result p,.result small,.metric span,.metric small{color:#c3e3ef}
.answer-grid>div,.factor-grid>div{background:#102c3f;border:1px solid #315a71;color:#dff3ff;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.work,.explain,.formula,.dim-formula,.dim-equation,.dimension-live,.readable-equation{background:#0a2132;color:#d0e5f2;border-color:#31566d}
.formula,.formula-expression,.study-equation{background:#edf5fb!important;color:#10283a!important;border-color:#91b7cb!important}
.notice{background:#392f18;border-color:#8c6c28;color:#ffe3a2}.notice p{color:#d8c48e}
.status,.status.info{background:#0c3048;border-color:#33749a;color:#bde6ff}.status.good,.check.ok,.dim-check.pass,.dimension-final.pass{background:#0c3c30;border-color:#2f8b68;color:#a2f0cc}.status.bad,.check.no,.dim-check.fail,.dimension-final.fail{background:#47222b;border-color:#9b4e5b;color:#ffc0c5}.status.conditional,.check.conditional,.dim-check.waiting,.dimension-final.waiting{background:#3b311c;border-color:#8a6b2f;color:#ffe0a0}
.toast{background:#105071;color:#effaff;border-color:#53bde8;box-shadow:0 18px 45px #0009}

/* Dimensioning, installation and diagrams */
.installation-figure{background:#f5f1e8;border-color:#4c829e;box-shadow:var(--shadow)}
.installation-figure figcaption{background:linear-gradient(90deg,#0b3149,#183a55);color:#dff4ff}
.route-stage{background:#0d2a3e;border-color:#315d77;color:#d5ecf9}.route-stage.selected{background:linear-gradient(135deg,#087fc0,#1d66c5);border-color:#65d6ff;color:#fff}
.visual-route{background:linear-gradient(120deg,#123a57,#071b2a);border-color:#34718f}.visual-route small{color:#afd0e2}.wire{background:linear-gradient(90deg,#0c9ee9,#66e8ff)}
.step i,.dimension-rail button i{background:#0b2639;border-color:#3d647b;color:#c1dae9}.step.active i,.dimension-rail button.active i,.dimension-rail button.done i{background:linear-gradient(145deg,#11aeea,#1763db);border-color:#71dcff;color:#fff;box-shadow:0 0 20px #1baaff55}
.dimension-rail,.chain-map{background:#071f31;border-color:#31536a}.dimension-rail button,.chain-map b{color:#a9c6d8}.dimension-rail button.active{background:#0b466a;color:#fff}
.schematic-panel,.mixed-vector{background:linear-gradient(145deg,#0c293d,#081b2a);border-color:#37657e}.schematic-bg{fill:#0a2030}.schematic-wire,.branch-wire,.symbol,.coil-symbol,.capacitor-symbol{stroke:#73d8ff}.circuit-svg text,.mixed-vector text{fill:#dff6ff}.schematic-legend{background:#071c2a;border-color:#2c5268;color:#b9d6e6}

/* Formula library, learning, guides, assignments and reports */
.formula-hero{background:linear-gradient(125deg,#078ebf 0%,#255acb 52%,#7443a8 100%);border:1px solid #56caff;box-shadow:var(--shadow)}
.formula-hero h2,.formula-hero p{color:#fff}.formula-layout>aside{background:linear-gradient(145deg,#102e43,#0a2031);border-color:#315a72;color:#e8f7ff}
.formula-card{background:linear-gradient(145deg,#102d41,#0a2030);color:#e8f6ff;border-color:#356079;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.formula-card h2,.formula-card p,.formula-card-top span,.formula-source{color:#dff3ff}.formula-card a{color:#63d2ff}.formula-card-top small{color:#9cb9ca}
.formula-filters button,.study-categories button,.study-modes button,.road-filters button{background:#0d2a3e;color:#b6d3e5;border-color:#315a72}.formula-filters button.selected,.study-categories button.selected,.study-modes button.selected,.road-filters button.selected{background:linear-gradient(120deg,#0b91d2,#3158d5);color:#fff;border-color:#63d2ff}
.calculator-legend div{background:#0c293c;color:#dff3ff;border-color:#356079}.calculator-legend b{color:#67d7ff}.calculator-legend span,.calculator-note{color:#a1bdce}
#guides .study-route,#guides .study-formula-card,#guides .study-task,#guides .study-lesson,#guides .study-related,#guides .study-empty,#guides .study-known,#guides .study-check,#guides .study-chain,.guide-choice,.guide-article,.guide-case,.road-formula,.road-numbers,.road-answer,.assignment-question,.assignment-review details,.h1-selfcheck,.h1-summary div{
  background:#0d293c;color:#d9eefb;border-color:#315970
}
#guides .study-lead,#guides .study-count,#guides .study-route small,#guides .study-formula-card small,#guides .study-lesson>small,.guide-choice span,.guide-case small{color:#9bb9cc}
.study-table th{background:#123b55;color:#e9f8ff}.study-table td{background:#eef5fa;color:#153044;border-color:#a9c1cf}
.study-backdrop,.guide-backdrop{background:rgba(2,11,18,.82);backdrop-filter:blur(7px)}.study-dialog,.guide-dialog{background:#0b2233;color:#e8f6ff;border:1px solid #37657f;box-shadow:0 28px 70px #000b}.study-dialog h1,.study-dialog h2,.study-dialog h3,.guide-dialog h1,.guide-dialog h2,.guide-dialog h3{color:#fff}
.circuit-report{background:#fff;color:#172f3e}.circuit-report h1,.circuit-report h2,.circuit-report h3,.circuit-report b{color:#172f3e}.circuit-report .panel,.circuit-report .explain{background:#f3f7fa;color:#173548;border-color:#b6cbd7}

/* Small legacy calculator tiles also follow the palette. */
.calculator-grid{gap:11px}.tile{background:linear-gradient(145deg,#102c40,#0a2030);color:#eef9ff;border:1px solid #31546b;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.tile b{color:#fff}.tile small,.tile em{color:#a8c2d3}.tile.teal i{background:#0e665c;color:#75f4cf}.tile.green i{background:#0d6148;color:#79efbd}.tile.yellow i{background:#66511b;color:#ffe17c}.tile.blue i{background:#124e7d;color:#80ceff}.tile.red i{background:#6a2d37;color:#ffafb6}.tile.orange i{background:#704117;color:#ffc179}.tile.purple i{background:#493273;color:#c9afff}.tile.dark i{background:#253c4b;color:#c8e3f3}

@media(max-width:720px){
  body{background:linear-gradient(155deg,#04111d,#082035 58%,#071725)}
  .app{background:transparent}.app>header{margin:0 -18px 12px;padding:0 18px;border-radius:0}
  .hero{min-height:250px}.hero-copy{padding:21px}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .module{min-height:158px;padding:15px}.module b{font-size:14px}.module small{font-size:10px}.module .module-icon{margin-bottom:12px}
  .panel,.dimension-step,.dimension-chain{padding:17px}.formula-layout>aside{box-shadow:none}
  .app>nav{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:390px){.module{min-height:150px;padding:13px}.module b{font-size:13px}.module small{font-size:9.5px}.brand small{display:none}.pill{font-size:8px}}
@media print{body,.app{background:#fff!important;color:#000!important}.panel,.dimension-step,.dimension-chain{box-shadow:none!important}}