.button-config{margin:14px 16px;padding-top:14px;border-top:1px solid var(--line)}
.button-config label{display:grid;gap:5px;margin-bottom:10px;color:#475569;font-size:12px}
.button-config select{width:100%;padding:9px;border:1px solid var(--line);border-radius:10px;background:white}
.button-config h3{font-size:14px;margin:0 0 12px}.button-config p{font-size:12px;color:#475569}
.button-rule{margin:8px 20px 16px;padding:14px;border:1px solid #abdccb;border-radius:15px;background:#f0fbf7;font-size:13px}.button-rule p{margin:6px 0 0}
.virtual-button{display:flex;flex-direction:column;align-items:center;width:100%;border:1px solid #e2e8f0;border-radius:16px;background:radial-gradient(ellipse at center,#edf1f4,white 75%);color:#334155;font-weight:700;touch-action:none;user-select:none;padding:4px 10px 14px;transition:background .15s,border-color .15s}
.virtual-button:hover{transform:none;border-color:#9baab9}.tactile{display:block;width:190px;max-width:100%;height:auto;pointer-events:none}.tactile-plunger{transition:transform .1s,filter .1s}.tactile-caption{font-size:12px}
.virtual-button[aria-pressed=true]{background:#ecfaf4;border-color:#159570;box-shadow:inset 0 0 0 1px #15957030}
.virtual-button[aria-pressed=true] .tactile-plunger{transform:translateY(3px);filter:brightness(.65)}
.virtual-button[aria-pressed=true] .tactile-caption{color:#107253}.virtual-button:disabled{opacity:.72}.virtual-button:focus-visible{outline:3px solid #38b6ff;outline-offset:3px}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}.wiring{width:100%;height:auto}.pin-marker{position:absolute;transform:translate(-50%,-50%);background:#047bb4;color:#fff;border:2px solid white;border-radius:6px;padding:3px;font-size:10px;font-weight:700;z-index:4;pointer-events:none}.board{overflow:visible}
.flow .field label{display:grid;gap:5px;color:#475569;font-size:12px}.flow .field select{border:1px solid var(--line);border-radius:8px;padding:8px;background:white}
.validation{color:#ad321e;background:#fff5f1;border-radius:10px;font-size:13px}.validation:not(:empty){padding:12px;margin:10px 18px}
#buildLog{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:#101923;color:#dae4ee;border-radius:12px;padding:14px;font-size:11px}#flashProgress{width:100%;accent-color:#159570}dialog{max-width:680px}dialog .hero-actions{margin-top:16px}
.bottom-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.side{min-width:0}.workspace{grid-template-columns:210px minmax(320px,1fr) 370px}.palette .panel-head{padding-left:6px}.code{font-size:11px}.code-wrap{max-height:500px}
@media(max-width:1150px){.workspace{grid-template-columns:190px minmax(280px,1fr)}.side{grid-column:1 / -1;display:block}.board-wrap{max-width:650px;margin:auto}.simulation{border-left:0;border-top:1px solid var(--line)}.button-config{max-width:650px;margin:16px auto;padding:16px}.bottom-workspace{grid-template-columns:1fr}}
@media(max-width:760px){.workspace{display:block}.button-config{margin:14px}.hero-actions .btn{font-size:12px}.topbar .brand{gap:8px}.brand strong{font-size:16px}.zion-logo{width:100px}.code-head{padding:12px}.shell{padding:16px 10px}}
[hidden]{display:none!important}
.board .led{left:79.55%;top:76.3%;width:2.05%;height:2.6%;min-width:0;min-height:0;transform:none;border:0;border-radius:1px;pointer-events:none;background:transparent;box-shadow:none}
.board .led.on{background:#baff00;box-shadow:0 0 6px 2px #baff00aa}
.board .rgb{left:83.72%;top:54.5%;width:6.86%;height:14.8%;right:auto;border-radius:1px;pointer-events:none}
.board-led{fill:transparent;pointer-events:none}.board-led.on{fill:#baff00;filter:drop-shadow(0 0 3px #baff00)}
#simulationPanel .sim-state{display:grid;grid-template-columns:minmax(0,1fr) 65px 40px;min-height:40px;gap:5px;font-variant-numeric:tabular-nums}
#simulationPanel .sim-state strong{line-height:18px;max-height:36px;overflow:hidden}#simTime,#simStep{text-align:right;white-space:nowrap}
.wire-state{min-height:36px;line-height:18px}.event-head .delete{margin-left:auto}
.flow input[type=color]{width:64px;height:34px;padding:3px;border-radius:9px;cursor:pointer}.flow input[type=color]::-webkit-color-swatch-wrapper{padding:0}.flow input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.flow input[type=color]::-moz-color-swatch{border:0;border-radius:5px}
.svg-button{touch-action:none;user-select:none}

/* Botão: configuração enxuta, com uma única decisão elétrica por vez. */
.button-config>h3:first-child{display:none}
.button-config-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.button-config-head h3{margin:0 0 5px}.button-config-head .btn{padding:7px 11px;font-size:11px}
.connection-chip{display:inline-flex;align-items:center;gap:6px;color:#159570;font-size:11px;font-weight:700}.connection-chip i{width:7px;height:7px;border-radius:50%;background:#159570;box-shadow:0 0 0 4px #15957018}
.button-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;align-items:end}.button-config .button-options label{margin:0}.button-config .button-options select{padding:8px 10px}
.ios-switch-row{position:relative;display:flex!important;align-items:center;justify-content:space-between;min-height:42px;padding:7px 9px!important;border:1px solid var(--line);border-radius:11px;background:#fbfcfd}.ios-switch-row span:first-child{display:grid;gap:2px}.ios-switch-row strong{font-size:12px;color:#334155}.ios-switch-row small{font-size:10px;color:#94a3b8}.ios-switch{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important}.ios-switch-ui{position:relative!important;display:block!important;flex:0 0 38px;width:38px!important;height:22px!important;border-radius:999px;background:#cbd5e1;box-shadow:inset 0 1px 2px #64748b35;transition:.18s}.ios-switch-ui:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px #0f172a35;transition:.18s}.ios-switch:checked+.ios-switch-ui{background:#159570}.ios-switch:checked+.ios-switch-ui:after{transform:translateX(16px)}.ios-switch:focus-visible+.ios-switch-ui{outline:3px solid #38b6ff55;outline-offset:2px}
.button-config #buttonTargetSwitch+.ios-switch-ui{background:#8b5e3c}.button-config #buttonTargetSwitch:checked+.ios-switch-ui{background:#ef4444}.target-gnd{color:#8b5e3c!important}.target-3v3{color:#ef4444!important}
.wire-state{margin:10px 0!important;color:#159570!important;font-weight:700}.button-config .wiring{margin:2px 0 0;background:linear-gradient(180deg,#fbfdff,#f5f8fa);border:1px solid #edf1f4;border-radius:12px}.button-config #buttonExplanation{margin:8px 0 12px;font-size:11px;color:#64748b}.button-config .button-note{margin:4px 0 0;font-size:10px;color:#94a3b8}
@media(max-width:760px){.button-options{grid-template-columns:1fr}.button-config-head{align-items:flex-start}}
.tactile text{display:none}
.virtual-button{flex-direction:row;justify-content:center;gap:9px;padding:7px 10px;border-radius:11px;background:#fbfcfd}.virtual-button .tactile{width:54px;height:42px}.virtual-button .tactile-caption{font-size:11px}.virtual-button .tactile-plunger{transform-origin:center}
.side:has(#buttonConfig:not([hidden])) .board-wrap{display:none}.side:has(#buttonConfig:not([hidden])) .button-config{border-top:0;margin-top:0;padding-top:10px}
.button-config .virtual-button,.button-config #tactileHint,.button-config #buttonLevel{display:none!important}
.svg-button{cursor:pointer;transition:filter .15s,transform .08s}.svg-button:hover{filter:brightness(1.04)}.svg-button:active{transform:translateY(2px)}.svg-button:focus-visible{outline:3px solid #38b6ff;outline-offset:4px}
.button-event{margin:16px 18px 0;border:1px solid #bfe8d9;border-radius:16px;background:#f4fcf8;overflow:hidden;cursor:pointer}.button-event.active{border-color:#159570;box-shadow:0 0 0 2px #15957018}.event-head{display:flex;align-items:center;gap:10px;padding:12px 14px}.event-head h3{margin:0;font-size:13px}.event-head p{margin:3px 0 0;color:#64748b;font-size:11px}.event-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#159570;color:#fff;font-size:18px;font-weight:800}.event-state{margin-left:auto;color:#159570;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.event-body{padding:0 10px 10px;border-top:1px solid #d7f0e6}.event-body .flow-card{margin:9px 0 0;background:#fff;border-color:#dbeee6}.event-empty{margin:10px 4px;color:#6b8b7d;font-size:11px}.event-add{width:100%;margin-top:9px;border:1px dashed #9acdbb;border-radius:10px;background:transparent;color:#159570;padding:8px;font-size:11px;font-weight:700;cursor:pointer}.event-add:hover{background:#e8f7f0}.flow-target-main.selected{box-shadow:0 0 0 2px #38b6ff20}.sim-state{display:flex;align-items:center;gap:9px}.sim-state span{color:#94a3b8;font-size:11px}.simulation.simulating{border-color:#159570;box-shadow:0 0 0 2px #15957018}.btn.simulating{background:#159570!important;color:#fff!important;border-color:#159570!important;box-shadow:0 0 0 4px #15957022}.simulation.simulating .serial{border-color:#15957055}.button-config>label.ios-switch-row{margin-bottom:10px}
.event-group{margin-top:10px;padding:10px;border:1px solid #d7f0e6;border-radius:12px;background:#fff}.event-group.active{border-color:#159570;box-shadow:0 0 0 2px #15957018}.event-select{width:100%;min-height:38px;padding:7px 10px;border:0;border-radius:9px;background:#f3faf7;color:#176b50;text-align:left;font-size:12px;font-weight:750;cursor:pointer}.event-select[aria-pressed=true]{background:#e1f5eb}.event-select:focus-visible{outline:3px solid #38b6ff;outline-offset:2px}.event-group+.event-group{margin-top:8px}.event-group .flow-card{margin-top:8px}.event-group .event-add{min-height:38px}.event-group .event-empty{margin:7px 0}

/* Potenciometro: controle e leitura juntos, sem alterar a altura ao girar. */
.icon-pot{background:#168ec6;color:#fff}.icon-pot svg{display:block}
.pot-event{margin:16px 18px 0;border:1px solid #c9e4f2;border-radius:16px;background:linear-gradient(130deg,#f2faff,#fff);overflow:hidden}
.pot-event .event-icon{background:#168ec6;font-size:10px;letter-spacing:.03em}
.pot-flow-body{display:grid;gap:7px;padding:0 14px 12px;color:#506c7d;font-size:11px;line-height:1.6}
.pot-flow-body button{justify-self:start;min-height:36px;border:0;border-radius:8px;background:#e3f2fa;padding:6px 10px;color:#126586;font-size:11px;font-weight:700}
.component-tabs{display:flex;gap:4px;padding:4px;background:#f0f4f7;border:1px solid #e4ebf0;border-radius:12px;margin-bottom:14px}
.component-tabs button{flex:1;min-height:38px;border:0;border-radius:8px;background:transparent;color:#526575;font-size:12px;font-weight:650}
.component-tabs button[aria-pressed=true]{background:white;color:#11658c;box-shadow:0 2px 6px #17344a0c}
.pot-focused{display:flex;flex-direction:column}
.pot-focused>:not(#componentTabs):not(#potHeading):not(#potHint):not(#potStatus):not(#potDetails):not(#wiring){display:none!important}
.pot-focused #componentTabs{order:0}.pot-heading{order:1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pot-heading h3{margin:0 0 3px}.button-config .pot-heading p{margin:0;font-size:11px;color:#5e7383}
.pot-chip{border:1px solid #d6e8f1;background:#f2faff;border-radius:999px;padding:5px 9px;color:#21617e;font-size:10px;font-weight:700;white-space:nowrap}
.button-config .pot-hint{order:2;font-size:11px;line-height:1.6;color:#536c7c;margin:9px 0}
.pot-focused #wiring{order:3;overflow:visible;background:linear-gradient(145deg,#fcfdff,#f1f6f9);border-radius:15px}
.button-config .pot-status{order:4;min-height:32px;box-sizing:border-box;margin:8px 0 0;padding:7px 9px;border-radius:9px;background:#eef6fb;color:#276782;font-size:10px;line-height:18px}
.button-config .pot-status.saturated{background:#fff3df;color:#855a10}
.pot-details{order:5;margin-top:9px;color:#526775;font-size:11px;line-height:1.65}
.pot-details summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:7px}.pot-details summary:before{content:'+';font-size:16px}.pot-details[open] summary:before{content:'−'}
.button-config .pot-details p{font-size:11px;line-height:1.7;margin:5px 0 9px}.pot-details a{color:#11658c}
.pot-dial{cursor:grab;touch-action:none;user-select:none;outline:none}.pot-dial:active{cursor:grabbing}
.pot-dial:focus-visible>circle:first-child{stroke:#1286bd;stroke-width:2;stroke-dasharray:3 3}
.pot-dial:hover>circle:nth-child(4){stroke:#8fbdcf}
@media(min-width:1151px){.workspace{grid-template-columns:200px minmax(320px,1fr) 410px}}
@media(prefers-reduced-motion:reduce){.pot-dial{transition:none}}