:root {
  --bg: #15171c;
  --panel: #1f232b;
  --panel-2: #2a2f3a;
  --line: #343a47;
  --fg: #e3e8f0;
  --muted: #8a93a3;
  --accent: #6b8cff;
  --accent-2: #8fa8ff;
  --ok: #4fd18b;
  --warn: #ffc857;
  --bad: #ff6b6b;
  --bench: #3a4152;
  --radius: 10px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
button {
  font: inherit; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.active { background: var(--accent); border-color: var(--accent); color: #0d1020; }
button.wide { width: 100%; margin-top: 12px; }
.muted { color: var(--muted); font-size: 13px; }

/* --- шапка и раскладка --- */
.top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; white-space: nowrap; }
.brand span { color: var(--muted); font-weight: 400; }
.status { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right; }
.icon-button { display: none; padding: 4px 10px; }
.install { background: #2e7d32; border-color: #2e7d32; color: #fff; white-space: nowrap; }
.install[hidden] { display: none; }

.layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100% - 52px); }
.sidebar { border-right: 1px solid var(--line); padding: 12px; overflow-y: auto; background: var(--panel); }
.sidebar h3 { margin: 14px 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sidebar h3 small { float: right; letter-spacing: 0; }
.progress-link { display: flex !important; justify-content: space-between; font-weight: 700; color: #f2c94c !important; }
.progress-link span { color: var(--fg); font-weight: 400; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; background: var(--panel); border: 1px solid #f2c94c;
  border-radius: 12px; padding: 10px 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); cursor: pointer;
  transition: opacity .6s, transform .6s; animation: toast-in .3s ease-out; }
.toast.gone { opacity: 0; transform: translateY(12px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.ach-total { font-size: 18px; font-weight: 700; }
.bar { display: block; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2c94c, #f2994a); }
.ach-group { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 8px 0; }
.ach-group .bar { grid-column: 1 / -1; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.badge { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 12px;
  background: var(--panel-2); opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; border: 1px solid #f2c94c; }
.badge-icon { font-size: 30px; }
.badge small { color: var(--muted); font-size: 11px; }
.sidebar a { display: block; padding: 6px 8px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 14px; }
.sidebar a:hover { background: var(--panel-2); }
.sidebar a.active { background: var(--accent); color: #0d1020; }

.content { padding: 14px 16px; min-width: 0; }
.notice { background: #3b2f12; border: 1px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.project-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.project-bar h1 { font-size: 22px; margin: 0; flex: 1 1 auto; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.workspace.wide-side { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); }
.bench > * + * { margin-top: 10px; }

/* --- макетка --- */
.scene { background: var(--bench); border-radius: 14px; padding: 10px; position: relative; }
.scene-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.toolbar-gap { flex: 1; }
.scene-toolbar .power { background: #2e7d32; border-color: #2e7d32; font-weight: 600; }
.scene-toolbar.powered .power { background: #8e2b2b; border-color: #8e2b2b; }
.scene-toolbar.powered .palette, .scene-toolbar.powered .wire-colors { opacity: .35; pointer-events: none; }
.palette { display: flex; flex-wrap: wrap; gap: 4px; }
.palette-item { width: 38px; height: 34px; padding: 0; font-size: 17px; line-height: 1; }
.palette-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.wire-colors { display: flex; gap: 3px; }
.swatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid transparent; }
.swatch.active { border-color: #fff; }
.scene-hint { color: #c8cfdb; font-size: 13px; min-height: 20px; margin: 2px 4px 6px; }
.scene-canvas { overflow: auto; }
.scene-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* пальцем по детали, проводу, кнопке — тащим их; по пустому месту — листаем страницу; приближено — двигаем вид */
.scene-svg.zoomed, .scene-svg .part, .scene-svg .wire, .scene-svg .esp-pin, .scene-svg .hole, .scene-svg .usb { touch-action: none; }
.keys-help { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.keys-help b { grid-column: 1 / -1; }
.keys-help span:nth-child(even) { color: var(--accent-2); white-space: nowrap; }

.scene-svg .hole { fill: #3b3a35; }
.scene-svg .bb-label { font: 10px system-ui; fill: #9c9a8e; text-anchor: middle; }
.scene-svg .rail-sign { font: bold 14px system-ui; }
.scene-svg .pin-label { font: 10px system-ui; fill: #d9dde4; text-anchor: middle; }
.scene-svg .pin-label[text-anchor="end"] { text-anchor: end; }
.scene-svg .pin-label[text-anchor="start"] { text-anchor: start; }
.scene-svg .pin-label.gnd { fill: #9fb6ff; }
.scene-svg .pin-label.pwr { fill: #ff8a80; }
.scene-svg .pin-label.light { fill: #f2f4f7; }
.scene-svg .pin-label.tiny { font-size: 7px; }
.scene-svg .plug-hint { fill: #ffc857; font-weight: 700; }
.scene-svg .chip-label { font: bold 10px system-ui; fill: #3d454f; text-anchor: middle; }
.scene-svg .chip-sub { font: 10px system-ui; fill: #5b636c; text-anchor: middle; }
.scene-svg .esp-pin { cursor: crosshair; }
.scene-svg .usb { cursor: pointer; }
.scene-svg .leg-label { font: bold 11px system-ui; fill: #ffffff; text-anchor: middle; }
.scene-svg .cap-glyph { font: bold 13px system-ui; fill: #cfd6e2; text-anchor: middle; pointer-events: none; }
.scene-svg .note, .scene-svg .reading-label { font: bold 13px system-ui; fill: #ffe082; text-anchor: middle; }
.scene-svg .veil { font: 14px system-ui; fill: #8fa8ff; text-anchor: middle; }
.scene-svg .popout-glyph { font: 14px system-ui; fill: #fff; text-anchor: middle; }
.scene-svg .smoke { font-size: 22px; text-anchor: middle; }
.scene-svg .badge-text { font: bold 12px system-ui; text-anchor: middle; fill: #1e2128; pointer-events: none; }
.scene-svg .badge { cursor: help; }

.scene-svg .part { cursor: grab; }
.scene-svg .part.clickable, .scene-svg .clickable { cursor: pointer; }
.scene-svg .sensor-target { cursor: crosshair; }
.scene-svg .button-cap { transition: r .05s, fill .05s; }
.scene-svg .button-cap.pressed { fill: #6b8cff; r: 12px; }
.scene-svg .selected { filter: drop-shadow(0 0 4px #6b8cff) drop-shadow(0 0 2px #6b8cff); }
.scene-svg .wire { cursor: grab; }
.scene-svg .wire-end { cursor: move; }
.scene-svg .wire-end:hover { fill: #6b8cff; }
.scene-svg .leg-end { fill: transparent; }
.scene-svg .leg-end:hover { fill: rgba(107, 140, 255, .6); }
.scene-svg .bend-handle { fill: #fff; stroke: #6b8cff; stroke-width: 3; cursor: move; }
.scene-svg .bubble rect, .scene-svg .bubble path { fill: #fff8e1; stroke: #ffc857; stroke-width: 2; }
.scene-svg .bubble.bad rect, .scene-svg .bubble.bad path { fill: #ffecec; stroke: #ff6b6b; }
.scene-svg .bubble text { font: 12px system-ui; fill: #2b2b2b; }
.scene-svg .pin-dot { stroke: #fff; stroke-width: 1; pointer-events: none; }
.scene-svg .pin-tag { display: none; pointer-events: none; }
.scene-svg.labels-on .pin-tag, .scene-svg .part:hover .pin-tag, .scene-svg .part.selected .pin-tag { display: inline; }
.scene-svg .pin-tag-text { font: bold 9px system-ui; fill: #fff; text-anchor: middle; }
.scene-svg .pin-tag-text.dark { fill: #1e2128; }
.band-preview { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.band-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--panel-2); border-radius: 4px; padding: 1px 5px; }
.band-chip i { display: inline-block; width: 10px; height: 14px; border-radius: 2px; border: 1px solid rgba(255,255,255,.3); }
.ref-card { border-top: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; }
.ref-card:first-child { border-top: 0; }
.ref-pic { grid-row: span 2; display: flex; align-items: center; justify-content: center; background: #3a4152; border-radius: 8px; min-height: 72px; font-size: 34px; }
.ref-pic svg { width: 88px; height: 72px; }
.ref-card h4 { margin: 0; font-size: 15px; }
/* распиновка: микросхема в справочнике — во всю ширину, таблица ножек */
.ref-card.chip { grid-template-columns: 1fr; }
.ref-card.chip .ref-pic { grid-row: auto; padding: 8px; }
.ref-card.chip .ref-pic svg { width: 100%; max-width: 356px; height: auto; }
.ref-card.chip h4 { order: -2; }
.ref-card.chip > p:first-of-type { order: -1; }
.chip-pinout { width: 100%; max-width: 356px; height: auto; display: block; margin: 0 auto; }
.chip-pinout .chip-name { fill: #cfd5dd; font: 700 15px sans-serif; text-anchor: middle; letter-spacing: 1px; writing-mode: horizontal-tb; }
.chip-pinout .chip-note { fill: #9aa3ad; font: 11px sans-serif; text-anchor: middle; }
.chip-pinout .chip-no { fill: #9aa3ad; font: 700 12px monospace; }
.chip-pinout .chip-tag { fill: #fff; font: 700 12px monospace; text-anchor: middle; }
.chip-pinout .chip-tag.dark { fill: #1b1d22; }
.chip-silk { fill: #aab2bc; font: 600 5.6px monospace; text-anchor: middle; pointer-events: none; }
.pin-table { display: grid; gap: 4px; font-size: 13px; }
.pin-row { display: flex; gap: 8px; align-items: center; }
.pin-no { width: 18px; text-align: right; color: var(--muted); font-family: var(--mono); }
.pin-chip { min-width: 52px; text-align: center; border-radius: 5px; padding: 1px 6px; color: #fff; font: 700 12px var(--mono); }
.pin-chip[style*="#f2c94c"] { color: #1b1d22; }
.pin-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.pin-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.pinout-pop {
  position: absolute; right: 16px; top: 120px; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 140px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  display: grid; gap: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 6;
}
.pinout-pop[hidden] { display: none; }
.pinout-pop .instrument-head button { font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; margin-left: auto; }
.pinout-pic { background: #3a4152; border-radius: 8px; padding: 8px; display: flex; justify-content: center; }
.pinout-pic .scene-svg { width: 100%; max-height: 220px; }
.ref-card p { margin: 0; font-size: 13px; color: #c5cdd9; }
.ref-card details { grid-column: 1 / -1; font-size: 13px; }
.ref-card summary { cursor: pointer; color: var(--accent-2); }
.ref-pins { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0; }
.ref-pins b { white-space: nowrap; }
.edit-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #2b2f1a; border: 1px solid var(--warn); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 14px; }
.edit-banner span { flex: 1 1 220px; }
.scene-svg .bubble { pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.scene-svg .focus-ring { fill: none; stroke: #ff4d4d; stroke-width: 3; animation: ring 1.1s ease-out infinite; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.scene-svg .guide-ring { fill: none; stroke: #2dd4bf; stroke-width: 3; animation: ring 1.3s ease-out infinite; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.scene-svg .guide-ghost { opacity: .55; animation: breathe 1.4s ease-in-out infinite; pointer-events: none; }
.scene-svg .problem { animation: alarm 1s ease-in-out infinite; }
.scene-svg .flash { animation: flash .4s ease-in-out 6; }
.scene-svg .ghost.snap { opacity: .3; }
.scene-svg .snap-ring { fill: none; stroke: #4fd18b; stroke-width: 2.5; }
.scene-svg .snap-ring.bad { stroke: #ff4d4d; }
.scene-svg .dragging { opacity: .9; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); cursor: grabbing; }
.scene-svg .bad-move { filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(4); opacity: .6; }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes alarm { 0%, 100% { filter: drop-shadow(0 0 0 #ff4d4d); } 50% { filter: drop-shadow(0 0 6px #ff4d4d) drop-shadow(0 0 2px #ff4d4d); } }
@keyframes flash { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 10px #ffc857) drop-shadow(0 0 4px #ffc857); } }

.zoom { display: inline-flex; gap: 2px; }
.zoom button { width: 34px; padding: 6px 0; }
.guide, .problems { border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 8px; }
.guide { background: #12343b; border: 1px solid #2dd4bf; }
.guide-text { font-size: 15px; }
.guide-step { display: inline-block; background: #2dd4bf; color: #062a2f; font-weight: 700; border-radius: 6px; padding: 0 8px; margin-right: 6px; }
.guide-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-buttons .primary { background: #2dd4bf; border-color: #2dd4bf; color: #062a2f; font-weight: 600; }
.guide-progress { height: 5px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.guide-progress div { height: 100%; background: #2dd4bf; }
.problems { background: #3a1a1e; border: 1px solid var(--bad); }
.problem-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px; }
.problem-row.warn b { color: var(--warn); }
.problem-row.bad b { color: #ff9a9a; }
.problem-row button { flex: none; padding: 3px 10px; }
.scene-svg .ghost { opacity: .6; pointer-events: none; }
.scene-svg .ghost.bad { opacity: .35; filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(4); }
.scene-svg .net { pointer-events: none; }
.scene-svg .net-point { fill: none; stroke: #2dd4bf; stroke-width: 2.5; }
.scene-svg .net-point.main { stroke: #ffc857; stroke-width: 3; }

.inspector {
  position: absolute; right: 16px; bottom: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; min-width: 200px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.inspector label { display: grid; gap: 2px; color: var(--muted); font-size: 12px; }
.inspector input, .inspector select { font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }

/* «Почини схему» */
.fix-stars { float: right; color: #f2c94c; letter-spacing: 1px; }
.fix-goals { list-style: none; padding: 0; display: grid; gap: 6px; }
.fix-goals li { padding: 6px 10px; border-radius: 8px; background: var(--panel-2); }
.fix-goals li.ok { background: #16321f; }
.fix-goals li.bad { background: #3a1a1e; }
.fix-goals small { display: block; color: var(--muted); margin-top: 2px; }
.fix-wiring { margin: 4px 0 8px; padding-left: 18px; }
.fix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fix-actions button { font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg); cursor: pointer; }
.fix-actions button.primary { background: #27ae60; border-color: #27ae60; color: #fff; }
.fix-actions button:disabled { opacity: .5; cursor: default; }
.fix-hints { padding-left: 0; list-style: none; display: grid; gap: 6px; }
.fix-hints li { background: #3b2f12; border: 1px solid var(--warn); border-radius: 8px; padding: 6px 10px; }
.fix-win { background: #16321f; border: 1px solid #27ae60; border-radius: 8px; padding: 10px; font-size: 18px; font-weight: 700; color: #8ff0b0; }
.fix-fail { background: #3b2f12; border: 1px solid var(--warn); border-radius: 8px; padding: 8px 10px; }
.hint-ring { fill: rgba(255, 200, 87, .25); stroke: #ffc857; stroke-width: 3; animation: hint-pulse 1.2s ease-in-out infinite; }
@keyframes hint-pulse { 50% { stroke-width: 6; fill: rgba(255, 200, 87, .45); } }

/* приборы: мультиметр и осциллограф */
.scene-toolbar [data-tool].active { background: var(--accent, #2d9cdb); color: #fff; }
.scene-svg.probing { cursor: crosshair; }
.probe-label { font: 700 12px sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.probe-ring { fill: none; stroke: #e53935; stroke-width: 3; stroke-dasharray: 6 4; }
.instrument {
  position: absolute; right: 16px; bottom: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 8px; max-width: calc(100% - 32px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 13px; z-index: 5;
}
.instrument-head { display: flex; gap: 6px; align-items: center; cursor: move; user-select: none; }
.instrument-head button { cursor: pointer; }
.instrument.mini .modes, .instrument.mini .lcd-note, .instrument.mini .probes-line, .instrument.mini .instrument-help,
.instrument.mini .scope-screen, .instrument.mini .scope-legend { display: none; }
.instrument.mini .lcd { padding: 2px 10px; }
.instrument.mini .lcd-value { font-size: 20px; }
.instrument-help { max-width: 380px; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.instrument-help ol { margin: 4px 0; padding-left: 20px; }
.instrument-help p { margin: 6px 0 4px; color: var(--muted); }
.doc-link { color: var(--accent-2, #8ab4ff); }
.probe { cursor: grab; }
.probe.moving { opacity: .8; pointer-events: none; }
.probe-aim { fill: none; stroke: #ffc857; stroke-width: 2.5; stroke-dasharray: 4 3; pointer-events: none; }
.board-btn, .board-info { cursor: pointer; }
.probe-ring.doctor { stroke: #2dd4bf; }
.select-box { fill: rgba(107, 140, 255, .12); stroke: #6b8cff; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.scene-svg .grouped { filter: drop-shadow(0 0 3px #6b8cff); }
.logic-screen { width: 380px; max-width: 100%; height: auto; border-radius: 6px; display: block; }
.logic-list { max-height: 220px; overflow: auto; display: grid; gap: 2px; max-width: 400px; }
.logic-row { display: grid; grid-template-columns: 48px 62px 1fr; gap: 2px 6px; padding: 3px 6px; border-radius: 6px;
  background: var(--panel-2); cursor: pointer; font-size: 12px; }
.logic-row span:last-child { grid-column: 1 / -1; color: var(--muted); }
.logic-row code { font-family: var(--mono); color: #2fd2ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logic-row.active { outline: 1px solid #e5b931; }
.logic-row.bad { background: #3a1a1e; }
.logic-time { color: var(--muted); font-family: var(--mono); }
.hover-tip { position: absolute; z-index: 7; pointer-events: none; background: rgba(15, 18, 26, .92); color: #e8ecf3;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font: 600 13px var(--mono); white-space: nowrap; }
.hover-tip[hidden] { display: none; }
.doctor { display: grid; gap: 8px; max-width: 400px; }
.doctor p { margin: 0; }
.doc-part { display: flex; gap: 8px; align-items: center; }
.doc-part button { margin-left: auto; }
.doc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.doc-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; background: var(--panel-2); border-radius: 8px; padding: 6px 8px; }
.doc-steps li.ok { background: #16321f; }
.doc-steps li.bad { background: #3a1a1e; }
.doc-steps small { display: block; color: var(--muted); }
.doc-steps button { margin-top: 4px; }
.doc-mark { font-weight: 700; }
.doc-say { margin-top: 3px; }
.doc-live { font-family: var(--mono); }
.doc-verdict { border-radius: 8px; padding: 8px 10px; }
.doc-verdict.ok { background: #16321f; border: 1px solid #27ae60; }
.doc-verdict.bad { background: #3b2f12; border: 1px solid var(--warn); }
.doc-verdict p { margin-top: 4px; }
.instrument button.primary { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.board-btn .board-cap.down { fill: #e5b931; r: 5; }
.board-info circle { fill: #2d9cdb; stroke: #fff; stroke-width: 2; }
.board-info text { fill: #fff; font: italic 700 15px Georgia, serif; text-anchor: middle; pointer-events: none; }
.board-info:hover circle { fill: #56b4f0; }
.board-lead { margin: 0; color: var(--muted); }
.board-parts { display: grid; gap: 6px; margin-top: 6px; }
.board-parts > div { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.board-rules { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.pinout-pop summary { cursor: pointer; font-weight: 600; }
.instrument-head .modes { display: flex; gap: 4px; margin-left: auto; }
.instrument button { font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.instrument button.active { background: #e5b931; color: #1b1d22; border-color: #e5b931; }
.lcd { background: #b9c7a5; color: #1b2414; border-radius: 6px; padding: 6px 12px; text-align: right; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.lcd-value { font: 700 30px/1.1 var(--mono); letter-spacing: 1px; }
.lcd-note { color: var(--muted); min-height: 1em; max-width: 340px; }
.probes-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); }
.probes-line .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.probes-line .dot.red { background: #e53935; }
.probes-line .dot.black { background: #20232a; border: 1px solid #888; }
.scope-screen { width: 380px; max-width: 100%; height: auto; border-radius: 6px; display: block; }
.scope-legend { display: grid; gap: 2px; }
.scope-legend .muted { color: var(--muted); font-size: 12px; }

.sensor-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }

.issue { padding: 6px 10px; border-radius: 8px; margin-top: 6px; font-size: 14px; }
.issue.bad { background: #3a1a1e; border: 1px solid var(--bad); }
.issue.warn { background: #3b2f12; border: 1px solid var(--warn); }
.error { background: #3a1a1e; border: 1px solid var(--bad); border-radius: var(--radius); padding: 10px; white-space: pre-wrap; font: 13px/1.4 var(--mono); }
.log-box summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.log { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; height: 160px; overflow-y: auto; margin: 6px 0 0; font: 12px/1.45 var(--mono); color: #c5cdd9; }

/* --- правая колонка --- */
.side > * + * { margin-top: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.card-title { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.card-title button { padding: 0 8px; }
.big-screen canvas { display: block; width: 100%; image-rendering: pixelated; background: #080a10; border: 8px solid #1f4fa3; border-radius: 6px; }
.tabs { display: flex; gap: 4px; }
.tabs button { border-radius: 8px 8px 0 0; }
.tabs button.active { background: var(--panel); border-bottom-color: var(--panel); color: var(--accent-2); }
.tab-page { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-top: 0 !important; }
.about .summary { font-size: 16px; margin-top: 0; }
.about details { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.about summary { cursor: pointer; color: var(--accent-2); }
.about img { max-width: 100%; image-rendering: pixelated; border-radius: 6px; }
.about pre { background: var(--bg); padding: 10px; border-radius: 8px; overflow-x: auto; }
.about code { font-family: var(--mono); font-size: 13px; }
.about table { border-collapse: collapse; width: 100%; font-size: 13px; display: block; overflow-x: auto; }
.about th, .about td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.about a { color: var(--accent-2); }
.steps-short { padding-left: 20px; }
.code-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.code-view { margin: 0; max-height: 70vh; overflow: auto; font: 12.5px/1.5 var(--mono); background: var(--bg); padding: 10px; border-radius: 8px; }
.editor {
  width: 100%; min-height: 60vh; resize: vertical; padding: 10px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; font: 12.5px/1.5 var(--mono); tab-size: 4; white-space: pre; outline: none;
}

/* --- пульт --- */
.play > * + * { margin-top: 10px; }
.pult-row { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pad { display: grid; grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 60px); gap: 6px; }
.pad-others { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pad-btn {
  user-select: none; -webkit-user-select: none; touch-action: none; font-size: 24px; line-height: 1;
  border-radius: 14px; background: #3a4150; box-shadow: 0 4px 0 #22262f; min-width: 64px; min-height: 56px;
}
.pad-btn.round { border-radius: 50%; width: 84px; height: 84px; font-size: 26px; font-weight: 700; background: #8e2b4a; }
.pad-btn.named { border-radius: 14px; min-width: 92px; min-height: 64px; font-size: 15px; font-weight: 600; background: #8e2b4a; padding: 6px 12px; }
.pad-btn.named small { display: block; font-size: 11px; opacity: .7; font-weight: 400; }
.pad-btn.pressed { background: var(--accent); color: #0d1020; transform: translateY(3px); box-shadow: 0 1px 0 #22262f; }
.box-toggle { display: none; }

/* --- блоки --- */
.blockly-area { height: 520px; border-radius: 8px; overflow: hidden; margin-top: 8px; }
.blocks-code-box { margin-top: 8px; }
.blocks-code-box summary { cursor: pointer; color: var(--muted); }
.blocks-code-box pre { max-height: 220px; overflow: auto; }
.code-actions button.primary { background: #2e7d32; border-color: #2e7d32; color: #fff; }

/* --- печать одним листом (🖨) --- */
.print-sheet { display: none; }
@media print {
  body > *:not(.print-sheet) { display: none !important; }
  body { background: #fff; color: #000; }
  .print-sheet { display: block; font-size: 11pt; }
  .print-sheet h1 { font-size: 18pt; margin: 0 0 4pt; }
  .print-sheet h2 { font-size: 13pt; margin: 10pt 0 4pt; }
  .print-board svg { width: 100%; height: auto; max-height: 120mm; }
  .print-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14pt; }
  .print-sheet li { margin: 2pt 0; }
  .print-sheet pre { font-size: 8.5pt; white-space: pre-wrap; border: 1px solid #999; padding: 6pt; break-inside: auto; }
  .print-note { color: #444; font-size: 9pt; }
}

/* --- узкие экраны и телефоны --- */
@media (max-width: 1200px) {
  .workspace { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .icon-button { display: inline-block; }
  .sidebar { display: none; position: fixed; inset: 52px 0 0 0; z-index: 4; }
  .sidebar.open { display: block; }
  .content { padding: 10px; }
  .status { display: none; }
  .inspector { position: static; margin-top: 8px; }
  .instrument { position: static; margin-top: 8px; }
  /* экран и пульт — сверху, над макеткой */
  .workspace { display: flex; flex-direction: column; align-items: stretch; }
  .side { display: contents; }
  .play { order: -1; }
  .play:not(:has(> :not([hidden]))) { display: none; }
  /* инструменты сборки свёрнуты в «🧰 Детали» */
  .box-toggle { display: inline-block; }
  .scene-toolbar .palette, .scene-toolbar .wire-colors { display: none; }
  .scene-toolbar.box-open .palette, .scene-toolbar.box-open .wire-colors { display: flex; }
  .scene-toolbar.powered .box-toggle, .scene-toolbar.powered [data-action="delete"],
  .scene-toolbar.powered [data-action="undo"], .scene-toolbar.powered [data-action="redo"] { display: none; }
  .scene-hint { font-size: 12px; }
  .project-bar h1 { font-size: 19px; }
  .pult-row { gap: 14px; flex-wrap: nowrap; }
  .pad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 54px); gap: 5px; }
  .pad-btn { min-width: 0; min-height: 0; }
  .pad-btn.round { width: 74px; height: 74px; }
  /* под питанием на телефоне — только экран, пульт и макетка */
  .is-powered .project-bar .actions { display: none; }
  .is-powered .project-bar { margin-bottom: 4px; }
  .big-screen .card-title { margin-bottom: 2px; }
}