/* Auto-generated from experimental/panel-header-variants.html */

/* V1 — Oryginał: lewy pasek + paski po skosie */
#app[data-ph-style="v1"] .panel-header {
      border-left: 3px solid var(--accent);
      background-color: var(--panel-bg);
      background-image: repeating-linear-gradient(
        -45deg,
        var(--stripe) 0px,
        var(--stripe) 2px,
        transparent 2px,
        transparent 10px
      );
      color: var(--text-mid);
      font-weight: 700;
    }
    #app[data-ph-style="v1"] .panel-header > span { color: var(--text-mid); }

/* V2 — Lewy pasek, tytuł do lewej */
#app[data-ph-style="v2"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      border-left: 3px solid var(--accent);
      background: var(--panel-bg);
    }

/* V3 — Aktualny: gradient + podkreślenie */
#app[data-ph-style="v3"] .panel-header {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--panel-bg) 55%, #000) 0%,
        var(--panel-bg) 100%
      );
    }
    #app[data-ph-style="v3"] .panel-header > span {
      padding-bottom: 5px;
    }
    #app[data-ph-style="v3"] .panel-header > span::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
      box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
    }

/* V4 — Minimal: płaskie tło */
#app[data-ph-style="v4"] .panel-header {
      background: var(--panel-bg);
      font-weight: 500;
      letter-spacing: 0.05em;
      color: var(--text-mid);
    }
    #app[data-ph-style="v4"] .panel-header > span { color: var(--text-mid); }

/* V5 — Zakładka: tytuł na tle akcentu */
#app[data-ph-style="v5"] .panel-header {
      background: var(--panel-bg);
    }
    #app[data-ph-style="v5"] .panel-header > span {
      background: color-mix(in srgb, var(--accent) 22%, transparent);
      color: var(--accent);
      padding: 3px 12px;
      border-radius: 3px 3px 0 0;
      border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
      border-bottom: none;
      margin-bottom: -1px;
    }

/* V6 — Kapsuła wyśrodkowana */
#app[data-ph-style="v6"] .panel-header {
      background: var(--panel-bg);
    }
    #app[data-ph-style="v6"] .panel-header > span {
      padding: 2px 14px;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 10px;
      letter-spacing: 0.1em;
    }

/* V7 — Pasek akcentu u góry + paski po skosie */
#app[data-ph-style="v7"] .panel-header {
      border-top: 3px solid var(--accent);
      background-color: var(--panel-bg);
      background-image: repeating-linear-gradient(
        -45deg,
        var(--stripe) 0px,
        var(--stripe) 2px,
        transparent 2px,
        transparent 10px
      );
    }

/* V8 — Mono, tytuł do lewej, linie poziome */
#app[data-ph-style="v8"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      font-family: Consolas, "Cascadia Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      background-color: #161616;
      background-image: repeating-linear-gradient(
        0deg,
        transparent 0 3px,
        rgba(255, 255, 255, 0.025) 3px 4px
      );
      border-bottom: 2px solid #2a2a2a;
    }

/* V9 — Ozdobny: szewron + kropka LED (stary „bogaty” styl) */
#app[data-ph-style="v9"] .panel-header {
      height: 30px;
      background-color: #181818;
      background-image:
        linear-gradient(180deg, rgba(255, 204, 0, 0.08) 0%, transparent 50%),
        repeating-linear-gradient(
          -45deg,
          rgba(255, 204, 0, 0.14) 0px,
          rgba(255, 204, 0, 0.14) 2px,
          transparent 2px,
          transparent 9px
        );
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.32);
      border-bottom: 1px solid #3a3a3a;
      font-weight: 700;
    }
    #app[data-ph-style="v9"] .panel-header::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid var(--accent);
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      opacity: 0.7;
    }
    #app[data-ph-style="v9"] .panel-header > span {
      gap: 7px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    #app[data-ph-style="v9"] .panel-header > span::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 5px var(--accent);
      flex-shrink: 0;
    }

/* V10 — Podwójna linia: cienka ramka wokół nagłówka */
#app[data-ph-style="v10"] .panel-header {
      margin: 6px 8px 8px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: color-mix(in srgb, var(--panel-bg) 90%, #000);
    }
    .variant-card #app[data-ph-style="v10"] .panel-header-wrap { padding-bottom: 2px; }

/* V11 — Prawy pasek, tytuł do prawej */
#app[data-ph-style="v11"] .panel-header {
      justify-content: flex-end;
      padding-right: 14px;
      border-right: 3px solid var(--accent);
      background: var(--panel-bg);
    }

/* V12 — Linie boczne przy tytule */
#app[data-ph-style="v12"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v12"] .panel-header > span::before,
    #app[data-ph-style="v12"] .panel-header > span::after {
      content: '';
      width: 18px;
      height: 1px;
      background: var(--border);
      flex-shrink: 0;
    }
    #app[data-ph-style="v12"] .panel-header > span { gap: 10px; color: var(--accent); }

/* V13 — Podwójna ramka góra/dół */
#app[data-ph-style="v13"] .panel-header {
      border-top: 1px solid var(--border);
      border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
      background: linear-gradient(180deg, #1e1e1e 0%, var(--panel-bg) 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

/* V14 — Nawiasy techniczne */
#app[data-ph-style="v14"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      background: #181818;
      font-family: Consolas, monospace;
      font-size: 10px;
      letter-spacing: 0.12em;
    }
    #app[data-ph-style="v14"] .panel-header > span { color: var(--accent); }
    #app[data-ph-style="v14"] .panel-header > span::before { content: '[ '; color: var(--text-mid); }
    #app[data-ph-style="v14"] .panel-header > span::after  { content: ' ]'; color: var(--text-mid); }

/* V15 — Notch: wcięcie u góry */
#app[data-ph-style="v15"] .panel-header {
      background: var(--panel-bg);
      border-bottom: none;
    }
    #app[data-ph-style="v15"] .panel-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 72px;
      height: 3px;
      background: var(--accent);
      border-radius: 0 0 3px 3px;
    }
    #app[data-ph-style="v15"] .panel-header > span {
      margin-top: 4px;
      font-size: 10px;
      letter-spacing: 0.12em;
    }

/* V16 — Plamka światła za tytułem */
#app[data-ph-style="v16"] .panel-header {
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border);
    }
    #app[data-ph-style="v16"] .panel-header > span::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 90px;
      height: 22px;
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      border-radius: 4px;
      z-index: -1;
    }

/* V17 — Schodkowy lewy akcent */
#app[data-ph-style="v17"] .panel-header {
      justify-content: flex-start;
      padding-left: 16px;
      background: var(--panel-bg);
      border-left: 3px solid var(--accent);
      box-shadow: inset 6px 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
    }

/* V18 — Pełna linia akcentu na dole */
#app[data-ph-style="v18"] .panel-header {
      background: var(--panel-bg);
      border-bottom: 2px solid var(--accent);
    }
    #app[data-ph-style="v18"] .panel-header > span {
      color: var(--accent);
      font-weight: 700;
      letter-spacing: 0.12em;
    }

/* V19 — Odwrócony: żółty pasek pod tytułem */
#app[data-ph-style="v19"] .panel-header {
      background: var(--panel-bg);
      height: 34px;
    }
    #app[data-ph-style="v19"] .panel-header > span {
      background: var(--accent);
      color: #141414;
      padding: 3px 16px;
      font-weight: 700;
      letter-spacing: 0.1em;
      border-radius: 2px;
    }

/* V20 — Ghost: tylko tekst i cienka linia */
#app[data-ph-style="v20"] .panel-header {
      background: transparent;
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      height: 28px;
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--text-mid);
    }
    #app[data-ph-style="v20"] .panel-header > span { color: var(--text-mid); }

/* V21 — Kropki po bokach (·· PARAMETRY ·) */
#app[data-ph-style="v21"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v21"] .panel-header > span::before { content: '·· '; color: var(--accent); letter-spacing: 0.2em; }
    #app[data-ph-style="v21"] .panel-header > span::after  { content: ' ··'; color: var(--accent); letter-spacing: 0.2em; }

/* V22 — Pionowa kreska przy tytule */
#app[data-ph-style="v22"] .panel-header {
      justify-content: flex-start;
      padding-left: 12px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 40%);
    }
    #app[data-ph-style="v22"] .panel-header > span {
      padding-left: 10px;
      border-left: 2px solid var(--accent);
    }

/* V23 — Zebra: naprzemienne paski */
#app[data-ph-style="v23"] .panel-header {
      background-color: var(--panel-bg);
      background-image: repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        rgba(255, 255, 255, 0.02) 8px 9px
      );
      border-bottom: 1px solid var(--border);
    }

/* V24 — Cień wewnętrzny (wciśnięty) */
#app[data-ph-style="v24"] .panel-header {
      background: #1a1a1a;
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
      border-bottom: 1px solid #111;
    }
    #app[data-ph-style="v24"] .panel-header > span {
      color: var(--text-mid);
      font-size: 10px;
      text-transform: lowercase;
      font-variant: small-caps;
      letter-spacing: 0.15em;
    }

/* V25 — Etykieta przyklejona do lewej (jak tag) */
#app[data-ph-style="v25"] .panel-header {
      justify-content: flex-start;
      padding-left: 0;
      background: var(--panel-bg);
      overflow: visible;
    }
    #app[data-ph-style="v25"] .panel-header > span {
      background: var(--accent);
      color: #141414;
      height: 100%;
      padding: 0 14px;
      align-items: center;
      font-weight: 700;
      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    }

/* V26 — Gradient poziomy pod całym nagłówkiem */
#app[data-ph-style="v26"] .panel-header {
      background: var(--panel-bg);
      border-bottom: none;
    }
    #app[data-ph-style="v26"] .panel-header::after {
      content: '';
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
    }

/* V27 — Ramka akcentu tylko pod tytułem (L-shape) */
#app[data-ph-style="v27"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v27"] .panel-header > span {
      padding: 2px 10px 4px;
      border-bottom: 2px solid var(--accent);
      border-left: 2px solid var(--accent);
    }

/* V28 — Rozmyte tło (glass) */
#app[data-ph-style="v28"] .panel-header {
      background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
      backdrop-filter: blur(4px);
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    }
    #app[data-ph-style="v28"] .panel-header > span { color: var(--accent); }

/* V29 — Dwukolor: ciemna lewa połowa */
#app[data-ph-style="v29"] .panel-header {
      background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, #111) 0%, var(--panel-bg) 45%);
      justify-content: flex-start;
      padding-left: 14px;
    }
    #app[data-ph-style="v29"] .panel-header > span { font-weight: 700; }

/* V30 — Kreskowanie CAD */
#app[data-ph-style="v30"] .panel-header {
      background-color: #1c1c1c;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 12px 12px;
      background-position: -1px -1px;
      border-bottom: 2px solid var(--accent);
    }
    #app[data-ph-style="v30"] .panel-header > span {
      background: #1c1c1c;
      padding: 0 8px;
      border: 1px solid var(--border);
    }

/* V31 — Slash / */
#app[data-ph-style="v31"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      background: var(--panel-bg);
      font-family: Consolas, monospace;
    }
    #app[data-ph-style="v31"] .panel-header > span { color: var(--accent); }
    #app[data-ph-style="v31"] .panel-header > span::before { content: '/ '; color: var(--text-mid); }

/* V32 — Chevrony >> << */
#app[data-ph-style="v32"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v32"] .panel-header > span { gap: 8px; font-weight: 700; }
    #app[data-ph-style="v32"] .panel-header > span::before { content: '››'; color: var(--accent); font-size: 12px; }
    #app[data-ph-style="v32"] .panel-header > span::after  { content: '‹‹'; color: var(--accent); font-size: 12px; }

/* V33 — Kropkowane podkreślenie */
#app[data-ph-style="v33"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v33"] .panel-header > span {
      padding-bottom: 4px;
      border-bottom: 2px dotted color-mix(in srgb, var(--accent) 70%, var(--border));
    }

/* V34 — Highlight u góry */
#app[data-ph-style="v34"] .panel-header {
      background: linear-gradient(180deg, #2a2a2a 0%, var(--panel-bg) 35%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid var(--border);
    }

/* V35 — Ramka wokół tytułu */
#app[data-ph-style="v35"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v35"] .panel-header > span {
      padding: 3px 12px;
      border: 1px solid var(--accent);
      font-size: 10px;
    }

/* V36 — Fala na dole */
#app[data-ph-style="v36"] .panel-header {
      background: var(--panel-bg);
      border-bottom: none;
    }
    #app[data-ph-style="v36"] .panel-header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: repeating-linear-gradient(
        90deg,
        var(--accent) 0 6px,
        transparent 6px 10px
      );
    }

/* V37 — Podział pionowy 50/50 */
#app[data-ph-style="v37"] .panel-header {
      background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, #111) 50%, var(--panel-bg) 50%);
    }

/* V38 — Poświata tekstu */
#app[data-ph-style="v38"] .panel-header {
      background: #141414;
      border-bottom: 1px solid var(--border);
    }
    #app[data-ph-style="v38"] .panel-header > span {
      color: var(--accent);
      text-shadow:
        0 0 8px color-mix(in srgb, var(--accent) 50%, transparent),
        0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
    }

/* V39 — Kontur liter */
#app[data-ph-style="v39"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v39"] .panel-header > span {
      color: transparent;
      -webkit-text-stroke: 1px var(--accent);
      font-weight: 700;
      letter-spacing: 0.14em;
    }

/* V40 — Pusta kapsuła */
#app[data-ph-style="v40"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v40"] .panel-header > span {
      padding: 2px 14px;
      border: 1.5px solid var(--accent);
      border-radius: 999px;
      color: var(--accent);
      background: transparent;
      font-size: 10px;
    }

/* V41 — Nadkreślenie */
#app[data-ph-style="v41"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v41"] .panel-header > span {
      padding-top: 4px;
      border-top: 2px solid var(--accent);
      font-size: 10px;
    }

/* V42 — Ukośna przekątna */
#app[data-ph-style="v42"] .panel-header {
      background: var(--panel-bg);
      overflow: hidden;
    }
    #app[data-ph-style="v42"] .panel-header::before {
      content: '';
      position: absolute;
      left: -20%;
      top: 0;
      width: 45%;
      height: 100%;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      transform: skewX(-18deg);
    }

/* V43 — Skośne tło tytułu */
#app[data-ph-style="v43"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v43"] .panel-header > span {
      padding: 2px 14px;
      background: color-mix(in srgb, var(--accent) 20%, #222);
      transform: skewX(-8deg);
      font-weight: 700;
    }

/* V44 — Wielokropek … */
#app[data-ph-style="v44"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      background: var(--panel-bg);
    }
    #app[data-ph-style="v44"] .panel-header > span::before {
      content: '…';
      color: var(--accent);
      margin-right: 8px;
      letter-spacing: 2px;
    }

/* V45 — Paragraf § */
#app[data-ph-style="v45"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v45"] .panel-header > span::before {
      content: '§';
      color: var(--accent);
      margin-right: 8px;
      font-size: 13px;
    }

/* V46 — Znaki równości */
#app[data-ph-style="v46"] .panel-header { background: #181818; font-family: monospace; font-size: 10px; }
    #app[data-ph-style="v46"] .panel-header > span { gap: 8px; color: var(--accent); }
    #app[data-ph-style="v46"] .panel-header > span::before,
    #app[data-ph-style="v46"] .panel-header > span::after {
      content: '';
      width: 14px;
      height: 2px;
      background: var(--border);
      box-shadow: 0 -4px 0 var(--border), 0 4px 0 var(--border);
    }

/* V47 — Pionowe kreski | */
#app[data-ph-style="v47"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v47"] .panel-header > span { color: var(--accent); font-weight: 700; }
    #app[data-ph-style="v47"] .panel-header > span::before { content: '| '; color: var(--text-mid); font-weight: 400; }
    #app[data-ph-style="v47"] .panel-header > span::after  { content: ' |'; color: var(--text-mid); font-weight: 400; }

/* V48 — Przerywana ramka */
#app[data-ph-style="v48"] .panel-header {
      margin: 5px 8px 7px;
      height: 28px;
      border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
      border-radius: 3px;
      background: transparent;
    }
    .variant-card #app[data-ph-style="v48"] .panel-header-wrap { padding-bottom: 2px; }

/* V49 — Zaokrąglone górne rogi */
#app[data-ph-style="v49"] .panel-header {
      background: var(--panel-bg);
      border-radius: 6px 6px 0 0;
      border: 1px solid var(--border);
      border-bottom: 2px solid var(--accent);
      margin-top: 4px;
    }
    .variant-card #app[data-ph-style="v49"] .panel-header-wrap { padding-top: 2px; }

/* V50 — Trójkąt pod tytułem */
#app[data-ph-style="v50"] .panel-header { background: var(--panel-bg); border-bottom: 1px solid var(--border); }
    #app[data-ph-style="v50"] .panel-header > span { padding-bottom: 6px; }
    #app[data-ph-style="v50"] .panel-header > span::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -1px;
      transform: translateX(-50%);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid var(--accent);
    }

/* V51 — Scanlines CRT */
#app[data-ph-style="v51"] .panel-header {
      background: #141414;
      border-bottom: 1px solid #111;
    }
    #app[data-ph-style="v51"] .panel-header::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent 0 2px,
        rgba(0, 0, 0, 0.15) 2px 3px
      );
      pointer-events: none;
    }
    #app[data-ph-style="v51"] .panel-header > span { color: color-mix(in srgb, var(--accent) 85%, #fff); z-index: 1; }

/* V52 — Szum / kropki */
#app[data-ph-style="v52"] .panel-header {
      background-color: var(--panel-bg);
      background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 4px 4px;
      border-bottom: 1px solid var(--border);
    }

/* V53 — Prefiks 0x */
#app[data-ph-style="v53"] .panel-header {
      justify-content: flex-start;
      padding-left: 14px;
      background: #161616;
      font-family: Consolas, monospace;
      font-size: 10px;
    }
    #app[data-ph-style="v53"] .panel-header > span::before {
      content: '0x';
      color: var(--text-mid);
      margin-right: 4px;
      font-size: 9px;
    }
    #app[data-ph-style="v53"] .panel-header > span { color: var(--accent); }

/* V54 — Trójkąt lewy-górny */
#app[data-ph-style="v54"] .panel-header {
      background: var(--panel-bg);
      overflow: hidden;
    }
    #app[data-ph-style="v54"] .panel-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 14px 14px 0 0;
      border-color: var(--accent) transparent transparent transparent;
    }

/* V55 — Narożnik prawy-dolny */
#app[data-ph-style="v55"] .panel-header {
      background: var(--panel-bg);
      border-bottom: 1px solid var(--border);
    }
    #app[data-ph-style="v55"] .panel-header::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 16px;
      height: 16px;
      border-right: 2px solid var(--accent);
      border-bottom: 2px solid var(--accent);
    }

/* V56 — Podwójna linia przy tytule */
#app[data-ph-style="v56"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v56"] .panel-header > span {
      padding: 4px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      letter-spacing: 0.12em;
    }

/* V57 — Wstążka prawy-górny */
#app[data-ph-style="v57"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v57"] .panel-header::before {
      content: '';
      position: absolute;
      top: 0;
      right: 28px;
      width: 36px;
      height: 4px;
      background: var(--accent);
      border-radius: 0 0 2px 2px;
    }

/* V58 — Segmenty pionowe */
#app[data-ph-style="v58"] .panel-header {
      background: var(--panel-bg);
      gap: 0;
    }
    #app[data-ph-style="v58"] .panel-header > span {
      padding: 0 14px;
      height: 100%;
      align-items: center;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      background: color-mix(in srgb, var(--panel-bg) 80%, #000);
    }

/* V59 — Zaokrąglony blok tytułu */
#app[data-ph-style="v59"] .panel-header { background: var(--panel-bg); }
    #app[data-ph-style="v59"] .panel-header > span {
      padding: 4px 16px 6px;
      background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
      border-radius: 0 0 8px 8px;
      border: 1px solid var(--border);
      border-top: none;
      margin-top: -1px;
    }

/* V60 — Neon */
#app[data-ph-style="v60"] .panel-header {
      background: #0d0d0d;
      border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, #000);
    }
    #app[data-ph-style="v60"] .panel-header > span {
      color: #fff;
      text-shadow:
        0 0 4px var(--accent),
        0 0 10px var(--accent),
        0 0 20px color-mix(in srgb, var(--accent) 60%, transparent);
      font-weight: 700;
      letter-spacing: 0.15em;
    }