/*
 * myspice — base application styles
 * Foundation: layout, typography, colors, components.
 * Theme overrides live in themes.css; Style Studio chrome lives in studio.css.
 */

  :root {
    --ink: #111827;
    --muted: #6b7280;
    --bg: #ffffff;
    --panel: #f9fafb;
    --border: #e5e7eb;
    --dot: #d1d5db;
    --accent: #0d9488;
    --accent-soft: #ecfdf5;
    --accent-strong: #0f766e;
    --current: #047857;
    --plus: #b91c1c;
    --minus: #1e40af;
    --ghost: #94a3b8;
    --success: #16a34a;
    --success-soft: #f0fdf4;
    --success-border: #bbf7d0;
    --error-soft: #fef2f2;
    --error-border: #fecaca;
  }
  * { box-sizing: border-box; }
  *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink);
               font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif; }
  .serif-italic { font-family: Georgia, "Source Serif Pro", "Times New Roman", serif; font-style: italic; }

  .app { display: grid; grid-template-rows: 48px auto 1fr; height: 100vh; }
  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px; border-bottom: 1px solid var(--border); background: #fff;
  }
  header h1 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -.015em; display: inline-flex; align-items: center; gap: 8px; }
  header h1 .wordmark-mark { display: inline-block; vertical-align: middle; }
  header h1 .muted { color: var(--muted); font-weight: 400; margin-left: 4px; font-size: 12px; }
  header .actions { display: flex; gap: 8px; align-items: center; }
  header button {
    font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 6px;
    border: 1px solid var(--border); background: #fff; cursor: pointer;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
  }
  header button.primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
    padding: 7px 18px; font-weight: 600;
    box-shadow: 0 1px 2px rgba(13,148,136,.25);
    margin-left: 6px;
  }
  header button.primary:hover { background: var(--accent-strong); box-shadow: 0 2px 4px rgba(13,148,136,.32); }
  header button:hover:not(:disabled) { background: var(--panel); border-color: #cbd5e1; }
  header button:disabled { opacity: .5; cursor: not-allowed; }

  .status-pill {
    display: inline-flex; align-items: center;
    font-size: 12px; padding: 4px 10px; border-radius: 999px;
    margin-left: 6px;
    opacity: 0; transition: opacity 220ms ease-out;
    pointer-events: none; max-width: 280px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .status-pill.show { opacity: 1; }
  .status-pill.success { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
  .status-pill.error { background: var(--error-soft); color: var(--plus); border: 1px solid var(--error-border); }
  .status-pill.info { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--success-border); }

  .mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-right: 4px; }
  .mode-toggle .mode-btn {
    font: inherit; font-size: 12px; padding: 5px 12px;
    border: none; background: #fff; cursor: pointer; color: var(--ink);
    border-right: 1px solid var(--border);
  }
  .mode-toggle .mode-btn:last-child { border-right: none; }
  .mode-toggle .mode-btn.active { background: var(--ink); color: #fff; }
  .mode-toggle .mode-btn:not(.active):hover { background: var(--panel); }

  .time-scrubber {
    display: none; align-items: center; gap: 10px;
    padding: 8px 16px; border-top: 1px solid var(--border); background: var(--panel);
    font-size: 12px; color: var(--muted);
  }
  .time-scrubber.show { display: flex; }
  .time-scrubber input[type=range] {
    flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--border); border-radius: 2px; outline: none;
  }
  .time-scrubber input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--accent);
  }
  .time-scrubber input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--accent);
  }
  .time-scrubber .t-label { font-family: ui-monospace, Menlo, monospace; color: var(--ink); min-width: 90px; }
  .time-scrubber .t-max-label { color: var(--muted); font-family: ui-monospace, Menlo, monospace; min-width: 80px; text-align: right; }
  .time-scrubber .t-config { color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .time-scrubber .t-config input { width: 70px; font: inherit; font-size: 11px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; }

  .modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.32);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
  }
  .modal-overlay[hidden] { display: none; }
  .modal-card {
    background: #fff; border-radius: 10px;
    width: 720px; max-width: 92%; max-height: 84vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  }
  .modal-card header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
  }
  .modal-card header h2 { margin: 0; font-size: 15px; font-weight: 600; }
  .modal-card .close-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: 22px; color: var(--muted); padding: 0 4px; line-height: 1;
    border-radius: 4px;
  }
  .modal-card .close-btn:hover { color: var(--ink); }
  .modal-card .body { overflow-y: auto; padding: 8px 0; flex: 1; }
  .modal-card .search-bar {
    padding: 12px 20px 8px;
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: 1px solid var(--border); background: #fff;
  }
  .modal-card .search-bar input {
    width: 100%; font: inherit; font-size: 13px;
    padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
    transition: border-color 120ms;
  }
  .modal-card .search-bar input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .modal-card .filters { display: flex; gap: 6px; flex-wrap: wrap; }
  .filter-chip {
    font: inherit; font-size: 11px; line-height: 1;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: #fff;
    cursor: pointer; color: var(--muted);
    transition: background 100ms, color 100ms, border-color 100ms;
  }
  .filter-chip:hover:not(.active) { background: var(--panel); color: var(--ink); }
  .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .modal-card .group-label {
    padding: 12px 20px 6px; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); font-weight: 600;
  }
  .modal-card .problem {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
    align-items: baseline;
    padding: 10px 20px; cursor: pointer;
    border-left: 3px solid transparent;
  }
  .modal-card .problem:hover { background: var(--panel); border-left-color: var(--accent); }
  .modal-card .problem .p-title { font-size: 13px; font-weight: 500; color: var(--ink); }
  .modal-card .problem .p-source { font-size: 11px; color: var(--muted); }
  .modal-card .problem .p-mode {
    font-size: 10px; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted);
  }
  .modal-card .problem .p-mode.dc { color: #2563eb; border-color: #dbeafe; background: #eff6ff; }
  .modal-card .problem .p-mode.transient { color: #0d9488; border-color: #ccfbf1; background: #f0fdfa; }
  .modal-card .problem .p-mode.phasor { color: #9333ea; border-color: #f3e8ff; background: #faf5ff; }

  .problem-panel {
    margin-bottom: 12px; padding: 12px 14px;
    background: var(--accent-soft, #eff6ff); border-left: 3px solid var(--accent);
    border-radius: 4px; font-size: 12px; line-height: 1.5;
  }
  .problem-panel .p-meta { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
  .problem-panel .p-stmt { color: var(--ink); }
  .problem-panel .p-expected { margin-top: 6px; color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }

  .toolbar {
    display: flex; gap: 4px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--border); background: #fff;
    overflow-x: auto;
  }
  .tool-btn {
    display: flex; align-items: center; gap: 6px; padding: 6px 10px;
    border: 1px solid var(--border); background: #fff; border-radius: 5px;
    font: inherit; font-size: 12px; cursor: pointer; color: var(--ink);
    white-space: nowrap;
    transition: background 100ms, border-color 100ms, transform 80ms, color 100ms;
  }
  .tool-btn:hover:not(.active) {
    background: var(--accent-soft); border-color: var(--accent);
    transform: translateY(-0.5px);
  }
  .tool-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .tool-btn.icon-only { padding: 6px 8px; }
  .tool-btn.icon-only span { display: none; }
  .tool-btn svg { display: block; }
  .tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
  .tool-hint { margin-left: auto; font-size: 11px; color: var(--muted); }
  .tool-hint kbd + kbd { margin-left: 2px; }

  .main { display: grid; grid-template-columns: 1fr var(--results-panel-width, 320px); overflow: hidden; min-height: 0; }
  .canvas-wrap {
    display: flex; flex-direction: column;
    padding: 0; overflow: hidden; background: var(--bg);
    min-width: 0; min-height: 0;
  }
  .canvas-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-bottom: 1px solid var(--border);
    background: var(--chrome-bg, #fff); font-size: 11px; color: var(--muted);
    flex-shrink: 0;
  }
  .canvas-tool {
    font: inherit; font-size: 11px; padding: 3px 8px;
    border: 1px solid var(--border); background: var(--chrome-bg, #fff);
    color: var(--ink); cursor: pointer; border-radius: 4px;
    min-width: 26px; line-height: 1.4;
    transition: background 100ms, border-color 100ms;
  }
  .canvas-tool:hover { background: var(--panel); border-color: var(--accent); }
  .canvas-tool-zoom { font-family: var(--font-mono, ui-monospace, monospace);
    min-width: 50px; text-align: center; color: var(--ink); font-size: 11px; }
  .canvas-toolbar-hint { margin-left: auto; font-size: 10.5px; opacity: 0.75; }
  .canvas-frame {
    flex: 1; min-height: 0; overflow: hidden;
    background: var(--bg); position: relative;
    cursor: crosshair;
    background-image: var(--canvas-bg-image);
    background-size: var(--canvas-bg-size);
  }
  .canvas-frame.panning { cursor: grabbing; }
  .canvas-frame.can-pan { cursor: grab; }
  svg#canvas {
    display: block; background: transparent;
    border: none; width: 100%; height: 100%;
    cursor: inherit;
    user-select: none;
  }
  svg#canvas.select-mode { cursor: default; }
  /* Resize handle on left edge of Results panel */
  .panel-resize-handle {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 5;
    transition: background 120ms;
  }
  .panel-resize-handle:hover, .panel-resize-handle.dragging {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .panel { position: relative; }

  /* ==========================================================
   * Oscilloscope panel — sits between canvas-toolbar and SVG frame
   * ========================================================== */
  .scope-shell {
    border-bottom: 1px solid var(--border);
    background: var(--panel, #f9fafb);
    max-height: 220px; overflow: hidden;
    transition: max-height 220ms cubic-bezier(.2,.7,.2,1);
    flex-shrink: 0;
  }
  .scope-shell.collapsed { max-height: 28px; }
  .scope-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 10px; font-size: 10.5px;
    border-bottom: 1px solid var(--border); background: var(--chrome-bg, #fff);
  }
  .scope-title {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700; letter-spacing: 0.12em; color: var(--ink);
  }
  .scope-tools { display: flex; gap: 4px; flex-wrap: nowrap; }
  .scope-tools .canvas-tool { white-space: nowrap; padding: 3px 10px; }
  .canvas-tool.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .scope-body { padding: 10px 12px; }
  .scope-empty { color: var(--muted); font-size: 11.5px; padding: 4px 0; font-style: italic; }
  .scope-dc {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .scope-card {
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    padding: 6px 10px; min-width: 130px;
    background: var(--canvas-bg, #fff); border-radius: 4px;
  }
  .scope-card-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px;
  }
  .scope-card-label { font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700; }
  .scope-card-where { font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--muted); font-size: 9.5px; flex: 1; }
  .scope-card-x {
    border: none; background: transparent; cursor: pointer;
    color: var(--muted); font-size: 14px; line-height: 1; padding: 0 4px;
  }
  .scope-card-x:hover { color: var(--plus, #b91c1c); }
  .scope-card-value {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 16px; font-weight: 500; color: var(--ink);
    margin-top: 2px;
  }
  .scope-card-phase { font-size: 11px; color: var(--muted); margin-left: 4px; }
  .scope-plot {
    background: var(--canvas-bg, #fff);
    border: 1px solid var(--border); border-radius: 4px;
    padding: 6px;
  }
  .scope-plot canvas { display: block; width: 100%; height: 140px; }
  .scope-plot-legend {
    display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 2px 0;
    font-size: 10.5px; color: var(--muted);
  }
  .scope-leg-item { display: inline-flex; align-items: center; gap: 4px; }
  .scope-leg-swatch { width: 12px; height: 3px; border-radius: 1px; }

  .panel {
    border-left: 1px solid var(--border); background: var(--panel);
    padding: 14px 16px; overflow-y: auto; font-size: 12px;
  }
  .panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
              color: var(--muted); margin: 0 0 10px; font-weight: 600; }
  .panel table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .panel th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 6px;
              border-bottom: 1px solid var(--border); }
  .panel th.num { text-align: right; padding-right: 8px; }
  .panel td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .panel td.num { font-family: ui-monospace, "SF Mono", Menlo, monospace; text-align: right; padding-right: 8px;
                  font-variant-numeric: tabular-nums; }
  .panel tr.hl td { background: rgba(13, 148, 136, .08); }
  .panel .summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  }
  .panel .summary .metric { display: flex; flex-direction: column; gap: 1px; }
  .panel .summary .k {
    font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); font-weight: 600;
  }
  .panel .summary .v {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px; color: var(--ink); font-weight: 500;
  }
  .panel .empty { color: var(--muted); font-style: italic; padding: 10px 4px; }
  .canvas-empty-hint {
    font-size: 14px; fill: var(--muted); font-style: italic;
    pointer-events: none; text-anchor: middle;
  }
  .canvas-empty-hint-sub { font-size: 11px; fill: var(--muted); pointer-events: none; text-anchor: middle; opacity: .65; }

  /* Side panel view tabs */
  .view-tabs {
    display: inline-flex; border: 1px solid var(--border); border-radius: 5px;
    margin-bottom: 12px; overflow: hidden;
  }
  .view-tabs .tab {
    font: inherit; font-size: 11px; padding: 4px 10px;
    border: none; background: #fff; cursor: pointer; color: var(--muted);
    border-right: 1px solid var(--border);
  }
  .view-tabs .tab:last-child { border-right: none; }
  .view-tabs .tab.active { background: var(--ink); color: #fff; }
  .view-tabs .tab:not(.active):hover { background: var(--panel); color: var(--ink); }

  /* Energy bars (transient C/L) */
  .energy-bars { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
  .energy-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
  .energy-bar-label { color: var(--muted); min-width: 56px; }
  .energy-bar-track {
    flex: 1; height: 8px; border-radius: 4px;
    background: var(--border); overflow: hidden; position: relative;
  }
  .energy-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--accent), #14b8a6);
    border-radius: 4px; transition: width 180ms ease-out;
  }
  .energy-bar-fill.l { background: linear-gradient(90deg, var(--minus), #3b82f6); }
  .energy-bar-value { font-family: ui-monospace, Menlo, monospace; min-width: 64px; text-align: right; color: var(--ink); }

  /* Plot canvas (V(t) / I(t) graphs) */
  .plot-section { margin-top: 6px; }
  .plot-section h3 {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); margin: 12px 0 4px; font-weight: 600;
  }
  .plot-canvas { display: block; background: #fff; border: 1px solid var(--border); border-radius: 4px; width: 100%; }
  .plot-legend { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 2px; font-size: 10px; }
  .plot-legend .lg-item { display: inline-flex; align-items: center; gap: 4px; }
  .plot-legend .lg-swatch { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }

  /* Phasor diagram canvas */
  .phasor-section { margin-top: 6px; }
  .phasor-canvas {
    display: block; background: #fff; border: 1px solid var(--border); border-radius: 4px;
    width: 100%;
  }
  .phasor-controls { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 11px; color: var(--muted); }
  .phasor-controls button, .phasor-controls .ph-btn {
    font: inherit; font-size: 11px; padding: 3px 8px;
    border: 1px solid var(--border); background: var(--chrome-bg, #fff);
    color: var(--ink); cursor: pointer; border-radius: 4px;
  }
  .phasor-controls button:hover { border-color: var(--accent); }
  /* Per-phasor visibility legend */
  .phasor-legend {
    margin: 6px 0 10px; border: 1px solid var(--border); border-radius: 4px;
    background: var(--canvas-bg, #fff); overflow: hidden;
  }
  .phasor-legend-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: var(--panel-bg, var(--panel)); border-bottom: 1px solid var(--border);
  }
  .phasor-legend-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 600;
  }
  .phasor-legend-actions { display: flex; gap: 4px; }
  .ph-link {
    font: inherit; font-size: 10.5px; border: none; background: transparent;
    color: var(--accent); cursor: pointer; padding: 2px 6px;
    border-radius: 3px; font-weight: 500;
  }
  .ph-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .phasor-legend-row {
    display: grid; grid-template-columns: 18px 12px 1fr auto;
    align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer;
    font-size: 11.5px; user-select: none;
    border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  }
  .phasor-legend-row:first-of-type { border-top: none; }
  .phasor-legend-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
  .phasor-legend-row input[type="checkbox"] {
    margin: 0; accent-color: var(--accent); cursor: pointer;
  }
  .phasor-swatch {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  }
  .phasor-tag {
    font-family: var(--font-label, Georgia, serif);
    font-style: var(--font-label-style, italic);
    font-weight: 600;
  }
  .phasor-val {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px; color: var(--muted); white-space: nowrap;
  }
  .phasor-phase { color: color-mix(in srgb, var(--muted) 80%, var(--ink) 20%); }
  .phasor-empty { padding: 10px; color: var(--muted); font-style: italic; font-size: 11px; }
  /* Greyed-out state: disabled checkbox label */
  .phasor-legend-row input[type="checkbox"]:not(:checked) ~ .phasor-tag,
  .phasor-legend-row input[type="checkbox"]:not(:checked) ~ .phasor-val {
    opacity: 0.45;
  }

  /* ============================================================
   * Plot legend (V(t) / I(t) trace toggles)
   * ============================================================ */
  .plot-legend-wrap {
    margin: 4px 0 12px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--canvas-bg, #fff); overflow: hidden;
  }
  .plot-legend-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 10px; background: var(--panel-bg, var(--panel));
    border-bottom: 1px solid var(--border);
  }
  .plot-legend-title {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 600;
  }
  .plot-legend-actions { display: flex; gap: 4px; }
  .plot-legend {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    padding: 6px 10px;
  }
  .plot-leg-row {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; cursor: pointer; user-select: none;
  }
  .plot-leg-row input[type="checkbox"] {
    margin: 0; accent-color: var(--accent); cursor: pointer;
  }
  .plot-leg-row .lg-swatch {
    width: 12px; height: 3px; border-radius: 1px; flex-shrink: 0;
  }
  .plot-leg-row .lg-label {
    font-family: var(--font-label, Georgia, serif);
    font-style: var(--font-label-style, italic);
    color: var(--ink);
  }
  .plot-leg-row input[type="checkbox"]:not(:checked) ~ .lg-label,
  .plot-leg-row input[type="checkbox"]:not(:checked) ~ .lg-swatch {
    opacity: 0.4;
  }
  .phasor-controls { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 6px; }
  .phasor-controls button {
    font: inherit; font-size: 11px; padding: 3px 8px; border-radius: 4px;
    border: 1px solid var(--border); background: #fff; cursor: pointer;
  }

  /* Popup slider */
  .popup .slider-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .popup .slider-row input[type=range] {
    flex: 1; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--border); border-radius: 2px; outline: none;
  }
  .popup .slider-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    border-radius: 50%; background: var(--accent); cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent);
  }
  .popup .slider-row input[type=range]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid #fff;
  }
  .popup .slider-value { font-family: ui-monospace, Menlo, monospace; font-size: 11px; min-width: 60px; text-align: right; color: var(--muted); }
  .popup .slider-help { font-size: 10px; color: var(--muted); margin-top: 4px; font-style: italic; }

  /* Popup editor */
  .popup {
    position: absolute; background: #fff; border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 10px 12px; min-width: 180px; z-index: 100;
  }
  .popup[hidden] { display: none; }
  .popup .label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
  .popup input {
    width: 100%; font: inherit; font-size: 13px;
    padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px;
  }
  .popup input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
  .popup .row { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
  .popup button {
    font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--border); background: #fff; cursor: pointer;
  }
  .popup button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* SVG component classes */
  .ink { stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ink-fill { fill: var(--ink); }
  .wire { stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .wire-hit { stroke: transparent; fill: none; stroke-width: 10; cursor: pointer; }
  .ghost { stroke: var(--ghost); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
           opacity: .8; pointer-events: none; }
  .ghost-fill { fill: var(--ghost); }
  .label-comp { font-family: Georgia, "Source Serif Pro", serif; font-style: italic; font-size: 11px; fill: var(--ink); }
  .label-current { font-family: Georgia, "Source Serif Pro", serif; font-style: italic; font-size: 11px; fill: var(--current); }
  .label-node { font-family: Georgia, "Source Serif Pro", serif; font-style: italic; font-size: 10px; fill: var(--accent); }
  .label-plus { font-size: 10px; font-weight: 700; fill: var(--plus); }
  .label-minus { font-size: 10px; font-weight: 700; fill: var(--minus); }
  .current-arrow { stroke: var(--current); fill: none; stroke-width: 1.5; }
  .current-arrow-fill { fill: var(--current); }
  .selection { stroke: var(--accent); fill: rgba(13, 148, 136, .06); stroke-width: 1.5; stroke-dasharray: 3 3; }
  .grid-dot { fill: var(--dot); }
  .grid-line { stroke: var(--dot); stroke-width: 0.5; opacity: 0.7; fill: none; }
  .grid-cross { stroke: var(--dot); stroke-width: 0.9; opacity: 0.9; }
  .terminal-dot { fill: var(--ink); }
  .junction-dot { fill: var(--ink); }
  .meter-dial { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
  .meter-letter { font-family: Georgia, serif; font-size: 11px; font-style: italic; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
  .ground-symbol { stroke: var(--ink); stroke-width: 1.8; fill: none; }

  .footer-hint { padding: 6px 18px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); background: #fff; }
  kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px;
        padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px;
        background: var(--panel); color: var(--ink); }

  /* Crisp text rendering for labels at small sizes */
  text { text-rendering: optimizeLegibility; }

  /* Responsive layout — stack panel below canvas on narrow screens */
  @media (max-width: 880px) {
    .main { grid-template-columns: 1fr; }
    .panel { border-left: none; border-top: 1px solid var(--border); max-height: 50vh; padding: 12px 14px; }
    .canvas-wrap { padding: 12px; }
    svg#canvas { width: 100%; height: auto; max-width: 600px; }
    header { padding: 0 12px; flex-wrap: wrap; gap: 6px; height: auto; min-height: 48px; }
    header h1 { font-size: 13px; }
    header h1 .muted { display: none; }
    .modal-card { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  }
  @media (max-width: 600px) {
    .modal-card .problem { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
    .modal-card .problem > div { margin-bottom: 2px; }
  }

  /* Touch-friendly hit areas on coarse pointers (phones/tablets) */
  @media (pointer: coarse) {
    .tool-btn { padding: 10px 12px; min-height: 44px; }
    .tool-btn.icon-only { padding: 10px 10px; }
    header button { padding: 10px 16px; min-height: 44px; font-size: 13px; }
    header button.primary { padding: 10px 20px; }
    .mode-toggle .mode-btn { padding: 10px 14px; min-height: 44px; font-size: 13px; }
    .filter-chip { padding: 8px 14px; min-height: 36px; font-size: 12px; }
    .time-scrubber input { min-height: 40px; font-size: 16px; }
    .popup input { min-height: 40px; font-size: 16px; }
    .popup button { padding: 10px 16px; min-height: 40px; }
    .modal-card .problem { padding: 14px 20px; }
    .modal-card .close-btn { padding: 6px 12px; font-size: 26px; }
  }

  /* Print-friendly */
  @media print {
    header, .toolbar, .footer-hint, .time-scrubber, .popup, .modal-overlay { display: none !important; }
    .main { grid-template-columns: 1fr; }
    .panel { border: none; background: #fff; }
  }