/* LoschaZ Resume Studio (Bewerbungs-Studio): the workspace in the toolPage app slot, the language
   switcher above it and the guide cards. Built on the design tokens (css/tokens.css) and the lz-*
   components (css/components.css); every rule is scoped to this tool. Permanently ad-free. */

/* ---------- Hero: tighter above the workspace, compact on phones (shared toolPage frame, only this tool) ---------- */
.lz-tool-page[data-tool="resume-studio"] .lz-tool-hero { padding-bottom: var(--space-5); }
@media (max-width: 760px) {
  .lz-tool-page[data-tool="resume-studio"] .lz-tool-hero { padding-block: var(--space-3) var(--space-4); }
  .lz-tool-page[data-tool="resume-studio"] .lz-tool-hero .lz-lede { margin-bottom: var(--space-3); }
  /* The three badges become one quiet trust row instead of three pills. */
  .lz-tool-page[data-tool="resume-studio"] .lz-tool-hero .lz-chips { gap: var(--space-1) var(--space-4); margin-top: 0; }
  .lz-tool-page[data-tool="resume-studio"] .lz-tool-hero .lz-chip { min-height: 1.5rem; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-xs); }
  .lz-tool-page[data-tool="resume-studio"] .lz-tool-hero .lz-chip .icon { color: var(--accent); }
}

/* ---------- Language switcher ---------- */
.cvs-langs { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--faint); }
.cvs-langs ul { display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-1); }
.cvs-langs__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cvs-langs__link[aria-current] { background: var(--surface-3); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong) inset; }
.cvs-langs__link:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .cvs-langs__link:hover:not([aria-current]) { color: var(--ink); background: #ffffff08; } }
@media (max-width: 760px), (pointer: coarse) { .cvs-langs__link { min-height: 2.75rem; padding: 0 .875rem; } }
@media (max-width: 760px) { .cvs-langs { justify-content: flex-start; } }

/* ---------- Workspace frame ---------- */
#cv-app {
  --app-pad: clamp(.75rem, 2vw, 1.25rem);
  min-height: 26rem;
  margin: 0;
  padding: var(--app-pad);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}
:where(#cv-app) *, :where(#cv-app) *::before, :where(#cv-app) *::after { box-sizing: border-box; }
#cv-app [hidden] { display: none !important; }
:where(#cv-app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
#cv-app button { cursor: pointer; }
#cv-app button:disabled { opacity: .45; cursor: not-allowed; }
.cvs-loading, .cvs-noscript { margin: 0; padding: var(--space-8) var(--space-5); color: var(--muted); text-align: center; font-size: var(--fs-md); }
.cvs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cvs-svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
/* Small lz-btn variants inside the workspace reach 44px on touch screens. */
#cv-app .cvs-act { font-size: var(--fs-sm); }
@media (pointer: coarse), (max-width: 760px) { #cv-app .lz-btn--sm { --btn-h: 2.75rem; } }
.cvs-act-quiet { color: var(--muted); padding-inline: var(--space-2); }
@media (hover: hover) and (pointer: fine) { .cvs-act-quiet:hover { color: var(--ink); } }

/* ---------- Top bar: document tabs and project actions ---------- */
.cvs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cvs-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-deep); }
.cvs-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 .875rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cvs-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .cvs-tab { min-height: 2.75rem; } }
/* Narrow phones: a short tab label ('Mappe'); the full label stays readable to assistive technology. */
.cvs-tab-short { display: none; }
@media (max-width: 420px) {
  .cvs-tabs[data-short="420"] .cvs-tab-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cvs-tabs[data-short="420"] .cvs-tab-short { display: inline; }
}
@media (max-width: 359px) {
  .cvs-tabs[data-short] .cvs-tab-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cvs-tabs[data-short] .cvs-tab-short { display: inline; }
}
.cvs-tab:focus-visible { outline-offset: 2px; }
.cvs-tab-n { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #ffffff14; font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.cvs-tab[aria-selected="true"] .cvs-tab-n { background: #10200f1f; }
@media (hover: hover) and (pointer: fine) { .cvs-tab:hover:not([aria-selected="true"]) { background: #ffffff0a; color: var(--ink); } }
.cvs-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cvs-sample {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--ink-2);
}

/* ---------- Design strip: template, colour, photo mode, document language ---------- */
.cvs-design { display: grid; gap: var(--space-4); margin: var(--space-3) 0 var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-deep); }
.cvs-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cvs-tpl {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 2px var(--space-3);
  align-items: start;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.cvs-tpl img { grid-row: 1 / 3; width: 3.25rem; height: auto; aspect-ratio: 120 / 170; border-radius: 4px; background: #fff; object-fit: cover; }
.cvs-tpl-name { padding-top: 2px; font-size: var(--fs-sm); font-weight: 600; }
.cvs-tpl-hint { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
.cvs-tpl[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); box-shadow: 0 0 0 1px var(--accent) inset; }
.cvs-tpl:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cvs-tpl:hover:not([aria-checked="true"]) { border-color: var(--line-strong); background: var(--surface-3); } }
.cvs-design-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-5); }
.cvs-opt { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cvs-opt select { min-width: 11rem; }
/* Swatches: a 28px colour dot inside a 44px hit area. */
.cvs-swatches { display: flex; flex-wrap: wrap; margin: -1px 0 -1px -.5rem; }
.cvs-swatch { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; }
.cvs-swatch::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c) 50%, var(--s) 50%);
  box-shadow: 0 0 0 1px #ffffff33 inset;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cvs-swatch[aria-checked="true"]::before { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--accent); }
.cvs-swatch:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .cvs-swatch:hover::before { transform: scale(1.08); } }
.cvs-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-ui); }

/* ---------- Form controls ---------- */
#cv-app :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), textarea) {
  width: 100%;
  min-width: 0;
  min-height: 2.625rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
#cv-app select { padding-right: 2rem; }
#cv-app textarea { resize: vertical; line-height: var(--lh-body); }
#cv-app :is(select, input, textarea):focus-visible { border-color: var(--accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { #cv-app :is(select, input:not([type="checkbox"]):not([type="range"]), textarea):hover:not(:focus) { border-color: #ffffff40; } }
#cv-app input[type="range"] { width: 100%; height: 1.75rem; margin: 0; accent-color: var(--accent); }
#cv-app input[type="checkbox"] { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent); }
/* 16px controls on phones and tablets (no iOS zoom), 44px tall touch targets. */
@media (max-width: 760px), (pointer: coarse) {
  #cv-app :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), textarea) { min-height: 2.75rem; font-size: 1rem; }
  #cv-app input[type="range"] { height: 2.75rem; }
}

/* ---------- Editor and preview columns ---------- */
.cvs-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: var(--space-4); align-items: start; }
/* Jump targets clear the sticky header through the page-wide scroll-padding-top (base.css). */
.cvs-editor-col, .cvs-preview { min-width: 0; }
.cvs-panel-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-height: 2rem; padding: 0 var(--space-1) var(--space-2); }
.cvs-panel-title { margin: 0; color: var(--ink); font-family: var(--font-text); font-size: .9375rem; font-weight: 600; letter-spacing: 0; line-height: var(--lh-ui); }
.cvs-panel-title:focus { outline: none; }
.cvs-panel-title:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 4px; }
.cvs-pageinfo { color: var(--muted); font-size: var(--fs-xs); }
.cvs-editor { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cvs-intro { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

.cvs-group, .cvs-tips { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.cvs-group > summary, .cvs-tips > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.cvs-group > summary::-webkit-details-marker, .cvs-tips > summary::-webkit-details-marker { display: none; }
.cvs-group > summary::after, .cvs-tips > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border: solid var(--muted);
  border-width: 0 1.65px 1.65px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cvs-group[open] > summary::after, .cvs-tips[open] > summary::after { border-color: var(--accent); transform: translateY(2px) rotate(-135deg); }
.cvs-group > summary:focus-visible, .cvs-tips > summary:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .cvs-group > summary:hover, .cvs-tips > summary:hover { background: #ffffff05; } }
.cvs-group > .cvs-grid, .cvs-group > .cvs-list { margin: var(--space-1) var(--space-4) var(--space-3); }
.cvs-group > .cvs-hide { margin: 0 var(--space-4) var(--space-2); }
.cvs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cvs-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cvs-wide { grid-column: 1 / -1; }
.cvs-check { display: flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; color: var(--ink-2); font-size: var(--fs-sm); cursor: pointer; }
.cvs-hide { color: var(--muted); font-size: var(--fs-xs); }
@media (pointer: coarse), (max-width: 760px) { .cvs-check { min-height: 2.75rem; } }

/* Repeating entries: a header with the entry name and 44px move / remove buttons. */
.cvs-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cvs-item { min-width: 0; margin: 0; padding: var(--space-1) var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.cvs-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.cvs-item-title { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.cvs-item-tools { display: flex; gap: 2px; margin-right: calc(var(--space-2) * -1); }
.cvs-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cvs-icon:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .cvs-icon:hover:not(:disabled) { border-color: var(--line); background: var(--surface-3); color: var(--ink); }
  .cvs-icon[data-act="remove"]:hover:not(:disabled) { color: #ffb4a3; }
}
.cvs-add {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .cvs-add:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); } }

.cvs-photo { display: flex; flex-direction: column; gap: var(--space-2); }
.cvs-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cvs-photo-adjust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
.cvs-note { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-ui); }
.cvs-tips { padding-bottom: var(--space-1); }
.cvs-tips ul { margin: 0 var(--space-4) var(--space-3); padding-left: 1.125rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }
.cvs-tips li + li { margin-top: var(--space-1); }

/* Application pack */
.cvs-mappe { display: flex; flex-direction: column; gap: var(--space-3); }
.cvs-parts { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cvs-part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 3rem; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.cvs-part .cvs-check { flex: 1 1 auto; color: var(--ink); font-weight: 600; }
.cvs-att-text { display: flex; flex: 1 1 10rem; flex-direction: column; gap: 2px; min-width: 0; padding-block: var(--space-1); }
.cvs-att-name { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.cvs-att-meta { color: var(--muted); font-size: var(--fs-xs); }
.cvs-att .cvs-item-tools { margin-right: 0; }
.cvs-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cvs-drop strong { color: var(--accent); font-size: var(--fs-md); font-weight: 600; }
.cvs-drop span { color: var(--muted); font-size: var(--fs-xs); }
.cvs-drop.cvs-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (hover: hover) and (pointer: fine) { .cvs-drop:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); } }

/* Live preview: sticky beside the form on wide screens, always fully in view (bar, pages, download). */
.cvs-preview { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-deep); }
.cvs-preview .cvs-panel-bar { padding-bottom: 0; }
/* The editor title sits on the same line as the preview title beside it. */
.cvs-editor-col > .cvs-panel-bar { padding-top: calc(var(--space-3) + 1px); }
.cvs-pages { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; padding: 2px; border-radius: var(--radius-sm); overflow: auto; overscroll-behavior: contain; }
.cvs-page { display: block; flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 210 / 297; border-radius: 4px; background: #fff; box-shadow: 0 4px 18px #0007; }
.cvs-downloads { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cvs-dl { flex: 1 1 12rem; }
.cvs-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.cvs-status:empty { display: none; }
@media (min-width: 901px) {
  .cvs-preview { position: sticky; top: calc(var(--sticky-top) + var(--space-3)); max-height: calc(100vh - var(--sticky-top) - var(--space-5)); max-height: calc(100dvh - var(--sticky-top) - var(--space-5)); }
}

.cvs-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding: var(--space-3) var(--space-1) 0; border-top: 1px solid var(--line); }
.cvs-save-text { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-body); }
.cvs-ok { color: var(--accent); }
.cvs-warn { color: #ffb38a; }

/* Phones and tablets: the preview follows the form; a floating bar keeps Preview and Download PDF at hand. */
.cvs-mobile-only, .cvs-mobilebar { display: none; }
.cvs-bar-sentinel { height: 0; }
@media (max-width: 1060px) { .cvs-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cvs-work { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .cvs-pages { overflow: visible; }
  .cvs-mobile-only { display: inline-flex; }
  .cvs-back { width: 100%; }
  .cvs-mobilebar {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
    bottom: max(var(--space-2), env(safe-area-inset-bottom));
    margin-top: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-2) 90%, transparent);
    box-shadow: var(--shadow-pop);
  }
  /* Hidden until the editor title has scrolled above the bar (app.js watchBar); fades and slides in. */
  .cvs-mobilebar { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s; }
  .cvs-mobilebar.cvs-bar-wait { visibility: hidden; opacity: 0; transform: translateY(.5rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
  .cvs-mobilebar > .lz-btn { min-width: 0; padding-inline: .875rem; }
  .cvs-mobilebar > .cvs-bar-preview { flex: 0 0 auto; }
  .cvs-mobilebar > .cvs-bar-dl { flex: 1 1 auto; }
  .cvs-mobilebar > .lz-btn span { overflow: hidden; text-overflow: ellipsis; }
  .cvs-editor-col > .cvs-panel-bar { padding-top: 0; }
  /* Keyboard focus scrolls fields clear of the floating bar (WCAG 2.4.11). */
  html:has(.cvs-mobilebar) { scroll-padding-bottom: 5.5rem; }
}
@media (max-width: 560px) {
  .cvs-top { gap: var(--space-2); }
  .cvs-tabs { flex: 1 1 100%; }
  .cvs-tab { flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: var(--space-1) var(--space-2); text-align: center; }
  .cvs-tab-n { display: none; }
  .cvs-actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cvs-actions > .lz-btn { min-width: 0; padding: var(--space-1) .75rem; white-space: normal; line-height: 1.2; text-align: center; }
  .cvs-sample { padding: var(--space-3); }
  .cvs-sample > .lz-btn { flex: 1 1 auto; }
  .cvs-design { padding: var(--space-2); gap: var(--space-3); }
  .cvs-tpl { grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: var(--space-2); padding: 6px; }
  .cvs-tpl img { grid-row: auto; width: 2.25rem; }
  .cvs-tpl-hint { display: none; }
  .cvs-design-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .cvs-opt-color { grid-column: 1 / -1; }
  .cvs-opt select { min-width: 0; }
  .cvs-grid { grid-template-columns: minmax(0, 1fr); }
  .cvs-group > .cvs-grid, .cvs-group > .cvs-list { margin-inline: var(--space-3); }
  .cvs-group > summary, .cvs-tips > summary { padding-inline: var(--space-3); }
  .cvs-group > .cvs-hide { margin-inline: var(--space-3); }
  .cvs-photo-adjust { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cvs-item { padding-inline: var(--space-2); }
  .cvs-part { padding-left: var(--space-3); }
  .cvs-preview { padding: var(--space-2); }
  .cvs-save { padding-inline: 0; }
  .cvs-save > .lz-btn { flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .cvs-design-opts { grid-template-columns: minmax(0, 1fr); }
  .cvs-tabs { gap: 2px; padding: 3px; }
  .cvs-tab { padding-inline: var(--space-1); font-size: var(--fs-xs); }
}
/* Up to 420px the bar drops its icons, so the German and French Download labels fit on one line. */
@media (max-width: 420px) {
  .cvs-mobilebar > .lz-btn { gap: var(--space-2); padding-inline: .625rem; font-size: var(--fs-sm); }
  .cvs-mobilebar .cvs-svg { display: none; }
}

@media (prefers-reduced-motion: reduce) { .cvs-mobilebar, .cvs-mobilebar.cvs-bar-wait { transition: none; transform: none; } }

/* ---------- Windows High Contrast (forced colours): swatches keep their colours, selections stay visible ---------- */
@media (forced-colors: active) {
  .cvs-swatch::before { forced-color-adjust: none; box-shadow: none; border: 2px solid CanvasText; }
  .cvs-swatch[aria-checked="true"]::before { box-shadow: 0 0 0 2px Canvas, 0 0 0 5px Highlight; }
  .cvs-tab { border: 1px solid transparent; }
  .cvs-tab[aria-selected="true"], .cvs-tpl[aria-checked="true"] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; box-shadow: none; }
  .cvs-tpl[aria-checked="true"] .cvs-tpl-hint, .cvs-tab[aria-selected="true"] .cvs-tab-n { color: HighlightText; }
  .cvs-tab[aria-selected="true"] .cvs-tab-n { background: none; border: 1px solid HighlightText; }
  .cvs-tab:focus-visible, .cvs-tpl:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .cvs-swatch:focus-visible { outline: 2px solid CanvasText; outline-offset: 0; }
}

/* ---------- Guide cards (below the workspace, inside the shared guide area) ---------- */
.cvs-guide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; }
.cvs-guide__card { padding: clamp(1.25rem, 2.6vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); color: var(--ink-2); }
.cvs-guide__card h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.cvs-guide__card p:not(.lz-eyebrow) { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); }
.cvs-guide__card p:not(.lz-eyebrow) + p { margin-top: var(--space-3); }
@media (max-width: 760px) { .cvs-guide__grid { grid-template-columns: minmax(0, 1fr); } }