/* ==========================================================================
   canvas.css — Simulator canvas (light) + Pico USB device panel
   Loaded after rp2040.css; overrides its dark canvas styles.
   ========================================================================== */

/* ---------- view container ---------- */
.simulator-canvas-view { background: var(--bg) !important; }
.cvx { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; color: var(--text); font-family: var(--font); }

/* ---------- toolbar ---------- */
.cvx-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; flex-wrap: wrap; }
.cvx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.cvx-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.cvx-btn:disabled { opacity: .45; cursor: default; }
.cvx-btn.run { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 6px -1px rgba(243,122,51,.45); }
.cvx-btn.run:hover { background: var(--accent-600); color: #fff; }
.cvx-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.cvx-btn .ic { width: 14px; height: 14px; }
.cvx-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.cvx-grow { flex: 1; }
.cvx-check { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font); color: var(--text-2); margin-left: 4px; cursor: pointer; }
.cvx-check input { accent-color: var(--accent); }
.cvx-status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--surface-3); font: 600 12px var(--font); color: var(--text-2); }
.cvx-status i { width: 8px; height: 8px; border-radius: 50%; background: #B8BFC8; }
.cvx-status.run i { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.cvx-status.warn i { background: #F5A524; }
.cvx-conflict { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #FECDCA; background: #FEF3F2; color: #D92D20; font: 600 12px var(--font); cursor: pointer; }

/* add-part menu */
.cvx-menu-wrap { position: relative; }
.cvx-menu { position: absolute; top: 38px; left: 0; z-index: 300; width: 300px; max-height: 60vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.cvx-menu-g > b { display: block; font: 700 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.cvx-menu-i { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; text-align: left; font: 500 13px var(--font); color: var(--text); cursor: pointer; }
.cvx-menu-i:hover:not(:disabled) { background: var(--accent-50); }
.cvx-menu-i:disabled { opacity: .5; cursor: default; }
.cvx-menu-i span { flex: 1; }
.cvx-menu-i small { font: 600 10.5px var(--mono); color: var(--muted); }
.cvx-menu-more { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 9px 8px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--accent-600); font: 600 12.5px var(--font); cursor: pointer; }

/* ---------- body: workbench | splitter | side panel ---------- */
.cvx-body { flex: 1; min-height: 0; display: flex; }
.cvx-surface { flex: 1; min-width: 0; overflow: auto; position: relative;
  background-color: #F7F8FA; background-image: radial-gradient(circle, #D6DBE1 1px, transparent 1.2px); background-size: 24px 24px; }
.cvx-board { position: relative; min-width: 100%; min-height: 100%; }
.cvx-split { width: 7px; flex: none; cursor: col-resize; background: var(--surface); border-left: 1px solid var(--border); border-right: 1px solid var(--border); position: relative; outline: none; }
.cvx-split::after { content: ""; position: absolute; left: 2px; top: 50%; width: 1px; height: 36px; margin-top: -18px; box-shadow: 0 0 0 .5px #C4CAD2, 2px 0 0 .5px #C4CAD2; }
.cvx-split:hover, .cvx-split.drag, .cvx-split:focus-visible { background: var(--accent-50); }
.cvx-side { flex: none; width: 400px; min-width: 300px; display: flex; flex-direction: column; background: var(--surface); min-height: 0; }

/* ---------- uniform part cards ---------- */
.cvx-card.rxm-card { position: absolute; left: 0; top: 0; width: 196px; height: 248px; margin: 0;
  border: 1px solid #D6DCE5; border-bottom: 2.5px solid #BAC4D2;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 18px -4px rgba(15,23,42,.18), 0 18px 30px -8px rgba(15,23,42,.14), inset 0 1px 0.5px rgba(255,255,255,.95), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: box-shadow .18s cubic-bezier(.2,.8,.4,1), transform .18s cubic-bezier(.2,.8,.4,1); will-change: transform; }
.cvx-card.rxm-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.08), 0 14px 28px -4px rgba(15,23,42,.26), 0 24px 38px -8px rgba(15,23,42,.22), 0 0 0 1px rgba(243,122,51,.5); z-index: 5; }
.cvx-card.dragging { z-index: 50; box-shadow: 0 0 0 2.5px var(--accent), 0 24px 44px -10px rgba(15,23,42,.45) !important; cursor: grabbing; }
.cvx-card .rxm-face { padding: 4px 10px 2px; }
.cvx-card .rxm-top { display: none; }
.cvx-card .rxm-art { flex: 1 1 0; min-height: 0; overflow: hidden; filter: drop-shadow(0 3px 6px rgba(15,23,42,.14)); }
.cvx-card .rxm-art > * { max-width: 100%; max-height: 100%; }
.cvx-card .rxm-art svg.art { width: 100%; height: 100%; max-width: 100% !important; }
.cvx-card .rxm-art canvas, .cvx-card .rxm-art .oled-wrap { max-width: 100%; }
.cvx-card .rxm-ctl { max-height: 64px; overflow: hidden; }
.cvx-card .rxm-band { height: 38px; }
.cvx-card-head { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 8px; flex: none; cursor: grab; user-select: none;
  border-bottom: 1px solid #E2E6EC; background: linear-gradient(180deg, #FFFFFF, #F4F6F9); box-shadow: inset 0 1px 0 #fff; }
.cvx-grip { color: #A4ACB7; font-size: 11px; letter-spacing: -2px; }
.cvx-card-title { flex: 1; min-width: 0; font: 700 11.5px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.5px 0 #fff; }
.cvx-card .rxm-led { display: none; }
.cvx-card-head::after { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4F4DC 0%, #8CD9A0 40%, #3DA65C 85%, #246B3A 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.15); flex: none; }
.cvx-card.active .cvx-card-head::after {
  background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, #68FFA0 35%, #22C55E 70%, #15803D 100%);
  box-shadow: 0 0 6px #22C55E, 0 0 12px rgba(34,197,94,.6); }
.cvx-pin { max-width: 96px; height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid #F9C9A9; background: linear-gradient(180deg, #FFF4ED, #FFE7D6); color: var(--accent-600);
  font: 700 10px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 #fff; }
.cvx-pin:hover { background: var(--accent-100); }
.cvx-pin.fixed { border-color: #D0D6DF; background: linear-gradient(180deg, #FFFFFF, #EBF0F5); color: var(--text-2); }
.cvx-pin.bad { border-color: #FDA29B; background: linear-gradient(180deg, #FFF2F0, #FEE4E2); color: #D92D20; }
.cvx-x { width: 20px; height: 20px; border-radius: 6px; border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 20px; padding: 0; cursor: pointer; }
.cvx-x:hover { background: #FEF3F2; color: var(--red); }
.cvx-empty { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; max-width: 340px; color: var(--text-2); }
.cvx-empty .ic { width: 40px; height: 40px; color: var(--accent); opacity: .7; }
.cvx-empty h3 { margin: 10px 0 6px; font-size: 16px; color: var(--text); }
.cvx-empty p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ---------- side panel tabs ---------- */
.cvx-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex: none; background: var(--surface-2); }
.cvx-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 8px;
  background: none; color: var(--text-2); font: 600 12.5px var(--font); cursor: pointer; position: relative; }
.cvx-tabs button:hover { background: var(--surface-3); }
.cvx-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.cvx-usb-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.cvx-usb-dot.on { background: var(--green); }
.cvx-usb-dot.run { background: var(--accent); }
.cvx-pane { display: none; flex: 1; min-height: 0; overflow: auto; }
.cvx-pane.on { display: flex; flex-direction: column; }

/* ---------- Pico board (SVG, scales to the panel width) ---------- */
.cvx-pico { padding: 10px 8px 0; flex: none; }
.cvx-pico-svg { display: block; width: 100%; height: auto; max-height: 72vh; font-family: var(--mono); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35)); }
.cvx-pico-svg .pcb { fill: #0D4A34; stroke: #06281C; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.cvx-pico-svg .usb { fill: #B0B8C0; stroke: #68727C; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
.cvx-pico-svg .chip { fill: #171A1E; stroke: #383F47; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5)); }
.cvx-pico-svg .chipt { fill: #E2E6EC; font: 700 11px var(--mono); letter-spacing: 0.5px; }
.cvx-pico-svg .silk { fill: #EBF7EE; font: 600 8.5px var(--font); text-shadow: 0 0.5px 1px rgba(0,0,0,0.5); }
.cvx-pico-svg .silk.b { font-size: 11px; font-weight: 700; }
.cvx-pico-svg .bootsel { fill: #E8ECEF; stroke: #9AA3AC; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.cvx-pico-svg .ledbody { fill: #C8E8D2; stroke: #7FB092; }
.cvx-pico-svg .pp.led.on .ledbody { fill: #28E662; filter: drop-shadow(0 0 6px #28E662); }
.cvx-pico-svg .pad { fill: #E5C158; stroke: #A67D24; stroke-width: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.cvx-pico-svg .hole { fill: #061F15; }
.cvx-pico-svg .pn { fill: #E8F5EE; font: 600 8px var(--mono); }
.cvx-pico-svg .pl { fill: var(--text-2); font: 600 9px var(--font); }
.cvx-pico-svg .pp.power .pad, .cvx-pico-svg .pp.ctrl .pad { fill: #D5D8DC; stroke: #A5ABB2; }
.cvx-pico-svg .pp.use .pad { fill: #F7B37E; stroke: var(--accent-600); stroke-width: 1.6; }
.cvx-pico-svg .pp.use .pl { fill: var(--accent-600); }
.cvx-pico-svg .pp.on .pad { fill: #28D657; stroke: #15803D; filter: drop-shadow(0 0 4px #28D657); }
.cvx-pico-svg .pp.bad .pad { fill: #FF8A80; stroke: #D92D20; }
.cvx-pico-svg .pp.bad .pl { fill: #D92D20; }
.cvx-pico-svg .pp.hi .pad { stroke: #1E2329; stroke-width: 2.4; }
.cvx-pico-svg .pp.hi .pl { font-weight: 800; }
.cvx-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 14px 10px; font: 500 11px var(--font); color: var(--text-2); flex: none; }
.cvx-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.cvx-legend .l-on { background: #3CD070; } .cvx-legend .l-use { background: #F7B37E; } .cvx-legend .l-bad { background: #FF8A80; } .cvx-legend .l-pwr { background: #D5D8DC; }
.cvx-wiring { padding: 4px 12px 16px; border-top: 1px solid var(--border); }
.cvx-wire-h { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px 6px; }
.cvx-wire-h b { font-size: 12.5px; } .cvx-wire-h small { color: var(--muted); font-size: 11px; }
.cvx-wire { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; font: 500 12.5px var(--font); color: var(--text); }
.cvx-wire:hover { background: var(--accent-50); }
.cvx-wire span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvx-wire code { font: 600 11px var(--mono); color: var(--accent-600); white-space: nowrap; }
.cvx-wire.bad code { color: #D92D20; }
.cvx-warn { margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; font: 500 12px/1.5 var(--font); }
.cvx-muted { color: var(--muted); font-size: 12px; margin: 4px 2px; }

/* ---------- card buttons & pin popup ---------- */
.cvx-mod-btn { background: none; border: 0; padding: 2px 4px; font-size: 11px; cursor: pointer; border-radius: 4px; opacity: 0.65; transition: opacity .15s, background .15s; }
.cvx-mod-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.cvx-card-title { cursor: pointer; border-radius: 4px; padding: 1px 3px; }
.cvx-card-title:hover { background: rgba(0,0,0,0.05); text-decoration: underline dotted; }

.cvx-pop { position: fixed; z-index: 5000; width: 300px; max-height: 86vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-family: var(--font); animation: toastIn .15s; }
.cvx-pop-h { display: flex; align-items: center; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } 
.cvx-pop-h b { flex: 1; font-size: 13.5px; color: var(--text-1); }
.cvx-pop-h button { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 0 4px; }
.cvx-pop-sec { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
.cvx-pop-sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.cvx-pop-r { display: flex; align-items: center; gap: 8px; margin: 6px 0; font: 600 12px var(--mono); color: var(--text-2); }
.cvx-pop-r span { width: 56px; font-family: var(--font); font-size: 11.5px; }
.cvx-pop-r select, .cvx-pop-r input { flex: 1; height: 28px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 6px; font: 500 12px var(--font); background: var(--surface); }
.cvx-pop-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cvx-pop-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; transition: transform .1s; }
.cvx-pop-sw:hover { transform: scale(1.15); }
.cvx-pop-btn { width: 100%; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 12px; font-weight: 500; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cvx-pop-btn:hover { background: var(--surface-3); }
.cvx-pop-n { margin: 8px 0 0; font: 400 11.5px/1.45 var(--font); color: var(--muted); }

/* ---------- code tab ---------- */
.cvx-code-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex: none; }
.cvx-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-3); }
.cvx-seg button { height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font: 600 12px var(--font); color: var(--text-2); cursor: pointer; }
.cvx-seg button.on { background: var(--surface); color: var(--accent-600); box-shadow: var(--shadow-xs); }
.cvx-code { flex: 1; margin: 0; padding: 12px 14px; overflow: auto; font: 12px/1.6 var(--mono); background: #FBFCFD; color: var(--text); white-space: pre; }

/* ==========================================================================
   Pico USB device panel (used in the canvas side panel and the right panel)
   ========================================================================== */
.dev { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 100%; box-sizing: border-box; font-family: var(--font); }
.dev-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.dev-dot { width: 10px; height: 10px; border-radius: 50%; background: #C4CAD2; flex: none; }
.dev-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dev-dot.run { background: var(--accent); box-shadow: 0 0 0 3px rgba(243,122,51,.22); animation: devPulse 1.2s infinite; }
.dev-dot.wait { background: #F5A524; }
@keyframes devPulse { 50% { box-shadow: 0 0 0 6px rgba(243,122,51,.08); } }
.dev-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dev-id b { font-size: 13px; } .dev-id small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.dev-btn:hover:not(:disabled) { background: var(--surface-3); }
.dev-btn:disabled { opacity: .45; cursor: default; }
.dev-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dev-btn.primary:hover:not(:disabled) { background: var(--accent-600); }
.dev-btn.accent { border-color: #F9C9A9; background: var(--accent-50); color: var(--accent-600); }
.dev-btn.accent:hover:not(:disabled) { background: var(--accent-100); }
.dev-btn.sm { height: 28px; font-size: 12px; padding: 0 10px; }
.dev-btn .ic { width: 14px; height: 14px; }
.dev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dev-warn { padding: 10px 12px; border-radius: 10px; background: #FFFAEB; border: 1px solid #FEDF89; color: #93370D; font-size: 12.5px; line-height: 1.5; }
.dev-progress { position: relative; height: 22px; border-radius: 7px; background: var(--surface-3); overflow: hidden; }
.dev-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #FDBA8C, var(--accent)); transition: width .15s; }
.dev-progress span { position: relative; display: block; text-align: center; line-height: 22px; font: 600 11px var(--font); color: var(--text); }
.dev-files { border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.dev-files-head { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px; } .dev-files-head b { flex: 1; font-size: 12.5px; }
.dev-file { display: flex; justify-content: space-between; font: 500 12px var(--mono); padding: 3px 0; border-top: 1px solid var(--surface-3); }
.dev-file small { color: var(--muted); }
.dev-term-head { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.dev-term-head b { font-size: 12.5px; } .dev-term-head small { color: var(--muted); font-size: 11px; } .dev-term-head .grow { flex: 1; }
.dev-link { border: 0; background: none; padding: 2px 4px; color: var(--accent-600); font: 600 11.5px var(--font); cursor: pointer; border-radius: 5px; }
.dev-link:hover:not(:disabled) { background: var(--accent-50); }
.dev-link:disabled { color: var(--muted); opacity: .6; cursor: default; }
.dev-term { flex: 1 1 200px; min-height: 180px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #1B1F24; color: #E6EDF3;
  font: 12px/1.5 var(--mono); overflow: auto; white-space: pre-wrap; word-break: break-all; outline: none; border: 2px solid transparent; }
.dev-term:focus { border-color: rgba(243,122,51,.6); }
.dev-term .t-err { color: #FF8A80; } .dev-term .t-sys { color: #8B949E; font-style: italic; }
.dev-term .t-cursor { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: transparent; }
.dev-term:focus .t-cursor { background: #F37A33; animation: devBlink 1s steps(1) infinite; }
@keyframes devBlink { 50% { opacity: 0; } }
.dev-fw { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; background: var(--surface-2); }
.dev-fw summary { display: flex; align-items: center; gap: 8px; padding: 11px 0; cursor: pointer; list-style: none; font-size: 12.5px; }
.dev-fw summary::-webkit-details-marker { display: none; }
.dev-fw summary small { color: var(--muted); margin-left: auto; }
.dev-steps { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.dev-steps b { color: var(--text); }
.dev-fw-links { display: inline-flex; gap: 6px; margin-left: 4px; flex-wrap: wrap; }
.dev-fw-links a { padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent-600); font-weight: 600; text-decoration: none; font-size: 11.5px; }
.dev-fw-file, .dev-fw-status { display: block; margin-top: 4px; font: 500 11.5px var(--mono); color: var(--muted); }
.dev-fw-file.good { color: #067647; } .dev-fw-file.bad { color: #D92D20; }
.dev-fwcheck { margin: 2px 0; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4; }
.dev-fwcheck.good { color: #067647; background: #ECFDF3; } .dev-fwcheck.warn { color: #B54708; background: #FFFAEB; }
.dev-steps .dev-btn, .dev-steps .dev-link { margin-top: 4px; }
.pane[data-pane="device"] { overflow: auto; }

/* ---------- topbar & right panel glue ---------- */
/* Zoom / collapse / focus controls only make sense for the blocks workspace */
.app:not([data-panel="blocks"]) #tbZoomGroup,
.app[data-panel="simulator"] #tbUndoGroup { display: none; }
#sbZoom { display: none; }
.app[data-panel="blocks"] #sbZoom { display: inline-flex; }
.tb-upload { border: 1px solid var(--border-strong) !important; border-radius: 9px; margin-right: 4px; }
.tb-upload.connected { border-color: #86D8A2 !important; background: #ECFDF3; color: #067647; }
#usbLiveDot.on, #usbLiveDot.run { display: inline-block; }
#usbLiveDot.run { background: var(--accent); box-shadow: 0 0 0 3px rgba(243,122,51,.2); }
.device-mount { height: 100%; overflow: auto; }
.pane[data-pane="code"] .pane-bar { flex-wrap: wrap; row-gap: 6px; }
.cvx-pico-svg .silk.sm { font-size: 6.5px; }

/* ---------- device panel options + review dialog ---------- */
.dev-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 12px var(--font); color: var(--text-2); }
.dev-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .dev-opts input { accent-color: var(--accent); }
.dev-twin-st { margin-left: auto; color: #067647; font-weight: 600; }
.rvw-back { position: fixed; inset: 0; z-index: 6000; background: rgba(16,24,40,.45); display: grid; place-items: center; padding: 24px; }
.rvw { width: min(1180px, 100%); height: min(820px, 100%); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; font-family: var(--font); }
.rvw-h { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.rvw-h h3 { margin: 0; font-size: 16px; } .rvw-h p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.rvw-b { flex: 1; min-height: 0; display: flex; }
.rvw-checks { width: 300px; flex: none; overflow: auto; padding: 12px; border-right: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.rvw-c { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.rvw-c i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font); font-style: normal; color: #fff; }
.rvw-c.ok i { background: #22A06B; } .rvw-c.warn i { background: #F5A524; } .rvw-c.error i { background: #E5484D; } .rvw-c.info i { background: #3E9BE0; }
.rvw-c.error { border-color: #FECDCA; background: #FEF3F2; }
.rvw-c b { display: block; font-size: 12.5px; } .rvw-c small { display: block; margin-top: 2px; color: var(--text-2); font-size: 11.5px; line-height: 1.45; word-break: break-word; }
.rvw-code { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rvw-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.rvw-tabs button { height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: 600 12px var(--mono); cursor: pointer; color: var(--text-2); }
.rvw-tabs button.on { background: var(--accent-50); border-color: #F9C9A9; color: var(--accent-600); }
.rvw-tabs [data-diff] { font-family: var(--font); } .rvw-tabs .grow { flex: 1; } .rvw-tabs label { display: inline-flex; gap: 5px; align-items: center; }
.rvw-pre { flex: 1; overflow: auto; margin: 0; background: #FBFCFD; }
.rvw-pre .ln.da { background: #E6FFEC; } .rvw-pre .ln.dr { background: #FFEBE9; } .rvw-pre .ln.dh { background: var(--surface-3); font-weight: 600; }
.rvw-ta { flex: 1; border: 0; padding: 12px 16px; font: 12.5px/1.65 var(--mono); resize: none; outline: none; background: #FFFDF7; }
.rvw-f { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 12.5px; }
.rvw-sum { flex: 1; } .rvw-sum .good { color: #067647; } .rvw-sum .bad { color: #D92D20; }

/* ---------- simulator: debug dock, split with blocks ---------- */
.app[data-panel="simulator"] section#dock.dock { display: flex !important; }
.app[data-panel="simulator"].sim-split .simulator-canvas-view { left: var(--sim-split, 42%); border-left: 1px solid var(--border); }
.app[data-panel="simulator"].sim-split #blocklyDiv { right: calc(100% - var(--sim-split, 42%)); }
.sim-splitbar { display: none; position: absolute; top: 0; bottom: 0; left: var(--sim-split, 42%); width: 8px; margin-left: -4px; z-index: 130; cursor: col-resize; }
.sim-splitbar:hover, body.resizing .sim-splitbar { background: rgba(243,122,51,.18); }
.app[data-panel="simulator"].sim-split .sim-splitbar { display: block; }
.app.sim-split [data-a="split"] { background: var(--accent-50); border-color: #F9C9A9; color: var(--accent-600); }

/* board source switch + twin overlay */
.cvx-src { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; flex-wrap: wrap; }
.cvx-twinst { font: 500 11.5px var(--font); color: var(--muted); } .cvx-twinst.live { color: #067647; font-weight: 600; } .cvx-twinst.wait { color: #B54708; }
.cvx-hw { display: none; margin: 2px 0 0; padding: 3px 8px; border-radius: 6px; background: #ECFDF3; color: #067647; font: 700 10.5px var(--mono); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-pico .cvx-hw { display: block; }
.src-pico .cvx-card .rxm-read { display: none; }
.src-pico .cvx-surface { background-color: #F3FAF6; }

/* serial in the canvas + input line */
.serial-home, .serial-body { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.cvx-pane[data-pane="serial"] .serial-body { height: 100%; }
.serial-in { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: none; background: var(--surface-2); }
.serial-in .input { flex: 1; min-width: 60px; height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: 12.5px var(--mono); }
.serial-in .select.sm { height: 30px; font-size: 11.5px; }
.sm-sent .sm-txt { color: #2A6BB0; } .sm-sent .sm-arrow { color: #2A6BB0; }

/* new part cards */
.rxm-card .mini-btn { height: 24px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); font: 600 11px var(--font); color: var(--text-2); cursor: pointer; }
.rxm-card .mini-btn:active { background: var(--accent-50); }
.rxm-card .ctl-row { display: flex; align-items: center; gap: 6px; font: 600 10.5px var(--font); color: var(--text-2); } .rxm-card .ctl-row input { flex: 1; accent-color: var(--accent); }
.busmon { width: 100%; height: 100%; border-radius: 8px; background: #1B1F24; padding: 6px 8px; box-sizing: border-box; overflow: hidden; }
.busmon-h { font: 700 9.5px var(--font); color: #8B949E; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.busmon-l { font: 500 9.5px/1.45 var(--mono); color: #7EE787; } .busmon-l div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane[data-pane="serial"] { display: none; } .pane[data-pane="serial"].active { display: flex; flex-direction: column; }

/* Block Studio — BASE: CYW43439 radio can, antenna and radio lights (simulated) */
.cvx-pico-svg .can { fill: #C7CDD3; stroke: #8C949C; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.cvx-pico-svg .chipt.sm { fill: #3A4148; font-size: 8.5px; }
.cvx-pico-svg .silk.xs { font-size: 6.5px; fill: #2F363D; text-shadow: none; }
.cvx-pico-svg .ant { stroke: #D9B44A; stroke-width: 2.4; opacity: .85; }
.cvx-pico-svg .rf { fill: #59626B; stroke: #2E343A; stroke-width: .8; transition: fill .2s; }
.cvx-pico-svg .rf[data-st="try"] { fill: #F2B33D; animation: rx-rf-blink 0.9s steps(2) infinite; }
.cvx-pico-svg .rf.wifi[data-st="on"] { fill: #2FA4FF; filter: drop-shadow(0 0 4px #2FA4FF); }
.cvx-pico-svg .rf.ble[data-st="on"] { fill: #7C6CFF; filter: drop-shadow(0 0 4px #7C6CFF); }
@keyframes rx-rf-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cvx-pico-svg .rf[data-st="try"] { animation: none; } }
/* Block Studio — Parallel wireless test, in-app panel (when pop-ups are blocked) */
.rx-pt-box { width: min(1180px, 96vw); height: min(840px, 92vh); display: flex; flex-direction: column; }
.rx-pt-box iframe { flex: 1; width: 100%; border: 0; border-radius: 0 0 10px 10px; background: var(--bg, #0F1216); }

/* 1.0 virtual phone docked beside the board (boards/phone-dock.js) — an original design */
.cvx-phone { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; overflow: auto; border-left: 1px solid var(--border, #ddd); background: var(--panel-2, #faf7f4); }
.cvx-phone[hidden] { display: none; }
.rxp-phone { position: relative; width: 272px; min-height: 520px; border-radius: 34px; padding: 26px 12px 26px; background: #20232a; box-shadow: 0 0 0 2px #3a3f4a, 0 10px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; }
.rxp-notch { position: absolute; top: 9px; left: 50%; width: 70px; height: 8px; margin-left: -35px; border-radius: 4px; background: #0e1014; }
.rxp-home { width: 90px; height: 4px; border-radius: 2px; background: #6b7280; margin: 10px auto 0; }
.rxp-status { display: flex; align-items: center; gap: 6px; color: #f3f4f6; font: 600 11px/1.4 Inter, system-ui, sans-serif; padding: 0 8px 4px; }
.rxp-grow { flex: 1; }
.rxp-ic { opacity: .35; } .rxp-ic.on { opacity: 1; color: #fb923c; }
.rxp-bars { display: inline-flex; align-items: flex-end; gap: 1px; } .rxp-bars i { width: 3px; background: #4b5563; border-radius: 1px; } .rxp-bars i.on { background: #f3f4f6; }
.rxp-apps { display: flex; gap: 2px; padding: 0 2px 6px; } .rxp-apps button { flex: 1; font: 600 10.5px Inter, system-ui, sans-serif; padding: 5px 0; border: 0; border-radius: 8px; background: #2f343e; color: #d1d5db; cursor: pointer; }
.rxp-apps button[aria-selected="true"] { background: #f97316; color: #fff; }
.rxp-screen { flex: 1; overflow: auto; border-radius: 14px; background: #fff; color: #1f2937; padding: 8px; font-size: 12px; max-height: 470px; }
.rxp-screen .rx-phone, .rxp-screen .rx-ph-screen { width: auto; padding: 0; border: 0; box-shadow: none; background: none; }
.rxp-card { border: 1px solid #f1e3d6; border-radius: 10px; padding: 6px 8px; margin-bottom: 6px; }
.rxp-kv { color: #6b7280; margin: 3px 0; } .rxp-note { color: #6b7280; margin: 4px 0; }
.rxp-adv { width: 100%; border-collapse: collapse; font-size: 11px; } .rxp-adv td { padding: 1px 3px; border-top: 1px solid #f3f4f6; }
.rxp-dev { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .rxp-dev span:first-child { font-weight: 600; min-width: 70px; }
.rxp-lamp { width: 14px; height: 14px; border-radius: 50%; background: #d1d5db; box-shadow: inset 0 0 0 1px #9ca3af; } .rxp-lamp.on { background: #fde047; box-shadow: 0 0 8px #facc15; }
.rxp-url { display: flex; gap: 4px; margin: 4px 0; } .rxp-url input { flex: 1; min-width: 0; }
.rxp-page { white-space: pre-wrap; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; margin: 4px 0; min-height: 40px; }
.rxp-links { display: flex; flex-wrap: wrap; gap: 4px; }
.rxp-log { max-height: 160px; overflow: auto; font: 11px ui-monospace, monospace; }
.rxp-cap { font-size: 11px; color: var(--muted, #6b7280); text-align: center; max-width: 272px; }
.cvx-btn[data-a="phone"].on { background: var(--accent-soft, #ffedd5); }