/* ═══════════════════════════════════════════════════════════════════════
   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(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(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(6, 4, 14, 0.52);

  /* Bewegung */
  --gl-spring: cubic-bezier(.32, 1.26, .54, 1);
  --gl-out: cubic-bezier(.4, 0, .6, .2);

  /* Knöpfe */
  --gl-btn: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.045) 100%);
  --gl-btn-hover: linear-gradient(180deg, rgba(255,255,255,0.21) 0%, rgba(255,255,255,0.09) 55%, rgba(255,255,255,0.065) 100%);
  --gl-btn-shadow: inset 0 1px 1px rgba(255,255,255,0.22), inset 0 -1px 2px rgba(0,0,0,0.18), 0 6px 16px -8px rgba(0,0,0,0.6);
  --gl-primary: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%), linear-gradient(135deg, #a855f7 0%, #c026d3 100%);
  --gl-primary-shadow: inset 0 1px 1px rgba(255,255,255,0.42), inset 0 -1px 2px rgba(80,0,120,0.35), 0 10px 24px -10px rgba(192,38,211,0.85);
  --gl-danger: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0) 100%), linear-gradient(135deg, #ff5a4f 0%, #d92d20 100%);
  --gl-danger-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 10px 24px -10px rgba(255,69,58,0.8);
}

/* ───────────────────────────────────────────────────────────────────────
   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; }
#history-panel { border-radius: 26px !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(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: rein weich mit leichtem Nachfedern, raus schnell */
.auth-dialog,
.account-settings-content,
.modern-dialog-content,
.sd-wrap,
.presets-panel,
.background-selection-dialog,
.slider-warning-dialog,
.preset-rename-dialog {
  transition: transform .42s var(--gl-spring), opacity .24s ease !important;
  will-change: transform, opacity;
}
.auth-overlay, .account-settings-dialog, .modern-dialog-overlay, .presets-overlay,
.background-selection-overlay, .slider-warning-overlay {
  transition: opacity .24s ease !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(12px) scale(.94);
  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(192,132,252,0.65) !important; box-shadow: 0 0 0 3.5px rgba(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,
.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, .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, .gl-close:active { transform: scale(.94); }

/* ───────────────────────────────────────────────────────────────────────
   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(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(192,132,252,0.65) !important;
  box-shadow: 0 0 0 3.5px rgba(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, #a855f7);
  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(168,85,247,0.55), rgba(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(192,38,211,0.7) !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 #c084fc, 0 10px 26px -12px rgba(168,85,247,0.8) !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
   ─────────────────────────────────────────────────────────────────────── */
#onboarding-bar,
.lp-lang-menu,
.lp-lang-dropdown,
.toast-container .toast.info {
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
}
#onboarding-bar {
  background: var(--gl-sheen), var(--gl-tint) !important;
  border: 1px solid var(--gl-rim) !important;
  border-top-color: var(--gl-rim-top) !important;
  box-shadow: var(--gl-shadow) !important;
  border-radius: 26px !important;
}

/* Handy-Menü: fast deckend (Unschärfe wirkt in der Navbar nicht verschachtelt) */
@media (max-width: 768px) {
  .nav-links {
    background: var(--gl-sheen), rgb(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(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(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; } }

/* 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 (Sprache in den Einstellungen) ── */
.gl-dd-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 13px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; color: #f5f5f7;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), 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.12), 0 4px 12px -6px rgba(0,0,0,0.6);
  transition: background .2s ease, transform .2s 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.2), rgba(255,255,255,0.08)); }
.gl-dd-btn:active { transform: scale(.96); }
.gl-dd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,85,247,0.45); }
.gl-dd-btn.gl-dd-active { background: linear-gradient(180deg, rgba(192,132,252,0.32), rgba(168,85,247,0.14)); border-color: rgba(192,132,252,0.5); }
.gl-dd-chev { opacity: .6; transition: transform .25s var(--gl-spring); }
.gl-dd-active .gl-dd-chev { transform: scale(1.1); opacity: .9; }

.gl-dd-pop {
  position: fixed; z-index: 100000; padding: 6px; border-radius: 18px;
  background: var(--gl-sheen, linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02))), var(--gl-tint);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--gl-rim); border-top-color: var(--gl-rim-top);
  box-shadow: var(--gl-shadow);
  opacity: 0; transform: scale(.9) translateY(-4px);
  transition: opacity .18s ease, transform .32s var(--gl-spring);
}
.gl-dd-pop.gl-dd-open { opacity: 1; transform: none; }
.gl-dd-pop.gl-dd-closing { opacity: 0; transform: scale(.94); transition: opacity .15s ease, transform .15s var(--gl-out); pointer-events: none; }
.gl-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  color: #f5f5f7; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.gl-dd-item.gl-dd-hl { background: rgba(255,255,255,0.10); }
.gl-dd-item.gl-dd-on .gl-dd-label { font-weight: 700; }
.gl-dd-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #e9d5ff;
  padding: 3px 6px; border-radius: 6px; background: rgba(168,85,247,0.22); border: 1px solid rgba(192,132,252,0.3);
}
.gl-dd-label { flex: 1; }
.gl-dd-check { width: 16px; display: inline-flex; color: #c084fc; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gl-dd-pop { background: rgba(24,17,44,0.98); } }
@media (prefers-reduced-motion: reduce) { .gl-dd-pop, .gl-dd-pop.gl-dd-closing { transform: none !important; } }

/* 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: #e9d5ff; }
.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: #d8b4fe; padding: 5px 10px; border-radius: 999px; background: rgba(168,85,247,0.16); border: 1px solid rgba(192,132,252,0.3); }
.gg-fmt-row:hover .gg-fmt-apply { background: rgba(168,85,247,0.28); }
.gg-fmt-table { margin: 0 0 14px; }
.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(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; }