/* ═══════════════════════════════════════════════════════════════════════
   GPTGenie · Einheitliches Liquid Glass für alles, was schwebt
   (Dialoge, Fenster, Popups, Menüs, Hinweise), angelehnt an iOS 26.

   Wird als allerletzte Stylesheet-Datei geladen und überschreibt die
   vielen einzelnen Stile der Fenster mit EINEM gemeinsamen Aussehen.

   Performance:
   · Der abgedunkelte Hintergrund hinter Fenstern hat KEINE Unschärfe mehr
     (wie bei iOS: nur abdunkeln). Nur das Fenster selbst ist echtes Glas,
     d. h. es wird genau eine kleine Fläche geblurrt statt des ganzen Bildschirms.
   · Animiert werden nur transform und opacity (läuft auf der Grafikkarte).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Glas-Fläche */
  --gl-tint: rgba(var(--a-1c1332,28,19,50),0.72);
  --gl-sheen: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 34%, rgba(255,255,255,0.015) 100%);
  --gl-blur: blur(26px) saturate(180%);
  --gl-rim: rgba(255,255,255,0.12);
  --gl-rim-top: rgba(255,255,255,0.30);
  --gl-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.26),
    inset 0 -1px 1px rgba(255,255,255,0.04),
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.22),
    0 34px 90px -30px rgba(0,0,0,0.85),
    0 10px 30px -14px rgba(0,0,0,0.55);
  --gl-radius: 30px;
  --gl-radius-sm: 16px;

  /* Innere Flächen (Felder, Gruppen, Karten im Fenster) */
  --gl-well: rgba(255,255,255,0.055);
  --gl-well-rim: rgba(255,255,255,0.08);

  /* Abdunkeln hinter Fenstern */
  --gl-scrim: rgba(var(--a-06040e,6,4,14),0.52);

  /* Bewegung */
  --gl-spring: cubic-bezier(.32, 1.26, .54, 1);
  --gl-out: cubic-bezier(.4, 0, .6, .2);
  /* Pop-ups (alle gleich): weich rein ohne Nachfedern, schnell raus */
  --gl-pop: cubic-bezier(.22, 1, .36, 1);
  --gl-pop-in: .34s;
  --gl-pop-fade: .2s;
  --gl-pop-out: .18s;

  /* Knöpfe */
  /* Knöpfe: dickes, milchiges Glas wie bei iOS 26 (heller Lichtrand oben, weiches Leuchten unten, Seitenkanten) */
  --gl-btn: linear-gradient(180deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.05) 68%, rgba(255,255,255,0.11) 100%);
  --gl-btn-hover: linear-gradient(180deg, rgba(255,255,255,0.23) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.08) 68%, rgba(255,255,255,0.15) 100%);
  --gl-rim3d:
    inset 0 1px 0 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 0 rgba(255,255,255,0.14),
    inset 1px 0 1px -0.5px rgba(255,255,255,0.10),
    inset -1px 0 1px -0.5px rgba(255,255,255,0.10),
    inset 0 10px 14px -12px rgba(255,255,255,0.32),
    inset 0 -12px 16px -14px rgba(255,255,255,0.26);
  --gl-rim3d-hover:
    inset 0 1px 0 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 0 rgba(255,255,255,0.18),
    inset 1px 0 1px -0.5px rgba(255,255,255,0.14),
    inset -1px 0 1px -0.5px rgba(255,255,255,0.14),
    inset 0 10px 14px -12px rgba(255,255,255,0.40),
    inset 0 -12px 16px -14px rgba(255,255,255,0.32);
  --gl-rim3d-press:
    inset 0 1px 0 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 0 rgba(255,255,255,0.22),
    inset 1px 0 1px -0.5px rgba(255,255,255,0.16),
    inset -1px 0 1px -0.5px rgba(255,255,255,0.16),
    inset 0 0 18px 0 rgba(255,255,255,0.16),
    inset 0 -12px 16px -14px rgba(255,255,255,0.36);
  /* Schatten außen: in allen Zuständen gleich (button-glass.js gleicht damit die Lage der Lichtbrechung aus) */
  --gl-drop3d: 0 1px 1.5px rgba(0,0,0,0.30), 0 8px 18px -8px rgba(0,0,0,0.55);
  --gl-btn-shadow: var(--gl-rim3d), var(--gl-drop3d);
  --gl-primary: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0) 70%), linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.14) 100%), linear-gradient(135deg, rgb(var(--a-a855f7,168,85,247)) 0%, rgb(var(--a-c026d3,192,38,211)) 100%);
  --gl-rim3d-primary:
    inset 0 1px 0 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 0 rgba(255,255,255,0.24),
    inset 1px 0 1px -0.5px rgba(255,255,255,0.16),
    inset -1px 0 1px -0.5px rgba(255,255,255,0.16),
    inset 0 10px 14px -12px rgba(255,255,255,0.45),
    inset 0 -12px 16px -14px rgba(255,255,255,0.34);
  --gl-drop3d-primary: 0 1px 1.5px rgba(0,0,0,0.28), 0 10px 22px -10px rgba(var(--a-c026d3,192,38,211),0.39);
  --gl-primary-shadow: var(--gl-rim3d-primary), var(--gl-drop3d-primary);
  --gl-danger: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.12) 100%), linear-gradient(135deg, #ff5a4f 0%, #d92d20 100%);
  --gl-danger-shadow: var(--gl-rim3d-primary), 0 1px 1.5px rgba(0,0,0,0.28), 0 10px 22px -10px rgba(255,69,58,0.75);
}

/* ───────────────────────────────────────────────────────────────────────
   1 · Abdunkeln hinter Fenstern (ohne Unschärfe)
   ─────────────────────────────────────────────────────────────────────── */
.auth-overlay,
.account-settings-dialog,
.modern-dialog-overlay,
.feedback-overlay,
#news-popup-overlay,
.presets-overlay,
.background-selection-overlay,
.slider-warning-overlay,
#history-overlay,
#pme-addpage-backdrop,
#pme-delete-backdrop,
#pme-at-overlay,
.pme-help,
#fast-scan-ui {
  background: var(--gl-scrim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ───────────────────────────────────────────────────────────────────────
   2 · Die Fenster selbst: eine gemeinsame Glas-Fläche
   ─────────────────────────────────────────────────────────────────────── */
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
.feedback-container,
#news-popup,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
#history-panel,
#pme-addpage-box,
#pme-delete-box,
#pme-at-box,
.pme-help-box,
.preset-rename-dialog,
#fast-scan-ui .fast-scan-container {
  background: var(--gl-sheen), var(--gl-tint) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-rim) !important;
  border-top-color: var(--gl-rim-top) !important;
  box-shadow: var(--gl-shadow) !important;
  color: #f5f5f7;
}
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
#news-popup,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
#pme-addpage-box,
#pme-delete-box,
#fast-scan-ui .fast-scan-container { border-radius: var(--gl-radius) !important; }
/* Arbeitsflächen (Fast Scan, Editor-Fenster) etwas deckender, damit nichts vom Zeichnen ablenkt */
#fast-scan-ui .fast-scan-container { background: var(--gl-sheen), rgba(var(--a-1a122e,26,18,46),0.88) !important; }
.preset-rename-dialog { border-radius: 24px !important; }
@media (min-width: 600px) { .feedback-container { border-radius: var(--gl-radius) !important; } }

/* alte Zier-Linien und Schimmer-Schichten weg, damit alles gleich aussieht */
.account-settings-content::before,
.auth-dialog::before,
.auth-dialog::after,
.modern-dialog-content::before,
#news-popup::before,
.background-selection-dialog::before,
.slider-warning-dialog::before,
#pme-addpage-box .pme-modal-shimmer, #pme-addpage-box .pme-modal-sheen,
#pme-delete-box .pme-modal-shimmer, #pme-delete-box .pme-modal-sheen { display: none !important; }

/* Einheitliche Bewegung für alle Pop-ups: weich rein ohne Nachfedern, schnell raus.
   Nur transform und opacity (Grafikkarte), nie Unschärfe, Größe oder Schatten animieren. */
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
.preset-rename-dialog {
  transition: transform var(--gl-pop-in) var(--gl-pop), opacity var(--gl-pop-fade) ease !important;
  will-change: transform, opacity;
}
.auth-overlay, .account-settings-dialog, .modern-dialog-overlay, .presets-overlay,
.background-selection-overlay, .slider-warning-overlay {
  transition: opacity var(--gl-pop-fade) ease !important;
}

/* Pop-ups, die js/app/dialogs.js (ggPopOpen / ggPopClose) öffnet und schließt.
   !important, weil die alten Fenster ihre Start-Werte noch direkt im Code setzen. */
.gg-pop-ov { opacity: 0 !important; transition: opacity var(--gl-pop-fade) ease !important; }
.gg-pop-ov.gg-in { opacity: 1 !important; }
.gg-pop-ov.gg-out { transition-duration: var(--gl-pop-out) !important; }
.gg-pop-ov .gg-pop:not(.gg-morph) {
  opacity: 0 !important;
  transform: translateY(10px) scale(.97) !important;
  transition: transform var(--gl-pop-in) var(--gl-pop), opacity var(--gl-pop-fade) ease !important;
  will-change: transform, opacity;
}
.gg-pop-ov.gg-in .gg-pop:not(.gg-morph) { opacity: 1 !important; transform: none !important; }
.gg-pop-ov.gg-out .gg-pop:not(.gg-morph) {
  opacity: 0 !important;
  transform: translateY(6px) scale(.98) !important;
  transition: transform var(--gl-pop-out) var(--gl-out), opacity var(--gl-pop-out) ease !important;
}
/* Fenster, die aus ihrem Knopf wachsen (js/app/morph.js): Bewegung kommt aus der Web-Animation, CSS-Übergänge
   der Fenster aus (die würden sonst darüber liegen). Beim Schließen blendet der Hintergrund so lange aus wie der Rückweg. */
.gg-morph.gg-morph { transition: none !important; will-change: transform, opacity, filter; }
.gg-pop-ov.gg-out.gg-out-morph { transition-duration: .3s !important; }
/* Handy: Blätter (z. B. Download) kommen von unten */
@media (max-width: 560px) {
  .gg-pop-ov .gg-pop.gg-pop-sheet { opacity: 1 !important; transform: translateY(100%) !important; }
  .gg-pop-ov.gg-in .gg-pop.gg-pop-sheet { transform: none !important; }
  .gg-pop-ov.gg-out .gg-pop.gg-pop-sheet { transform: translateY(100%) !important; transition: transform .24s var(--gl-out) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gg-pop-ov .gg-pop, .gg-pop-ov .gg-pop.gg-pop-sheet { transform: none !important; }
}

/* Zustände für Fenster, die über eine Klasse ein-/ausgeblendet werden */
.account-settings-dialog .account-settings-content,
.presets-overlay .presets-panel,
.background-selection-overlay .background-selection-dialog,
.slider-warning-overlay .slider-warning-dialog,
.auth-overlay .auth-dialog {
  animation: none !important;
  transform: translateY(10px) scale(.97);
  opacity: 0;
}
.account-settings-dialog.visible .account-settings-content,
.presets-overlay.active .presets-panel,
.background-selection-overlay.active .background-selection-dialog,
.slider-warning-overlay.active .slider-warning-dialog,
.auth-overlay.active .auth-dialog {
  transform: none;
  opacity: 1;
}
.auth-overlay:not(.active) { opacity: 0 !important; }

/* PDF-Editor: Text einfügen + Hilfe im selben Glas */
#pme-at-box, .pme-help-box { border-radius: 26px !important; }
#pme-at-input { background: var(--gl-well) !important; border: 1px solid var(--gl-well-rim) !important; border-radius: 14px !important; }
#pme-at-input:focus { border-color: rgba(var(--a-c084fc,192,132,252),0.65) !important; box-shadow: 0 0 0 3.5px rgba(var(--a-a855f7,168,85,247),0.22) !important; }
.pme-help { opacity: 0; transition: opacity .22s ease; }
.pme-help.gl-open { opacity: 1; }
.pme-help .pme-help-box { transform: translateY(10px) scale(.95); opacity: 0; transition: transform .4s var(--gl-spring), opacity .22s ease; }
.pme-help.gl-open .pme-help-box { transform: none; opacity: 1; }

/* Fast Scan: Fenster schrumpft beim Schließen mit */
#fast-scan-ui.closing .fast-scan-container { animation: glPanelOut .24s var(--gl-out) forwards !important; }
@keyframes glPanelOut { to { transform: translateY(8px) scale(.95); opacity: 0; } }

/* ───────────────────────────────────────────────────────────────────────
   3 · Überschriften und Texte in Fenstern
   ─────────────────────────────────────────────────────────────────────── */
.settings-header h3,
.auth-header h2,
.sd-title,
.bg-dialog-header h3,
.presets-title-row h3,
.fb-write-title,
.fb-reviews-title,
.slider-warning-title,
.gl-title {
  font-size: 19px !important;
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  color: #f5f5f7 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.settings-header { margin-bottom: 18px !important; }

/* ───────────────────────────────────────────────────────────────────────
   4 · Schließen-Knopf: überall derselbe runde Glas-Knopf
   ─────────────────────────────────────────────────────────────────────── */
.auth-close-btn,
.settings-header .close-button,
.sd-close,
.fb-top-close,
.presets-close-btn,
.bg-close-btn,
.news-popup-close,
.fb-close-btn,
.gl-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(245,245,247,0.78) !important;
  background: var(--gl-btn) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
  box-shadow: var(--gl-btn-shadow) !important;
  cursor: pointer;
  transition: transform .2s var(--gl-spring), background .15s ease, color .15s ease !important;
}
.settings-header .close-button { padding: 8px !important; box-sizing: border-box; stroke-width: 2.4; }
.auth-close-btn:hover, .settings-header .close-button:hover, .sd-close:hover, .fb-top-close:hover,
.presets-close-btn:hover, .bg-close-btn:hover, .news-popup-close:hover, .fb-close-btn:hover, .gl-close:hover {
  background: var(--gl-btn-hover) !important;
  color: #fff !important;
  transform: scale(1.06);
}
.auth-close-btn:active, .settings-header .close-button:active, .sd-close:active, .fb-top-close:active,
.presets-close-btn:active, .bg-close-btn:active, .news-popup-close:active, .fb-close-btn:active, .gl-close:active { transform: scale(.94); }
/* Das Zeichen „ד sitzt je nach Schrift zu tief oder schief. Darum wird es ausgeblendet und stattdessen
   ein exakt mittiges X gezeichnet (Knöpfe, die schon ein SVG enthalten, bleiben wie sie sind). */
@supports selector(:has(a)) {
  :is(.auth-close-btn, .sd-close, .bg-close-btn, .fb-close-btn, .gl-close):not(:has(svg)) {
    position: relative;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    margin-top: 0 !important;
  }
  :is(.auth-close-btn, .sd-close, .bg-close-btn, .fb-close-btn, .gl-close):not(:has(svg))::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    text-indent: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* SVG-Knöpfe: Symbol ohne Grundlinien-Versatz genau in die Mitte */
:is(.auth-close-btn, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn, .news-popup-close, .fb-close-btn, .gl-close) > svg {
  display: block; flex: none; margin: 0 !important;
}
.news-popup-close { margin-top: 0 !important; }

/* ───────────────────────────────────────────────────────────────────────
   5 · Knöpfe in Fenstern: Haupt-, Zweit- und Gefahr-Knopf
   ─────────────────────────────────────────────────────────────────────── */
.auth-button-primary,
.action-button.purple,
.sd-close-btn,
.btn-submit,
.slider-btn-confirm,
.news-dismiss-btn,
.presets-save-new-btn,
.gl-btn-primary {
  background: var(--gl-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-top-color: rgba(255,255,255,0.36) !important;
  box-shadow: var(--gl-primary-shadow) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  text-shadow: 0 1px 1px rgba(var(--a-3c005a,60,0,90),0.3);
  filter: none;
  transition: transform .2s var(--gl-spring), filter .15s ease, opacity .15s ease !important;
}
.auth-button-primary:hover:not(:disabled), .action-button.purple:hover, .sd-close-btn:hover, .btn-submit:hover:not(:disabled),
.slider-btn-confirm:hover, .news-dismiss-btn:hover, .presets-save-new-btn:hover:not(:disabled), .gl-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px);
}
.auth-button-primary:disabled, .btn-submit:disabled, .presets-save-new-btn:disabled, .gl-btn-primary:disabled {
  opacity: .45 !important;
  filter: saturate(.6) !important;
  cursor: not-allowed;
  transform: none !important;
}

.auth-button-secondary,
.action-button.cancel,
.btn-cancel,
.slider-btn-cancel,
.pme-modal-cancel-btn,
.gl-btn {
  background: var(--gl-btn) !important;
  color: rgba(245,245,247,0.88) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top-color: rgba(255,255,255,0.22) !important;
  box-shadow: var(--gl-btn-shadow) !important;
  font-weight: 650 !important;
  border-radius: 100px !important;
  transition: transform .2s var(--gl-spring), background .15s ease !important;
}
.auth-button-secondary:hover, .action-button.cancel:hover, .btn-cancel:hover, .slider-btn-cancel:hover,
.pme-modal-cancel-btn:hover, .gl-btn:hover {
  background: var(--gl-btn-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.action-button.danger,
.gl-btn-danger {
  background: var(--gl-danger) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-top-color: rgba(255,255,255,0.32) !important;
  box-shadow: var(--gl-danger-shadow) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  transition: transform .2s var(--gl-spring), filter .15s ease, opacity .15s ease !important;
}
.action-button.danger:hover:not(:disabled), .gl-btn-danger:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.action-button.danger:disabled { opacity: .55 !important; filter: saturate(.7); cursor: not-allowed; }
.action-button.purple::after, .action-button.cancel::after, .action-button.danger::after { display: none !important; }
.button-container { display: flex; gap: 10px; }
.button-container .action-button { justify-content: center !important; text-align: center !important; margin: 0 !important; }

/* Knopf-Druck: überall gleich */
.auth-button:active:not(:disabled), .action-button:active:not(:disabled), .sd-close-btn:active, .btn-submit:active:not(:disabled),
.btn-cancel:active, .slider-btn-confirm:active, .slider-btn-cancel:active, .news-dismiss-btn:active,
.gl-btn:active, .gl-btn-primary:active, .gl-btn-danger:active, .modern-dialog-btn:active {
  transform: scale(.97) !important;
}

/* Knöpfe aus showModernDialog (bekommen dort eine gl-…-Klasse) */
.modern-dialog-btn { border-radius: 100px !important; }
.modern-dialog-btn.gl-btn-primary, .modern-dialog-btn.gl-btn-danger, .modern-dialog-btn.gl-btn { padding: 12px 22px !important; font-size: 14px !important; }

/* ───────────────────────────────────────────────────────────────────────
   6 · Eingabefelder in Fenstern
   ─────────────────────────────────────────────────────────────────────── */
.auth-input,
.styled-input,
.language-select,
#feedback-text,
.preset-rename-dialog input,
.verification-box {
  background: var(--gl-well) !important;
  border: 1px solid var(--gl-well-rim) !important;
  border-radius: 14px !important;
  color: #f5f5f7 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.auth-input:focus, .styled-input:focus, .language-select:focus, #feedback-text:focus,
.preset-rename-dialog input:focus, .verification-box:focus {
  outline: none !important;
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(var(--a-c084fc,192,132,252),0.65) !important;
  box-shadow: 0 0 0 3.5px rgba(var(--a-a855f7,168,85,247),0.22), inset 0 1px 2px rgba(0,0,0,0.2) !important;
}
.auth-input::placeholder, .styled-input::placeholder, #feedback-text::placeholder { color: rgba(245,245,247,0.38) !important; }

/* ───────────────────────────────────────────────────────────────────────
   7 · Account-Einstellungen als iOS-Liste
   ─────────────────────────────────────────────────────────────────────── */
.gl-group {
  background: var(--gl-well);
  border: 1px solid var(--gl-well-rim);
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 12px;
}
.gl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: #f5f5f7;
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .15s ease;
}
.gl-row + .gl-row::before {
  content: '';
  position: absolute;
  top: 0; left: 54px; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
button.gl-row:hover { background: rgba(255,255,255,0.05); }
button.gl-row:active { background: rgba(255,255,255,0.09); }
.gl-row-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%), var(--gl-icon, rgb(var(--a-a855f7,168,85,247)));
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.35), 0 2px 6px -2px rgba(0,0,0,0.5);
}
.gl-row-icon svg { width: 16px; height: 16px; }
.gl-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gl-row-label { font-size: 12px; font-weight: 600; color: rgba(245,245,247,0.5); }
.gl-row-value { font-size: 15px; color: #f5f5f7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-row-chev { color: rgba(245,245,247,0.32); flex-shrink: 0; }
.gl-row.gl-destructive { color: #ff6b61; }
.gl-row .language-select {
  width: auto !important;
  padding: 7px 30px 7px 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}
.gl-row .custom-select { margin-left: auto; position: relative; }
.gl-logout { width: 100%; padding: 13px 16px; font-size: 15px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: inherit; }
.gl-row .news-settings-dot { margin-left: 6px; }

/* ───────────────────────────────────────────────────────────────────────
   7b · Bausteine für Fenster-Inhalte
   ─────────────────────────────────────────────────────────────────────── */
.gl-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gl-title { margin: 0; }
.gl-text { color: rgba(245,245,247,0.68); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.gl-well {
  background: var(--gl-well) !important;
  border: 1px solid var(--gl-well-rim) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: none !important;
}
.gl-caption { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,245,247,0.45); margin-bottom: 8px; }
.gl-code {
  display: block; padding: 10px 14px; border-radius: 12px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06);
  color: rgba(245,245,247,0.82); font-size: 14px; line-height: 1.5;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.gl-code-result { font-family: inherit; color: #f5f5f7; }
.gl-well + .gl-btn-block, .gl-text + .gl-btn-block { margin-top: 18px; }
.gl-btn-block { display: flex; width: 100%; align-items: center; justify-content: center; padding: 13px 20px; font-size: 15px; font-family: inherit; cursor: pointer; }
.gl-btn-sm { padding: 7px 13px !important; font-size: 12px !important; font-family: inherit; cursor: pointer; flex: 1; }
.gl-shimmer { display: none !important; }

/* Statistik-Fenster */
.sd-hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%), linear-gradient(135deg, rgba(var(--a-a855f7,168,85,247),0.55), rgba(var(--a-c026d3,192,38,211),0.4)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-top-color: rgba(255,255,255,0.3) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 12px 30px -14px rgba(var(--a-c026d3,192,38,211),0.35) !important;
}
.sd-card, .sd-dates {
  background: var(--gl-well) !important;
  border: 1px solid var(--gl-well-rim) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.sd-card:hover { transform: none !important; }
.sd-icon { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 10px !important; }

/* Hintergrund-Auswahl */
.bg-item { border-radius: 14px !important; transition: transform .25s var(--gl-spring), box-shadow .2s ease !important; }
.bg-item:hover { transform: translateY(-2px) scale(1.015); }
.bg-item.selected { box-shadow: 0 0 0 2px rgb(var(--a-c084fc,192,132,252)), 0 10px 26px -12px rgba(var(--a-a855f7,168,85,247),0.4) !important; }
.bg-upload-btn { background: var(--gl-btn) !important; border: 1px dashed rgba(255,255,255,0.22) !important; border-radius: 16px !important; color: rgba(245,245,247,0.85) !important; }
.bg-upload-btn:hover { background: var(--gl-btn-hover) !important; }

/* Account-Unterfenster (Passwort, E-Mail, Löschen) */
.dialog-content .input-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.dialog-content .styled-input { width: 100%; padding: 13px 14px !important; font-size: 15px !important; box-sizing: border-box; }
.dialog-content .button-container .action-button { padding: 13px 16px !important; font-size: 15px !important; }
.warning-text {
  background: rgba(255,69,58,0.1) !important;
  border: 1px solid rgba(255,69,58,0.28) !important;
  border-radius: 14px !important;
  color: #ff8a82 !important;
}

/* ───────────────────────────────────────────────────────────────────────
   8 · Weitere schwebende Elemente im selben Glas
   ─────────────────────────────────────────────────────────────────────── */
.lp-lang-menu,
.lp-lang-dropdown,
.toast-container .toast.info {
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
}

/* Handy-Menü: fast deckend (Unschärfe wirkt in der Navbar nicht verschachtelt) */
@media (max-width: 768px) {
  .nav-links {
    background: var(--gl-sheen), rgb(var(--a-18102c,24,16,44)) !important;
    border: 1px solid var(--gl-rim) !important;
    border-top-color: var(--gl-rim-top) !important;
    box-shadow: var(--gl-shadow) !important;
    border-radius: 24px !important;
    transform-origin: top center;
  }
  .nav-links.active { animation: glMenuIn .32s var(--gl-spring) both; }
  .nav-links.active.gl-closing { animation: glMenuOut .17s var(--gl-out) both; }
}
@keyframes glMenuOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes glMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Cookie-Hinweis im selben Glas, Knöpfe wie überall */
#cookie-banner {
  background: var(--gl-sheen), var(--gl-tint) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-rim) !important;
  border-top-color: var(--gl-rim-top) !important;
  box-shadow: var(--gl-shadow) !important;
  border-radius: var(--gl-radius) !important;
}
#cookie-banner:not(.cb-visible) { visibility: hidden; transition: transform .3s var(--gl-out), opacity .25s ease, visibility 0s linear .3s !important; }
#cookie-banner .cb-btn-accept { background: var(--gl-primary) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-top-color: rgba(255,255,255,0.36) !important; box-shadow: var(--gl-primary-shadow) !important; color: #fff !important; }
#cookie-banner .cb-btn-save, #cookie-banner .cb-btn-reject { background: var(--gl-btn) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-top-color: rgba(255,255,255,0.22) !important; box-shadow: var(--gl-btn-shadow) !important; color: rgba(245,245,247,0.88) !important; }
#cookie-banner .cb-btn { border-radius: 100px !important; }

/* Sprachauswahl im Buchstaben-Raster: gleiches Glas, weich rein und raus */
.lp-lang-pop {
  background: var(--gl-sheen), rgb(var(--a-1a1230,26,18,48)) !important;
  border: 1px solid var(--gl-rim) !important;
  border-top-color: var(--gl-rim-top) !important;
  box-shadow: var(--gl-shadow) !important;
  border-radius: 22px !important;
  transform-origin: top right;
  animation: glMenuIn .3s var(--gl-spring) both !important;
}
.lp-lang-pop.gl-closing { animation: glMenuOut .15s var(--gl-out) both !important; }

/* Wer weniger Bewegung möchte: nur ein- und ausblenden */
@media (prefers-reduced-motion: reduce) {
  .auth-dialog, .account-settings-content, .modern-dialog-content, .sd-wrap, .presets-panel,
  .background-selection-dialog, .slider-warning-dialog, .preset-rename-dialog { transition: opacity .2s ease !important; transform: none !important; }
}
/* Ohne backdrop-filter (alte Browser): Fläche fast deckend, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --gl-tint: rgba(var(--a-18112c,24,17,44),0.97); }
}

/* Stift-Seitentaste: Radieren im Zeichenfeld sichtbar machen */
canvas.gg-erasing { cursor: cell !important; }

/* Arabisch im normalen Zeichenfeld: Verbindungshilfe wie im Fast Scan */
#app-section .canvas-wrapper .lc-join-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 0;
}
#app-section .lc-join { opacity: 0; transition: opacity .2s ease; }
#app-section .lc-join.on { opacity: 1; }
#app-section .lc-join line { stroke: #fcd34d; stroke-width: 30; stroke-linecap: round; stroke-dasharray: 34 30; }
#app-section .lc-join circle { fill: #fcd34d; }
#app-section .canvas-form-hint {
  margin: -6px 0 0 !important;
  font-size: 12.5px; line-height: 1.4;
  color: var(--text-2, rgba(245,245,247,0.72));
  text-align: left;
  animation: glHintIn .22s ease both;
}
#app-section .canvas-form-hint[hidden] { display: none !important; }
#app-section .canvas-form-hint b { color: #fcd34d; font-weight: 700; }
#app-section .canvas-form-hint span[dir="rtl"] { font-size: 15px; unicode-bidi: isolate; }
@keyframes glHintIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { #app-section .canvas-form-hint { text-align: center; } }

/* Gespeicherte Version wird im Zeichenfeld bearbeitet */
#app-section .canvas-edit-hint {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -4px 0 0 !important; padding: 7px 8px 7px 12px;
  border-radius: 12px;
  background: rgba(var(--a-a855f7,168,85,247),0.12);
  border: 1px solid rgba(var(--a-c084fc,192,132,252),0.35);
  font-size: 12.5px; line-height: 1.4;
  color: var(--text-2, rgba(245,245,247,0.82));
  animation: glHintIn .22s ease both;
}
#app-section .canvas-edit-hint[hidden] { display: none !important; }
#app-section .canvas-edit-hint svg { flex-shrink: 0; color: rgb(var(--a-e9d5ff,233,213,255)); }
#app-section .canvas-edit-hint span { flex: 1 1 140px; min-width: 0; }
#app-section .canvas-edit-hint b { color: rgb(var(--a-e9d5ff,233,213,255)); font-weight: 700; }
#app-section #canvas-edit-cancel {
  flex-shrink: 0; margin: 0 !important; padding: 4px 11px !important;
  border-radius: 100px !important; cursor: pointer;
  font-size: 12px !important; font-weight: 600; line-height: 1.3;
  color: var(--text-2, rgba(245,245,247,0.82)) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important; min-height: 0 !important; width: auto !important;
}
#app-section #canvas-edit-cancel:hover { background: rgba(255,255,255,0.14) !important; }

/* Radierer-Knopf (für Stifte, deren Seitentaste beim Schweben nicht gemeldet wird) */
.gg-eraser-btn.on {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(251,191,36,0.55), rgba(245,158,11,0.3)) !important;
  border-color: rgba(252,211,77,0.7) !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.18), inset 0 1px 1px rgba(255,255,255,0.3) !important;
}
body.gg-eraser-on #letterCanvas, body.gg-eraser-on #fastScanCanvas { cursor: cell !important; }
body.gg-eraser-on #app-section .canvas-wrapper, body.gg-eraser-on #fast-scan-ui .canvas-wrapper { border-color: rgba(252,211,77,0.75) !important; }
/* Schmale Handys: mit Radierer-Knopf wird es eng, Löschen nur als Symbol */
@media (max-width: 420px) {
  #app-section .canvas-btn-clear [data-translate="clear_canvas"] { display: none; }
  #app-section .canvas-btn-clear { width: 44px; padding: 0 !important; flex-shrink: 0; justify-content: center; }
}

/* ── Eigenes Dropdown im iOS-26-Stil (Sprache in den Einstellungen) ── */
.gl-dd-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 14px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; color: #f5f5f7;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border: 1px solid var(--gl-rim); border-top-color: var(--gl-rim-top);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.16), inset 0 -1px 1px rgba(0,0,0,0.12), 0 4px 12px -6px rgba(0,0,0,0.6);
  transition: background .2s ease, transform .3s var(--gl-spring), box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.gl-dd-btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)); }
.gl-dd-btn:active { transform: scale(.94); }
.gl-dd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--a-a855f7,168,85,247),0.45); }
.gl-dd-btn.gl-dd-active { background: linear-gradient(180deg, rgba(var(--a-c084fc,192,132,252),0.34), rgba(var(--a-a855f7,168,85,247),0.14)); border-color: rgba(var(--a-c084fc,192,132,252),0.55); transform: scale(.97); }
.gl-dd-chev { opacity: .6; transition: transform .3s var(--gl-spring), opacity .2s; }
.gl-dd-active .gl-dd-chev { opacity: .95; }

.gl-dd-pop {
  position: fixed; z-index: 100000; padding: 6px; border-radius: 22px; min-width: 230px;
  /* Glas: hell getönt, stark geblurrt, mit Lichtkante oben (Liquid Glass) */
  /* Leicht statt schwer: wenig Unschärfe, fast deckende Fläche (schont Grafikkarte und Akku) */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.01) 100%),
    rgba(var(--a-22183c,34,24,60),0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  will-change: transform, opacity; contain: layout paint;
  border: 1px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.38);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25),
    0 28px 70px -22px rgba(0,0,0,0.85),
    0 10px 24px -12px rgba(0,0,0,0.55);
  opacity: 0; transform: scale(.6);
  transition: opacity .16s ease, transform .34s cubic-bezier(.2, 1.2, .35, 1);
}
.gl-dd-pop.gl-dd-open { opacity: 1; transform: none; }
.gl-dd-pop.gl-dd-closing { opacity: 0; transform: scale(.8); transition: opacity .12s ease, transform .14s var(--gl-out); pointer-events: none; }
.gl-dd-head { padding: 8px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: rgba(245,245,247,0.5); }
.gl-dd-items { position: relative; }
.gl-dd-lens {
  position: absolute; left: 0; right: 0; top: 0; height: 44px; border-radius: 15px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0.5px rgba(255,255,255,0.35), inset 0 -1px 1px rgba(0,0,0,0.1), 0 6px 16px -8px rgba(0,0,0,0.5);
  transition: transform .42s cubic-bezier(.25, 1.3, .4, 1), height .3s ease, opacity .2s ease;
}
.gl-dd-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px 10px 8px; border: 0; border-radius: 15px; background: transparent;
  color: #f5f5f7; font: inherit; font-size: 15.5px; text-align: left; cursor: pointer;
  transition: transform .25s var(--gl-spring);
  -webkit-tap-highlight-color: transparent;
}
.gl-dd-item.gl-dd-press { transform: scale(.97); }
.gl-dd-check { width: 18px; flex-shrink: 0; display: inline-flex; justify-content: center; color: rgb(var(--a-d8b4fe,216,180,254)); }
.gl-dd-check svg { animation: glCheckIn .35s var(--gl-spring); }
@keyframes glCheckIn { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.gl-dd-text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gl-dd-label { font-weight: 600; }
.gl-dd-item.gl-dd-on .gl-dd-label { font-weight: 750; }
.gl-dd-sub { font-size: 12px; color: rgba(245,245,247,0.5); font-weight: 500; }
.gl-dd-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: rgba(245,245,247,0.7);
  padding: 3px 7px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
}
.gl-dd-item.gl-dd-on .gl-dd-tag { color: rgb(var(--a-f3e8ff,243,232,255)); background: rgba(var(--a-a855f7,168,85,247),0.3); border-color: rgba(var(--a-c084fc,192,132,252),0.45); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gl-dd-pop { background: rgba(var(--a-1e1536,30,21,54),0.98); } }
@media (prefers-reduced-motion: reduce) { .gl-dd-pop, .gl-dd-pop.gl-dd-closing { transform: none !important; } .gl-dd-lens { transition: none; } }

/* Textformatierung: Auswahl im Hilfe-Fenster */
.gg-fmt-list { margin: 4px 0 12px; }
.gg-fmt-row { cursor: pointer; text-align: left; }
.gg-fmt-row code { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,0.3); color: rgb(var(--a-e9d5ff,233,213,255)); }
.gg-fmt-key { margin-left: 6px; font-size: 11px; font-weight: 600; color: rgba(245,245,247,0.45); }
.gg-fmt-apply { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: rgb(var(--a-d8b4fe,216,180,254)); padding: 5px 10px; border-radius: 999px; background: rgba(var(--a-a855f7,168,85,247),0.16); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.3); }
.gg-fmt-row:hover .gg-fmt-apply { background: rgba(var(--a-a855f7,168,85,247),0.28); }
/* Textmarker: Farben zum Antippen (wie im PDF-Editor) */
.gg-fmt-hl { cursor: default; flex-wrap: wrap; row-gap: 8px; }
.gg-fmt-hl .gl-row-main { min-width: 150px; }
.gg-hl-mark { color: #1c1b22; background: linear-gradient(transparent 12%, rgba(255,230,0,0.85) 12%, rgba(255,230,0,0.85) 92%, transparent 92%); padding: 0 3px; border-radius: 3px; font-weight: 700; }
.gg-hl-dots { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.gg-hl-dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--c); border: 2px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 6px -2px rgba(0,0,0,0.5); transition: transform .12s ease, border-color .12s ease; }
.gg-hl-dot:hover { transform: scale(1.1); }
.gg-hl-dot:active { transform: scale(0.94); }
.gg-hl-dot.gg-hl-dot-on { border-color: #fff; }
.gg-hl-dot:focus-visible { outline: 2px solid rgb(var(--a-c084fc,192,132,252)); outline-offset: 2px; }
.gg-fmt-table { margin: 0 0 14px; }
.gg-fmt-math { margin: 0 0 14px; }
.gg-math-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 2px 0 6px; }
.gg-math-group { margin-top: 6px; text-align: left; border-top: 1px solid rgba(255,255,255,0.08); }
.gg-math-group:first-of-type { border-top: 0; }
.gg-math-group summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 2px;
  font-size: 13px; font-weight: 700; color: var(--text-1, #fff); -webkit-tap-highlight-color: transparent;
}
.gg-math-group summary::-webkit-details-marker { display: none; }
.gg-math-group summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .6; transition: transform .2s ease;
}
.gg-math-group[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gg-math-count { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(var(--a-a855f7,168,85,247),0.16); color: rgb(var(--a-d8b4fe,216,180,254)); }.gg-math-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 7px 9px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: var(--text-1, #fff);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.gg-math-chip span { font-size: 11px; font-weight: 600; color: var(--text-3, rgba(255,255,255,.55)); }
.gg-math-chip code { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gg-math-chip:hover { background: rgba(var(--a-a855f7,168,85,247),0.14); border-color: rgba(var(--a-a855f7,168,85,247),0.45); }
.gg-math-chip:active { transform: scale(0.97); }
#text-formatting-info-dialog .modern-dialog-content { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.gg-fmt-table .gl-code { white-space: pre; font-size: 12px; line-height: 1.5; display: block; overflow-x: auto; }

/* Export im PDF-Editor: gleiche Stift-Ladeanzeige wie bei der PDF-Erstellung */
#pme-export-loader {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(var(--a-080612,8,6,18),0.62);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  opacity: 0; transition: opacity .25s ease; pointer-events: all;
}
#pme-export-loader.active { opacity: 1; }
#pme-export-loader.active .gen-card { transform: none; opacity: 1; }
#pme-export-loader .gen-percent { font-weight: 800; color: #f5f5f7; font-variant-numeric: tabular-nums; }
/* Öffnen des PDF-Editors: gleiche Stift-Ladeanzeige */
#pme-loading-banner {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(var(--a-080612,8,6,18),0.62);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border-radius: 4px; pointer-events: all;
  opacity: 0; transition: opacity .25s ease;
}
#pme-loading-banner.active { opacity: 1; }
#pme-loading-banner.active .gen-card { transform: none; opacity: 1; }
#pme-loading-banner .gen-percent { font-weight: 800; color: #f5f5f7; font-variant-numeric: tabular-nums; }

/* PDF-Editor: „Nur mit Stift zeichnen“ */
.pme-penonly-row { align-items: flex-start !important; }
.pme-penonly-row input { margin-top: 1px; }
.pme-check-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.pme-check-txt small { font-size: 11px; color: rgba(245,245,247,0.45); font-weight: 500; }

/* PDF-Editor Radierer: Modus-Umschalter und Cursor beim Drücken */
.pme-eraser-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin: 6px 0 10px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07); }
.pme-eraser-mode button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border: 0; border-radius: 9px; background: transparent; color: rgba(245,245,247,0.6); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.pme-eraser-mode button:hover { color: #f5f5f7; }
.pme-eraser-mode button.active { background: rgba(var(--a-a855f7,168,85,247),0.26); color: rgb(var(--a-f3e8ff,243,232,255)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.25); }
#pme-eraser-cursor.pressing { background: rgba(var(--a-a855f7,168,85,247),0.24); border-color: rgb(var(--a-e9d5ff,233,213,255)); transform: translate(-50%,-50%) scale(0.94); }

/* Sprachauswahl im Buchstaben-Raster: Favoriten-Stern */
.lp-lang-row { position: relative; display: flex; align-items: center; }
.lp-lang-row .lp-lang-item { padding-right: 44px; }
.lp-lang-fav {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: rgba(245,245,247,0.32); transition: color .18s, background .18s, transform .18s;
}
.lp-lang-fav svg { fill: none; stroke: currentColor; }
.lp-lang-fav:hover { color: rgba(253,224,71,0.85); background: rgba(255,255,255,0.06); }
.lp-lang-fav.on { color: #fcd34d; }
.lp-lang-fav.on svg { fill: currentColor; filter: drop-shadow(0 0 6px rgba(252,211,77,0.45)); }
.lp-lang-fav.pop svg { animation: lpStarPop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes lpStarPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.lp-lang-fav:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.9); outline-offset: 1px; }
.lp-lang-group-fav { display: flex; align-items: center; gap: 5px; color: #fcd34d !important; }
.lp-lang-group-fav svg { width: 11px; height: 11px; fill: currentColor; stroke: currentColor; }
@media (hover: none) { .lp-lang-fav { color: rgba(245,245,247,0.4); } }
@media (prefers-reduced-motion: reduce) { .lp-lang-fav.pop svg { animation: none; } }
.lp-lang-search-wrap { flex-shrink: 0 !important; min-height: 40px; border-radius: 13px !important; }


/* ═══ Einstellungen: iOS-Navigation (Unterseiten gleiten im selben Fenster herein) ═══ */
.account-settings-content.gg-nav { padding: 0 !important; overflow: hidden !important; max-height: none !important; }
/* Tablet (quer) und PC: Fenster etwas breiter (Handy und Tablet hochkant: eigene Seite, app-shell.css) */
@media (min-width: 900px) { .account-settings-content.gg-nav { width: min(540px, calc(100vw - 48px)); } }
.gg-nav-vp { position: relative; overflow: hidden; transition: height .46s cubic-bezier(.32, .72, 0, 1); }
.gg-page {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  max-height: min(88vh, 760px); max-height: min(88dvh, 760px);
  transition: transform .46s cubic-bezier(.32, .72, 0, 1), opacity .34s ease;
  will-change: transform;
}
.gg-page.gg-enter { transform: translateX(104%); }
.gg-page.gg-under { transform: translateX(-28%); opacity: 0; pointer-events: none; }
.gg-page.gg-hidden { visibility: hidden; }
.gg-nav-vp.gg-dragging .gg-page { transition: none !important; }
.gg-page-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px;
  padding: 18px 18px 10px; flex-shrink: 0;
}
.gg-page-head .gg-title { grid-column: 2; margin: 0; font-size: 17px !important; font-weight: 700 !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.gg-page-head .gl-close { grid-column: 3; justify-self: end; }
.gg-page-root .gg-page-head { grid-template-columns: 1fr auto; padding: 22px 22px 12px; }
.gg-page-root .gg-page-head .gg-title { grid-column: 1; text-align: left; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
.gg-page-root .gg-page-head .gl-close { grid-column: 2; }
.gg-back {
  grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 6px 12px 6px 8px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  color: rgb(var(--a-d8b4fe,216,180,254)); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden;
  transition: background .15s ease, transform .25s var(--gl-spring);
  -webkit-tap-highlight-color: transparent;
}
.gg-back span { overflow: hidden; text-overflow: ellipsis; }
.gg-back:hover { background: rgba(255,255,255,0.07); }
.gg-back:active { transform: scale(.95); }
.gg-back:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.8); outline-offset: 1px; }
.gg-page-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 22px 22px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(var(--a-a855f7,168,85,247),0.35) transparent; }
.gg-page-root .gg-page-body { padding-top: 2px; }
.gg-page.gg-locked .gg-back, .gg-page.gg-locked .gl-close { opacity: .3; pointer-events: none; }
@media (max-width: 420px) { .gg-page-body { padding: 4px 16px 18px; } .gg-page-head { padding: 16px 14px 8px; } .gg-back span { display: none; } }

/* Bausteine der Unterseiten */
.gg-hero-ico {
  width: 58px; height: 58px; margin: 6px auto 14px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0) 60%), var(--c, rgb(var(--a-a855f7,168,85,247)));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.4), 0 10px 26px -10px var(--c, rgb(var(--a-a855f7,168,85,247)));
  animation: ggPop .5s var(--gl-spring) both;
}
.gg-hero-ico svg { width: 28px; height: 28px; }
.gg-hero-danger { --c: #ff453a; }
@keyframes ggPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.gg-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(245,245,247,0.7); text-align: center; }
.gg-center { text-align: center; font-size: 16px; font-weight: 650; color: #f5f5f7; }
.gg-hint { margin: 8px 2px 14px; font-size: 12.5px; line-height: 1.5; color: rgba(245,245,247,0.5); }
.gg-form { background: var(--gl-well); border: 1px solid var(--gl-well-rim); border-radius: 18px; overflow: hidden; }
.gg-field { display: block; padding: 9px 14px 10px; position: relative; cursor: text; }
.gg-field + .gg-field::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: rgba(255,255,255,0.07); }
.gg-field-label { display: block; font-size: 11.5px; font-weight: 650; color: rgba(245,245,247,0.5); margin-bottom: 2px; }
.gg-field-row { display: flex; align-items: center; gap: 6px; }
.gg-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #f5f5f7; font: inherit; font-size: 16px; padding: 2px 0; }
.gg-field input::placeholder { color: rgba(245,245,247,0.3); }
.gg-field:focus-within .gg-field-label { color: rgb(var(--a-d8b4fe,216,180,254)); }
.gg-field:focus-within { background: rgba(var(--a-a855f7,168,85,247),0.08); }
.gg-field-ro input { color: rgba(245,245,247,0.55); }
.gg-field-ro { cursor: default; }
.gg-eye { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: rgba(245,245,247,0.45); cursor: pointer; }
.gg-eye:hover { color: #f5f5f7; background: rgba(255,255,255,0.06); }
.gg-eye.on { color: rgb(var(--a-d8b4fe,216,180,254)); }
.gg-wide { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px !important; font-size: 15px !important; font-family: inherit; cursor: pointer; margin-top: 16px; }
.gg-mt8 { margin-top: 8px; }
.gg-wide.gg-loading { pointer-events: none; }
.gg-wide.gg-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: ggSpin .7s linear infinite; }
.gl-btn-danger:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6); }
@keyframes ggSpin { to { transform: rotate(360deg); } }
.gg-page-loading { display: grid; place-items: center; padding: 40px 0; }
.gg-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(var(--a-c084fc,192,132,252),0.25); border-top-color: rgb(var(--a-c084fc,192,132,252)); animation: ggSpin .8s linear infinite; }
.gg-pw-meter { height: 4px; margin: 10px 4px 0; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gg-pw-meter span { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .35s var(--gl-spring), background .3s; }
.gg-pw-meter[data-score="1"] span { width: 25%; background: #ff6b61; }
.gg-pw-meter[data-score="2"] span { width: 50%; background: #fbbf24; }
.gg-pw-meter[data-score="3"] span { width: 75%; background: #a3e635; }
.gg-pw-meter[data-score="4"] span { width: 100%; background: #34d399; }
.gg-badge-google { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1f1f1f; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.gg-badge-google[hidden] { display: none; }
.gg-del-list .gl-row { min-height: 42px; padding: 8px 14px; cursor: default; }
.gg-del-list .gl-row + .gl-row::before { left: 34px; }
.gg-del-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6b61; box-shadow: 0 0 8px rgba(255,107,97,0.6); flex-shrink: 0; margin: 0 4px 0 2px; }
.gg-warn { margin: 4px 0 0; padding: 10px 14px; font-size: 13px; text-align: center; }
.gg-stats .sd-hero { margin-top: 2px; }

/* Konto löschen: Radiergummi wischt die Handschrift weg */
.gg-erase-stage { position: relative; height: 130px; margin: 8px 0 14px; border-radius: 20px; overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(var(--a-c084fc,192,132,252),0.10) 25px 26px), var(--gl-well);
  border: 1px solid var(--gl-well-rim); }
.gg-erase-canvas, .gg-dust { position: absolute; inset: 0; pointer-events: none; }
.gg-eraser {
  position: absolute; left: 0; top: 0; width: 58px; height: 30px; transform-origin: 8px 30px; will-change: transform;
  border-radius: 7px 9px 9px 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 45%),
    linear-gradient(90deg, #f9a8d4 0 42%, rgb(var(--a-7c3aed,124,58,237)) 42% 46%, rgb(var(--a-a855f7,168,85,247)) 46% 100%);
  box-shadow: 0 8px 16px -6px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: opacity .3s ease;
}
.gg-eraser i { position: absolute; right: 8px; top: 8px; width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.7); box-shadow: 0 6px 0 rgba(255,255,255,0.45); }
.gg-eraser.gg-eraser-away { opacity: 0; transform: translate(120%, -40px) rotate(20deg) !important; transition: opacity .35s ease, transform .45s ease; }
.gg-eraser.gg-eraser-idle { animation: ggWiggle 1.2s ease-in-out infinite; }
@keyframes ggWiggle { 50% { margin-top: -4px; } }
.gg-erase-stage.gg-done::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 800; color: #34d399; text-shadow: 0 0 24px rgba(52,211,153,0.6); animation: ggPop .5s var(--gl-spring) both; }
.gg-erase-title { margin: 0 0 4px; text-align: center; font-size: 17px; font-weight: 750; color: #f5f5f7; }
.gg-erase-step { margin: 0 0 6px; text-align: center; font-size: 13.5px; color: rgba(245,245,247,0.6); min-height: 20px; }
@media (prefers-reduced-motion: reduce) { .gg-page { transition: opacity .2s ease !important; } .gg-page.gg-enter, .gg-page.gg-under { transform: none; } }
.gg-page-body { text-align: left; }
.gg-page-body .gg-lead, .gg-page-body .gg-erase-title, .gg-page-body .gg-erase-step, .gg-page-body .gg-warn { text-align: center; }
.gg-nav-vp { touch-action: pan-y; }   /* waagerechtes Wischen gehört uns (zurück), senkrechtes dem Browser (scrollen) */

/* Anmelden mit Google (Markenrichtlinien: dunkle Variante, G-Logo in Originalfarben) */
.gg-google-wrap[hidden] { display: none !important; }
.gg-or { display: flex; align-items: center; gap: 12px; margin: 14px 2px 12px; font-size: 12px; font-weight: 600; color: rgba(245,245,247,0.45); text-transform: lowercase; }
.gg-or::before, .gg-or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); }
.gg-google-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: #131314; color: #e3e3e3; border: 1px solid #8e918f;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,0.8);
  transition: background .15s ease, border-color .15s ease, transform .2s var(--gl-spring);
  -webkit-tap-highlight-color: transparent;
}
.gg-google-btn:hover { background: #1f1f21; border-color: #b4b7b5; }
.gg-google-btn:active { transform: scale(.97); }
.gg-google-btn:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.9); outline-offset: 2px; }
.gg-google-btn .gg-g { flex-shrink: 0; }
/* Warten auf Google: Logo bleibt ruhig, kleiner Kreis hinter dem Text */
.gg-google-btn.gg-loading { pointer-events: none; }
.gg-google-btn.gg-loading::after { content: ''; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .55; animation: ggSpin .8s linear infinite; }
.gg-google-wrap { margin-bottom: 10px; }

/* Icons statt Emojis */
.gg-i { display: inline-block; vertical-align: -0.16em; flex-shrink: 0; }
.guide-card .gc-icon { width: 40px; height: 40px; display: inline-grid !important; place-items: center; border-radius: 12px; color: rgb(var(--a-e9d5ff,233,213,255)); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(var(--a-a855f7,168,85,247),0.22); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); font-size: 0 !important; }
.gg-h-i { color: rgb(var(--a-c084fc,192,132,252)); margin-right: 4px; vertical-align: -0.12em; }
.ds-i { display: inline-grid; place-items: center; width: 22px; color: rgb(var(--a-c084fc,192,132,252)); vertical-align: -0.2em; }
.nav-link-fb { display: inline-flex !important; align-items: center; gap: 6px; }
.gg-star-i { color: #f59e0b; fill: #fcd34d; stroke-width: 1.6; filter: drop-shadow(0 0 5px rgba(251,191,36,0.55)); transition: transform .3s var(--gl-spring), filter .2s ease; }
.nav-link-fb:hover .gg-star-i { transform: rotate(-12deg) scale(1.15); filter: drop-shadow(0 0 8px rgba(251,191,36,0.8)); }
.news-feature-emoji, .news-tab-emoji { color: rgb(var(--a-d8b4fe,216,180,254)); display: grid; place-items: center; }
#cookie-banner-icon { color: #fbbf24; display: inline-grid; place-items: center; }
#pme-barrel-toast .gg-i { margin-right: 4px; }
.slider-warning-icon, .sd-icon { color: #f5f5f7; display: grid; place-items: center; }

/* Sprachliste: keine teure Unschärfe (Fläche ist ohnehin fast deckend) */
.lp-lang-pop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--gl-sheen), rgb(var(--a-1c1432,28,20,50)) !important; contain: layout paint; }
.lp-lang-pop .lp-lang-list { contain: content; }

/* ───────────────────────────────────────────────────────────────────────
   Hintergrund-Auswahl (backgrounds.js): Vorschau links, Muster & Farbe rechts,
   auf dem Handy als Blatt von unten
   ─────────────────────────────────────────────────────────────────────── */
.background-selection-dialog.bgs {
  max-width: 700px; width: 100%; padding: 22px 22px 0 !important;
  display: flex; flex-direction: column; max-height: min(88vh, 760px); max-height: min(88dvh, 760px); overflow: hidden; text-align: left;
}
.bgs .bg-dialog-header { margin-bottom: 14px; }
.bgs-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 18px;
  border-radius: 13px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
}
.bgs-tabs button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; font: 600 14px/1.2 inherit; color: rgba(245,245,247,0.62);
  transition: color .2s ease;
}
.bgs-tabs button.on { color: #fff; }
.bgs-tabs-lens {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 10px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.26);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.6);
  transform: translateX(calc(var(--bgs-i, 0) * 100%)); transition: transform .38s var(--gl-spring, cubic-bezier(.34,1.3,.64,1));
}
.bgs-tabs.bgs-noanim .bgs-tabs-lens { transition: none; }
.bgs-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  font-size: 11px; line-height: 18px; background: rgba(var(--a-a855f7,168,85,247),0.35); color: #fff;
}
.bgs-count:empty { display: none; }
.bgs-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; overflow-y: auto; min-height: 0; flex: 1; padding: 2px 2px 18px; }
.bgs-preview { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; align-self: start; }
.bgs-sheet {
  position: relative; aspect-ratio: 595 / 842; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 22px 44px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.12);
}
.bgs-sheet img, .bgs-ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.bgs-sheet img { object-fit: cover; }
.bgs-name { font-weight: 700; font-size: 15px; color: #f5f5f7; }
.bgs-cur {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; vertical-align: 2px;
  font-size: 11px; font-weight: 600; color: rgb(var(--a-e9d5ff,233,213,255)); background: rgba(var(--a-a855f7,168,85,247),0.22);
}
.bgs-tip {
  margin-top: 8px; padding: 9px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
  color: #fde68a; background: rgba(245,158,11,0.11); border: 1px solid rgba(245,158,11,0.28);
}
.bgs-tip button {
  display: inline-block; margin-top: 6px; padding: 4px 11px; border-radius: 100px; cursor: pointer;
  font: 600 12px/1.3 inherit; color: #1c1917; background: #fcd34d; border: 0;
}
.bgs-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(245,245,247,0.5); margin: 2px 0 9px; }
.bgs-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.bgs-kind, .bgs-tone {
  color: inherit; cursor: pointer; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .2s var(--gl-spring, ease);
}
.bgs-kind { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 15px; text-align: left; min-width: 0; }
.bgs-kind-img {
  width: 46px; height: 46px; flex: none; border-radius: 10px; background-size: 380% auto; background-position: 10% 8%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.3);
}
.bgs-kind-txt { min-width: 0; }
.bgs-kind-txt b { display: block; font-size: 14px; color: #f5f5f7; }
.bgs-kind-txt small { display: block; font-size: 11.5px; color: rgba(245,245,247,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bgs-tones { display: flex; gap: 8px; flex-wrap: wrap; }
.bgs-tone { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px 6px 7px; border-radius: 100px; font: 600 13.5px/1.2 inherit; }
.bgs-dot { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.22); }
.bgs-kind:hover, .bgs-tone:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.bgs-kind:active, .bgs-tone:active { transform: scale(0.97); }
.bgs-kind.on, .bgs-tone.on { background: rgba(var(--a-a855f7,168,85,247),0.17); border-color: rgba(var(--a-c084fc,192,132,252),0.85); box-shadow: 0 0 0 1px rgba(var(--a-c084fc,192,132,252),0.45), 0 8px 22px -14px rgba(var(--a-a855f7,168,85,247),0.45); }
.bgs-kind:focus-visible, .bgs-tone:focus-visible, .bgs-cust-item:focus-visible, .bgs-upload:focus-visible { outline: 2px solid rgb(var(--a-c084fc,192,132,252)); outline-offset: 2px; }

.bgs-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bgs-loading { grid-column: 1 / -1; height: 120px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: bgsShimmer 1.2s linear infinite; }
@keyframes bgsShimmer { to { background-position: -200% 0; } }
.bgs-upload {
  aspect-ratio: 595 / 842; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border-radius: 12px; text-align: center; color: #f5f5f7; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1.5px dashed rgba(255,255,255,0.24);
  transition: background .18s ease, border-color .18s ease;
}
.bgs-upload b { font-size: 13px; }
.bgs-upload small { font-size: 11px; color: rgba(245,245,247,0.5); }
.bgs-upload-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: rgb(var(--a-e9d5ff,233,213,255)); background: rgba(var(--a-a855f7,168,85,247),0.2); }
.bgs-upload:hover:not(:disabled), .bgs-drop .bgs-upload { border-color: rgba(var(--a-c084fc,192,132,252),0.8); background: rgba(var(--a-a855f7,168,85,247),0.12); }
.bgs-upload:disabled { opacity: .5; cursor: not-allowed; }
.bgs-upload.busy { cursor: progress; }
.bgs-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(var(--a-e9d5ff,233,213,255),0.3); border-top-color: rgb(var(--a-e9d5ff,233,213,255)); animation: bgsSpin .8s linear infinite; }
@keyframes bgsSpin { to { transform: rotate(360deg); } }
.bgs-cust-item { position: relative; aspect-ratio: 595 / 842; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); transition: box-shadow .18s ease, transform .2s var(--gl-spring, ease); }
.bgs-cust-item:hover { transform: translateY(-2px); }
.bgs-cust-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgs-cust-item.on { box-shadow: 0 0 0 2px rgb(var(--a-c084fc,192,132,252)), 0 12px 26px -12px rgba(var(--a-a855f7,168,85,247),0.45); }
.bgs-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgb(var(--a-a855f7,168,85,247)); box-shadow: 0 2px 6px rgba(0,0,0,0.35); opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .25s var(--gl-spring, ease); }
.bgs-cust-item.on .bgs-check { opacity: 1; transform: none; }
.bgs-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(var(--a-0f0a19,15,10,25),0.72); border: 1px solid rgba(255,255,255,0.2); opacity: 0; transition: opacity .18s ease, background .15s ease; }
.bgs-cust-item:hover .bgs-del, .bgs-cust-item:focus-within .bgs-del { opacity: 1; }
@media (hover: none) { .bgs-del { opacity: 1; } }
.bgs-del:hover { background: #dc2626; }
.bgs-hint { font-size: 12px; line-height: 1.5; color: rgba(245,245,247,0.5); margin: 12px 2px 0; }
.bgs-guest { text-align: center; padding: 28px 18px; border-radius: 18px; background: rgba(var(--a-a855f7,168,85,247),0.07); border: 1px solid rgba(var(--a-a855f7,168,85,247),0.2); }
.bgs-guest-icon { color: rgb(var(--a-c084fc,192,132,252)); margin-bottom: 8px; }
.bgs-guest-title { font-weight: 700; font-size: 15px; color: #f5f5f7; margin-bottom: 6px; }
.bgs-guest p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: rgba(245,245,247,0.65); }
.bgs-guest-btn { padding: 10px 20px; font-size: 14px; }
.bgs-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.bgs-btn-secondary {
  padding: 11px 20px; border-radius: 100px; cursor: pointer; font: 600 14px/1.2 inherit; color: rgba(245,245,247,0.88);
  background: var(--gl-btn, rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.24);
}
.bgs-btn-secondary:hover { background: var(--gl-btn-hover, rgba(255,255,255,0.14)); color: #fff; }
.bgs-apply { padding: 11px 28px; font-size: 14px; }

/* Knopf „Hintergrund“: zeigt das gewählte Papier als kleines Blatt */
.bg-btn-swatch {
  width: 14px; height: 19px; flex: none; border-radius: 3px; background-color: #fff;
  background-size: 300% auto; background-position: 10% 8%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.4);
}

@media (max-width: 600px) {
  .background-selection-overlay.bgs-overlay { align-items: flex-end !important; padding: 0 !important; }
  .background-selection-dialog.bgs { max-width: none; max-height: 92vh; max-height: 92dvh; padding: 18px 16px 0 !important; border-radius: 26px 26px 0 0 !important; }
  .bgs-body { grid-template-columns: 1fr; gap: 16px; }
  .bgs-preview { position: static; flex-direction: row; align-items: flex-start; gap: 14px; }
  .bgs-sheet { width: 104px; flex: none; }
  .bgs-meta { flex: 1; min-width: 0; padding-top: 2px; }
  .bgs-kinds { gap: 7px; }
  .bgs-kind { padding: 7px; gap: 9px; }
  .bgs-kind-img { width: 40px; height: 40px; }
  .bgs-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .bgs-footer button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bgs-tabs-lens, .bgs-kind, .bgs-tone, .bgs-cust-item, .bgs-check { transition: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Hintergrund-Fenster: weiche Übergänge, Glas-Linsen, eigene Bilder anpassen
   ─────────────────────────────────────────────────────────────────────── */
.bgs { --bgs-ease: cubic-bezier(.32,.72,0,1); }
/* Vorschau: jede Auswahl ist eine Ebene, die neue blendet weich über die alte */
.bgs-layers { position: absolute; inset: 0; }
.bgs-layer {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.035); filter: blur(6px);
  transition: opacity .42s var(--bgs-ease), transform .5s var(--bgs-ease), filter .42s var(--bgs-ease);
}
.bgs-layer.in { opacity: 1; transform: none; filter: none; }
.bgs-layer.out { opacity: 0; transition-duration: .38s; }
.bgs-layer img, .bgs-layer canvas, .bgs-layer .bgs-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bgs-layer img { object-fit: cover; }
.bgs-layer .bgs-ink { pointer-events: none; transition: opacity .2s ease; }
.bgs-sheet { transition: width .45s var(--bgs-ease), box-shadow .3s ease; }
.bgs-sheet.bgs-can-drag { cursor: grab; touch-action: none; }
.bgs-sheet.bgs-dragging { cursor: grabbing; box-shadow: 0 26px 50px -20px rgba(0,0,0,0.9), 0 0 0 2px rgba(var(--a-c084fc,192,132,252),0.75); }
.bgs-sheet.bgs-dragging .bgs-ink { opacity: .25; }
/* Drittel-Hilfslinien beim Verschieben */
.bgs-guides {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background-image:
    linear-gradient(90deg, transparent 33%, rgba(255,255,255,.6) 33%, rgba(255,255,255,.6) calc(33% + 1px), transparent calc(33% + 1px), transparent 66.5%, rgba(255,255,255,.6) 66.5%, rgba(255,255,255,.6) calc(66.5% + 1px), transparent calc(66.5% + 1px)),
    linear-gradient(180deg, transparent 33%, rgba(255,255,255,.6) 33%, rgba(255,255,255,.6) calc(33% + 1px), transparent calc(33% + 1px), transparent 66.5%, rgba(255,255,255,.6) 66.5%, rgba(255,255,255,.6) calc(66.5% + 1px), transparent calc(66.5% + 1px));
  mix-blend-mode: difference;
}
.bgs-sheet.bgs-dragging .bgs-guides { opacity: .7; }

/* Glas-Linse: gleitet zur Auswahl (Muster, Farben, Füllen/Ganz/Strecken) */
.bgs-kinds, .bgs-tones, .bgs-seg { position: relative; }
.bgs-lens {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03)), rgba(var(--a-a855f7,168,85,247),0.2);
  border: 1px solid rgba(var(--a-c084fc,192,132,252),0.85); border-top-color: rgba(var(--a-e9d5ff,233,213,255),0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(var(--a-c084fc,192,132,252),0.35), 0 10px 26px -12px rgba(var(--a-a855f7,168,85,247),0.48);
  -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%);
  transition: transform .5s cubic-bezier(.34,1.35,.64,1), width .45s var(--bgs-ease), height .45s var(--bgs-ease), opacity .25s ease;
}
.bgs-lens.bgs-noanim { transition: none !important; }
.bgs-tones .bgs-lens, .bgs-seg .bgs-lens { border-radius: 100px; }
.bgs-kind, .bgs-tone { position: relative; z-index: 1; }
.bgs-kind.on, .bgs-tone.on { background: transparent; border-color: transparent; box-shadow: none; }
.bgs-kind-img { transition: background-image .35s ease, transform .35s var(--bgs-ease); }
.bgs-kind.on .bgs-kind-img { transform: scale(1.06); }
.bgs-dot { transition: transform .35s cubic-bezier(.34,1.5,.64,1); }
.bgs-tone.on .bgs-dot { transform: scale(1.12); }

/* Reiter-Wechsel: Inhalt gleitet von der Seite herein */
.bgs-panel.bgs-in-r { animation: bgsInR .42s var(--bgs-ease) both; }
.bgs-panel.bgs-in-l { animation: bgsInL .42s var(--bgs-ease) both; }
@keyframes bgsInR { from { opacity: 0; transform: translateX(18px); } }
@keyframes bgsInL { from { opacity: 0; transform: translateX(-18px); } }
.bgs-tabs-lens { transition: transform .5s cubic-bezier(.34,1.35,.64,1); }

/* Eigene Bilder: Kacheln zeigen das Bild so, wie es auf dem Blatt liegt */
.bgs-cust-item { background: rgba(255,255,255,0.05); transition: box-shadow .25s ease, transform .35s cubic-bezier(.34,1.4,.64,1); }
.bgs-cust-cv { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
.bgs-cust-cv.ready { opacity: 1; }

/* Anpassen-Leiste */
.bgs-adjust { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; animation: bgsAdjIn .4s var(--bgs-ease) both; }
.bgs-adjust[hidden] { display: none; }
@keyframes bgsAdjIn { from { opacity: 0; transform: translateY(6px); } }
.bgs-seg {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1fr); padding: 3px; border-radius: 100px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08);
}
.bgs-seg button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 7px 4px; border-radius: 100px;
  font: 600 12px/1.2 inherit; color: rgba(245,245,247,0.62); white-space: nowrap; transition: color .2s ease;
}
.bgs-seg button.on { color: #fff; }
.bgs-seg .bgs-lens { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 16px -8px rgba(var(--a-a855f7,168,85,247),0.48); }
.bgs-zoom { display: flex; align-items: center; gap: 6px; }
.bgs-zoom output { min-width: 46px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(245,245,247,0.6); }
.bgs-zoom input[type=range] { flex: 1; min-width: 0; }   /* Aussehen in slider-glass.css */
.bgs-zoom input[type=range]:disabled { opacity: .35; cursor: not-allowed; }
.bgs-ic, .bgs-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: rgba(245,245,247,0.88);
  background: var(--gl-btn, rgba(255,255,255,0.08)); border: 1px solid rgba(255,255,255,0.13); border-top-color: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); transition: background .15s ease, transform .25s cubic-bezier(.34,1.5,.64,1), opacity .2s ease;
}
.bgs-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; padding: 0; }
.bgs-ic svg { display: block; }
.bgs-ic:disabled { opacity: .35; cursor: not-allowed; }
.bgs-adj-btns { display: flex; gap: 8px; }
.bgs-chip { flex: 1; padding: 7px 10px; border-radius: 100px; font: 600 12.5px/1.2 inherit; }
.bgs-ic:hover:not(:disabled), .bgs-chip:hover { background: var(--gl-btn-hover, rgba(255,255,255,0.14)); color: #fff; }
.bgs-ic:active:not(:disabled), .bgs-chip:active { transform: scale(.94); }
.bgs-smart {
  padding: 9px 11px; border-radius: 12px; font-size: 12px; line-height: 1.45; color: rgb(var(--a-e9d5ff,233,213,255));
  background: rgba(var(--a-a855f7,168,85,247),0.12); border: 1px solid rgba(var(--a-c084fc,192,132,252),0.3); animation: bgsAdjIn .35s var(--bgs-ease) both;
}
.bgs-smart[hidden] { display: none; }
.bgs-smart button {
  display: inline-block; margin-top: 6px; padding: 4px 11px; border-radius: 100px; cursor: pointer; border: 0;
  font: 600 12px/1.3 inherit; color: rgb(var(--a-1e1033,30,16,51)); background: rgb(var(--a-e9d5ff,233,213,255));
}
.bgs-adj-hint { margin: 0; font-size: 11.5px; line-height: 1.45; color: rgba(245,245,247,0.45); }

/* Beim Anpassen etwas größere Vorschau */
.bgs.bgs-editing .bgs-body { grid-template-columns: 250px minmax(0, 1fr); }
.bgs.bgs-editing .bgs-preview { position: static; }
@media (min-width: 601px) and (max-height: 860px) {
  .bgs.bgs-editing .bgs-body { grid-template-columns: 210px minmax(0, 1fr); }
  .bgs-adj-hint { display: none; }
  .bgs-seg button { font-size: 11.5px; padding: 7px 2px; letter-spacing: -.01em; }
}
@media (max-width: 600px) {
  .bgs.bgs-editing .bgs-body { grid-template-columns: 1fr; }
  .bgs.bgs-editing .bgs-preview { flex-direction: column; align-items: stretch; }
  .bgs.bgs-editing .bgs-sheet { width: min(62vw, 250px); align-self: center; }
  .bgs-seg button { font-size: 12.5px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bgs-layer, .bgs-lens, .bgs-sheet, .bgs-kind-img, .bgs-dot, .bgs-cust-cv { transition: none !important; }
  .bgs-layer { transform: none; filter: none; }
  .bgs-panel.bgs-in-r, .bgs-panel.bgs-in-l, .bgs-adjust, .bgs-smart { animation: none !important; }
}

/* ── Einstellungen › Akzentfarbe (js/app/account.js, js/accent.js) ── */
.gg-acc-now { font-size: 14px; color: rgba(245,245,247,0.5); flex-shrink: 0; }
.gg-acc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin: 0 0 16px; }
.gg-acc-sw {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 2px 6px;
  background: transparent; border: 0; border-radius: 14px; color: rgba(245,245,247,0.72);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease;
}
.gg-acc-sw:hover { background: rgba(255,255,255,0.05); }
.gg-acc-sw.on { color: #f5f5f7; }
.gg-acc-sw:focus-visible, .gg-hue:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.gg-acc-dot {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.45), rgba(255,255,255,0) 46%),
    linear-gradient(145deg, var(--sw1), var(--sw2) 55%, var(--sw3));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 4px 14px -4px var(--sw2);
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s ease;
}
.gg-acc-dot svg { width: 20px; height: 20px; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .2s cubic-bezier(.3,1.4,.5,1); }
.gg-acc-dot.on svg, .gg-acc-sw.on .gg-acc-dot svg { opacity: 1; transform: none; }
.gg-acc-sw.on .gg-acc-dot { box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 0 0 2.5px rgba(var(--a-0a0913,10,9,19),0.9), 0 0 0 4.5px var(--sw1), 0 6px 18px -4px var(--sw2); }
.gg-acc-sw:active .gg-acc-dot { transform: scale(.92); }
.gg-acc-custom { padding: 12px 14px 16px; }
.gg-acc-custom-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 550; color: #f5f5f7; }
.gg-acc-dot-sm { width: 26px; height: 26px; }
.gg-acc-dot-sm svg { width: 14px; height: 14px; }
.gg-acc-cp { margin-top: 0; max-width: none; animation: none; }
.gg-acc-cp .gg-cp-sv { height: 150px; border-radius: 14px; }
.gg-acc-cp .gg-cp-hue { height: 22px; margin: 2px 11px; }
.gg-acc-cp .gg-cp-hue-thumb { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-width: 3px; }
.gg-acc-cp .gg-cp-sv-thumb { width: 24px; height: 24px; margin: -12px 0 0 -12px; border-width: 3px; }
.gg-acc-hint { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(245,245,247,0.55); }
.gg-acc-hint[hidden] { display: none; }
@media (max-width: 380px) { .gg-acc-dot { width: 40px; height: 40px; } }

/* ── Auswahl-Listen als Liquid Glass (js/dropdown-glass.js) ──
   .gl-dd-js: die Verwandlung aus dem Knopf läuft im JS, die CSS-Übergänge sind dann aus.
   html.dd-glass (Chromium): Brechungsglas wie die Navbar. Durchsichtiger, damit man die Brechung am Rand sieht.
   Der äußere Schatten liegt dann auf .gl-dd-shadow, weil er am Glas selbst den Brechungsfilter in Chrome verschiebt. */
.gl-dd-pop.gl-dd-js { transition: none; opacity: 0; }
.gl-dd-pop .gl-dd-in { will-change: filter, opacity; }
html.dd-glass:not(.gg-perf) .gl-dd-pop.gl-dd-js {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.02) 100%),
    rgba(var(--a-160e2a,22,14,42),0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: var(--dd-bf, blur(10px));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -1px 1px rgba(255,255,255,0.08),
    inset 0 0 18px rgba(255,255,255,0.05);
}
.gl-dd-shadow {
  position: fixed; z-index: 99999; pointer-events: none; border-radius: 22px; opacity: 0;
  box-shadow:
    0 0 0 0.5px rgba(var(--a-a855f7,168,85,247),0.25),
    0 28px 70px -22px rgba(0,0,0,0.85),
    0 10px 24px -12px rgba(0,0,0,0.55);
}
@media (prefers-reduced-transparency: reduce) {
  html.dd-glass .gl-dd-pop.gl-dd-js { background: rgba(var(--a-1e1536,30,21,54),0.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Sprachliste am Buchstaben-Raster (js/letter-picker.js): Inhalt steckt in .gl-dd-in, Liste darin scrollbar */
.lp-lang-pop > .gl-dd-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lp-lang-pop > .gl-dd-in > .lp-lang-list { flex: 1; min-height: 0; }
.lp-lang-pop.gl-dd-js { animation: none !important; }
@media (prefers-reduced-transparency: reduce) {
  html.dd-glass .lp-lang-pop.gl-dd-js > .gl-dd-bg { background: var(--gl-sheen), rgb(var(--a-1c1432,28,20,50)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Suchleiste der Sprachliste als schwebende Glas-Pille (wie die Suche in den iOS-26-Einstellungen).
   Die Liste scrollt darunter durch, in Chromium mit Lichtbrechung am Rand (js/dropdown-glass.js setzt --dd-bf).
   Nur innere Schatten: ein äußerer Schatten würde den Brechungsfilter in Chrome verschieben. */
/* Ein Element mit backdrop-filter lässt Glas in seinem Inneren nichts dahinter sehen (wie bei der Navbar am Handy).
   Darum liegt das Brechungsglas der Liste hier auf .gl-dd-bg darunter, nicht auf der Liste selbst. */
.lp-lang-pop > .gl-dd-in { position: relative; z-index: 1; }
.lp-lang-pop > .gl-dd-bg { display: none; }
html.dd-glass:not(.gg-perf) .lp-lang-pop.gl-dd-js {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
html.dd-glass:not(.gg-perf) .lp-lang-pop.gl-dd-js > .gl-dd-bg {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.35),
    inset 0 -1px 1px rgba(255,255,255,0.08),
    inset 0 0 18px rgba(255,255,255,0.05);
  display: block; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02) 100%),
    rgba(var(--a-160e2a,22,14,42),0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: var(--dd-bf, blur(10px));
}
.lp-lang-pop .lp-lang-search-wrap {
  position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; margin: 0 !important;
  height: 46px; min-height: 46px; padding: 0 16px !important; gap: 10px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.03) 100%),
    rgba(var(--a-140e26,20,14,38),0.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: var(--dd-bf, blur(18px) saturate(160%));
  border: 1px solid rgba(255,255,255,0.13) !important; border-top-color: rgba(255,255,255,0.3) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.28),
    inset 0 -1px 1px rgba(255,255,255,0.06),
    inset 0 0 14px rgba(255,255,255,0.04) !important;
  color: rgba(245,245,247,0.6) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-lang-pop .lp-lang-search-wrap svg { width: 18px; height: 18px; }
.lp-lang-pop .lp-lang-search { font-size: 15.5px !important; font-weight: 500 !important; }
.lp-lang-pop .lp-lang-search::placeholder { color: rgba(245,245,247,0.5); }
.lp-lang-pop .lp-lang-search-wrap:focus-within {
  border-color: rgba(var(--a-c084fc,192,132,252),0.5) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.28),
    inset 0 -1px 1px rgba(255,255,255,0.06),
    inset 0 0 0 2px rgba(var(--a-a855f7,168,85,247),0.28) !important;
}
.lp-lang-pop .lp-lang-list {
  padding-top: 62px !important; scroll-padding-top: 62px;
  /* oben weich ausblenden: über der Pille sollen keine halben Zeilen hervorschauen */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 48px); mask-image: linear-gradient(180deg, transparent 0, transparent 8px, #000 48px);
}
html.gg-perf .lp-lang-pop .lp-lang-search-wrap { background: rgb(var(--a-221838,34,24,56)) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .lp-lang-pop .lp-lang-search-wrap { background: rgb(var(--a-221838,34,24,56)) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ───────────────────────────────────────────────────────────────────────
   Knöpfe als dickes Liquid Glass (iOS 26): gilt für alle Knöpfe der Seite
   Lichtrand oben, weiches Leuchten unten wie bei dickem Glas, feine Seitenkanten, weicher Schatten.
   Farbe/Fläche der Knöpfe bleibt, wie sie ist (rot, lila, durchsichtig); hier kommt nur das Glas-Licht dazu.
   Gewählte/aktive Knöpfe behalten ihren eigenen Leucht-Rahmen. Brechung am Rand: js/button-glass.js.
   ─────────────────────────────────────────────────────────────────────── */
:is(.nav-button:not(.register-btn), .hamburger-menu, .gg-chip, .lp-lang-btn, .canvas-btn:not(.canvas-btn-save),
    .btn-clear-text, .pdf-btn:not(.pdf-btn-generate), .page-nav-btn, .cta-button.secondary, .guide-all, .redirect-button,
    .auth-button-secondary, .action-button.cancel, .btn-cancel, .slider-btn-cancel, .preset-rename-cancel, .bgs-btn-secondary, .bgs-chip, .bgs-ic,
    .pme-modal-cancel-btn, .gl-btn, .cb-btn:not(.cb-btn-accept), .gl-dd-btn, .lp-pill,
    .auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .settings-btn-item:not(#presets-button)):not(.active):not(.lp-selected):not(.gl-dd-active):not([aria-pressed="true"]):not(:focus-visible) {
  box-shadow: var(--gl-rim3d), var(--gl-drop3d) !important;
}
:is(.nav-button:not(.register-btn), .hamburger-menu, .gg-chip, .lp-lang-btn, .canvas-btn:not(.canvas-btn-save),
    .btn-clear-text, .pdf-btn:not(.pdf-btn-generate), .page-nav-btn, .cta-button.secondary, .guide-all, .redirect-button,
    .auth-button-secondary, .action-button.cancel, .btn-cancel, .slider-btn-cancel, .preset-rename-cancel, .bgs-btn-secondary, .bgs-chip, .bgs-ic,
    .pme-modal-cancel-btn, .gl-btn, .cb-btn:not(.cb-btn-accept), .gl-dd-btn, .lp-pill,
    .auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .settings-btn-item:not(#presets-button)):not(.active):not(.lp-selected):not(.gl-dd-active):not([aria-pressed="true"]):not(:focus-visible):not(:disabled):hover {
  box-shadow: var(--gl-rim3d-hover), var(--gl-drop3d) !important;
}
:is(.nav-button:not(.register-btn), .hamburger-menu, .gg-chip, .lp-lang-btn, .canvas-btn:not(.canvas-btn-save),
    .btn-clear-text, .pdf-btn:not(.pdf-btn-generate), .page-nav-btn, .cta-button.secondary, .guide-all, .redirect-button,
    .auth-button-secondary, .action-button.cancel, .btn-cancel, .slider-btn-cancel, .preset-rename-cancel, .bgs-btn-secondary, .bgs-chip, .bgs-ic,
    .pme-modal-cancel-btn, .gl-btn, .cb-btn:not(.cb-btn-accept), .gl-dd-btn, .lp-pill,
    .auth-close-btn, .settings-header .close-button, .sd-close, .fb-top-close, .presets-close-btn, .bg-close-btn,
    .news-popup-close, .fb-close-btn, .gl-close, .settings-btn-item:not(#presets-button)):not(.active):not(.lp-selected):not(.gl-dd-active):not([aria-pressed="true"]):not(:focus-visible):not(:disabled):active {
  box-shadow: var(--gl-rim3d-press), var(--gl-drop3d) !important;
}
/* Lila Hauptknöpfe (und Rot): gleiches Glas-Licht, etwas kräftiger, farbiger Schatten */
:is(.fast-scan-btn, .canvas-btn-save, .pdf-btn-generate, #presets-button, .presets-save-new-btn, .preset-rename-confirm,
    .cta-button:not(.secondary), .register-btn, .auth-button-primary, .btn-submit, .slider-btn-confirm, .news-dismiss-btn,
    .gl-btn-primary, .action-button.purple, .sd-close-btn, .cb-btn-accept):not(:focus-visible) {
  box-shadow: var(--gl-rim3d-primary), var(--gl-drop3d-primary) !important;
}
:is(.action-button.danger, .gl-btn-danger):not(:focus-visible) { box-shadow: var(--gl-danger-shadow) !important; }
/* Leistungsmodus: weniger Schatten-Lagen, das ist billiger zu zeichnen */
html.gg-perf :is(.gl-btn, .gg-chip, .lp-pill, .canvas-btn, .pdf-btn, .nav-button, .lp-lang-btn, .gl-dd-btn) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 10px -6px rgba(0,0,0,0.5) !important;
}

/* ── Knöpfe zum Anfassen (js/press-glass.js) ──
   Licht unter dem Finger: liegt als eigene Ebene über dem gedrückten Knopf bzw. der Liste und folgt ihm.
   plus-lighter: macht nur heller, wie Licht im Glas. */
.gg-press-glow {
  position: fixed; z-index: 2147482000; pointer-events: none; opacity: 0;
  background: radial-gradient(circle var(--gr, 80px) at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 72%);
  mix-blend-mode: plus-lighter;
  transition: opacity .32s ease;
}
.gg-press-glow.on { opacity: 1; transition: opacity .12s ease; }
.gg-press-glow.menu { background: radial-gradient(circle var(--gr, 80px) at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.07) 40%, rgba(255,255,255,0) 72%); }
/* Knöpfe am Handy: nach oben/unten wischen scrollt die Seite ganz normal, seitlich ziehen bewegt den Knopf sofort
   (pan-y: seitlich scrollt hier nichts). Nach oben/unten ziehen lässt sich ein Knopf nach kurzem Festhalten
   (js/hold-drag.js stoppt dann das Scrollen). Auswahl-Listen lassen sich sofort ziehen (der Browser scrollt
   dort nicht), ausgenommen die lange Sprachliste, deren Einträge selbst scrollen. Kein Markieren von Text beim Ziehen. */
:is(.nav-button, .hamburger-menu, .gg-chip, .lp-lang-btn, .canvas-btn, .btn-clear-text, .pdf-btn, .page-nav-btn, .cta-button,
    .guide-all, .auth-button, .action-button, .btn-cancel, .btn-submit, .gl-btn, .gl-btn-primary, .gl-btn-danger, .gl-dd-btn,
    .fast-scan-btn, .settings-btn-item, .presets-save-new-btn, .modern-dialog-btn, .cb-btn, .gl-close,
    .auth-close-btn, .sd-close, .bg-close-btn, .news-popup-close, .fb-close-btn, .presets-close-btn) {
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.gl-dd-pop { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lp-pill { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lp-lang-pop .lp-lang-search-wrap { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .gg-press-glow { display: none; } }
html.gg-perf .gg-press-glow { display: none; }

/* ── Seite hinter offenen Fenstern (js/scroll-lock.js) ──
   Seite steht still, Fenster selbst scrollen weiter; am Ende eines Fensters scrollt nicht plötzlich die Seite mit. */
html.gg-locked, html.gg-locked body { overflow: hidden !important; overscroll-behavior: none; }
html.gg-locked body { padding-right: var(--gg-sbw, 0px); }
/* Fenster selbst: overscroll-behavior: contain setzt js/scroll-lock.js direkt am Element (eine Regel mit * hier
   ließ beim Öffnen jedes Fensters die ganze Seite neu berechnen) */
/* Auswahl-Listen: mit dem Finger ziehen statt scrollen (gilt für die Liste und alles darin) */
.gl-dd-pop, .gl-dd-pop * { touch-action: none !important; }

/* ── Weniger Leuchten (Marflux): der farbige Schein im Hintergrund der Seite etwas dunkler ──
   Unter body::before liegt dieselbe dunkle Farbe, die Farbflächen werden dadurch nur schwächer. */
body::before { opacity: .78; }

/* ───────────────────────────────────────────────────────────────────────
   Nachrichtenverlauf (js/app/history.js): Leiste rechts am PC, Blatt von unten am Handy
   ─────────────────────────────────────────────────────────────────────── */
#history-overlay { position: fixed; inset: 0; z-index: 9999999; opacity: 0; transition: opacity .3s ease; }
#history-overlay.hp-open { opacity: 1; }
#history-panel {
  position: fixed; z-index: 10000000; top: 16px; right: 16px; bottom: 16px;
  width: min(400px, calc(100vw - 32px));
  flex-direction: column; overflow: hidden; border-radius: 28px !important; padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.015) 22%), rgba(var(--a-18112c,24,17,44),0.92) !important;
  opacity: 0; transform: translateX(calc(100% + 32px));
  transition: transform .42s var(--gl-spring), opacity .28s ease;
  will-change: transform;
}
#history-panel.hp-open { opacity: 1; transform: none; }
.hp-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.hp-head-ico {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%), rgba(var(--a-a855f7,168,85,247),0.55);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35);
}
.hp-head-text { flex: 1; min-width: 0; text-align: left; }
.hp-title { margin: 0 !important; text-align: left !important; font-size: 17px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.01em; }
.hp-sub { font-size: 12.5px; color: var(--text-3, rgba(255,255,255,0.5)); margin-top: 1px; }
.hp-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.hp-item {
  border-radius: 18px; padding: 12px 14px 10px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); border-top-color: rgba(255,255,255,0.12);
  transition: background .2s ease, border-color .2s ease;
  animation: hpIn .38s var(--gl-spring) both; animation-delay: calc(var(--i, 0) * 35ms);
}
@media (hover: hover) { .hp-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(var(--a-d8b4fe,216,180,254),0.18); } }
@keyframes hpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hp-date { font-size: 12px; font-weight: 600; color: rgba(var(--a-d8b4fe,216,180,254),0.85); }
.hp-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: #ffb74d; background: rgba(255,152,0,0.12); padding: 2px 7px; border-radius: 99px; }
.hp-text {
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text-2, rgba(255,255,255,0.8));
  white-space: pre-line; word-break: break-word;
}
.hp-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.hp-meta { font-size: 11.5px; color: var(--text-3, rgba(255,255,255,0.45)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.hp-use, .hp-del, .hp-clear {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 99px;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background .18s ease, color .18s ease, transform .15s ease;
}
.hp-use { padding: 0 13px; color: #fff; border: 1px solid rgba(255,255,255,0.14); background: rgba(var(--a-a855f7,168,85,247),0.42); }
.hp-use:hover { background: rgba(var(--a-a855f7,168,85,247),0.58); }
.hp-del { width: 32px; padding: 0; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); }
.hp-del:hover { color: #ff8a80; background: rgba(255,69,58,0.14); border-color: rgba(255,69,58,0.25); }
.hp-use:active, .hp-del:active, .hp-clear:active { transform: scale(.95); }
.hp-use:focus-visible, .hp-del:focus-visible, .hp-clear:focus-visible, .hp-text:focus-visible { outline: 2px solid rgba(var(--a-d8b4fe,216,180,254),0.8); outline-offset: 2px; border-radius: 10px; }
.hp-foot { flex-shrink: 0; padding: 10px 14px 14px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: center; }
.hp-clear { padding: 0 14px; color: #ff8a80; border: 0; background: transparent; }
.hp-clear:hover { background: rgba(255,69,58,0.12); }
.hp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 30px 28px 40px; }
.hp-empty-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 8px; color: rgba(var(--a-d8b4fe,216,180,254),0.9); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.hp-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3, rgba(255,255,255,0.5)); max-width: 260px; }
.hp-empty .hp-empty-title { font-size: 15px; font-weight: 650; color: var(--text, #f5f5f7); }
.hp-skel { height: 104px; border-radius: 18px; flex-shrink: 0; background: linear-gradient(90deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.075) 50%, rgba(255,255,255,0.035) 100%) 0 0 / 200% 100%; animation: hpSkel 1.2s linear infinite; }
@keyframes hpSkel { to { background-position: -200% 0; } }
@media (max-width: 600px) {
  #history-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: min(82vh, 680px); max-height: min(82dvh, 680px); height: auto; transform: translateY(calc(100% + 24px)); }
}
@media (prefers-reduced-motion: reduce) { .hp-item, .hp-skel { animation: none; } #history-panel { transition: opacity .2s ease; } }

/* Presets-Knopf in den Einstellungen: lila getöntes Glas statt grell leuchtender Fläche */
html body #presets-button {
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.07) 100%),
    linear-gradient(135deg, rgba(var(--a-a855f7,168,85,247),0.72) 0%, rgba(var(--a-c026d3,192,38,211),0.62) 100%) !important;
  border-color: rgba(var(--a-e9d5ff,233,213,255),0.28) !important;
  border-top-color: rgba(255,255,255,0.38) !important;
}
html body #presets-button:not(:focus-visible) { box-shadow: var(--gl-rim3d), 0 1px 1.5px rgba(0,0,0,0.3), 0 8px 18px -10px rgba(var(--a-c026d3,192,38,211),0.35) !important; }
@media (hover: hover) {
  html body #presets-button:hover { filter: none !important; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.09) 100%), linear-gradient(135deg, rgba(var(--a-a855f7,168,85,247),0.85) 0%, rgba(var(--a-c026d3,192,38,211),0.75) 100%) !important; }
}

/* Schreibschrift-Vorlage (Sprache „Deutsch (Schreibschrift)“): Lateinische Ausgangsschrift
   „Playwrite DE LA“ (TypeTogether, SIL Open Font License, assets/fonts/OFL-Playwrite.txt), nur deutsche Zeichen */
@font-face {
  font-family: 'GG Schreibschrift';
  src: url('/assets/fonts/playwrite-de-la.woff2') format('woff2');
  font-weight: 100 400;
  font-display: swap;
}
#fast-scan-ui #current-fast-scan-letter.fs-cursive,
#fast-scan-ui .fs-ghost-on #fs-ghost-letter.fs-cursive { font-family: 'GG Schreibschrift', cursive; font-weight: 300; }
.lp-shell.lp-cursive-lang .lp-pill[data-letter^="✍"],
#canvas-letter-label.lp-cursive-char,
.lp-shell.lp-cursive .lp-preview-letter { font-family: 'GG Schreibschrift', cursive !important; font-weight: 300 !important; }
/* Schreibschrift-Vorlage: blasse Nachbar-„u“ (zeigen die Verbindung) und Vorlage im normalen Zeichenfeld */
#fast-scan-ui .gg-tpl-ctx { opacity: 0.28; }
#app-section .lc-cursive-ghost { display: none; }
#app-section .lc-cursive-ghost.on {
  display: inline; font-family: 'GG Schreibschrift', cursive; font-weight: 300;
  fill: rgba(255,255,255,0.10); stroke: rgba(var(--a-e9d5ff,233,213,255),0.42); stroke-width: 7px; stroke-linejoin: round; stroke-dasharray: 18 12;
}
#app-section .lc-cursive-ghost .gg-tpl-ctx { opacity: 0.35; }

/* ── Einstellungen › Nutzerdaten löschen (js/app/account.js, showUserDataPage) ── */
.gg-ud-intro { margin-top: 0; text-align: center; }
.gg-ud-h { margin: 18px 14px 7px; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(245,245,247,0.45); }
.gg-ud-sub { font-size: 12.5px; color: rgba(245,245,247,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-row.gg-ud-row:disabled { opacity: 0.45; cursor: default; }
.gg-ud-flag {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: #f5f5f7; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
}
.gg-ud-dlg { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gg-ud-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(245,245,247,0.85); font-size: 13.5px; line-height: 1.4;
}
.gg-ud-opt { transition: background .18s ease, border-color .18s ease; -webkit-tap-highlight-color: transparent; user-select: none; }
.gg-ud-opt:hover { background: rgba(255,255,255,0.075); }
.gg-ud-opt:has(input:checked) { background: rgba(255,69,58,0.1); border-color: rgba(255,69,58,0.38); }
/* Eigene Checkbox: Glas-Kästchen, angehakt rot mit weißem Haken */
.gg-ud-opt input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative;
  width: 22px; height: 22px; margin: -1px 0 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background .18s ease, border-color .18s ease, transform .18s var(--gl-pop);
}
.gg-ud-opt input::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat;
  opacity: 0; transform: scale(.4);
  transition: opacity .15s ease, transform .22s var(--gl-pop);
}
.gg-ud-opt input:checked {
  background: linear-gradient(180deg, #ff6a60, #e0342a); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 10px -3px rgba(255,69,58,0.6);
}
.gg-ud-opt input:checked::after { opacity: 1; transform: none; }
.gg-ud-opt:active input { transform: scale(.9); }
.gg-ud-opt input:focus-visible { outline: 2px solid rgba(255,69,58,0.7); outline-offset: 2px; }
.gg-ud-preview { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; text-align: center; font-size: 13px; color: rgba(245,245,247,0.6); }
.gg-ud-preview b { color: #f5f5f7; font-size: 14px; }
.gg-ud-chars { font-size: 16px; letter-spacing: 0.06em; color: rgba(245,245,247,0.85); word-break: break-all; }


/* ───────────────────────────────────────────────────────────────────────
   Pop-up-Bewegung überall gleich (Rest): diese Fenster haben ihre Bewegung in eigenen Dateien
   (main.css, news.css, fast-scan.css, presets.css …). Hier bekommen sie dieselbe ruhige Bewegung wie alle
   anderen (--gl-pop: weich rein, kein Nachfedern). Nur transform/opacity, damit es auf dem Handy nicht ruckelt.
   ─────────────────────────────────────────────────────────────────────── */
@keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.modern-dialog, .preset-rename-dialog { animation-duration: var(--gl-pop-in) !important; animation-timing-function: var(--gl-pop) !important; }

/* Bewertungen: Handy = Blatt von unten, PC = wie alle Fenster */
.feedback-container { transition: transform .38s var(--gl-pop) !important; will-change: transform; }
@media (min-width: 600px) {
  .feedback-container { transform: translateY(10px) scale(.97); transition: transform var(--gl-pop-in) var(--gl-pop), opacity var(--gl-pop-fade) ease !important; }
  .feedback-overlay.closing .feedback-container { transform: translateY(6px) scale(.98); transition: transform var(--gl-pop-out) var(--gl-out), opacity var(--gl-pop-out) ease !important; }
}
.feedback-overlay { transition: opacity var(--gl-pop-fade) ease !important; }

/* Neuigkeiten */
#news-popup-overlay { transition: opacity var(--gl-pop-fade) ease !important; }
#news-popup { transform: translateY(10px) scale(.97); transition: transform var(--gl-pop-in) var(--gl-pop), opacity var(--gl-pop-fade) ease !important; will-change: transform, opacity; }
@media (max-width: 600px) { #news-popup-overlay #news-popup { transform: translateY(100%); transition: transform .38s var(--gl-pop) !important; } }
#news-popup-overlay.visible #news-popup { transform: none; }

/* Verlauf (Seitenleiste von rechts, am Handy von unten) */
#history-panel { transition: transform .38s var(--gl-pop), opacity var(--gl-pop-fade) ease !important; }
.hp-item { animation-timing-function: var(--gl-pop) !important; }

/* Fast Scan, Einstellungs-Presets, Editor-Hilfe */
@keyframes fsSheetIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
#fast-scan-ui .fast-scan-container { animation-duration: var(--gl-pop-in) !important; animation-timing-function: var(--gl-pop) !important; }
.presets-panel { transform: translateY(10px) scale(.97); }
.pme-help .pme-help-box { transform: translateY(10px) scale(.97); transition: transform var(--gl-pop-in) var(--gl-pop), opacity var(--gl-pop-fade) ease !important; }

@media (prefers-reduced-motion: reduce) {
  .feedback-container, #news-popup, #history-panel, .presets-panel, .pme-help .pme-help-box { transition: opacity .2s ease !important; }
}

/* Gast: Kasten oben in den Einstellungen (Hinweis + Anmelden / Registrieren) */
.gg-guest-card { padding: 14px 16px 16px; }
.gg-guest-card-top { display: flex; align-items: flex-start; gap: 12px; }
.gg-guest-card-top .gl-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gg-guest-card-top .gl-row-value { font-weight: 650; }
.gg-guest-card .gg-guest-card-top .gg-ud-sub { white-space: normal; line-height: 1.4; color: var(--ios-label2, rgba(245,245,247,0.6)); }
.gg-guest-card-btns { display: flex; gap: 8px; margin-top: 14px; }
.gg-guest-card-btns > button { flex: 1 1 0; min-width: 0; min-height: 40px; border-radius: 999px; font-size: 14.5px; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Gast: Zahnrad links neben „Anmelden“ (nur am PC; auf dem Handy öffnet der runde Knopf die Einstellungen) */
.navbar .nav-button.gg-guest-gear { display: flex; align-items: center; justify-content: center; padding: 0; width: 34px; min-width: 34px; height: 34px; border-radius: 50%; }
.navbar .nav-button.gg-guest-gear > svg { width: 16px; height: 16px; }

/* Hintergrund-Fenster, eigenes Bild anpassen: „Füllen / Ganz zeigen / Strecken“ ist ein Umschalter wie „Papier / Eigene“
   (gleiche Blase, gedrückt halten und ziehen: js/glass-slider.js), Knöpfe wie in den übrigen Fenstern */
.bgs:not(#_b1) .bgs-tabs.bgs-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.bgs-tabs.bgs-mode .bgs-tabs-lens { width: calc((100% - 6px) / 3); }
.bgs-tabs.bgs-mode button { padding: 8px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 601px) and (max-height: 860px) { .bgs-tabs.bgs-mode button { font-size: 12px; padding: 7px 2px; letter-spacing: -.01em; } }
.bgs:not(#_b1) :is(.bgs-chip, .bgs-ic) {
  background: var(--ios-tint-fill) !important; color: var(--ios-tint-ink) !important; border: 0 !important; font-weight: 650;
}
.bgs:not(#_b1) .bgs-chip { min-height: 36px; font-size: 13.5px; }
.bgs:not(#_b1) .bgs-ic { width: 32px; height: 32px; }
.bgs:not(#_b1) :is(.bgs-chip, .bgs-ic):hover:not(:disabled) { filter: brightness(1.12); }