/* ================================================================
   ELT.CSS — risolutore di circuiti (elettrotecnica/index.html)
   Richiede style.css (token) e brand.css (barra e piè di pagina).
================================================================= */
:root {
    --c-elt: #b45309;  --c-elt-rgb: 180, 83, 9;
    --elt-sym: #0f172a;
    --elt-wire: #1e293b;
    --elt-hl: #c2410c;
    --elt-hl2: #1570b8;
    --elt-cur: #0b7a60;
    --elt-mesh: #6247d6;
    --elt-node: #005a9c;
    --elt-zfill: #fde7c8;
}

body.page-elt { --accent: var(--c-elt); --accent-rgb: var(--c-elt-rgb); }
.elt-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.6em 1.5em 4em;
    display: flex;
    flex-direction: column;
    gap: 1.4em;
}

/* ---------------- Intestazione e fasi ---------------- */
.elt-main { padding-top: 1.1em; gap: 1em; }
.elt-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em 2em; flex-wrap: wrap; }
.elt-top .eyebrow { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-elt); margin-bottom: .15em; }
.elt-top h1 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; color: var(--ink); }
.elt-stepper {
    position: sticky; top: 70px; z-index: 20;
    display: flex; align-items: center; gap: .25em;
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 16px; padding: .3em; box-shadow: var(--shadow-sm);
}
.elt-stepper button {
    display: flex; align-items: center; gap: .6em; text-align: left;
    font: inherit; color: var(--muted); background: transparent; border: 0; border-radius: 12px;
    padding: .45em .9em .45em .5em; cursor: pointer; transition: background .15s, color .15s;
}
.elt-stepper button:hover { background: var(--paper); color: var(--ink); }
.elt-stepper .n { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--paper); color: var(--muted); border: 1px solid var(--line); flex: none; }
.elt-stepper .tx2 { display: flex; flex-direction: column; line-height: 1.15; }
.elt-stepper .l { font-weight: 700; font-size: .92rem; }
.elt-stepper .s { font-size: .74rem; color: var(--subtle); max-width: 14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elt-stepper button.on { background: rgba(var(--c-elt-rgb), .1); color: var(--ink); }
.elt-stepper button.on .n { background: var(--c-elt); border-color: var(--c-elt); color: #fff; }
.elt-stepper button.warn .s { color: #b42318; }
.elt-stepper .sep { width: 18px; height: 2px; background: var(--line-strong); border-radius: 2px; flex: none; }
.elt-view[hidden] { display: none !important; }
.elt-view { display: flex; flex-direction: column; gap: 1em; }
.elt-viewnav { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.elt-viewnav .elt-btn.primary { margin-left: auto; padding: .7em 1.3em; font-size: .95rem; }
.elt-hintline { font-size: .88rem; color: var(--muted); }
.elt-linkbtn { font: inherit; color: var(--c-elt); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.elt-linkbtn:hover { color: #92400e; }

/* ---------------- Schede ---------------- */
.elt-card {
    background: var(--paper-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.2em 1.4em 1.4em;
    min-width: 0;
}
.elt-card-h { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: .6em; }
.elt-card-h h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
.elt-tag { font-size: .78rem; font-weight: 700; color: var(--c-elt); background: rgba(var(--c-elt-rgb), .09); padding: .25em .7em; border-radius: 999px; }

/* ---------------- Barra degli strumenti ---------------- */
.elt-editor-card { padding: .7em; }
.elt-toolbar { display: flex; flex-wrap: wrap; gap: .5em; padding: .1em .1em .7em; border-bottom: 1px solid var(--line); margin-bottom: .7em; }
.elt-tgroup { display: flex; flex-wrap: wrap; gap: .2em; padding-right: .5em; border-right: 1px solid var(--line); align-items: stretch; }
.elt-tgroup:last-child { border-right: 0; padding-right: 0; }
.elt-tool {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
    min-width: 54px; padding: .35em .45em .3em;
    font: 600 .7rem/1.1 var(--font-sans); color: var(--muted);
    background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.elt-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.elt-tool.elt-comp svg { width: 46px; height: 22px; }
.elt-tool:hover { background: var(--brand-50); color: var(--ink); }
.elt-tool.on { background: rgba(var(--c-elt-rgb), .1); border-color: rgba(var(--c-elt-rgb), .35); color: var(--c-elt); }
.elt-tool .sym line, .elt-tool .sym path, .elt-tool .sym rect, .elt-tool .sym circle,
.elt-tool .gnd line, .elt-tool .port circle, .elt-tool .port line, .elt-tool .pm line { stroke: currentColor; stroke-width: 3; fill: none; }
.elt-tool .sym .ah, .elt-tool .sym .pdot { fill: currentColor; stroke: none; }
.elt-tool .sym .zf { fill: rgba(var(--c-elt-rgb), .18); }
.elt-tool .gnd line, .elt-tool .port circle, .elt-tool .port line { stroke-width: 2; }
.elt-files { align-items: center; }
.elt-files select, .elt-field select, .elt-field input {
    font: 500 .88rem var(--font-sans); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 9px; background: #fff;
    padding: .45em .6em; min-width: 0;
}
.elt-files select { max-width: 14em; align-self: center; }

/* ---------------- Editor ---------------- */
.elt-editor { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: .8em; }
.elt-canvas {
    display: block; width: 100%; height: clamp(380px, 62vh, 620px);
    background: #fcfdfe; border: 1px solid var(--line); border-radius: 12px;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.elt-canvas[data-tool="wire"], .elt-canvas[data-tool="place"] { cursor: crosshair; }
.elt-canvas[data-tool="delete"] { cursor: not-allowed; }
.elt-canvas.panning { cursor: grabbing; }
.elt-canvas:focus { outline: none; }
.elt-canvas:focus-visible { outline: 2px solid rgba(var(--c-elt-rgb), .45); outline-offset: 2px; }
.elt-canvas .gdot { fill: #c5cfdb; }
.elt-props {
    border: 1px solid var(--line); border-radius: 12px; padding: .9em 1em; background: var(--paper);
    font-size: .9rem; overflow: auto; max-height: clamp(380px, 62vh, 620px);
}
.elt-props h3 { margin: 0 0 .7em; font-size: 1rem; color: var(--ink); }
.elt-field { display: flex; flex-direction: column; gap: .25em; margin-bottom: .7em; }
.elt-field > span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.elt-field input:focus, .elt-field select:focus, .elt-files select:focus { outline: 2px solid rgba(var(--c-elt-rgb), .4); outline-offset: 1px; border-color: var(--c-elt); }
.elt-ferr { font-style: normal; font-size: .76rem; color: #b42318; min-height: 0; }
.elt-ferr:empty { display: none; }
.elt-check, .elt-radio { display: flex; align-items: center; gap: .45em; font-size: .88rem; margin: .2em 0 .6em; cursor: pointer; }
.elt-check input, .elt-radio input { accent-color: var(--c-elt); }
.elt-hint { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: .2em 0 .8em; }
.elt-help { margin: 0; padding-left: 1.1em; font-size: .82rem; line-height: 1.5; color: var(--text); }
.elt-help li { margin-bottom: .45em; }
kbd { font: 600 .74rem var(--font-mono); background: #fff; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: .05em .35em; }
.elt-pbtns { display: flex; flex-wrap: wrap; gap: .4em; }
.elt-btn {
    font: 600 .84rem var(--font-sans); color: var(--ink-soft);
    background: #fff; border: 1px solid var(--line-strong); border-radius: 9px;
    padding: .5em .8em; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.elt-btn:hover { border-color: var(--c-elt); color: var(--c-elt); }
.elt-btn.primary { background: var(--c-elt); border-color: var(--c-elt); color: #fff; }
.elt-btn.primary:hover { background: #92400e; color: #fff; }
.elt-btn.danger:hover { border-color: #b42318; color: #b42318; }

/* ---------------- Dati ---------------- */
.elt-dati { display: flex; flex-direction: column; gap: 1em; }
.elt-dati-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; align-items: start; }
.elt-dati-form { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.elt-fs2 { margin: 0; padding: 1em 1.2em .6em; }
.elt-fs2 legend { float: left; width: 100%; padding: 0; margin: 0 0 .7em; font-size: .78rem; font-weight: 800; color: var(--c-elt); text-transform: uppercase; letter-spacing: .06em; }
.elt-fs2 legend + * { clear: both; }
.elt-fs2 textarea, .elt-dlg textarea { width: 100%; font: .9rem var(--font-mono); border: 1px solid var(--line-strong); border-radius: 9px; padding: .5em .6em; resize: vertical; }
.elt-field code, .elt-howto code, .elt-dlg code { font: .84em var(--font-mono); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: .05em .3em; }
.elt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.elt-seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .2em; margin-bottom: .8em; }
.elt-seg label { cursor: pointer; }
.elt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.elt-seg span { display: block; padding: .45em .9em; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.elt-seg input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.elt-seg input:focus-visible + span { outline: 2px solid rgba(var(--c-elt-rgb), .45); }
.elt-dati-preview { position: sticky; top: 140px; }
.elt-dati-preview h3 { margin: 0 0 .6em; font-size: 1rem; color: var(--ink); }
.elt-howto { font-size: .88rem; color: var(--text); padding: .9em 1.2em; }
.elt-howto summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.elt-howto ul { margin: .6em 0 0; padding-left: 1.2em; line-height: 1.6; }

/* ---------------- Soluzione: indice e pagine ---------------- */
.elt-sol { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.2em; align-items: start; }
.elt-nav { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .5em; box-shadow: var(--shadow-sm); }
.elt-nav-sel { display: none; }
.elt-nav-list { list-style: none; margin: 0; padding: 0; }
.elt-nav-list .gh { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--subtle); padding: .9em .6em .3em; }
.elt-nav-list .gh.gna { margin-top: .6em; border-top: 1px dashed var(--line); padding-top: 1em; }
.elt-nav-list button {
    width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .2em; text-align: left;
    font: inherit; background: none; border: 0; border-radius: 10px; padding: .5em .65em; cursor: pointer; color: var(--ink-soft);
}
.elt-nav-list button:hover { background: var(--paper); }
.elt-nav-list button.on { background: rgba(var(--c-elt-rgb), .1); color: var(--ink); box-shadow: inset 3px 0 0 var(--c-elt); }
.elt-nav-list button.na .nm { color: var(--subtle); }
.elt-nav-list .nm { font-weight: 650; font-size: .9rem; }
.elt-nav-list .bs { display: flex; flex-wrap: wrap; gap: .25em; }
.elt-nav-list .b, .b { font-size: .68rem; font-weight: 700; padding: .1em .45em; border-radius: 999px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.b.best { background: #ecfdf3; color: var(--green-text); border-color: #b7ebc8; }
.b.na { background: #fff; color: var(--subtle); border-style: dashed; }
.b.bad { background: #fff6f6; color: #b42318; border-color: #f4c7c3; }
.elt-solmain { background: var(--paper-0); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.3em 1.5em 1.5em; min-width: 0; }
.elt-mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: .2em; }
.elt-mhead .eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c-elt); }
.elt-mhead h2 { margin: .1em 0 0; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); }
.elt-block { border-top: 1px solid var(--line); margin-top: 1.1em; padding-top: 1em; }
.elt-block > h3 { margin: 0 0 .5em; font-size: 1.1rem; color: var(--ink); }
.elt-strat td.k { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-align: right; }
.elt-strat tr.best td { background: #f3fbf6; }
.elt-strat tr.best td.k::after { content: ' ✓'; color: var(--green-text); }
.elt-toc { margin: .7em 0 1.1em; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.elt-toc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5em; padding: .55em .9em; font: 700 .78rem var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.elt-toc > summary::-webkit-details-marker { display: none; }
.elt-toc > summary::after { content: ''; margin-left: auto; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.elt-toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.elt-toc > summary .c { font-size: .72rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .05em .5em; letter-spacing: 0; color: var(--ink-soft); }
.elt-stepidx { list-style: none; margin: 0; padding: .1em .5em .6em; columns: 2 16em; column-gap: 1.2em; }
.elt-stepidx li { break-inside: avoid; }
.elt-stepidx button { display: flex; align-items: baseline; gap: .55em; width: 100%; font: 500 .86rem/1.35 var(--font-sans); color: var(--ink-soft); background: none; border: 0; border-radius: 8px; padding: .3em .45em; cursor: pointer; text-align: left; }
.elt-stepidx button:hover { background: #fff; color: var(--ink); }
.elt-stepidx button .n { flex: none; min-width: 1.5em; font: 700 .78rem var(--font-mono); color: var(--c-elt); text-align: right; }
.elt-stepidx button.key { color: var(--ink); font-weight: 650; }
.elt-stepidx button.key .tt::after { content: ' ●'; color: var(--c-elt); font-size: .6em; vertical-align: .25em; }
.elt-stepidx button.later { opacity: .45; }
.elt-mnav { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--line); }
.elt-proc { margin: .4em 0; padding-left: 1.4em; }
.elt-proc li { margin: .25em 0; }

/* ---------------- Richieste e risultati ---------------- */
.elt-seg-sm { display: flex; flex-wrap: wrap; margin: .5em 0 0; }
.elt-seg-sm span { font-size: .82rem; padding: .42em .75em; }
.elt-field-t { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .15em; }
.elt-reqbox { margin-bottom: 1em; padding-bottom: .9em; border-bottom: 1px solid var(--line); }
.elt-chips { list-style: none; margin: .35em 0 .6em; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.elt-chips li { display: inline-flex; align-items: center; gap: .15em; font: 600 .84rem var(--font-sans); color: var(--ink); background: rgba(var(--c-elt-rgb), .08); border: 1px solid rgba(var(--c-elt-rgb), .28); border-radius: 999px; padding: .2em .2em .2em .8em; }
.elt-chips li.empty { font-weight: 400; color: var(--muted); background: none; border: 0; padding: 0; font-size: .84rem; line-height: 1.5; }
.elt-chips button, .elt-ans .elt-x { width: 1.7em; height: 1.7em; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0; }
.elt-chips button:hover, .elt-ans .elt-x:hover { background: rgba(var(--c-elt-rgb), .16); color: var(--ink); }
.elt-req-add select { font: 600 .86rem var(--font-sans); color: var(--c-elt); border: 1px dashed rgba(var(--c-elt-rgb), .55); border-radius: 9px; background: #fff; padding: .5em .7em; max-width: 100%; cursor: pointer; }
.elt-req-add select:hover, .elt-req-add select:focus { border-style: solid; outline: none; }
.elt-answers { border-top: 0; margin-top: .9em; padding-top: 0; }
.elt-answers > p { color: var(--text); line-height: 1.6; }
.elt-ans { list-style: none; margin: .3em 0 1em; padding: 0; display: grid; gap: .7em; }
.elt-ans li { background: #fff; border: 1px solid rgba(var(--c-elt-rgb), .22); border-left: 4px solid var(--c-elt); border-radius: 12px; padding: .55em 1em .35em; box-shadow: 0 1px 0 rgba(15, 23, 42, .03); }
.elt-ans-h { display: flex; align-items: center; justify-content: space-between; gap: .5em; font: 700 .92rem var(--font-sans); color: var(--ink); }
.elt-ans .katex-display { margin: .35em 0 .25em; }
.elt-ans-foot { display: flex; flex-wrap: wrap; gap: .7em; align-items: center; }
.elt-req-res { border: 1px solid var(--line); border-left: 4px solid var(--c-elt); border-radius: 12px; padding: .5em 1em .3em; margin: .8em 0; background: #fff; }
.elt-req-res h4 { margin: .25em 0 0; font-size: .95rem; color: var(--ink); }
.elt-req-res .elt-note { margin: .1em 0 .5em; }
.elt-sub-h { margin: 1.2em 0 .25em; font: 800 .72rem var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.elt-needs { list-style: none; padding: 0 !important; margin: .2em 0 .8em !important; }
.elt-needs li { margin: .35em 0; padding-left: 1.1em; position: relative; }
.elt-needs li::before { content: ''; position: absolute; left: .1em; top: .65em; width: .4em; height: .4em; border-radius: 50%; background: var(--c-elt); }
.elt-step-b .katex-display, .elt-ans .katex-display, .elt-req-res .katex-display { overflow-x: auto; overflow-y: hidden; padding: .1em 0; }
.elt-ans li, .elt-req-res { min-width: 0; overflow: hidden; }
.katex .fbox { border-color: var(--c-elt) !important; background: rgba(var(--c-elt-rgb), .07); border-radius: 4px; }

/* ---------------- Foto ---------------- */
.elt-dialog { width: min(920px, calc(100vw - 2em)); max-height: calc(100vh - 2em); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 30px 80px -20px rgba(15, 23, 42, .45); }
.elt-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.elt-dlg { display: flex; flex-direction: column; max-height: calc(100vh - 2em); }
.elt-dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 1em 1.3em; border-bottom: 1px solid var(--line); }
.elt-dlg-h h2 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.elt-x { font-size: 1.5rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--muted); padding: .1em .3em; }
.elt-dlg-b { padding: 1em 1.3em 1.3em; overflow: auto; display: flex; flex-direction: column; gap: .9em; font-size: .92rem; line-height: 1.55; }
.elt-drop { border: 2px dashed var(--line-strong); border-radius: 14px; padding: 1.2em; text-align: center; background: var(--paper); }
.elt-drop.over { border-color: var(--c-elt); background: rgba(var(--c-elt-rgb), .06); }
.elt-drop img { max-width: 100%; max-height: 260px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.elt-modes { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .2em; align-self: flex-start; }
.elt-mode { font: 600 .88rem var(--font-sans); color: var(--muted); background: none; border: 0; border-radius: 9px; padding: .45em .9em; cursor: pointer; }
.elt-mode.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.elt-modep p { margin: 0 0 .6em; }
.elt-ft-status.err { color: #b42318; font-weight: 600; }
.elt-ft-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1em; align-items: start; border-top: 1px solid var(--line); padding-top: 1em; }
.elt-ft-list { margin: .3em 0 .6em; padding-left: 1.2em; columns: 2; }
.elt-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(var(--c-elt-rgb), .25); border-top-color: var(--c-elt); border-radius: 50%; vertical-align: -2px; animation: elt-spin .8s linear infinite; }
@keyframes elt-spin { to { transform: rotate(360deg); } }
.elt-foto-btn { color: var(--c-elt); }

/* ---------------- Uscita ---------------- */
.elt-output { display: flex; flex-direction: column; gap: 1.4em; }
.elt-output:empty { display: none; }
.elt-alert { background: #fff6f6; border: 1px solid #f4c7c3; border-radius: 12px; padding: .8em 1em; color: #7a1d14; margin-bottom: 1em; }
.elt-alert ul { margin: .4em 0 0; padding-left: 1.2em; }
.elt-err { color: #b42318; font-weight: 600; }
.elt-ok { color: var(--green-text); font-weight: 600; }
.elt-note { font-size: .86rem; color: var(--muted); }
.elt-muted { color: var(--subtle); font-size: .82em; }
.elt-sub-lead { margin: -.2em 0 .9em; color: var(--muted); font-size: .92rem; }

.elt-tabs { display: flex; flex-wrap: wrap; gap: .35em; border-bottom: 1px solid var(--line); padding-bottom: .7em; margin-bottom: 1em; }
.elt-tab {
    font: 600 .86rem var(--font-sans); color: var(--ink-soft);
    background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
    padding: .45em .9em; cursor: pointer; display: inline-flex; align-items: center; gap: .4em;
    transition: background .15s, border-color .15s, color .15s;
}
.elt-tab:hover { border-color: rgba(var(--c-elt-rgb), .45); }
.elt-tab.na { color: var(--subtle); background: #fff; border-style: dashed; }
.elt-tab.on { background: var(--c-elt); border-color: var(--c-elt); color: #fff; border-style: solid; }
.ok-dot { font-size: .78em; color: var(--green-text); }
.bad-dot { font-size: .78em; color: #b42318; }
.elt-tab.on .ok-dot, .elt-tab.on .bad-dot { color: #fff; }
.elt-tab-h { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.elt-tab-h h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.elt-ok-badge { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--green-text); background: #ecfdf3; border: 1px solid #b7ebc8; padding: .2em .6em; border-radius: 999px; }
.elt-bad-badge { display: inline-block; font-size: .78rem; font-weight: 700; color: #b42318; background: #fff6f6; border: 1px solid #f4c7c3; padding: .2em .6em; border-radius: 999px; }
.elt-method-intro { color: var(--text); margin: .5em 0 1em; line-height: 1.6; max-width: 60em; }
.elt-na { background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 12px; padding: .9em 1.1em; }
.elt-na p { margin: .4em 0 0; color: var(--text); }
.elt-stepmode { margin: 0; }
.elt-stepnav { display: flex; gap: .6em; margin: .4em 0 0 3.2em; }

.elt-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.elt-step { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 1em; padding: 1em 0; border-top: 1px solid var(--line); }
.elt-step:first-child { border-top: 0; padding-top: .3em; }
.elt-step-n {
    width: 2.2em; height: 2.2em; border-radius: 50%;
    display: grid; place-items: center;
    font: 700 .9rem var(--font-sans); color: var(--c-elt); background: rgba(var(--c-elt-rgb), .1);
}
.elt-step-b { min-width: 0; line-height: 1.6; color: var(--text); }
.elt-step-b > h3 { margin: .25em 0 .5em; font-size: 1.02rem; color: var(--ink); }
.elt-step-b p { margin: .45em 0; }
.elt-step-b ul { margin: .45em 0; padding-left: 1.3em; }
.elt-figs { display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-start; margin: .7em 0 .3em; }
.elt-figs > svg { flex: 1 1 320px; }
.elt-mini { margin: 0; flex: 1 1 300px; max-width: 380px; }
.elt-mini figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .3em; }
.elt-fig { display: block; width: 100%; height: auto; background: #fcfdfe; border: 1px solid var(--line); border-radius: 12px; }

.tx { color: var(--ink); }
.txd { overflow-x: auto; overflow-y: hidden; padding: .35em .1em; margin: .3em 0; }
.txd .katex-display { margin: 0; text-align: left; }
.txd .katex-display > .katex { text-align: left; }
.tx-raw { font: .85em var(--font-mono); white-space: pre-wrap; color: var(--muted); }

.elt-tablewrap { overflow-x: auto; margin: .6em 0; }
.elt-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.elt-table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .5em .7em; border-bottom: 2px solid var(--line); }
.elt-table td { padding: .5em .7em; border-bottom: 1px solid var(--line); vertical-align: middle; }
.elt-table tr:last-child td { border-bottom: 0; }

.elt-sub { margin: .7em 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.elt-sub > summary { cursor: pointer; padding: .6em .9em; font-weight: 600; font-size: .9rem; color: var(--c-elt); }
.elt-sub[open] > summary { border-bottom: 1px solid var(--line); }
.elt-substeps { margin: 0; padding: .4em 1em .6em 2.4em; }
.elt-substeps > li { padding: .5em 0; border-top: 1px dashed var(--line); }
.elt-substeps > li:first-child { border-top: 0; }
.elt-substeps h4 { margin: .1em 0 .3em; font-size: .94rem; color: var(--ink); }
.elt-alt { margin: .3em 0; }
.elt-alt > summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: .9rem; }

/* ---------------- SVG: circuito ---------------- */
.elt-canvas text, .elt-fig text { font-family: var(--font-sans); }
.wire { stroke: var(--elt-wire); stroke-width: 2.2; stroke-linecap: round; fill: none; }
.wire.sel { stroke: var(--elt-hl); stroke-width: 3.4; }
.wire.hovw { stroke: rgba(var(--c-elt-rgb), .55); stroke-width: 5; }
.wire.ghost { stroke: #94a3b8; stroke-dasharray: 3 4; stroke-width: 1.6; }
.wire.cc { stroke: var(--elt-hl); stroke-width: 2.6; stroke-dasharray: 6 4; }
.short-line { stroke: var(--elt-wire); }
.short-line.new { stroke: var(--elt-hl); stroke-width: 4.2; }
.open-end { fill: #fff; stroke: var(--elt-hl); stroke-width: 2; }
.lbl.chg-t { fill: var(--elt-hl) !important; font-weight: 700; font-style: normal; }
.comp.hlx .sym .body, .comp.hlx .sym .ld, .comp.hlx .pm line { stroke: #d92d20; stroke-width: 2.8; }
.comp.hlx .sym .body { fill: #fef3f2; }
.comp.hlx .sym .body.nf { fill: none; }
.comp.hlx .sym .ah, .comp.hlx .sym .pdot { fill: #d92d20; }
.comp.hlx .lbl { fill: #d92d20; }
.elt-pair { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; width: 100%; }
.elt-pair > figure { margin: 0; flex: 1 1 280px; min-width: 0; }
.elt-pair > figure .elt-fig { margin: 0 auto; }
.elt-pair figcaption { font-size: .82rem; color: var(--muted); text-align: center; margin-top: .35em; }
.elt-pair-arr { flex: 0 0 auto; color: var(--c-elt); }
.elt-pair-arr svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .elt-pair { flex-direction: column; } .elt-pair-arr { transform: rotate(90deg); } }
.sym .ld { stroke: var(--elt-wire); stroke-width: 2.2; stroke-linecap: round; }
.sym .body { stroke: var(--elt-sym); stroke-width: 2.2; fill: #fff; stroke-linejoin: round; }
.sym .body.nf { fill: none; }
.sym .body.zf { fill: var(--elt-zfill); }
.sym .body.plate { stroke-width: 3; }
.sym .ah { fill: var(--elt-sym); }
.sym .pdot { fill: var(--elt-sym); stroke: none; }
.cdot { fill: var(--elt-sym); }
.kline { stroke: #7c3aed; stroke-width: 1.3; stroke-dasharray: 4 3; }
.karc, .kcore { stroke: #7c3aed; stroke-width: 2; fill: none; }
.kah { fill: #7c3aed; }
.kmark .lbl { fill: #6d28d9; }
.comp.sel.kmark .karc, .comp.sel.kmark .kcore { stroke: var(--elt-hl); }
.comp.hl .sym .pdot { fill: var(--elt-hl); }
.comp.hl2 .sym .pdot { fill: var(--elt-hl2); }
.sym.repl .pdot { fill: var(--elt-hl2); }
.sym .sw-dot { fill: #fff; stroke: var(--elt-sym); stroke-width: 1.8; }
.sym .body.after { stroke-dasharray: 3 3; stroke: #94a3b8; }
.pm line { stroke: var(--elt-sym); stroke-width: 1.8; stroke-linecap: round; }
.lbl { font-size: 12.5px; fill: var(--ink); }
.lbl.nm { font-weight: 700; }
.lbl.val { font-size: 11.5px; fill: #475569; }
.lbl.curv { font-size: 11.5px; font-weight: 700; fill: var(--elt-cur); }
.lbl .sub, .atxt .sub, .nsub .sub, .mesh .sub, .pl-name .sub, .ph-v .sub { font-size: .74em; }
.dot { fill: var(--elt-wire); }
.free { fill: #fff; stroke: #b42318; stroke-width: 1.5; }
.gnd line { stroke: var(--elt-wire); stroke-width: 2.2; stroke-linecap: round; }
.port circle { fill: #fff; stroke: var(--elt-wire); stroke-width: 2; }
.port text { font: 700 13px var(--font-sans); fill: var(--elt-node); }
.ghost { opacity: .32; }
.ghost .sym .body { fill: none; }
.ghost .body, .ghost .ld, .ghost line { stroke-dasharray: 3 3; }
.faint { opacity: .3; }
.faint .body { fill: none !important; stroke-dasharray: 3 3; }
.faint .ld { stroke-dasharray: 3 3; }
.faint-t { fill: #94a3b8 !important; font-style: italic; }
.pm.faint { opacity: .3; }
.faint .body { fill: none !important; stroke-dasharray: 3 3; }
.faint .ld { stroke-dasharray: 3 3; }
.sym.repl .body, .sym.repl .ld { stroke: var(--elt-hl2); }
.sym.repl .ah { fill: var(--elt-hl2); }
.comp.hl .sym .body, .comp.hl .sym .ld, .comp.hl .pm line { stroke: var(--elt-hl); }
.comp.hl .sym .body { fill: #fff3e8; }
.comp.hl .sym .body.nf { fill: none; }
.comp.hl .sym .ah { fill: var(--elt-hl); }
.comp.hl .lbl { fill: var(--elt-hl); }
.comp.hl .lbl.val { fill: #9a3412; }
.comp.hl2 .sym .body, .comp.hl2 .sym .ld, .comp.hl2 .pm line { stroke: var(--elt-hl2); }
.comp.hl2 .sym .body { fill: #eef6fd; }
.comp.hl2 .sym .body.nf { fill: none; }
.comp.hl2 .sym .ah { fill: var(--elt-hl2); }
.comp.hl2 .lbl { fill: var(--elt-hl2); }
.comp.sel .sym .body, .comp.sel .sym .ld, .comp.sel .pm line, .comp.sel.gnd line { stroke: var(--elt-hl); stroke-width: 2.8; }
.comp.sel .lbl.nm { fill: var(--elt-hl); }
.comp.hov .sym .body { stroke: var(--elt-hl); }
.gnd.sel line, .port.sel circle { stroke: var(--elt-hl); }
.arrow line { stroke: var(--elt-cur); stroke-width: 1.8; }
.arrow path { fill: var(--elt-cur); }
.atxt { font-size: 11.5px; font-weight: 600; fill: var(--elt-cur); }
.mesh .marc { fill: none; stroke: var(--elt-mesh); stroke-width: 1.8; }
.mesh .mhead { fill: var(--elt-mesh); }
.mesh text { font: 700 12px var(--font-sans); fill: var(--elt-mesh); }
.mesh text.msub { font-size: 11px; font-weight: 600; }
.nlab line { stroke: var(--elt-node); stroke-width: 1; stroke-dasharray: 2 2; }
.nlab circle { fill: #fff; stroke: var(--elt-node); stroke-width: 1.5; }
.nlab text { font: 700 10.5px var(--font-sans); fill: var(--elt-node); }
.nlab text.nsub { font-size: 11px; font-weight: 600; }
.nlab.gnd-n circle { fill: var(--elt-node); }
.nlab.gnd-n > text:not(.nsub) { fill: #fff; }
.preview { opacity: .55; pointer-events: none; }
.preview-w { stroke: var(--elt-hl); stroke-dasharray: 5 4; }
.snap { fill: none; stroke: var(--elt-hl); stroke-width: 1.5; }

/* ---------------- Fasori e grafici ---------------- */
.elt-phasor, .elt-plot { display: block; width: 100%; height: auto; background: #fcfdfe; border: 1px solid var(--line); border-radius: 12px; }
.elt-phasor { max-width: 340px; flex: 1 1 280px; }
.elt-plot { max-width: 620px; flex: 1 1 420px; }
.ph-grid { fill: none; stroke: var(--line); }
.ph-ax, .pl-ax { stroke: #94a3b8; stroke-width: 1; }
.ph-axl, .pl-tick { font: 10.5px var(--font-sans); fill: var(--muted); }
.ph-title { font: 700 12px var(--font-sans); fill: var(--ink); paint-order: stroke; stroke: #fcfdfe; stroke-width: 5px; stroke-linejoin: round; }
.ph-v line { stroke: var(--c); stroke-width: 2.2; }
.ph-v path { fill: var(--c); }
.ph-v text { font: 700 10.5px var(--font-sans); fill: var(--c); }
.elt-phfig { margin: 0; flex: 1 1 280px; max-width: 360px; }
.elt-phfig .elt-phasor { max-width: none; }
.elt-phleg { list-style: none; margin: .5em 0 0; padding: 0; font-size: .84rem; }
.elt-phleg li { display: flex; align-items: center; gap: .4em; margin-bottom: .2em; break-inside: avoid; }
.elt-phleg .sw { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.pl-grid { stroke: var(--line); stroke-dasharray: 3 3; }
.pl-asym { stroke: var(--elt-hl); stroke-dasharray: 5 4; stroke-width: 1.2; }
.pl-line { fill: none; stroke: var(--elt-hl2); stroke-width: 2.4; stroke-linejoin: round; }
.pl-jump { stroke: var(--elt-hl2); stroke-width: 1.4; stroke-dasharray: 2 3; }
.pl-pt { fill: var(--elt-hl); }
.pl-name { font: 700 12.5px var(--font-sans); fill: var(--ink); }

/* ---------------- Schermi stretti ---------------- */
@media (max-width: 1080px) {
    .elt-dati-cols { grid-template-columns: 1fr; }
    .elt-dati-preview { position: static; order: -1; }
}
@media (max-width: 980px) {
    .elt-editor { grid-template-columns: 1fr; }
    .elt-props { max-height: none; }
    .nav-links a:not([aria-current]) { display: none; }
    .elt-sol { grid-template-columns: 1fr; }
    .elt-nav { position: static; max-height: none; padding: .7em .9em; }
    .elt-nav-list { display: none; }
    .elt-nav-sel { display: flex; align-items: center; gap: .6em; font-weight: 600; font-size: .88rem; color: var(--muted); }
    .elt-nav-sel select { flex: 1; font: 600 .95rem var(--font-sans); padding: .5em .6em; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--ink); }
    .elt-ft-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .elt-stepper { width: 100%; justify-content: space-between; top: 64px; }
    .elt-stepper .s { display: none; }
    .elt-stepper button { padding: .4em .5em; }
    .elt-stepper .sep { width: 8px; }
}
@media (max-width: 640px) {
    .elt-main { padding: 1em 1em 3em; }
    .elt-card { padding: 1em; border-radius: 14px; }
    .elt-step { grid-template-columns: 1fr; gap: .3em; }
    .elt-step-n { width: 1.9em; height: 1.9em; font-size: .8rem; }
    .elt-stepnav { margin-left: 0; }
    .elt-row2 { grid-template-columns: 1fr; }
    .elt-tool { min-width: 46px; }
    .elt-viewnav .elt-btn.primary { width: 100%; }
    .elt-solmain { padding: 1em; }
}
@media print {
    .site-nav, .elt-top, #view-circuito, #view-dati, .elt-nav, .elt-stepidx, .elt-mnav, .site-footer, .bg-decor { display: none !important; }
    #view-soluzione { display: block !important; }
    .elt-sol { display: block; }
    .elt-card { box-shadow: none; border: 0; }
}