* { box-sizing: border-box; }
  svg { display: block; }

  header.masthead { position: relative; background: var(--card); border-bottom: 1px solid var(--line); }
  header.masthead::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
  }
  .masthead-inner {
    position: relative; z-index: 2; max-width: 900px; margin: 0 auto;
    padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  /* Sizing/layout of the lockup lives in base.css; this is the link behaviour only.
     Bez przygaszania pod kursorem — patrz ten sam blok w review.css. */
  .brand { text-decoration: none; cursor: pointer; }

  .btn svg { width: 16px; height: 16px; }

  .wrap { max-width: 900px; margin: 0 auto; padding: 26px 20px 120px; }
  .page-head { margin: 4px 2px 20px; }
  .page-head h1 { margin: 0 0 6px; font-size: clamp(24px, 4vw, 30px); font-weight: 800; letter-spacing: -.025em; }
  .page-head p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

  .client-card {
    /* Column gap + divider padding are tight (16/16, not 26/26) so the platforms pills get
       enough of the 900px wrap to sit on ONE line next to the other three facts. */
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: stretch;
    margin: 0 0 24px; padding: 14px 18px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  }
  .cc-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 0 auto; }
  .cc-item + .cc-item { padding-left: 16px; border-left: 1px solid var(--line-soft); }
  /* Platforms is the one variable-width fact here (5 pills ~390px), so at its natural size it
     drops to a second line and lands under DOMAIN. flex-basis:0 keeps it in the SAME row as the
     other three — it takes whatever is left and the pills wrap inside their own column. */
  .cc-item--platforms { flex: 1 1 0; min-width: 150px; }
  .cc-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
  .cc-value { font-size: 15px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
  .cc-swatch { width: 15px; height: 15px; border-radius: 5px; flex: 0 0 15px; box-shadow: inset 0 0 0 1px rgba(16,24,40,.12); }
  .cc-platforms { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .cc-plat {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 3px 9px 3px 7px; border-radius: 999px;
  }
  .cc-plat-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
  .cc-plat.is-on { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
  .cc-plat.is-on .cc-plat-dot { background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.16); }
  .cc-plat.is-off { background: color-mix(in srgb, var(--ink) 6%, var(--card)); color: var(--muted-2); }
  .cc-plat.is-off .cc-plat-dot { background: var(--muted-2); }
  /* Too narrow to give the pills a usable column: put them on a row of their OWN, full width
     with a top rule — a deliberate band rather than a stray block hanging under DOMAIN. */
  @media (max-width: 860px) {
    .cc-item--platforms {
      flex-basis: 100%; padding-left: 0; border-left: 0;
      padding-top: 10px; border-top: 1px solid var(--line-soft);
    }
  }
  @media (max-width: 560px) { .cc-item + .cc-item { padding-left: 0; border-left: 0; } }

  .section { margin-bottom: 26px; scroll-margin-top: 96px; }
  .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin: 0 4px 12px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
  .section-title::before { content: ""; flex: 0 0 20px; width: 20px; height: 3px; border-radius: 3px; background: var(--brand-grad-90); }
  /* Level-2 sections (per-platform cards, cover style) stay quieter than the top-level ones. */
  .section[data-toc-level="2"] .section-title { font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
  .section[data-toc-level="2"] .section-title::before { flex-basis: 16px; width: 16px; }
  .section-intro { font-size: 13px; color: var(--muted); line-height: 1.5; margin: -4px 4px 12px; }
  .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }

  /* Left-gutter table of contents. It is a zero-height STICKY block (not `fixed`): it starts
     in the flow beside the page head, scrolls away with the copy, and only pins once it would
     slide under the demo/test bar — a fixed box sat over the masthead from the first pixel and
     never moved, which read as chrome rather than as part of the page. `height:0` keeps it out
     of the layout (its card overflows downward), so `.wrap` still starts right under the header,
     and the negative `margin-bottom` cancels the flow gap its own top margin would leave. */
  .settings-toc {
    position: sticky; top: calc(var(--topbar-h, 0px) + 16px); z-index: 5;
    width: 168px; height: 0; margin: 26px 0 -26px calc(50% - 634px);
    display: none;
  }
  .settings-toc-inner {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 8px;
    max-height: calc(100vh - var(--topbar-h, 0px) - 48px); overflow-y: auto;
  }
  .settings-toc-title { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 5px 9px 8px; }
  .settings-toc a {
    display: block; padding: 7px 10px; margin: 1px 0; border-radius: 9px;
    border-left: 2px solid transparent; font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--muted); text-decoration: none; cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
  }
  .settings-toc a:hover { color: var(--ink-2); background: var(--line-soft); }
  .settings-toc a.is-active { color: var(--brand-strong); background: var(--brand-ghost); border-left-color: var(--brand); }
  .settings-toc a[data-level="2"] { margin-left: 12px; padding-left: 12px; font-size: 12.5px; font-weight: 600; }
  @media (min-width: 1300px) { .settings-toc { display: block; } }

  .setting-row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; }
  .setting-row + .setting-row { border-top: 1px solid var(--line-soft); }
  .setting-row.is-off-note { background: var(--warn-bg); }
  .sr-main { flex: 1; min-width: 0; }
  .sr-title { font-size: 15px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
  .sr-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
  .sr-control { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }

  .plat-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px 6px; }
  .plat-head + .setting-row { border-top: 0; }
  .plat-avatar { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; text-transform: uppercase; }
  .plat-avatar.fb { background: #1877f2; }
  .plat-avatar.ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 42%, #d6249f 60%, #285AEB 92%); }
  .plat-avatar.tt { background: #010101; }
  .plat-avatar.yt { background: #ff0000; }
  .plat-name { font-size: 15px; font-weight: 800; color: var(--ink); }
  .conn-chip { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
  .conn-chip.on { color: var(--ok); background: var(--ok-bg); }
  .conn-chip.off { color: var(--muted-2); background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
  .conn-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .plat-block.is-disconnected > :not(.preview-panel) { opacity: .62; }
  .plat-block + .plat-block { border-top: 1px solid var(--line-soft); }
  .disc-hint { padding: 2px 18px 15px; font-size: 12.5px; color: var(--muted); }
  .conn-btn {
    margin-left: 10px; border: 1px solid transparent; border-radius: 999px; padding: 7px 14px;
    font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .01em; cursor: pointer;
    background: var(--brand); color: #fff; transition: filter .15s ease, transform .12s ease;
  }
  .conn-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
  .conn-btn:disabled { opacity: .55; cursor: default; }
  .conn-btn.ghost { background: var(--card); color: var(--muted); border-color: var(--line); }
  .conn-btn.ghost:hover:not(:disabled) { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--card)); filter: none; }

  .tone-legend { margin: 0 2px 12px; padding: 0; background: var(--brand-ghost); border: 1px solid var(--brand-line); border-radius: var(--radius-sm); }
  .tone-legend-summary { display: flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; list-style: none; user-select: none; }
  .tone-legend-summary::-webkit-details-marker { display: none; }
  .tone-legend-summary:hover .tone-legend-title { color: var(--brand); }
  .tone-legend-chevron { width: 15px; height: 15px; margin-left: auto; color: var(--brand-strong); transition: transform .18s ease; }
  .tone-legend[open] .tone-legend-chevron { transform: rotate(180deg); }
  .tone-legend-title { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-strong); transition: color .15s ease; }
  .tone-legend-body { display: flex; flex-direction: column; gap: 5px; padding: 0 16px 13px; }
  .tone-legend-intro { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 4px; }
  .tone-legend-item { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
  .tone-legend-item strong { color: var(--ink); font-weight: 700; }
  .tone-legend-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }

  .tones-block { padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); background: var(--card-soft); }
  .tones-head { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
  .help-btn { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; border: 0; background: var(--brand-grad); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--brand-ghost); transition: transform .15s ease, box-shadow .15s ease; }
  .help-btn:hover { transform: scale(1.14); box-shadow: 0 0 0 5px var(--brand-ghost), 0 3px 10px var(--brand-line); }
  .help-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
  .help-popover { position: fixed; z-index: 200; max-width: 320px; width: max-content; background: var(--card); border: 1px solid var(--brand-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 13px 16px 14px; }
  .help-popover[hidden] { display: none; }
  .help-pop-title { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 6px; padding-right: 20px; }
  .help-pop-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
  .help-pop-close { position: absolute; top: 7px; right: 9px; border: 0; background: none; color: var(--muted); font-size: 13px; cursor: pointer; line-height: 1; padding: 2px; }
  .help-pop-close:hover { color: var(--ink); }
  .story-slot { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .story-slot .setting-row { border-top: 1px solid var(--line-soft); padding: 16px 18px; }
  .tone-slot { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
  .tone-slot + .tone-slot { margin-top: 10px; }
  /* The video slot leads with its own on/off switch and the shared-video warning, then the
     queue. Both sit INSIDE .tone-slot (unlike the story toggle, which replaces the queue), so
     they need their own rhythm and a rule separating them from the steps below. */
  /* The merged tt+yt queue is its own section now, so it uses the same .tones-block frame
     as the fb/ig queues — only the slot's inner card is dropped, since the section's
     panel already provides one. */
  [data-video-queue] .tone-slot { border: 0; padding: 0; background: none; }
  .brand-color-field { display: inline-flex; align-items: center; gap: 10px; }
  .brand-color-hex { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
  .tone-slot.is-locked { background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
  .tone-slot-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
  .fmt-badge { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--brand-grad-90); padding: 3px 10px; border-radius: 999px; }
  .fmt-freq { font-size: 12px; color: var(--muted); font-weight: 600; }
  .tone-count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted-2); }
  .tone-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: tone; }
  .tone-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; }
  /* Aligned queue columns: counter | format | tone | image | controls. The per-row grid and the
     header (.tone-cols) share the same track sizing (fixed counter + controls, fr middle) so the
     two separate grids line up. `qcols` = has a format column, `qimg` = has the image column. */
  .tone-slot.qcols .tone-cols,
  .tone-slot.qcols .tone-item:not(.is-step-locked) { display: grid; align-items: center; gap: 10px; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1.35fr) 116px; }
  .tone-slot.qcols.qimg .tone-cols,
  .tone-slot.qcols.qimg .tone-item:not(.is-step-locked) { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 116px; }
  /* A video queue drops the tone column (see `tone_applies`), so it is counter | style |
     layout | controls. Both labels are long ("Wideo (pokaz zdjęć)", "Kwadrat na plakacie"),
     and with the tone gone there is finally room for them to sit unclipped. */
  .tone-slot.qcols.qimg.qnotone .tone-cols,
  .tone-slot.qcols.qimg.qnotone .tone-item:not(.is-step-locked) { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 116px; }
  /* A step whose format drops the third column (video_raw has no chrome, so no layout) must
     still HOLD its grid cell — with display:none the row's controls slide left and stop lining
     up with the header and the rows above it. visibility keeps it out of the a11y tree too. */
  .tone-slot.qcols.qimg .tone-item [data-step-image][hidden] { display: block; visibility: hidden; }
  .tone-cols { padding: 2px 10px 6px; border: 1px solid transparent; }
  .tone-cols .tc-num { width: 20px; }
  .tone-cols .tc-col { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
  .tone-cols .tc-col > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tone-cols .help-btn { width: 16px; height: 16px; font-size: 10px; flex: 0 0 auto; box-shadow: 0 0 0 3px var(--brand-ghost); }
  .img-locked { display: inline-flex; align-items: center; justify-content: center; min-width: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--ink) 4%, var(--card)); border: 1px dashed var(--line); border-radius: 8px; padding: 7px 9px; cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tone-item::before { counter-increment: tone; content: counter(tone); flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--brand-strong); background: var(--brand-ghost); border-radius: 50%; }
  .tone-item.is-next { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .tone-item.is-step-locked { background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
  .fmt-badge-sm { font-size: 10px; padding: 2px 8px; }
  .tone-fixed { flex: 1 1 0; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
  .tone-fixed-note { font-weight: 600; font-size: 11.5px; color: var(--muted-2); font-style: italic; margin-left: 6px; }
  .tone-next { position: absolute; top: -9px; right: 12px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--brand-grad-90); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px var(--brand-line); }
  .tone-chip.is-next { color: #fff; background: var(--brand-grad-90); border-color: transparent; }
  .step-select { flex: 1 1 0; min-width: 0; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; }
  .step-select.step-format { color: var(--brand-strong); font-weight: 800; }
  .tone-slot.qcols .tone-item .step-select { width: 100%; }
  .step-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .lang-picker { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 30px 8px 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
  .lang-picker:hover { border-color: var(--brand-line); }
  .lang-picker:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .text-input { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; min-width: 220px; }
  .text-input:hover { border-color: var(--brand-line); }
  .text-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .num-input { width: 66px; min-width: 0; text-align: center; }
  .text-input--lg { min-width: 340px; padding: 11px 13px; }
  .contact-email-row { display: flex; gap: 8px; align-items: center; }
  .contact-email-msg { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: right; }
  .contact-email-msg.is-ok { color: var(--ok); }
  .contact-email-msg.is-err { color: var(--err); }
  .sched-days { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .sched-day { position: relative; }
  .sched-day input { position: absolute; opacity: 0; pointer-events: none; }
  .sched-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; user-select: none; }
  .sched-day input:checked + span { color: #fff; background: var(--brand); border-color: var(--brand); }
  .sched-hours { display: inline-flex; align-items: center; gap: 8px; }
  .sched-out { width: 100%; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
  .sched-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; }
  .sched-list li { font-variant-numeric: tabular-nums; padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
  .inline-add { display: inline-flex; align-items: center; gap: 8px; }
  .sr-hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

  /* Image-style picker: preset cards showing what each look produces. The saved value is
     the English prompt in a hidden [data-gen] input, so the cards stay a pure UI layer. */
  .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; width: 100%; }
  .style-card {
    appearance: none; cursor: pointer; font-family: inherit; text-align: left; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--line);
    border-radius: 12px; transition: border-color .15s, box-shadow .15s, transform .12s;
  }
  .style-card:hover { border-color: var(--brand-line); transform: translateY(-1px); }
  .style-card:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .style-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .style-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line-soft); }
  /* No generated thumbnail on disk (scripts/gen_sample_assets.py --styles never run):
     the <img> onerror swaps in a swatch so the picker still reads at a glance. */
  .style-card.is-noimg .style-thumb { display: none; }
  .style-swatch { display: none; width: 100%; aspect-ratio: 16 / 10; }
  .style-card.is-noimg .style-swatch, .style-card--custom .style-swatch { display: block; }
  .style-swatch[data-swatch="realistic"] { background: linear-gradient(140deg, #6f7f96, #d7c9b4 55%, #8e7c66); }
  .style-swatch[data-swatch="studio"] { background: linear-gradient(180deg, #ffffff, #e6e9ee 60%, #cfd5dd); }
  .style-swatch[data-swatch="vintage"] { background: linear-gradient(140deg, #c9a227, #9d6b3f 55%, #5d4535); }
  .style-swatch[data-swatch="cartoon"] { background: linear-gradient(120deg, #ff5f6d 0 33%, #ffc371 33% 66%, #33c3f0 66%); }
  .style-swatch[data-swatch="minimal"] { background: linear-gradient(140deg, #f7f4f1, #e9ded6 60%, #dcd3ea); }
  .style-swatch[data-swatch="custom"] { background: repeating-linear-gradient(45deg, var(--line-soft) 0 9px, var(--card) 9px 18px); }
  /* Backdrop cards show the 9:16 frame itself, so the tiles are phone-shaped and narrower
     than the article image-style cards — six of them then fit on one row instead of wrapping
     into a wall. There is no .style-swatch fallback here: the swatch IS the generated image,
     so a failed load means the endpoint is down, and a fake gradient would misinform. */
  .backdrop-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
  .backdrop-thumb { aspect-ratio: 9 / 16; }
  .style-card.is-noimg .backdrop-thumb { display: block; visibility: hidden; }
  .backdrop-grid .style-meta { padding: 7px 8px 9px; gap: 2px; }
  .backdrop-grid .style-name { font-size: 12px; }
  .backdrop-grid .style-desc { font-size: 10.5px; }
  .style-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
  .style-name { font-size: 13px; font-weight: 800; color: var(--ink); }
  .style-card[aria-pressed="true"] .style-name { color: var(--brand-strong); }
  .style-desc { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
  .style-custom { width: 100%; margin-top: 10px; }
  .style-custom[hidden] { display: none; }
  .style-custom textarea {
    width: 100%; min-height: 74px; resize: vertical; font-family: inherit; font-size: 13px; font-weight: 600;
    line-height: 1.45; color: var(--ink); background: var(--card); border: 1px solid var(--line);
    border-radius: 9px; padding: 10px 12px;
  }
  .style-custom textarea:hover { border-color: var(--brand-line); }
  .style-custom textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }

  /* Force-a-product composer: live-validated id field + a chip per queued id, so a batch
     leaves a visible trail instead of one hint line overwriting itself. */
  .prod-composer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  .prod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .prod-input { width: 190px; min-width: 0; font-variant-numeric: tabular-nums; }
  .prod-input[aria-invalid="true"] { border-color: var(--err); }
  .prod-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--err-bg); }
  .prod-error { margin: 0; font-size: 12px; font-weight: 700; color: var(--err); }
  .prod-error[hidden] { display: none; }
  .prod-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .prod-chips:empty { display: none; }
  .prod-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 34%, var(--card));
  }
  .prod-chip.is-fail { color: var(--err); background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 34%, var(--card)); }
  .prod-chip.is-pending { color: var(--muted); background: var(--card); border-color: var(--line); }
  .prod-chip.is-removing { opacity: .45; }
  .prod-chip-x {
    appearance: none; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
    padding: 0; margin-right: -3px; border: 0; border-radius: 50%; color: inherit;
    background: transparent; opacity: .55; transition: opacity .15s, background .15s;
  }
  .prod-chip-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
  .prod-chip-x:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--brand-ghost); }
  .prod-chip.is-pending .prod-chip-x { display: none; }
  .sr-note { font-size: 12px; color: var(--warn-ink); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; margin-top: 6px; }

  /* Sub-groups inside a section: each group is its own card with a heading, so a long
     panel (Artykuły) reads as several scannable blocks instead of one flat wall. */
  .gen-group + .gen-group { margin-top: 14px; }
  .gen-group[id] { scroll-margin-top: 96px; }
  .group-head { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--ink) 3%, var(--card)); }
  .group-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .group-sub { font-size: 12px; color: var(--muted-2); margin-left: auto; }

  /* Stacked row: label above a full-width control cell, for controls too wide to sit
     in the right-hand gutter (the schedule block). */
  .setting-row.is-stacked { flex-direction: column; gap: 12px; }
  .setting-row.is-stacked .sr-control { align-items: stretch; width: 100%; padding-top: 0; }
  .sched-block { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 2%, var(--card)); }
  .sched-block-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
  .sched-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
  .tone-ctrls { display: inline-flex; gap: 4px; flex: 0 0 auto; }
  .tone-ctrls button { appearance: none; cursor: pointer; font-family: inherit; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 7px; transition: color .15s, border-color .15s, background .15s; }
  .tone-ctrls button:hover { color: var(--brand-strong); border-color: var(--brand-line); background: var(--brand-ghost); }
  .tone-ctrls button[data-remove]:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--card)); background: var(--err-bg); }
  .tone-item.is-next [data-set-next] { display: none; }
  .tone-add-btn { margin-top: 8px; appearance: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--brand-strong); background: var(--card); border: 1px dashed var(--brand-line); border-radius: 9px; padding: 8px 12px; transition: background .15s, border-color .15s; }
  .tone-add-btn:hover:not(:disabled) { background: var(--brand-ghost); border-color: var(--brand); }
  .tone-add-btn:disabled { opacity: .45; cursor: default; }
  .queue-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
  .queue-foot[hidden] { display: none; }
  .cover-jump { appearance: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--brand-strong); background: var(--brand-ghost); border: 1px solid var(--brand-line); border-radius: 999px; transition: background .15s, border-color .15s, transform .15s; }
  .cover-jump:hover { background: color-mix(in srgb, var(--brand) 14%, var(--card)); transform: translateY(-1px); }
  .cover-jump svg { width: 14px; height: 14px; flex: 0 0 14px; }
  .tone-locked { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
  .tone-chip { font-size: 12.5px; font-weight: 700; color: var(--ink-2); background: var(--line-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }
  .tone-locked-note { flex-basis: 100%; font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }

  .off-note { display: none; align-items: flex-start; gap: 8px; padding: 11px 18px; background: var(--warn-bg); border-top: 1px solid var(--warn-line); font-size: 12.5px; line-height: 1.45; color: var(--warn); }
  .off-note.show { display: flex; }
  .off-note svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; }

  .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch .track { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 22%, var(--card)); border-radius: 999px; transition: background .18s; cursor: pointer; }
  .switch .track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(16,24,40,.28); }
  .switch input:checked + .track { background: var(--brand); }
  .switch input:checked + .track::before { transform: translateX(20px); }
  .switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-ghost); }
  .switch input:disabled + .track { cursor: default; opacity: .5; }
  .switch-label { font-size: 11px; font-weight: 700; color: var(--muted); }

  /* Statyczny fallback wysokości paska zapisu (stopka i pasek cookie odsuwają się o tyle,
     żeby go nie zasłonić — patrz base.css, sekcja „Site footer + cookie notice").
     Wartość obowiązuje tylko do DOMContentLoaded i przy wyłączonym JS: potem ui-polish.js
     nadpisuje ją ZMIERZONĄ wysokością [data-bottom-bar], bo pasek zawija się na wąskich
     ekranach (~91px na telefonie) i każda wpisana liczba i tak by kłamała. */
  :root { --bottom-bar-h: 64px; }
  .save-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .save-bar-inner { max-width: 900px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
  .save-note { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

  .toast {
    position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%) translateY(8px);
    background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 12px;
    font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease; z-index: 50; box-shadow: 0 12px 34px rgba(0,0,0,.3);
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .preview-panel { padding: 14px 18px 18px; border-top: 1px solid var(--line-soft); }
  .preview-toggle { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-strong); background: var(--brand-ghost); border: 1px solid var(--brand-line); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
  .preview-toggle:hover { background: color-mix(in srgb, var(--brand) 13%, var(--card)); box-shadow: 0 2px 10px var(--brand-ghost); }
  .preview-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .pt-eye { flex: 0 0 auto; display: inline-flex; }
  .pt-eye svg { width: 16px; height: 16px; }
  .pt-label { flex: 1; text-align: left; }
  .pt-chevron { flex: 0 0 auto; width: 15px; height: 15px; transition: transform .18s ease; }
  .preview-panel.is-open .pt-chevron { transform: rotate(180deg); }
  .preview-body { margin-top: 13px; }
  .preview-tabs { display: inline-flex; gap: 5px; background: var(--brand-ghost); padding: 3px; border-radius: 9px; margin-bottom: 12px; }
  .preview-tab {
    appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--muted); background: transparent; border: 0; border-radius: 7px; padding: 5px 13px;
    transition: background .15s, color .15s;
  }
  .preview-tab.is-active { background: var(--card); color: var(--brand-strong); box-shadow: var(--shadow-sm); }
  .preview-panel .social-card { max-width: 480px; margin: 0 auto; }
  .sample-note { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 14px 2px 0; line-height: 1.5; }

  .social-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  .social-card .sc-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; }
  .social-card .sc-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; position: relative; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
    text-transform: uppercase; background: var(--brand);
  }
  .social-card .sc-avatar.ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 42%, #d6249f 60%, #285AEB 92%); }
  .social-card .sc-avatar.fb { background: #1877f2; }
  .social-card .sc-avatar.tt { background: #000; }
  .social-card .sc-avatar.yt { background: #ff0000; }
  .social-card .sc-who { min-width: 0; line-height: 1.3; flex: 1; }
  .social-card .sc-name { font-weight: 700; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 4px; min-width: 0; }
  .social-card .sc-name .sc-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .social-card .sc-name .verified { color: var(--brand); flex: 0 0 auto; }
  .social-card .sc-sub { font-size: 12px; color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
  .social-card .sc-sub .globe { width: 12px; height: 12px; color: var(--muted-2); flex: 0 0 12px; }
  .social-card .sc-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px 5px 9px; border-radius: 999px;
    white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.22); flex: 0 0 auto;
  }
  .social-card .sc-badge .pill-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
  .badge--blog      { background: var(--brand-grad); }
  .badge--facebook  { background: radial-gradient(circle at 28% 112%, #5ea2f6 0%, #1877f2 72%); }
  .badge--instagram { background: radial-gradient(circle at 28% 112%, #fdf497 0%, #fd5949 42%, #d6249f 62%, #285aeb 92%); }
  .badge--tiktok    { background: #000; }
  .badge--youtube   { background: #ff0000; }
  .social-card .sc-caption { padding: 2px 15px 13px; white-space: pre-wrap; word-wrap: break-word; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .social-card .sc-caption .cap-name { font-weight: 700; color: var(--ink); margin-right: 6px; }
  .social-card .sc-caption.fb-text { font-size: 15px; color: var(--ink); padding: 4px 15px 12px; }
  .social-card .sc-caption.is-empty .cap-text::before { content: var(--i18n-caption-empty); color: var(--muted-2); font-style: italic; }
  /* Article link = the post's FIRST COMMENT (never the caption) — mirrors the publisher. */
  .sc-comment { display: flex; gap: 9px; align-items: flex-start; padding: 11px 15px 14px; border-top: 1px solid var(--line-soft); }
  .sc-comment-av {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; color: #fff; background: var(--brand);
  }
  .sc-comment-av.ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285aeb 100%); }
  .sc-comment-av.fb { background: #1877f2; }
  .sc-comment-av.yt { background: #ff0000; }
  .sc-comment-body { min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
  .sc-comment-body .scc-name { font-weight: 700; color: var(--ink); margin-right: 6px; }
  .sc-comment-body .scc-link { color: var(--brand); word-break: break-all; margin-left: 5px; }
  /* The #sec-video preview reuses the media box WITHOUT the surrounding card, so both rules
     have to reach it too — `transform-origin` especially: scale() assumes top-left, and about
     the default centre the scaled iframe lands outside the box and gets clipped to nothing. */
  .social-card .sc-media,
  .video-preview-frame .sc-media { position: relative; background: #0c0d10; overflow: hidden; width: 100%; }
  .social-card .sample-media-iframe,
  .video-preview-frame .sample-media-iframe { border: 0; transform-origin: top left; display: block; }
  .sc-meta-fb { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line-soft); }
  .sc-meta-fb .reacts { display: inline-flex; align-items: center; gap: 6px; }
  .sc-meta-fb .react-ico svg { width: 15px; height: 15px; color: #1877f2; }
  .sc-actions-fb { display: flex; border-top: 1px solid var(--line-soft); }
  .sc-actions-fb button {
    flex: 1; appearance: none; cursor: default; font-family: inherit; background: none; border: 0;
    padding: 9px 6px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--muted);
  }
  .sc-actions-fb button svg { width: 19px; height: 19px; }
  .sc-actions-ig { display: flex; align-items: center; gap: 14px; padding: 11px 14px 4px; color: var(--ink); }
  .sc-actions-ig svg { width: 25px; height: 25px; }
  .sc-actions-ig .spacer { flex: 1; }
  .social-card .sc-media.is-video,
  .video-preview-frame .sc-media.is-video { background: #000; }
  .sc-car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
  .sc-car-nav:hover { background: rgba(0,0,0,.65); }
  .sc-car-nav.prev { left: 8px; }
  .sc-car-nav.next { right: 8px; }
  .sc-car-nav[hidden] { display: none; }
  .sc-car-dots { position: absolute; bottom: 9px; left: 0; right: 0; z-index: 4; display: flex; gap: 5px; justify-content: center; pointer-events: none; }
  .sc-car-dots[hidden] { display: none; }
  .sc-car-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
  .sc-car-dot.is-active { background: #fff; }
  .sc-video-rail {
    position: absolute; right: 9px; bottom: 14px; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff;
  }
  .sc-video-rail .vr-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .sc-video-rail svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
  .sc-video-rail .vr-count { font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
  .sc-video-rail.tt .vr-heart svg { color: #fe2c55; }
  .sc-video-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; color: #fff;
    padding: 40px 62px 14px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.28) 58%, transparent 100%);
  }
  .sc-video-cap .vc-handle { display: block; font-weight: 800; font-size: 13.5px; text-shadow: 0 1px 3px rgba(0,0,0,.6); margin-bottom: 4px; }
  .sc-video-cap .vc-text {
    font-size: 12.5px; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.55);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .preview-panel [hidden] { display: none !important; }
  /* #sec-video's preview: always open, no toggle bar, and it is the FIRST thing in the panel
     rather than a footer under a queue — so it loses the top border and gains bottom spacing. */
  .preview-panel.is-static { border-top: 0; padding: 16px 18px 4px; }
  .preview-panel.is-static .preview-body { margin-top: 0; }
  .video-preview-frame { width: 100%; max-width: 250px; margin: 0 auto; }
  .preview-panel.is-static .sc-media { border-radius: 12px; border: 1px solid var(--line); }
  .video-preview-head {
    font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted-2); margin: 0 0 10px;
  }
  .preview-panel.is-static .sample-note { text-align: center; margin: 12px auto 0; max-width: 380px; }
  .masthead-actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }

  .cover-panel { padding: 18px; display: grid; gap: 18px; }
  .cs-intro { font-size: 13px; color: var(--muted); margin: -2px 2px 0; line-height: 1.45; }
  .cs-label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 2px 8px; }
  .font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .font-chip {
    font-size: 21px; line-height: 1.1; padding: 14px 12px; cursor: pointer; text-align: center;
    color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, transform .12s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .font-chip:hover { border-color: var(--brand-line); transform: translateY(-1px); }
  .font-chip[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ghost); }
  .cs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; }
  .cs-field { display: flex; flex-direction: column; }
  .cs-color { width: 56px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
  .cs-color:disabled { opacity: .4; cursor: not-allowed; }
  .cs-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; padding-bottom: 8px; }
  .cover-live {
    display: flex; align-items: center; justify-content: center; min-height: 130px; padding: 22px 18px;
    border-radius: 12px; text-align: center;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%),
      linear-gradient(120deg, #5b6b86, #2d3850);
  }
  .cs-render-row { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .cover-render-out img { max-width: 320px; width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: block; }
  .onb-setup {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 22px; padding: 16px 18px;
    background: var(--brand-ghost); border: 1px solid var(--brand-line);
    border-radius: var(--radius);
  }
  .onb-setup-text { flex: 1 1 260px; }
  .onb-setup-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); margin-bottom: 4px; }
  .onb-setup-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
  .onb-setup .btn { flex: 0 0 auto; }
  .onb-setup .btn[disabled] { opacity: .6; cursor: default; }
  /* Persistent test-version banner (active=0): sticky top bar mirroring the review page. */
  .topbar { position: sticky; top: 0; z-index: 40; }
  .test-banner {
    display: flex; align-items: center; gap: 10px; padding: 12px clamp(16px, 4vw, 40px);
    background: var(--warn-bg); border-bottom: 1px solid color-mix(in srgb, var(--warn) 34%, var(--card));
    color: var(--warn-ink); font-size: 13.5px; font-weight: 600;
  }
  .test-banner .onb-flask { flex: none; font-size: 15px; line-height: 1; }
  /* Public demo (/preview/settings): the twin of .onb-banner.is-demo on the review page —
     brand gradient + inverted CTA, so the marketing row is unmistakably not a client notice.
     Keep the two in sync. */
  .test-banner.is-demo {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-bottom-color: transparent; color: #fff;
  }
  .test-banner.is-demo .test-msg { display: flex; flex-direction: column; gap: 2px; }
  .test-banner.is-demo .onb-sub { font-size: 12.5px; font-weight: 600; opacity: .86; }
  .test-banner.is-demo .demo-cta { background: #fff; color: var(--brand); font-weight: 800; }
  .test-banner.is-demo .demo-cta:hover { background: #fff; opacity: .9; }
  .test-msg { flex: 1 1 auto; }
  .test-cta { flex: none; margin-left: auto; padding: 7px 16px; font-size: 13px; white-space: nowrap; background: var(--brand); color: #fff; border-color: transparent; }

  /* Per-control caption inside a queue step. Invisible on desktop — there the .tone-cols
     header row names the columns — and revealed once the step stacks on a phone. */
  .q-lab { display: none; }

  /* ── Phones ──────────────────────────────────────────────────────────────────
     Three problems this block solves:
     (1) .setting-row is a two-column flex whose right cell (.sr-control) never shrinks, so
         on a phone the label column collapsed to a few dozen pixels and titles broke one
         word — sometimes one letter — per line. Every row stacks instead.
     (2) The publication queue is a 4/5-track grid; at 348px each <select> came out 26–31px
         wide, i.e. unusable. Each step becomes a labelled stack.
     (3) iOS Safari zooms in on focusing any field under 16px and never zooms back. */
  @media (max-width: 640px) {
    .wrap { padding: 20px 14px 130px; }
    .save-bar-inner { padding: 10px 14px; gap: 10px; }
    .test-banner { padding: 10px 14px; font-size: 12.5px; }

    .setting-row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .sr-control { width: 100%; align-items: stretch; padding-top: 0; }
    /* A switch stretched across the row reads as a slider, so the on/off controls stay
       their own size and sit under the label on the left. */
    .sr-control:has(> .switch), .sr-control:has(> label > .switch) { align-items: flex-start; }
    .plat-head, .group-head, .tones-block, .preview-panel { padding-left: 14px; padding-right: 14px; }

    /* Widths that were sized for the desktop right-hand gutter. */
    .text-input, .text-input--lg, .prod-input { min-width: 0; width: 100%; }
    .num-input { width: 72px; flex: 0 0 72px; }
    .contact-email-row { flex-wrap: wrap; }
    .contact-email-row .text-input { flex: 1 1 180px; }
    .contact-email-msg { text-align: left; }
    .font-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    /* 15px keeps even "Cormorant Garamond" off the ellipsis in a two-up grid. */
    .font-chip { font-size: 15px; padding: 12px 8px; }

    /* Queue: one labelled control per row, the buttons on a row of their own. */
    .tone-slot.qcols .tone-cols { display: none; }
    .tone-slot.qcols .tone-item:not(.is-step-locked),
    .tone-slot.qcols.qimg .tone-item:not(.is-step-locked),
    .tone-slot.qcols.qimg.qnotone .tone-item:not(.is-step-locked) {
      grid-template-columns: 20px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px;
    }
    /* The step number is the ::before pseudo, which auto-places into the first cell; every
       real child is pinned to the value column so nothing lands beside it. */
    .tone-slot.qcols .tone-item > * { grid-column: 2; }
    .tone-slot.qcols .tone-item > .q-lab { display: block; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
    /* Extra air above every caption but the first — i.e. only where one control ends and the
       next begins. (`:first-of-type` can't do this: .tone-next is a <span> too.) */
    .tone-slot.qcols .tone-item > .step-select + .q-lab,
    .tone-slot.qcols .tone-item > .img-locked + .q-lab { margin-top: 6px; }
    .tone-slot.qcols .tone-item > .tone-ctrls { justify-content: flex-end; margin-top: 6px; }
    /* Stacked, there are no columns left to keep aligned, so a non-applying image control
       can go back to taking no space at all. */
    .tone-slot.qcols.qimg .tone-item [data-step-image][hidden],
    .tone-slot.qcols .tone-item > .q-lab[hidden] { display: none; }
    /* A locked step is flex, not grid: let it wrap and drop the "set by us" note onto its
       own line, or the tone label gets squeezed between the badge and the buttons. */
    .tone-item.is-step-locked { flex-wrap: wrap; }
    .tone-item.is-step-locked .tone-fixed { flex: 1 1 140px; }
    .tone-fixed-note { display: block; margin-left: 0; }
    .tone-ctrls button { width: 32px; height: 32px; }
    .tone-item::before { align-self: start; margin-top: 2px; }

    .step-select, .text-input, .lang-picker, .style-custom textarea { font-size: 16px; }
  }