/* circuiti-lab.css - stile del Laboratorio di circuiti. Tema scuro di sistema, tema chiaro con data-tema="chiaro". UTF-8. */
.cl {
  --cl-fg: #e8edf4; --cl-mut: #9fb0c4; --cl-line: rgba(255,255,255,.14); --cl-hover: rgba(255,255,255,.07); --cl-field: rgba(255,255,255,.08);
  --cl-panel: rgba(255,255,255,.035); --cl-board: #0e131a; --cl-acc: #4f8dfd; --cl-accfg: #fff; --cl-red: #f87171; --cl-green: #4ade80; --cl-amber: #fbbf24;
  --cl-dot: rgba(255,255,255,.16); --cl-dot2: rgba(255,255,255,.3); --cl-wire: #7dd3a8; --cl-pin: #f5c542; --cl-menu: #1b222d;
  --cl-plot: #0c1117; --cl-pgrid: rgba(255,255,255,.08); --cl-pgrid2: rgba(255,255,255,.2); --cl-ptxt: #9fb0c4; --cl-ptxt2: #e8edf4; --cl-tipbg: rgba(20,26,34,.96);
  --ink: #e8edf4; --acc: #6aa8ff; --frc: #ff9a62; --ld: #4ade80; --mut: #9fb0c4;
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; color: var(--cl-fg); font-size: .92rem; text-align: left;
}
.cl[data-tema="chiaro"] {
  --cl-fg: #1f2937; --cl-mut: #64748b; --cl-line: #d3dbe6; --cl-hover: rgba(15,23,42,.05); --cl-field: #ffffff; --cl-panel: #f6f8fb; --cl-board: #fbfcfe;
  --cl-acc: #2563eb; --cl-red: #dc2626; --cl-green: #15803d; --cl-amber: #b45309; --cl-dot: rgba(15,23,42,.17); --cl-dot2: rgba(15,23,42,.32); --cl-wire: #0f7a55; --cl-pin: #c2410c; --cl-menu: #ffffff;
  --cl-plot: #ffffff; --cl-pgrid: rgba(15,23,42,.08); --cl-pgrid2: rgba(15,23,42,.22); --cl-ptxt: #5b6773; --cl-ptxt2: #1f2937; --cl-tipbg: rgba(255,255,255,.97);
  --ink: #1f2933; --acc: #2563eb; --frc: #d9480f; --ld: #0b7a5a; --mut: #5b6773;
}
.cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
.cl svg { flex: none; }
.cl button { font: inherit; color: inherit; }
.cl [hidden] { display: none !important; }

/* barra strumenti */
.clBar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-panel); }
.clBtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; min-width: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.clBtn svg, .clBtn2 svg, .clRun svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.clBtn.wl { padding: 0 12px; font-weight: 600; }
.clBtn:hover:not(:disabled) { background: var(--cl-hover); }
.clBtn:disabled { opacity: .35; cursor: default; }
.clBtn[aria-pressed="true"] { background: color-mix(in srgb, var(--cl-acc) 20%, transparent); border-color: var(--cl-acc); color: var(--cl-acc); }
.clBtn.danger:hover { color: var(--cl-red); }
.clBtn:focus-visible, .clBtn2:focus-visible, .clRun:focus-visible, .clItem:focus-visible, .clCatH:focus-visible, .clTabs button:focus-visible, .clSvg:focus-visible { outline: 2px solid var(--cl-acc); outline-offset: 2px; }
.clSep { width: 1px; height: 24px; margin: 0 5px; background: var(--cl-line); }
.clMenu { position: absolute; z-index: 60; min-width: 240px; max-width: 320px; padding: 6px; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-menu); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.clMenuI { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.clMenuI:hover, .clMenuI:focus-visible { background: var(--cl-hover); outline: none; }
.clMenuI small { color: var(--cl-mut); font-size: .8rem; line-height: 1.3; }
.clMenuSep { height: 1px; margin: 5px 0; background: var(--cl-line); }

/* area principale */
.cl { width: 100%; max-width: none; }
.clMain { display: grid; grid-template-columns: 208px minmax(0, 1fr) 260px; gap: 10px; height: clamp(520px, 78vh, 980px); min-height: 0; }
.clPal, .clProp { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-panel); overflow: hidden; }
.clPalHead { padding: 8px; border-bottom: 1px solid var(--cl-line); }
.clSearch { position: relative; display: block; }
.clSearch svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--cl-mut); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.clSearch input { width: 100%; height: 36px; padding: 0 10px 0 33px; border: 1px solid var(--cl-line); border-radius: 999px; background: var(--cl-field); color: inherit; font: inherit; outline: none; }
.clSearch input:focus, .cl input:focus, .cl select:focus { border-color: var(--cl-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-acc) 25%, transparent); }
.clPalList { flex: 1; overflow: auto; padding: 4px 6px 10px; }
.clCatH { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 4px; border: 0; background: transparent; color: var(--cl-mut); font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; text-align: left; }
.clCatH svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .15s; transform: rotate(-90deg); }
.clCat.open .clCatH svg { transform: none; }
.clCatH span { flex: 1; } .clCatH em { font-style: normal; padding: 0 7px; border-radius: 999px; background: var(--cl-hover); font-size: .72rem; }
.clCatL { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding-bottom: 6px; }
.clCat.open .clCatL { display: grid; }
.clItem { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; border: 1px solid var(--cl-line); border-radius: 9px; background: var(--cl-field); cursor: grab; text-align: center; transition: border-color .12s, background .12s; }
.clItem:hover { border-color: var(--cl-acc); background: color-mix(in srgb, var(--cl-acc) 10%, var(--cl-field)); }
.clMini { display: block; width: 100%; height: 40px; color: var(--ink); }
.clMini svg { width: 100%; height: 100%; }
.clMini.big { width: 52px; height: 40px; flex: none; }
.clItemN { font-size: .7rem; line-height: 1.15; color: var(--cl-mut); overflow-wrap: anywhere; }
.clNone { margin: 14px 8px; color: var(--cl-mut); text-align: center; }

/* lavagna */
.clBoard { position: relative; min-width: 0; border: 1px solid var(--cl-line); border-radius: 12px; overflow: hidden; background: var(--cl-board); touch-action: none; }
.clSvg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; cursor: default; outline: none; }
.clWorld, .clWorld * { pointer-events: none; }
.clDot { fill: var(--cl-dot); } .clDot2 { fill: var(--cl-dot2); }
.clWire { fill: none; stroke: var(--cl-wire); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.clWire.sel { stroke: var(--cl-acc); stroke-width: 3.2; }
.clWire.clPrev { stroke: var(--cl-acc); stroke-dasharray: 5 4; }
.clWireHit { fill: none; stroke: transparent; stroke-width: 12; }
.clJ { fill: var(--cl-wire); }
.clComp.sel { filter: drop-shadow(0 0 3px var(--cl-acc)); }
.clComp.warn { filter: drop-shadow(0 0 4px var(--cl-red)); }
.clSelBox { fill: color-mix(in srgb, var(--cl-acc) 10%, transparent); stroke: var(--cl-acc); stroke-width: 1.2; stroke-dasharray: 4 3; }
.clName { fill: var(--cl-fg); font: 600 12px system-ui, sans-serif; }
.clVal { fill: var(--cl-mut); font: 11px system-ui, sans-serif; }
.clRdBg { fill: #0b0f14; stroke: var(--cl-line); } .cl[data-tema="chiaro"] .clRdBg { fill: #14202b; }
.clRd { fill: #6ee7a0; font: 700 14px ui-monospace, Menlo, Consolas, monospace; }
.clVBg { fill: var(--cl-menu); stroke: var(--cl-line); opacity: .94; } .clV { fill: var(--cl-amber); font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; }
.clIv { fill: var(--cl-acc); font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; text-anchor: middle; }
.clWarnT { fill: var(--cl-red); font: 700 15px system-ui, sans-serif; }
.clPin { fill: var(--cl-pin); opacity: .55; }
.clPinHov { fill: color-mix(in srgb, var(--cl-pin) 30%, transparent); stroke: var(--cl-pin); stroke-width: 1.5; }
.clVtx { fill: var(--cl-board); stroke: var(--cl-acc); stroke-width: 1.6; }
.clBand { fill: color-mix(in srgb, var(--cl-acc) 12%, transparent); stroke: var(--cl-acc); stroke-dasharray: 4 3; }
.clGlowC { mix-blend-mode: screen; filter: blur(7px); } .cl[data-tema="chiaro"] .clGlowC { mix-blend-mode: multiply; }
.clHint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--cl-mut); pointer-events: none; }
.clHint b { font-size: 1.1rem; color: var(--cl-fg); }
.clHint2 { position: absolute; left: 10px; top: 10px; z-index: 5; padding: 6px 12px; border-radius: 999px; background: var(--cl-menu); border: 1px solid var(--cl-line); font-size: .82rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
.clMsg { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--cl-red) 18%, var(--cl-menu)); border: 1px solid var(--cl-red); font-size: .86rem; display: none; }
.clTip { position: absolute; z-index: 6; display: none; padding: 3px 8px; border-radius: 6px; background: var(--cl-menu); border: 1px solid var(--cl-line); color: var(--cl-amber); font: 12px ui-monospace, Menlo, Consolas, monospace; pointer-events: none; }
.cl.placing .clSvg { cursor: copy; } .cl.wiring .clSvg { cursor: crosshair; }

/* pannello proprieta' */
.clProp { padding: 12px; overflow: auto; gap: 10px; }
.clPH { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--cl-line); }
.clPH b { display: block; line-height: 1.2; } .clPH small { color: var(--cl-mut); }
.clFld { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); align-items: center; gap: 8px; }
.clFld label { color: var(--cl-mut); font-size: .84rem; }
.cl input[type=text], .cl input[type=search], .cl select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--cl-line); border-radius: 8px; background: var(--cl-field); color: inherit; font: inherit; outline: none; }
.cl .clSearch input[type=search] { padding: 0 10px 0 33px; border-radius: 999px; }
.cl select { padding-right: 4px; } .cl option { color: #111; background: #fff; }
.cl input.bad { border-color: var(--cl-red); }
.clIn { position: relative; display: block; } .clIn input { padding-right: 34px !important; text-align: right; font-variant-numeric: tabular-nums; }
.clIn i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--cl-mut); font-style: normal; font-size: .82rem; pointer-events: none; }
.cl input[type=range] { width: 100%; accent-color: var(--cl-acc); } .clFld output { grid-column: 2; text-align: right; color: var(--cl-mut); font-size: .8rem; margin-top: -6px; }
.cl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cl-acc); }
.clPBtns { display: flex; flex-wrap: wrap; gap: 6px; }
.clBtn2 { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--cl-line); border-radius: 9px; background: var(--cl-field); cursor: pointer; font-size: .86rem; }
.clBtn2:hover { border-color: var(--cl-acc); } .clBtn2.danger:hover { border-color: var(--cl-red); color: var(--cl-red); } .clBtn2.primary { background: var(--cl-acc); border-color: var(--cl-acc); color: #fff; font-weight: 600; }
.clRead { padding: 8px 10px; border: 1px solid var(--cl-line); border-radius: 10px; background: var(--cl-field); }
.clRead h4, .clTips h4, .clWarns h4 { margin: 0 0 6px; color: var(--cl-mut); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.clRead div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; } .clRead b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; color: var(--cl-green); }
.clNote { margin: 0; color: var(--cl-mut); font-size: .8rem; line-height: 1.4; } .clNote.warn { color: var(--cl-red); }
.clWarns ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .clWarns li { display: flex; gap: 7px; align-items: flex-start; font-size: .84rem; line-height: 1.35; }
.clWarns li svg, .clOpWarn li svg { width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--cl-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clTips ul { margin: 0; padding-left: 18px; color: var(--cl-mut); font-size: .82rem; line-height: 1.5; }

/* analisi */
.clAna { border: 1px solid var(--cl-line); border-radius: 12px; background: var(--cl-panel); overflow: hidden; }
.clTabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--cl-line); overflow-x: auto; }
.clTabs button { padding: 9px 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--cl-mut); font-weight: 600; cursor: pointer; white-space: nowrap; }
.clTabs button[aria-selected="true"] { color: var(--cl-fg); border-bottom-color: var(--cl-acc); }
.clTab { padding: 12px; }
.clCtl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 10px; }
.clCtl label { display: grid; gap: 4px; font-size: .8rem; color: var(--cl-mut); } .clCtl label.chk { display: flex; align-items: center; gap: 7px; align-self: center; padding-top: 16px; }
.clCtl .clIn input, .clCtl select { width: 130px; }
.clRun { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--cl-acc); color: #fff; font-weight: 700; cursor: pointer; } .clRun:hover { filter: brightness(1.1); }
.clStatus { align-self: center; color: var(--cl-mut); font-size: .84rem; } .clStatus.warn { color: var(--cl-red); }
.clChans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.clChip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--ch); border-radius: 999px; font-size: .82rem; } .clChip i { width: 9px; height: 9px; border-radius: 50%; background: var(--ch); }
.clChip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .clChip button:hover { background: var(--cl-hover); } .clChip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.clAddCh { width: auto !important; height: 28px !important; border-radius: 999px !important; }
.clPlot { display: block; width: 100%; border: 1px solid var(--cl-line); border-radius: 10px; margin-bottom: 8px; cursor: crosshair; touch-action: pan-y; }
.tPlot { height: 360px; } .aMag { height: 230px; } .aPh { height: 190px; }
.clTblW { overflow-x: auto; } .clTbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.clTbl th, .clTbl td { padding: 6px 10px; border-bottom: 1px solid var(--cl-line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clTbl th:first-child, .clTbl td:first-child, .clTbl td:nth-child(2) { text-align: left; } .clTbl thead th { color: var(--cl-mut); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.clTbl tbody tr[data-c] { cursor: pointer; } .clTbl tbody tr:hover { background: var(--cl-hover); } .clTbl tr.warn td, .clTbl tr.warn th { color: var(--cl-red); }
.clTbl th i { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; }
.clOpWarn ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; } .clOpWarn li { display: flex; gap: 7px; } .clOpWarn h4 { margin: 0 0 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-mut); }
.clStats p { margin: 4px 0; }

/* finestre */
.clModal { position: absolute; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 70px 14px 14px; background: rgba(5,8,14,.55); }
.clModalBox { width: min(480px, 100%); max-height: 80vh; overflow: auto; border: 1px solid var(--cl-line); border-radius: 14px; background: var(--cl-menu); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.clModalH { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--cl-line); } .clModalB { padding: 14px 16px; } .clModalB label { display: grid; gap: 6px; color: var(--cl-mut); }
.clModalF { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; }
.clList { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .clList li { display: flex; gap: 6px; }
.clOpenI { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--cl-line); border-radius: 9px; background: var(--cl-field); cursor: pointer; text-align: left; } .clOpenI:hover { border-color: var(--cl-acc); } .clOpenI small { color: var(--cl-mut); }
.clFlash { position: fixed; left: 50%; bottom: 24px; z-index: 99999; max-width: min(520px, 92vw); padding: 10px 18px; border-radius: 999px; background: #111827; color: #fff; font-size: .9rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.clFlash.on { opacity: 1; transform: translate(-50%, 0); }

/* schermi piccoli */
@media (max-width: 1100px) { .clMain { grid-template-columns: 200px minmax(0, 1fr); height: auto; } .clBoard { height: clamp(420px, 64vh, 700px); } .clPal { height: clamp(420px, 64vh, 700px); } .clProp { grid-column: 1 / -1; max-height: none; } }
@media (max-width: 720px) {
  .clMain { grid-template-columns: minmax(0, 1fr); } .clPal { height: 220px; } .clPalList { } .clCatL { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clBoard { height: 62vh; min-height: 360px; } .clBtn.wl span { display: none; } .clBtn.wl { padding: 0 8px; }
  .tPlot { height: 300px; } .clCtl .clIn input, .clCtl select { width: 112px; }
}
@media (prefers-reduced-motion: reduce) { .cl * { transition: none !important; } }

/* ===== Play / Stop ===== */
.clBtn.clPlay { background: #16a34a; color: #fff; border-color: #15803d; padding: 0 16px; font-weight: 700; }
.clBtn.clPlay:hover:not(:disabled) { background: #15803d; }
.clBtn.clPlay.on, .clBtn.clPlay[aria-pressed="true"] { background: #dc2626; border-color: #b91c1c; color: #fff; }
.clBtn.clPlay.on:hover { background: #b91c1c; }
.clSpeed { height: 36px; padding: 0 8px; border: 1px solid var(--cl-line); border-radius: 9px; background: var(--cl-field); color: inherit; font: inherit; font-size: .84rem; max-width: 170px; }
.clBadge { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--cl-menu); border: 1px solid var(--cl-line); font-size: .82rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none; }
.clBadge[hidden], .clMM[hidden] { display: none; }
.clRec { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: clBlink 1s infinite; }
@keyframes clBlink { 50% { opacity: .25; } }
/* ===== Multimetro ===== */
.clLeads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.clLeadO { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 6.5; stroke-linecap: round; }
.clLead { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.clProbe { pointer-events: auto; cursor: grab; }
.clProbe:active { cursor: grabbing; }
.clProbe:not(.on) { opacity: .75; }
.clSnap { fill: none; stroke-width: 2.4; pointer-events: none; }
.clMM { position: absolute; z-index: 7; width: 232px; border-radius: 14px; background: var(--cl-menu); border: 1px solid var(--cl-line); box-shadow: 0 14px 36px rgba(0,0,0,.45); user-select: none; overflow: hidden; }
.clMMh { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; cursor: move; background: var(--cl-hover); border-bottom: 1px solid var(--cl-line); touch-action: none; }
.clMMx { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.clMMx:hover { background: var(--cl-hover); }
.clMMx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.clMMlcd { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin: 10px 10px 6px; padding: 10px 12px; border-radius: 9px; background: #c9dcae; color: #1d2a12; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
.clMMv { font-size: 1.9rem; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.clMMu { font-size: 1.05rem; font-weight: 700; min-width: 1.6em; }
.clMMmodes { display: flex; gap: 6px; margin: 0 10px 6px; }
.clMMmodes button { flex: 1; height: 30px; border: 1px solid var(--cl-line); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.clMMmodes button[aria-pressed="true"] { background: color-mix(in srgb, var(--cl-acc) 22%, transparent); border-color: var(--cl-acc); color: var(--cl-acc); }
.clMMst { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 12px; font-size: .76rem; color: var(--cl-mut); }
.clMMst b { color: var(--cl-fg); font-weight: 600; }
.clMMhint { margin: 4px 12px 0; font-size: .76rem; color: var(--cl-mut); min-height: 1em; }
.clMMjacks { display: flex; justify-content: space-around; margin: 8px 0 0; padding: 8px 6px 10px; border-top: 1px solid var(--cl-line); background: var(--cl-hover); }
.clMMj { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .68rem; color: var(--cl-mut); }
.clMMj em { font-style: normal; }
.clMMj i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #2b2f36; background: #0b0d10; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.clMMj.r i { border-color: #e5484d; }
@media (max-width: 720px) { .clMM { width: 200px; } }

/* ---- Estetica compatta (20/10/2026): barra di sole icone, libreria a elenco, multimetro piccolo ---- */
.clBtn { width: 34px; min-width: 34px; height: 34px; padding: 0; }
.clBtn.clPlay { width: 42px; padding: 0; }
.clSpeed { height: 34px; width: 74px; max-width: 74px; padding: 0 4px; font-size: .8rem; text-align: center; }
.clMain { grid-template-columns: 200px minmax(0, 1fr) 260px; }
.clCatL { grid-template-columns: 1fr; gap: 2px; padding-bottom: 4px; }
.clCatH { padding: 6px 4px; font-size: .68rem; }
.clItem { flex-direction: row; gap: 8px; padding: 2px 8px 2px 4px; border-radius: 7px; text-align: left; }
.clItem .clMini { width: 44px; height: 28px; flex: none; }
.clItemN { font-size: .74rem; line-height: 1.15; color: var(--cl-fg); overflow-wrap: normal; }
.clMM { width: 150px; border-radius: 12px; }
.clMMh { padding: 4px 4px 4px 10px; font-size: .8rem; }
.clMMlcd { margin: 6px 8px 4px; padding: 6px 8px; gap: 4px; }
.clMMv { font-size: 1.3rem; } .clMMu { font-size: .8rem; min-width: 1.2em; }
.clMMmodes { gap: 4px; margin: 0 8px 4px; }
.clMMmodes button { height: 24px; padding: 0; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clMMst, .clMMhint { display: none; }
.clMMjacks { margin: 2px 0 0; padding: 4px 6px 6px; }
.clMMj { font-size: .6rem; } .clMMj i { width: 14px; height: 14px; border-width: 2px; }
@media (max-width: 1100px) { .clMain { grid-template-columns: 190px minmax(0, 1fr); } }
@media (max-width: 720px) { .clMain { grid-template-columns: minmax(0, 1fr); } .clMM { width: 140px; } .clCatL { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clPal { height: 240px; } .clItem { padding: 2px 4px 2px 2px; gap: 4px; } .clItem .clMini { width: 36px; } .clItemN { font-size: .68rem; } }

/* ---- 20/10/2026 (2): barra senza riquadro, libreria e suggerimenti comprimibili, oscilloscopio portatile ---- */
.clBar { border: 0; border-radius: 0; background: none; padding: 0 0 6px; }
.cl.palOff .clMain { grid-template-columns: minmax(0, 1fr) 260px; }
.cl.palOff .clPal { display: none; }
@media (max-width: 1100px) { .cl.palOff .clMain { grid-template-columns: minmax(0, 1fr); } }
.clTips { margin-top: 10px; border-top: 1px solid var(--cl-line); }
.clTipsH { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 0 6px; border: 0; background: none; color: var(--cl-mut); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: left; }
.clTipsH:hover { color: var(--cl-fg); }
.clTipsH span { flex: 1; }
.clTipsH svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clTipsH svg:last-child { transition: transform .15s; transform: rotate(-90deg); }
.clTips.open .clTipsH svg:last-child { transform: none; }
.clTips ul { display: none; }
.clTips.open ul { display: block; }
.clTipsH:focus-visible { outline: 2px solid var(--cl-acc); outline-offset: 2px; }
.clMM.off .clMMlcd { opacity: .55; }
.clOS { position: absolute; z-index: 7; width: 320px; border-radius: 12px; background: var(--cl-menu); border: 1px solid var(--cl-line); box-shadow: 0 14px 36px rgba(0,0,0,.45); user-select: none; overflow: hidden; }
.clOS[hidden] { display: none; }
.clOSh { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; font-size: .8rem; cursor: move; background: var(--cl-hover); border-bottom: 1px solid var(--cl-line); touch-action: none; }
.clOSplot { display: block; width: 100%; height: 150px; touch-action: none; }
.clOSjacks { display: flex; align-items: center; gap: 16px; padding: 5px 10px 7px; border-top: 1px solid var(--cl-line); background: var(--cl-hover); }
.clOSj { display: flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; color: var(--cl-mut); }
.clOSj i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #f5c518; background: #0b0d10; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.clOSj.c2 i { border-color: #22d3ee; }
.clOSnote { margin-left: auto; font-size: .62rem; color: var(--cl-mut); }
.clOS.off .clOSplot { opacity: .8; }
@media (max-width: 720px) { .clOS { width: 260px; } .clOSplot { height: 120px; } }

/* ---- fase 1: strumenti, verifiche, guasti, manopola ---- */
.clOSctl { display: flex; gap: 4px; padding: 5px 8px 0; border-top: 1px solid var(--cl-line); }
.clOSctl select { flex: 1; min-width: 0; height: 24px; padding: 0 2px; border: 1px solid var(--cl-line); border-radius: 6px; background: var(--cl-field); color: inherit; font: inherit; font-size: .72rem; }
.clOSctl button { min-width: 30px; height: 24px; padding: 0 6px; border: 1px solid var(--cl-line); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; }
.clOSctl button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clOSctl button[aria-pressed="true"] { background: color-mix(in srgb, var(--cl-acc) 22%, transparent); border-color: var(--cl-acc); color: var(--cl-acc); }
.clOSmeas { padding: 4px 10px 0; font-size: .68rem; line-height: 1.5; color: var(--cl-mut); font-variant-numeric: tabular-nums; min-height: 4px; }
.clOSmeas b { font-weight: 800; }
.clOSjacks { margin-top: 5px; }
.clFG { position: absolute; z-index: 7; width: 230px; border-radius: 12px; background: var(--cl-menu); border: 1px solid var(--cl-line); box-shadow: 0 14px 36px rgba(0,0,0,.45); overflow: hidden; }
.clFG[hidden] { display: none; }
.clFGh { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; font-size: .8rem; cursor: move; background: var(--cl-hover); border-bottom: 1px solid var(--cl-line); touch-action: none; user-select: none; }
.clFGb { padding: 8px 10px 10px; max-height: 320px; overflow: auto; }
.clFGb .clFld { margin-bottom: 6px; }
.clFGb .clNote { margin: 0; }
.clKnob { cursor: ew-resize; }
.clKnobB { fill: var(--cl-field); stroke: var(--cl-acc); stroke-width: 1.6; }
.clKnobI { stroke: var(--cl-acc); stroke-width: 2.2; stroke-linecap: round; }
.clCkList { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 4px; }
.clCk { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--cl-line); border-radius: 10px; background: var(--cl-field); }
.clCk.ok { border-color: #16a34a; } .clCk.ko { border-color: var(--cl-red); }
.clCkSt { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; flex: none; background: var(--cl-hover); }
.clCk.ok .clCkSt { background: #16a34a; color: #fff; } .clCk.ko .clCkSt { background: var(--cl-red); color: #fff; }
.clCkT { flex: 1; min-width: 0; display: flex; flex-direction: column; } .clCkT small { color: var(--cl-mut); }
.clCkV { font-variant-numeric: tabular-nums; font-weight: 700; }
.clCk .clBtn2 { height: 28px; padding: 0 6px; }
.clCkForm { padding: 6px 12px 14px; }
.clCkF { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.clCkF select, .clCkF input { height: 34px; padding: 0 8px; border: 1px solid var(--cl-line); border-radius: 8px; background: var(--cl-field); color: inherit; font: inherit; font-size: .86rem; }
.clCkF input[type=text] { width: 96px; } .clCkF .ckL { flex: 1; min-width: 160px; width: auto; }
.clCkF label { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--cl-mut); }
.clCkF select { width: auto; min-width: 150px; max-width: 100%; flex: 0 1 220px; }

.clRelayOn { fill: #16a34a; font: 700 11px system-ui, sans-serif; }
.clWaves { fill: none; stroke: var(--cl-amber, #d97706); stroke-width: 2.2; stroke-linecap: round; }

.clEX { position: absolute; z-index: 6; left: 12px; top: 12px; width: 270px; border-radius: 12px; background: var(--cl-menu); border: 1px solid var(--cl-line); box-shadow: 0 10px 28px rgba(0,0,0,.35); overflow: hidden; }
.clEX[hidden] { display: none; }
.clEXh { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; font-size: .8rem; background: var(--cl-hover); border-bottom: 1px solid var(--cl-line); }
.clEXb { padding: 8px 10px 10px; font-size: .8rem; line-height: 1.4; }
.clEXg { margin: 0 0 6px; font-weight: 600; } .clEXg.ok { color: #16a34a; } .clEXd { margin: 0 0 6px; color: #16a34a; }
.clEXf { margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: var(--cl-hover); } .clEXf small { color: var(--cl-mut); display: block; } .clEXf div { font-family: ui-monospace, Menlo, monospace; margin: 3px 0; }
.clEXa { display: flex; gap: 6px; margin-top: 6px; } .clEXa button { font: inherit; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--cl-line); background: transparent; color: inherit; cursor: pointer; }

.clWhy { display: block; margin-top: 2px; color: var(--cl-mut); font-size: .74rem; line-height: 1.35; }
.clWarns li.warn, .clOpWarn li.warn { flex-wrap: wrap; } .clWhy { flex: 0 0 100%; padding-left: 24px; box-sizing: border-box; }
.clWB { flex: 1; min-width: 0; } .clWhy { padding-left: 0; }

.clAnn { fill: var(--cl-amber); font: 700 14px system-ui, sans-serif; cursor: move; paint-order: stroke; stroke: var(--cl-board); stroke-width: 3px; pointer-events: none; }
.clRO .clPal, .clRO .clProp { pointer-events: none; opacity: .55; }
.clROb { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--cl-menu); border: 1px solid var(--cl-line); box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: .8rem; }
.clROb button { font: inherit; padding: 3px 10px; border-radius: 999px; border: 0; background: var(--cl-acc, #2563eb); color: #fff; cursor: pointer; }
.clTh { display: block; width: 100%; height: 64px; margin-bottom: 4px; background: #fff; border-radius: 6px; overflow: hidden; } .clTh svg { width: 100%; height: 100%; }
.clTut { position: absolute; z-index: 30; width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--cl-menu); color: inherit; border: 1px solid var(--cl-acc, #2563eb); box-shadow: 0 14px 36px rgba(0,0,0,.45); font-size: .85rem; line-height: 1.45; }
.clTut b { color: var(--cl-acc, #2563eb); } .clTut div { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.clTut button { font: inherit; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--cl-line); background: transparent; color: inherit; cursor: pointer; } .clTut button.pri { background: var(--cl-acc, #2563eb); border-color: transparent; color: #fff; }
.clTutHl { outline: 2px solid var(--cl-acc, #2563eb); outline-offset: 2px; border-radius: 10px; }

.clTxtIc { font: 700 15px/1 ui-monospace, Menlo, Consolas, monospace; display: inline-block; min-width: 18px; text-align: center; }
.clLead { stroke: var(--cl-mut); stroke-width: 1; stroke-dasharray: 2 2; } .clLeadDot { fill: var(--cl-amber); stroke: var(--cl-board); stroke-width: 1; }
.clBlades path { fill: var(--cl-acc); fill-opacity: .75; stroke: none; } .clRotor { fill: none; stroke: var(--cl-acc); stroke-width: 3; stroke-opacity: .8; }

/* ---- menu componenti, versione A: schede di categoria ---- */
.clPalHead { padding: 10px 10px 8px; border-bottom: 0; }
.clPalTabs { display: flex; gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--cl-line); }
.clPT2 { flex: 1 1 0; min-width: 0; height: 34px; padding: 0; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--cl-mut); display: grid; place-items: center; cursor: pointer; }
.clPT2 svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clPT2:hover { background: var(--cl-hover); }
.clPT2.on { background: color-mix(in srgb, var(--cl-acc) 14%, transparent); color: var(--cl-acc); border-color: color-mix(in srgb, var(--cl-acc) 45%, transparent); }
.clPT2:focus-visible { outline: 2px solid var(--cl-acc); outline-offset: 1px; }
.clPalList { padding: 6px 8px 12px; }
.clPT { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 6px 4px 8px; } .clPT b { font-size: .92rem; line-height: 1.25; } .clPT small { color: var(--cl-mut); }
.clCatL { display: grid; grid-template-columns: 1fr; gap: 4px; padding-bottom: 6px; }
.clItem { flex-direction: row; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 10px; background: transparent; border-color: transparent; text-align: left; }
.clItem:hover { background: var(--cl-hover); border-color: var(--cl-line); }
.clItem .clMini { width: 52px; height: 34px; flex: none; background: var(--cl-field); border: 1px solid var(--cl-line); border-radius: 8px; padding: 2px; box-sizing: border-box; }
.clItemN { font-size: .8rem; line-height: 1.2; color: var(--cl-fg); overflow-wrap: normal; }
@media (max-width: 720px) { .clCatL { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clAlarm path:first-child { fill: #dc2626; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; } .clAlarmI { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.clAlarm.pin path:first-child { fill: #d97706; }
.clAlarm { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); animation: clBlink 1.1s steps(2, jump-none) infinite; }
.clKeyB rect { fill: var(--cl-acc); } .clKeyB text { fill: #fff; font: 700 10px ui-monospace, Menlo, Consolas, monospace; }
.clTimerT { fill: var(--cl-acc); font: 700 11px ui-monospace, Menlo, Consolas, monospace; }
.clSmoke { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

.clMenuI { flex-direction: row; gap: 10px; } .clMenuI > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .clMenuDot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; }
.clMenuW { max-width: 1020px; width: auto; max-height: 75vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 14px; padding: 14px 16px 16px; border-radius: 16px; background: #0a0b0e; border-color: rgba(255,255,255,.1); color: #eceff4; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.cl[data-tema="chiaro"] .clMenuW { background: #fff; color: #1f2937; border-color: var(--cl-line); box-shadow: 0 20px 60px rgba(15,23,42,.25); }
.clMenuG h4 { margin: 2px 8px 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cl-mut); font-weight: 700; }
.clMenuW .clMenuI { color: inherit; } .clMenuW .clMenuI:hover, .clMenuW .clMenuI:focus-visible { background: rgba(255,255,255,.07); } .cl[data-tema="chiaro"] .clMenuW .clMenuI:hover { background: rgba(15,23,42,.06); }