@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: normal; src: url(fonts/fira-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 400; font-style: italic; src: url(fonts/fira-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 700; font-style: normal; src: url(fonts/fira-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-weight: 700; font-style: italic; src: url(fonts/fira-sans-latin-700-italic.woff2) format('woff2'); }

:root { --dx: 0mm; --dy: 0mm; }

* { margin: 0; padding: 0; }
.letter { font: 10pt/14pt 'Fira Sans', sans-serif; }
.letter p { margin: 0; orphans: 3; widows: 3; }
.body p { margin-bottom: 14pt; } /* DIN 5008: blank line between paragraphs; other fields: Enter = new line */

/* All page margins live on the element, @page margin is 0: Firefox then prints no
   page numbers/URL/date. box-decoration-break: clone repeats the top/bottom padding
   on every printed page; the page-1 header pulls itself back up to the page edge. */
.letter {
  box-sizing: border-box;
  padding-top: 20mm;
  padding-bottom: 20mm;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-left: calc(24mm + var(--dx));
  padding-right: calc(24mm - var(--dx));
}

/* ---- Page 1 header: full page width, 308pt high, children positioned from the page edge ---- */
.page1-header {
  position: relative;
  height: 308pt;
  margin-top: -20mm;
  margin-left: calc(-24mm - var(--dx));
  margin-right: calc(-24mm + var(--dx));
  transform: translate(var(--dx), var(--dy)); /* printer offset; header never spans pages */
}

/* DIN lang window as it sits on the sheet folded at 105/210 mm */
.window { position: absolute; left: 15mm; top: 46.5mm; width: 90mm; height: 45mm; border-radius: 4mm; background: rgba(0, 0, 0, 0.05); box-sizing: border-box; }

/* 85 mm (DIN 5008 address field): text runs 24–101 mm, inside the 15–105 mm window */
.address { position: absolute; left: 20mm; top: 126pt; width: 85mm; padding: 14pt 4mm; box-sizing: border-box; }
/* Spacing as margins, not padding, so each field's box (focus outline) hugs its text */
.return-line { font-size: 8pt; margin-top: 5.1pt; margin-bottom: -5.1pt; }
.recipient { margin-top: calc(14pt + 4.7pt); } /* one empty line, as in the original; collapses with -5.1pt above */

.sidebar { position: absolute; right: 24mm; top: 70pt; width: 40mm; height: 182pt; padding-bottom: 1.4pt; font-size: 8pt; }
.sidebar-inner { position: absolute; bottom: 0; width: 100%; }
.date { margin-top: 28pt; } /* two empty lines between sender and date */

/* Fold/hole marks: borders print without "print backgrounds" */
.mark { position: absolute; left: 5mm; border-top: 0.3mm solid rgba(0, 0, 0, 0.3); }
.fold1 { top: 105mm; width: 3mm; }
.hole { top: 148.5mm; width: 5mm; }
.fold2 { top: 210mm; width: 3mm; }

/* ---- Logo (per letter): top right of page 1, above the sender block (sidebar starts at 70pt) ---- */
.logo { position: absolute; top: 10mm; right: 24mm; width: 60mm; height: 15mm; }
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right top; }
.logo img[hidden] { display: none; }
@media screen {
  /* Empty: a faint dashed box opens the file picker. Set: hover shows Ersetzen / Entfernen below the box. */
  .logo-add {
    width: 100%; height: 100%; justify-content: center; border: 1px dashed var(--border-strong); border-radius: 2px;
    background: none; color: var(--faint); font-weight: 400; font-size: 12px;
  }
  .logo-add:hover { background: rgba(15, 23, 42, 0.03); color: var(--muted); border-color: var(--faint); }
  .logo:not(.empty) .logo-add, .logo.empty .logo-actions { display: none; }
  .logo:not(.empty):hover, .logo:not(.empty):focus-within { outline: 1px dashed var(--faint); outline-offset: 2px; border-radius: 2px; }
  .logo-actions {
    position: absolute; top: 100%; right: 0; z-index: 1; display: flex; gap: 4px; padding-top: 6px;
    opacity: 0; pointer-events: none; transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .logo:hover .logo-actions, .logo:focus-within .logo-actions { opacity: 1; pointer-events: auto; }
  .logo-actions button { height: 26px; padding: 0 10px; font-size: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
  .logo-actions .logo-remove:hover { color: #b91c1c; }
}

/* ---- Flowing body ---- */
.subject { font-weight: 700; margin-top: 4.7pt; margin-bottom: 14pt; }
.body, .closing { margin-bottom: 14pt; } /* collapses with the last <p>'s 14pt */
.closing { break-inside: avoid; }
.signature-slot { height: 42pt; } /* 3 empty lines, as in the v1-core closing */
.signature-slot[data-mode="none"] { display: none; }
.attachments { font-size: 8pt; line-height: 12pt; padding-top: 5.1pt; }

/* ---- Signature in the slot (signature.js): left at the text edge, vertically centred,
   at most 70 mm × 42pt, aspect kept. Script fonts load only when a typed signature uses one. ---- */
@font-face { font-family: 'Dancing Script'; font-weight: 400; font-style: normal; src: url(fonts/dancing-script-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 400; font-style: normal; src: url(fonts/caveat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mrs Saint Delafield'; font-weight: 400; font-style: normal; src: url(fonts/mrs-saint-delafield-latin-400-normal.woff2) format('woff2'); }
.signature-slot { display: flex; align-items: center; }
.signature-slot > * { max-width: 70mm; max-height: 42pt; }
.signature-slot > svg { height: 42pt; width: auto; }
.signature-slot > span { font-size: 24pt; line-height: 42pt; white-space: nowrap; }

/* ---- Page numbers (print only; filled by app.js): label n at top n × 297mm − 14mm lands on
   page n at 283 mm, its right edge at the text edge. Measured from the .letter box. ---- */
.page-numbers { position: absolute; top: 0; left: 0; right: 0; height: 0; }
.page-number { position: absolute; right: calc(24mm - var(--dx)); font: 8pt/14pt 'Fira Sans', sans-serif; white-space: nowrap; }

/* ---- Paper ---- */
@page { size: A4; margin: 0; }

@media print {
  html, body { margin: 0; background: none; }
  .letter { position: relative; } /* containing block of .page-numbers */
  .no-print, .window { display: none !important; }
  body.test-print .window { display: block !important; background: none; border: 0.2mm solid #000; }
  .subject.empty, .body.empty, .closing.empty, .greeting.empty, .signer.empty, .attachments.empty { display: none; }
  hr.page-break { break-after: page; border: 0; margin: 0; height: 0; }
}

@media screen {
  :root {
    --fg: #0f172a; --fg-2: #475569; --muted: #64748b; --faint: #94a3b8;
    --border: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.16);
    --surface: #fff; --canvas: #eef1f4; --hover: #f5f7f9; --selected: #eef1f4;
    --accent: #1d4ed8; --accent-hover: #1e40af;
    --radius: 6px; --toolbar-h: 52px;
  }

  body {
    display: grid; grid-template-columns: 248px 1fr; grid-template-rows: var(--toolbar-h) 1fr;
    min-height: 100vh; background: var(--canvas); color: var(--fg);
    font: 13px/20px system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  }

  /* ---- Controls ---- */
  button, .button {
    display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; white-space: nowrap;
    font: 500 13px/1 system-ui, sans-serif; color: var(--fg);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
    transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1), border-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  button:hover, .button:hover { background: var(--hover); }
  button:active, .button:active { background: var(--selected); }
  button:focus-visible, .button:focus-within, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.icon { width: 32px; padding: 0; justify-content: center; font-size: 14px; }
  button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  #offset-value { color: var(--accent); font-variant-numeric: tabular-nums; }

  /* ---- Toolbar ---- */
  .toolbar {
    grid-column: 1 / -1; position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 24px; padding: 0 16px;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .brand { width: 216px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
  .group { display: flex; align-items: center; gap: 4px; }
  .group.end { margin-left: auto; gap: 8px; }

  /* Positioned under its button by anchor() in app.js */
  .popover {
    position: fixed; inset: auto; margin: 0;
    width: 264px; padding: 16px; display: none; flex-direction: column; gap: 12px;
    background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.08);
  }
  .popover:popover-open { display: flex; }
  .popover label { display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
  .popover label span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
  .popover input {
    width: 72px; height: 32px; padding: 0 8px; font: 13px system-ui, sans-serif; font-variant-numeric: tabular-nums;
    color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--radius); text-align: right;
  }
  .popover p { color: var(--muted); font-size: 12px; line-height: 16px; }

  /* Menu popover: a list of options (radio rows) under a toolbar button */
  .menu-button .value { color: var(--fg-2); font-weight: 400; }
  .menu-button .chevron { margin-left: 2px; color: var(--faint); font-size: 10px; }
  .popover.menu { width: 232px; padding: 4px; gap: 0; }
  .popover .option {
    justify-content: flex-start; gap: 8px; height: 32px; padding: 0 8px; border-radius: 4px;
    font-weight: 400; cursor: pointer;
  }
  .popover .option:hover { background: var(--hover); }
  .popover .option input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
  .popover.menu p { margin-top: 4px; padding: 8px 8px 4px; border-top: 1px solid var(--border); }

  /* ---- Letter list ---- */
  .list {
    position: sticky; top: var(--toolbar-h); height: calc(100vh - var(--toolbar-h));
    display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border);
  }
  .list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 16px; }
  .list-head h2 { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .list ul { flex: 1; overflow: auto; list-style: none; padding: 0 8px; }
  .list li { display: flex; align-items: center; border-radius: var(--radius); }
  .list li:hover { background: var(--hover); }
  .list li.active { background: var(--selected); }
  .list .open {
    flex: 1; min-width: 0; height: auto; padding: 8px; display: block; text-align: left;
    background: none; border: 0; overflow: hidden; text-overflow: ellipsis; line-height: 20px;
  }
  .list .open small { display: block; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .list .delete {
    width: 28px; height: 28px; margin-right: 4px; padding: 0; justify-content: center;
    background: none; border: 0; color: var(--faint); font-size: 16px; opacity: 0;
  }
  .list li:hover .delete, .list .delete:focus-visible { opacity: 1; }
  .list .delete:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
  .list .duplicate {
    width: 28px; height: 28px; padding: 0; justify-content: center;
    background: none; border: 0; color: var(--faint); font-size: 15px; opacity: 0;
  }
  .list li:hover .duplicate, .list .duplicate:focus-visible { opacity: 1; }
  .list .duplicate:hover { color: var(--fg); background: rgba(15, 23, 42, 0.06); }
  .list-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
  .list-foot > * { flex: 1; justify-content: center; }
  .legal { padding: 0 12px 12px; font-size: 11px; color: var(--faint); text-align: center; }
  .legal a { color: var(--muted); text-decoration: none; }
  .legal a:hover { color: var(--fg); text-decoration: underline; }

  /* ---- Paper ---- */
  .letter {
    position: relative; align-self: start; width: 210mm; min-height: 297mm; margin: 32px auto;
    background: #fff; color: #000; border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  }
  /* Where the printed pages break (computed in app.js); label sits in the right margin */
  .page-guides { position: absolute; inset: 0; pointer-events: none; }
  .page-numbers { display: none; } /* the guide labels show the numbering on screen */
  .page-guide {
    position: absolute; left: 0; right: 0; border-top: 1px dashed var(--faint);
    padding-right: 8px; text-align: right; font: 11px/16px system-ui, sans-serif; color: var(--muted);
  }

  [contenteditable] { border-radius: 2px; transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1); }
  [contenteditable]:hover { background: rgba(15, 23, 42, 0.03); }
  [contenteditable]:focus { outline: 1px solid rgba(29, 78, 216, 0.35); outline-offset: 3pt; } /* outline: no layout shift */
  [contenteditable].empty::before { content: attr(data-placeholder); color: var(--faint); pointer-events: none; }

  hr.page-break { border: 0; border-top: 1px dashed var(--faint); margin: 7pt 0; height: 0; overflow: visible; text-align: center; }
  hr.page-break::after { content: 'Seitenumbruch'; position: relative; top: -0.75em; padding: 0 6px; background: #fff; color: var(--muted); font: 11px system-ui, sans-serif; }
}

/* ---- signature UI ---- */
@media screen {
  /* Slot on the sheet: click opens the menu; hover hints at it (never printed) */
  .signature-slot {
    position: relative; cursor: pointer; border-radius: 2px;
    transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .signature-slot:hover { background: rgba(15, 23, 42, 0.03); outline: 1px dashed var(--border-strong); outline-offset: 2px; }
  .signature-slot:focus-visible { outline: 1px solid rgba(29, 78, 216, 0.35); outline-offset: 3pt; }
  .signature-slot[data-mode="pen"]::before {
    content: 'Unterschrift wählen'; font: 12px/1 system-ui, sans-serif; color: var(--faint);
    opacity: 0; transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .signature-slot[data-mode="pen"]:hover::before, .signature-slot[data-mode="pen"]:focus-visible::before { opacity: 1; }

  /* Without a slot: a „+ Unterschrift“ chip on the line between greeting and name, on hover */
  .signature-add { display: none; position: relative; height: 0; }
  .signature-slot[data-mode="none"] + .signature-add { display: block; }
  .signature-add button {
    position: absolute; top: 0; left: 0; z-index: 1; transform: translateY(-50%);
    height: 20px; padding: 0 8px; border-radius: 10px; font: 500 11px/1 system-ui, sans-serif; color: var(--muted);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); opacity: 0; transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .closing:hover .signature-add button, .signature-add button:focus-visible { opacity: 1; }
  .signature-add button:hover { color: var(--fg); }

  /* Menu: saved signatures (preview + name), pen / none, actions, § 126 BGB note */
  #signature-menu { width: 320px; max-height: calc(100vh - 16px); overflow: auto; }
  #signature-menu .signature-option { height: 44px; }
  #signature-menu .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
  #signature-menu .menu-actions { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
  #signature-menu button.option { width: 100%; border: 0; background: none; font-weight: 400; }
  #signature-menu button.option:hover { background: var(--hover); }
  #signature-menu .signature-option .signature-preview { display: flex; } /* not the .popover label span defaults */
  #signature-menu .signature-preview > span { display: block; }

  /* Preview of a saved signature (menu, manage dialog): scaled into a small box */
  .signature-preview { flex: none; display: flex; align-items: center; width: 96px; height: 32px; overflow: hidden; }
  .signature-preview > svg { height: 100%; width: auto; max-width: 100%; }
  .signature-preview > img { max-width: 100%; max-height: 100%; }
  .signature-preview > span { font-size: 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Dialogs */
  .dialog {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 20px; box-sizing: border-box;
    color: var(--fg); background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.16);
  }
  .dialog[open] { display: flex; flex-direction: column; gap: 16px; }
  .dialog::backdrop { background: rgba(15, 23, 42, 0.32); }
  .dialog h2 { font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: -0.01em; }
  .dialog .field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
  .dialog input[type="text"] {
    height: 32px; padding: 0 10px; font: 13px system-ui, sans-serif; color: var(--fg);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  }
  .dialog [hidden] { display: none !important; }
  .dialog-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
  .dialog-error { margin-top: -4px; font-size: 12px; line-height: 16px; color: #b91c1c; }
  .dialog-error:empty { display: none; }
  .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

  /* Segmented control (tabs, ink): buttons with aria-pressed */
  .segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--selected); border-radius: var(--radius); }
  .segmented button { height: 28px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: var(--fg-2); }
  .segmented button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.5); }
  .segmented button[aria-pressed="true"] {
    color: var(--fg); background: var(--surface);
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.1);
  }
  .swatch { width: 10px; height: 10px; margin-right: 2px; border-radius: 50%; background: #1c2f7a; }
  [data-ink="black"] .swatch { background: #000; }

  .tab-panel { display: flex; flex-direction: column; gap: 8px; }
  /* Draw: light pad with a dashed signature line */
  .draw-area { position: relative; overflow: hidden; background: #fafbfc; border: 1px solid var(--border-strong); border-radius: 8px; }
  .draw-area canvas { display: block; width: 100%; height: auto; aspect-ratio: 3; touch-action: none; cursor: crosshair; }
  .draw-area::before { content: '×'; position: absolute; left: 14px; top: calc(72% - 20px); color: var(--faint); font-size: 16px; pointer-events: none; }
  .draw-area::after { content: ''; position: absolute; left: 14px; right: 14px; top: 72%; border-top: 1px dashed var(--border-strong); pointer-events: none; }
  .panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
  .panel-foot button { height: 28px; }
  /* Type: the text in all three fonts, click selects */
  .font-previews { display: flex; flex-direction: column; gap: 8px; }
  .font-preview { height: 60px; justify-content: space-between; gap: 16px; padding: 0 16px; border-radius: 8px; }
  .font-preview > span { min-width: 0; font-size: 28px; line-height: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .font-preview > .placeholder { opacity: 0.35; }
  .font-preview small { flex: none; font-size: 11px; font-weight: 400; color: var(--faint); }
  .font-preview[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  /* Upload: file picker as a button, preview on a checkerboard (shows the transparency) */
  .upload { position: relative; align-self: flex-start; }
  .upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .upload-preview {
    display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 8px; border: 1px solid var(--border);
    background: repeating-conic-gradient(#f1f4f7 0 25%, #fff 0 50%) 0 0 / 16px 16px;
  }
  .upload-preview.empty { padding: 0 24px; background: none; border-style: dashed; border-color: var(--border-strong); color: var(--muted); font-size: 12px; text-align: center; }
  .upload-preview img { max-width: calc(100% - 32px); max-height: calc(100% - 24px); }

  /* Manage: rows with preview, name, delete */
  .signature-rows { list-style: none; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
  .signature-rows:empty { display: none; }
  .signature-rows li { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; }
  .signature-rows li + li { border-top: 1px solid var(--border); }
  .signature-rows .signature-preview { width: 120px; height: 40px; }
  .signature-rows .signature-preview > span { font-size: 24px; }
  .signature-rows input { flex: 1; min-width: 0; }
  .signature-rows .delete { height: 28px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-weight: 400; }
  .signature-rows .delete:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
  .dialog-empty { padding: 12px 0; text-align: center; color: var(--muted); }
}

/* ---- sender profiles ---- */
@media screen {
  /* Absender menu: profile rows (✓ applied, name, ★ default), then the actions */
  #profile-value { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  #profile-menu { width: 248px; }
  #profile-menu .option {
    display: flex; width: 100%; background: none; border: 0; color: var(--fg); font: 400 13px/1 system-ui, sans-serif; text-align: left;
  }
  #profile-menu .option[hidden] { display: none; }
  #profile-menu .option:hover { background: var(--hover); }
  #profile-menu .option:active { background: var(--selected); }
  #profile-menu .check { width: 14px; flex: none; color: var(--accent); font-weight: 600; }
  #profile-menu .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #profile-menu .star { flex: none; color: #b45309; font-size: 12px; }
  #profile-menu .profile-empty { margin: 0; padding: 8px; border: 0; color: var(--muted); }
  #profile-menu .profile-actions { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
  #profile-menu .profile-actions .option { padding-left: 30px; } /* aligned with the profile names */

  /* Profile verwalten */
  .profiles-dialog {
    margin: auto; width: 420px; max-width: calc(100vw - 32px); padding: 20px;
    background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 0 0 0.5px rgba(15, 23, 42, 0.04), 0 8px 16px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.12);
  }
  .profiles-dialog::backdrop { background: rgba(15, 23, 42, 0.32); }
  .profiles-dialog h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
  .profiles-dialog .hint, .profiles-dialog .profile-none { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 16px; }
  .profiles-dialog .profile-none { margin-top: 16px; }
  .profiles-dialog .profile-none[hidden] { display: none; }
  .profile-rows { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
  .profile-rows li { display: flex; align-items: center; gap: 4px; }
  .profile-rows input {
    flex: 1; min-width: 0; height: 32px; padding: 0 8px; font: 13px system-ui, sans-serif; color: var(--fg);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
  }
  .profile-rows .star, .profile-rows .delete {
    width: 32px; padding: 0; justify-content: center; background: none; border: 0; color: var(--faint); font-size: 16px;
  }
  .profile-rows .star[aria-pressed="true"] { color: #b45309; }
  .profile-rows .star:hover { color: #b45309; background: rgba(180, 83, 9, 0.08); }
  .profile-rows .delete:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
  .profiles-dialog .dialog-foot { display: flex; justify-content: flex-end; margin-top: 20px; }
}