/* ============================================================
     VISUALIZER SCREEN
     ============================================================ */
  .controls {
    margin: 0 var(--pad-x);
    padding: 12px 14px;
    background: var(--panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  }
  .controls-primary, .controls-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .controls-primary  { flex: 0 0 auto; }
  .controls-secondary { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .mobile-only { display: none; }
  .controls button, .controls input[type="text"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15,23,42,0.7);
    color: var(--text);
    border: 1px solid var(--panel-border);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    min-height: 40px;
    transition: transform 0.15s var(--spring), border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  /* General button hover - explicitly skip .primary so we don't tint its
     dark text the same blue as its own background. */
  .controls button:hover:not(:disabled):not(.primary) {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(56,189,248,0.18);
  }
  .controls button:active:not(:disabled) { transform: translateY(0) scale(0.97); }
  .controls button:disabled { opacity: 0.35; cursor: not-allowed; }
  #btn-reset span { font-size: 24px; line-height: 0; }
  .controls button.primary {
    background: linear-gradient(180deg, #7dd3fc, #38bdf8);
    color: #0a0e1a;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(56,189,248,0.35);
  }
  .controls button.primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #93dffd, #38bdf8);
    color: #0a0e1a;     /* keep dark text on the light-blue gradient */
    box-shadow: 0 8px 22px rgba(56,189,248,0.45);
    transform: translateY(-1px);
  }
  .controls input[type="text"] {
    cursor: text;
    width: 220px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex: 1 1 200px;
    min-width: 140px;
  }
  .controls input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
  }
  .controls .group-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    margin-right: 2px;
  }
  .divider { width: 1px; height: 22px; background: var(--panel-border); margin: 0 4px; }

  .speed-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px;
    background: rgba(15,23,42,0.7);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    min-height: 40px;
    margin-left: 12px;
  }

  /* Per-algorithm parameter inputs (target, k, etc.) */
  .params-extra {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }
  .params-extra[hidden] { display: none; }
  .param-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    background: rgba(217,119,6,0.10);
    border: 1px solid rgba(251,191,36,0.28);
    border-radius: 10px;
    min-height: 40px;
  }
  .param-field label {
    color: #fde68a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
  }
  .param-field input {
    background: rgba(10,14,26,0.7);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    min-height: 30px;
    width: 80px;
  }
  .param-field.wide input { width: 140px; }
  .param-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(56,189,248,0.18);
  }
  .speed-wrap label { color: var(--muted); font-size: 12px; font-weight: 500; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    background: transparent;
    width: 260px;
    cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
  }
  input[type="range"]::-moz-range-track {
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
  }
  input[type="range"]::-moz-range-progress {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 99px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    margin-top: -7px;
    box-shadow: 0 2px 8px rgba(56,189,248,0.5);
  }
  input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 2px 8px rgba(56,189,248,0.5);
  }

  .legend {
    margin: 12px var(--pad-x) 0;
    padding: 8px 14px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
  }
  .legend .item { display: flex; align-items: center; gap: 6px; }
  .legend .swatch {
    width: 13px; height: 13px; border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  }

  /* Workspace = main + code panel */
  .workspace {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
  }
  main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 12px var(--pad-x) max(20px, env(safe-area-inset-bottom));
    gap: 12px;
    min-height: 0;
    min-width: 0;
  }
  .canvas {
    flex: 1;
    background: var(--panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 16px 12px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.32);
  }
  .progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    z-index: 2;
    border-radius: 16px 16px 0 0;
  }
  /* Floating call-stack panel for recursive algorithms (quicksort,
     mergesort, segment-tree etc). Sits in the canvas top-right. */
  .cv-call-stack-panel {
    position: absolute;
    top: 56px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: rgba(10,14,26,0.92);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    width: max-content;
    max-width: 240px;
    max-height: calc(100% - 80px);
    overflow-y: auto;
    pointer-events: auto;
  }
  .cv-cs-title {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 4px;
  }
  .cv-cs-depth {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .cv-cs-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .cv-cs-item {
    position: relative;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(148,163,184,0.18);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text);
    white-space: nowrap;
    animation: tsPush 0.32s var(--spring);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .cv-cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cv-cs-item.cv-cs-top {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    border-color: var(--compare-top);
    color: white;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 0 12px rgba(248,113,113,0.45);
  }
  .cv-cs-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
  }
  .cv-cs-tag-top {
    background: rgba(255,255,255,0.18);
    color: white;
  }
  .cv-cs-tag-root {
    background: rgba(56,189,248,0.20);
    color: var(--accent);
    border: 1px solid rgba(56,189,248,0.30);
  }

  /* Floating zoom controls inside the canvas */
  .zoom-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(15,23,42,0.7);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 4px;
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }
  .zoom-btn {
    background: transparent;
    border: none;
    color: var(--text);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.15s var(--spring);
  }
  .zoom-btn:hover { background: rgba(56,189,248,0.12); color: var(--accent); }
  .zoom-btn:active { transform: scale(0.92); }
  .zoom-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .zoom-btn:disabled:hover { background: transparent; color: var(--text); }
  .zoom-level {
    min-width: 42px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 0 4px;
    user-select: none;
  }
  .zoom-divider {
    width: 1px;
    height: 18px;
    background: var(--panel-border);
    margin: 0 2px;
  }
  .progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.35s var(--ease);
    box-shadow: 0 0 12px var(--accent);
    width: 0%;
    will-change: width;
  }
  .canvas-inner {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    min-height: 0;
    touch-action: pan-x pan-y;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  .stage {
    position: relative;
    padding-bottom: 34px;
    margin: 0 auto;
    flex-shrink: 0;
  }
  .stage.center-content {
    margin: auto;
    padding-bottom: 0;
  }

  /* ---------- Bars ---------- */
  .bar-wrap {
    position: absolute;
    bottom: 34px;
    left: 0;
    width: var(--slot-w);
    transition: transform 0.45s var(--spring), opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: calc(100% - 34px);
  }
  /* Bars not yet "in" the data structure (e.g. value pending a push/enqueue
     before the user clicks Play) - start invisible, fade in on first action. */
  .bar-wrap.invisible {
    opacity: 0;
    pointer-events: none;
  }
  .slot-index {
    position: absolute;
    bottom: 6px;
    left: 0;
    width: var(--slot-w);
    text-align: center;
    color: var(--muted);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 0;
    border-radius: 8px;
    transition: color 0.25s, background 0.25s, box-shadow 0.25s, font-weight 0.25s;
  }
  .slot-index.in-sorted {
    color: #bbf7d0;
    background: rgba(74,222,128,0.12);
    box-shadow: inset 0 0 0 1px rgba(74,222,128,0.2);
  }
  .slot-index.active-j {
    color: #1a0606;
    background: linear-gradient(180deg, #fca5a5, var(--pointer-j));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 1px rgba(248,113,113,0.4), 0 4px 12px var(--pointer-j-glow);
    font-weight: 700;
  }
  .slot-index.active-i {
    color: #1a1206;
    background: linear-gradient(180deg, #fcd34d, var(--pointer-i));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1px rgba(251,191,36,0.4), 0 4px 12px var(--pointer-i-glow);
    font-weight: 700;
  }
  .slot-index.active-i.active-j {
    background: linear-gradient(90deg, var(--pointer-j) 0%, var(--pointer-j) 50%, var(--pointer-i) 50%, var(--pointer-i) 100%);
    color: #1a0a06;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1px rgba(255,255,255,0.2), 0 4px 14px rgba(248,113,113,0.45);
  }

  .bar {
    position: relative;
    width: 100%;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, var(--bar-grad-top), var(--bar-grad-bot));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -2px 0 rgba(0,0,0,0.25),
      0 4px 14px rgba(0,0,0,0.35);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--spring);
    color: white;
    font-weight: 700;
    font-size: clamp(11px, 3.4vw, 15px);
    text-align: center;
    padding-top: 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    letter-spacing: 0.02em;
  }
  .bar::before {
    content: "";
    position: absolute;
    top: 4px; left: 6px; right: 6px;
    height: 30%;
    border-radius: 8px 8px 50% 50% / 8px 8px 100% 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    pointer-events: none;
  }
  .bar.sorted {
    background: linear-gradient(180deg, var(--sorted-top), var(--sorted-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.2), 0 4px 18px rgba(34,197,94,0.35);
  }
  .bar.key {
    background: linear-gradient(180deg, var(--key-top), var(--key-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 2px rgba(251,191,36,0.25), 0 0 28px rgba(251,191,36,0.65), 0 8px 22px rgba(217,119,6,0.4);
    animation: keyPulse 1.4s ease-in-out infinite;
  }
  @keyframes keyPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
  .bar.compare {
    background: linear-gradient(180deg, var(--compare-top), var(--compare-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 2px rgba(248,113,113,0.25), 0 0 22px rgba(248,113,113,0.55), 0 6px 18px rgba(185,28,28,0.4);
    transform: translateY(2px);
  }
  .bar.shift, .bar.swap {
    background: linear-gradient(180deg, var(--shift-top), var(--shift-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 2px rgba(167,139,250,0.25), 0 0 22px rgba(167,139,250,0.55), 0 6px 18px rgba(109,40,217,0.4);
  }
  .bar.pivot {
    background: linear-gradient(180deg, var(--pivot-top), var(--pivot-bot));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 2px rgba(103,232,249,0.3), 0 0 26px rgba(103,232,249,0.6), 0 8px 22px rgba(8,145,178,0.45);
    animation: pivotPulse 1.6s ease-in-out infinite;
  }
  @keyframes pivotPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
  .bar.lifted { transform: translateY(-26px); }
  .bar.inserted { animation: insertBounce 0.55s var(--spring); }
  @keyframes insertBounce {
    0% { transform: translateY(-22px) scaleY(0.95); }
    60% { transform: translateY(4px) scaleY(1.04); }
    100% { transform: translateY(0) scaleY(1); }
  }

  /* ---------- Pointers ---------- */
  .pointer {
    position: absolute;
    left: 0;
    width: var(--slot-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.45s var(--spring), opacity 0.25s ease;
    pointer-events: none;
    will-change: transform;
    --pin-color: var(--pointer-i);
    --pin-color-2: #fcd34d;
    --pin-glow: var(--pointer-i-glow);
    --pin-text: #1a1206;
  }
  .pointer.at-start {
    align-items: flex-start;
  }
  .pointer.j {
    --pin-color: var(--pointer-j);
    --pin-color-2: #fca5a5;
    --pin-glow: var(--pointer-j-glow);
    --pin-text: #1a0606;
  }
  .pointer.i { top: var(--ptr-top-i, -58px); }
  .pointer.j { top: var(--ptr-top-j, -28px); }

  .pointer .badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 4px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--pin-text);
    background: linear-gradient(180deg, var(--pin-color-2), var(--pin-color));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(255,255,255,0.08), 0 6px 16px var(--pin-glow);
    flex: 0 0 auto;
  }
  .pointer .badge .letter {
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    color: rgba(255,255,255,0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  }
  .pointer .badge .num { font-size: 13px; letter-spacing: 0.04em; padding-right: 1px; }
  .pointer .badge::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--pin-color);
    filter: drop-shadow(0 2px 4px var(--pin-glow));
  }
  .pointer.i .badge { animation: pinPulse 2s ease-in-out infinite; }
  @keyframes pinPulse {
    0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 1px rgba(255,255,255,0.08), 0 6px 16px var(--pin-glow); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 0 1px rgba(255,255,255,0.18), 0 0 22px var(--pin-glow), 0 8px 22px var(--pin-glow); }
  }
  .pointer.hidden { opacity: 0; }

  .sorted-strip {
    position: absolute;
    bottom: 28px;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--sorted-top), var(--sorted-bot));
    box-shadow: 0 0 14px rgba(74,222,128,0.6);
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.25s;
    left: 0;
    opacity: 0;
  }

  /* ---------- Status panel ---------- */
  .status {
    background: var(--panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 70px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  }
  .status-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .status-meta .narration-toggle-btn {
    background: none; border: none; color: var(--accent); font-size: 12px;
    cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0.7; transition: opacity 0.2s; margin-left: auto;
  }
  .status-meta .narration-toggle-btn:hover { opacity: 1; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.25);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.03em;
  }
  .chip.i { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); color: #fcd34d; }
  .chip.j { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); color: #fca5a5; }
  .chip.key { background: rgba(217,119,6,0.15); border-color: rgba(251,191,36,0.35); color: #fde68a; }
  .chip.pivot { background: rgba(8,145,178,0.18); border-color: rgba(103,232,249,0.35); color: #a5f3fc; }
  .chip.metric { background: rgba(34,197,94,0.15); border-color: rgba(74,222,128,0.4); color: #86efac; }
  .chip.sum    { background: rgba(167,139,250,0.15); border-color: rgba(167,139,250,0.4); color: #c4b5fd; }
  .step-text { color: var(--text); font-size: 13.5px; line-height: 1.45; }

  /* ---------- Code panel ---------- */
  .code-panel {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(15,23,42,0.85), rgba(10,14,26,0.9));
    border-left: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.32s var(--ease), width 0.32s var(--ease);
  }
  .code-open .code-panel {
    flex-basis: min(460px, 45vw);
    width: min(460px, 45vw);
  }
  .code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
    gap: 8px;
    background: rgba(10,14,26,0.5);
  }
  .code-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .code-tabs::-webkit-scrollbar { display: none; }
  .code-tab {
    background: transparent;
    color: var(--muted);
    border: 1px solid transparent;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s var(--spring);
    min-height: 32px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .code-tab:hover { color: var(--text); background: rgba(56,189,248,0.06); }
  .code-tab:active { transform: scale(0.96); }
  .code-tab.active {
    color: var(--accent);
    background: rgba(56,189,248,0.12);
    border-color: rgba(56,189,248,0.3);
  }
  .code-close {
    background: rgba(15,23,42,0.6);
    color: var(--muted);
    border: 1px solid var(--panel-border);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, transform 0.15s var(--spring);
  }
  .code-close:hover { color: var(--text); border-color: var(--accent); }
  .code-close:active { transform: scale(0.92); }
  .code-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
  .code-pre {
    margin: 0;
    padding: 12px 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.6;
    background: transparent !important;
    color: #e8eef9;
    tab-size: 4;
  }
  .code-pre code { background: transparent !important; display: block; padding: 0 !important; }
  .code-line {
    display: flex;
    align-items: flex-start;
    padding: 1px 14px 1px 6px;
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: pre;
  }
  .code-line.active-line {
    background: rgba(56,189,248,0.12);
    border-left-color: var(--accent);
  }
  .code-line .ln {
    color: rgba(148,163,184,0.45);
    font-size: 11px;
    width: 30px;
    flex-shrink: 0;
    text-align: right;
    padding-right: 12px;
    user-select: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    line-height: 1.6;
  }
  .code-line.active-line .ln { color: var(--accent); font-weight: 700; }
  .code-line .lc { flex: 1; white-space: pre; min-width: 0; }
  #btn-code.active { border-color: var(--accent); color: var(--accent); background: rgba(56,189,248,0.08); }