/* ═══════════════════════════════════════════════════════════════════════════
   letsgoo "Aura" — dark glass theme for the model area.

   Loaded AFTER falcon/css/main.min.css and scoped to the (app) route group.
   Marketing pages carry their own styling and are untouched.

   Design language (see docs/design-aura.md):
     · near-black canvas with a soft ambient colour field behind everything
     · panels are frosted glass: light gradient wash, hairline border,
       inset top highlight, deep ambient shadow
     · lime accent for anything actionable or selected
     · IBM Plex Mono at 10px/0.08em for micro-labels, Space Grotesk for text
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Accent */
  --aura-accent: #d8e37f;
  --aura-accent-strong: #edf5b0;
  --aura-accent-ink: #101208;
  --aura-accent-06: rgba(216, 227, 127, 0.06);
  --aura-accent-10: rgba(216, 227, 127, 0.1);
  --aura-accent-14: rgba(216, 227, 127, 0.14);
  --aura-accent-28: rgba(216, 227, 127, 0.28);
  --aura-accent-50: rgba(216, 227, 127, 0.5);

  /* Canvas & text — neutral, not olive-tinted. The comp's warm greys read as
     dirty next to the lime; white on neutral dark is what makes the accent pop. */
  --aura-canvas: #0b0b0c;
  --aura-canvas-raise: #151517;
  --aura-text: #ffffff;
  --aura-text-2: #d2d3d4;
  --aura-muted: #9b9c9e;
  --aura-dim: #6b6c6f;

  /* Glass */
  --aura-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) 55%);
  --aura-glass-soft: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018) 55%);
  --aura-glass-accent: linear-gradient(160deg, rgba(216, 227, 127, 0.08), rgba(255, 255, 255, 0.025) 55%);
  --aura-border: rgba(255, 255, 255, 0.14);
  --aura-border-soft: rgba(255, 255, 255, 0.1);
  --aura-border-hair: rgba(255, 255, 255, 0.07);
  --aura-blur: blur(30px) saturate(1.35);
  --aura-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --aura-lift: 0 12px 32px rgba(0, 0, 0, 0.35);
  --aura-lift-sm: 0 10px 28px rgba(0, 0, 0, 0.35);

  /* Field / inputs */
  --aura-field: rgba(0, 0, 0, 0.35);
  --aura-field-border: rgba(255, 255, 255, 0.1);

  /* Status */
  --aura-error: #ef6f6f;
  --aura-ok: #8fe3c0;
  --aura-warn: #f0c48a;
  --aura-info: #9fb4ff;

  /* Radii */
  --aura-r-panel: 20px;
  --aura-r-card: 18px;
  --aura-r-ctl: 12px;
  --aura-r-chip: 10px;

  /* Type scale — Falcon ships 0.9rem (14.4px) and .small takes another 87.5%
     off that, which lands descriptions at 12.6px. The design comp was drawn at
     comp scale; in a real viewport that reads as fine print, so the base goes
     up and every absolute size below follows it. */
  --bs-body-font-size: 1rem;

  /* Bootstrap bridge — Falcon reads these in a lot of components */
  --bs-body-bg: #0b0b0c;
  --bs-body-color: #ffffff;
  --bs-border-color: rgba(255, 255, 255, 0.14);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #9b9c9e;
  --bs-tertiary-color: #6b6c6f;
  --bs-link-color: #d8e37f;
  --bs-link-hover-color: #edf5b0;
}

/* ── Page canvas ─────────────────────────────────────────────────────────── */
/* Tells the UA to paint native controls (bare checkboxes, radios, date
   pickers, autofill) dark — several consent checkboxes in the auth flow carry
   no Bootstrap class and would otherwise render as white system squares. */
:root {
  color-scheme: dark;
  accent-color: var(--aura-accent);
}

body {
  background: var(--aura-canvas) !important;
  color: var(--aura-text) !important;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Ambient colour field — fixed, behind everything, never interactive.
   Four out-of-focus lights that only read in the gaps between panels: lime
   top-right, ember bottom-right, cool left, neutral lift top-centre. Kept
   deliberately faint — the panels sit on backdrop-filter, so anything
   stronger here tints every card olive instead of staying background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 560px at calc(100% + 60px) -220px, rgba(216, 227, 127, 0.06), transparent 62%),
    radial-gradient(620px 620px at 88% calc(100% + 260px), rgba(190, 55, 35, 0.05), transparent 60%),
    radial-gradient(460px 460px at -200px 34%, rgba(120, 130, 255, 0.045), transparent 62%),
    radial-gradient(340px 340px at 34% -60px, rgba(255, 255, 255, 0.03), transparent 62%);
  filter: blur(70px);
}
.page-wrapper { position: relative; z-index: 1; }

::selection { background: var(--aura-accent-28); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12) !important; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2) !important; }
::-webkit-scrollbar-track { background: transparent !important; }

@keyframes lgPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Falcon shell ────────────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
  border-bottom: 1px solid var(--aura-border-soft);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: none !important;
  color: var(--aura-text);
}
.app-header .app-brand span { color: var(--aura-text) !important; }
.app-header .app-brand span span { color: var(--aura-dim) !important; }
.toggle-sidebar,
.pin-sidebar {
  color: var(--aura-text-2) !important;
  background: transparent !important;
  border: none !important;
}
.toggle-sidebar:hover,
.pin-sidebar:hover { color: var(--aura-accent) !important; }

.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  border-right: 1px solid var(--aura-border-soft);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: none !important;
}
.sidebarMenuScroll { flex: 1 1 auto; min-height: 0; }
.app-container { background: transparent !important; }
.app-footer {
  background: transparent !important;
  color: var(--aura-dim);
  border-top: 1px solid var(--aura-border-hair);
  font-size: 13px;
}
.app-footer a { color: var(--aura-dim) !important; }
.app-footer a:hover { color: var(--aura-text-2) !important; }

/* Sidebar nav — quiet by default, accent tint when current */
.sidebar-menu li > a {
  color: var(--aura-text-2) !important;
  border-radius: var(--aura-r-ctl);
  border: 1px solid transparent;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-menu li > a:hover {
  color: var(--aura-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.sidebar-menu li > a i {
  background: transparent !important;
  color: inherit !important;
  opacity: 0.7;
}
.sidebar-menu li.current-page > a {
  color: var(--aura-accent) !important;
  background: var(--aura-accent-10) !important;
  border-color: rgba(216, 227, 127, 0.25);
  font-weight: 500;
}
.sidebar-menu li.current-page > a i { color: var(--aura-accent) !important; opacity: 1; }

/* Hervorgehobener Punkt (siehe NavItem.highlight): Akzentrahmen und farbiges
   Icon, aber weder Fuellung noch farbiger Text — sonst waere er vom aktiven
   Punkt nicht zu unterscheiden. Ist er selbst aktiv, gewinnt current-page. */
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a {
  /* Kraeftiger als der Rahmen des aktiven Punktes (0.25) — der traegt zusaetzlich
     Fuellung und farbige Schrift, dieser hier hat nur den Rahmen. */
  border-color: rgba(216, 227, 127, 0.5);
}
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a:hover {
  border-color: var(--aura-accent);
}
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a i {
  color: var(--aura-accent) !important;
  opacity: 1;
}
.sidebar-menu li > a .badge {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px !important;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  background: var(--aura-accent-14) !important;
  color: var(--aura-accent) !important;
}

/* ── Panels / cards ──────────────────────────────────────────────────────── */
.card {
  --bs-card-bg: transparent;
  --bs-card-border-color: var(--aura-border);
  --bs-card-cap-bg: transparent;
  --bs-card-color: var(--aura-text);
  background: var(--aura-glass) !important;
  border: 1px solid var(--aura-border) !important;
  border-radius: var(--aura-r-panel) !important;
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-highlight), var(--aura-lift) !important;
  color: var(--aura-text);
}
.card.border-0 { border: 1px solid var(--aura-border-soft) !important; }
/* Tighter than Falcon's default — the design runs on 16/18px panel padding,
   which is what keeps a settings rail readable at 472px. */
.card-header {
  border-bottom: 1px solid var(--aura-border-hair) !important;
  background: transparent !important;
  padding: 14px 18px 11px;
}
.card-body { padding: 16px 18px; }
.card-header + .card-body { padding-top: 14px; }
.card-footer { padding: 12px 18px; }
.card-footer { border-top: 1px solid var(--aura-border-hair) !important; background: transparent !important; }
.card-title {
  color: var(--aura-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.card-title i { color: var(--aura-accent) !important; }

/* Nested cards inside a panel must not double up the glass */
.card .card {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
  border-radius: var(--aura-r-card) !important;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--aura-text); font-weight: 500; letter-spacing: -0.01em; }
a { color: var(--aura-accent); text-decoration: none; }
a:hover { color: var(--aura-accent-strong); }
.text-muted { color: var(--aura-muted) !important; }
.text-body, .text-dark, .text-black { color: var(--aura-text) !important; }
.text-white { color: var(--aura-text) !important; }
.text-secondary { color: var(--aura-muted) !important; }
.text-danger { color: var(--aura-error) !important; }
.text-success { color: var(--aura-ok) !important; }
.text-warning { color: var(--aura-warn) !important; }
.text-info, .text-primary { color: var(--aura-accent) !important; }
hr { border-color: var(--aura-border-hair); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--aura-border-soft) !important; }

/* Mono micro-label — the recurring 10px/0.08em caption of the design */
.aura-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aura-muted);
  line-height: 1.4;
}
.aura-mono-accent { color: var(--aura-accent); }
.aura-mono-dim { color: var(--aura-dim); }
.aura-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--aura-accent);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--aura-r-ctl);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-lg { border-radius: 14px; font-weight: 600; }
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--aura-accent-50); outline-offset: 2px; box-shadow: none !important; }
.btn:disabled { opacity: 0.45; }

.btn-primary {
  background: var(--aura-accent) !important;
  border-color: transparent !important;
  color: var(--aura-accent-ink) !important;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-light, .btn-secondary, .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--aura-border-soft) !important;
  color: var(--aura-text-2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.btn-light:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--aura-accent-50) !important;
  color: var(--aura-text) !important;
}
.btn-outline-primary {
  background: var(--aura-accent-06) !important;
  border: 1px solid var(--aura-accent-28) !important;
  color: var(--aura-accent) !important;
}
.btn-outline-primary:hover:not(:disabled) {
  background: var(--aura-accent-14) !important;
  border-color: var(--aura-accent-50) !important;
  color: var(--aura-accent-strong) !important;
}
.btn-success {
  background: rgba(143, 227, 192, 0.16) !important;
  border: 1px solid rgba(143, 227, 192, 0.4) !important;
  color: var(--aura-ok) !important;
}
.btn-warning {
  background: rgba(240, 196, 138, 0.14) !important;
  border: 1px solid rgba(240, 196, 138, 0.38) !important;
  color: var(--aura-warn) !important;
}
.btn-danger {
  background: rgba(239, 111, 111, 0.16) !important;
  border: 1px solid rgba(239, 111, 111, 0.45) !important;
  color: var(--aura-error) !important;
}
.btn-danger:hover:not(:disabled) { background: rgba(239, 111, 111, 0.26) !important; }
.btn-outline-danger {
  background: transparent !important;
  border: 1px solid rgba(239, 111, 111, 0.4) !important;
  color: var(--aura-error) !important;
}
.btn-outline-danger:hover:not(:disabled) { background: rgba(239, 111, 111, 0.14) !important; }
.btn-link { color: var(--aura-muted) !important; text-decoration: none; }
.btn-link:hover { color: var(--aura-text) !important; }

/* Chip — the pill used for body/outfit/pose/ratio pickers.
   Falcon has no equivalent, so this is ours; also applied to the
   btn-sm/btn-outline-secondary chips already in the markup. */
.aura-chip {
  padding: 8px 15px;
  border-radius: var(--aura-r-chip);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.045);
  color: var(--aura-text-2);
  border: 1px solid var(--aura-border-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.aura-chip:hover { border-color: var(--aura-accent-50); color: var(--aura-text); }
.aura-chip.is-on {
  background: var(--aura-accent);
  border-color: var(--aura-accent);
  color: var(--aura-accent-ink);
  font-weight: 500;
}
.aura-chip.is-on:hover { filter: brightness(1.06); color: var(--aura-accent-ink); }
.aura-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.aura-chip-sm { padding: 6px 12px; font-size: 13px; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.form-control, .form-select, textarea.form-control, .form-control-sm, .form-select-sm {
  background: var(--aura-field) !important;
  border: 1px solid var(--aura-field-border) !important;
  color: var(--aura-text) !important;
  border-radius: var(--aura-r-ctl) !important;
}
.form-control:focus, .form-select:focus {
  background: rgba(0, 0, 0, 0.45) !important;
  border-color: var(--aura-accent-50) !important;
  box-shadow: 0 0 0 3px rgba(216, 227, 127, 0.12) !important;
  color: var(--aura-text) !important;
}
.form-control::placeholder { color: var(--aura-dim) !important; }
.form-select {
  /* light chevron — Bootstrap's default is near-black and invisible here */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a8d80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 11px !important;
}
.form-select option { background: #14150f; color: var(--aura-text); }
.form-label { color: var(--aura-text-2); font-size: 14px; font-weight: 500; }
.form-text { color: var(--aura-dim) !important; }
.form-check-input {
  background-color: var(--aura-field);
  border-color: rgba(255, 255, 255, 0.22);
}
.form-check-input:checked {
  background-color: var(--aura-accent);
  border-color: var(--aura-accent);
}
.form-check-input:focus {
  border-color: var(--aura-accent-50);
  box-shadow: 0 0 0 3px rgba(216, 227, 127, 0.12);
}
.form-check-label { color: var(--aura-text-2); }
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23101208'/%3e%3c/svg%3e");
}
.input-group-text {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--aura-field-border) !important;
  color: var(--aura-muted) !important;
}
.form-range::-webkit-slider-thumb { background: var(--aura-accent); }
.form-range::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.12); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
}
.badge.bg-primary { background: var(--aura-accent) !important; color: var(--aura-accent-ink) !important; }
.badge.bg-secondary { background: rgba(255, 255, 255, 0.08) !important; color: var(--aura-text-2) !important; }
.badge.bg-success { background: rgba(143, 227, 192, 0.18) !important; color: var(--aura-ok) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: rgba(240, 196, 138, 0.18) !important; color: var(--aura-warn) !important; }
.badge.bg-danger { background: rgba(239, 111, 111, 0.18) !important; color: var(--aura-error) !important; }
.badge.bg-info, .badge.bg-info-subtle { background: var(--aura-accent-14) !important; color: var(--aura-accent) !important; }
.badge.text-bg-dark, .badge.bg-dark { background: rgba(0, 0, 0, 0.55) !important; color: var(--aura-text) !important; }

/* Subtle backgrounds — Bootstrap's *-subtle tokens are built for light mode */
.bg-primary-subtle { background-color: var(--aura-accent-10) !important; color: var(--aura-accent) !important; }
.bg-success-subtle { background-color: rgba(143, 227, 192, 0.12) !important; color: var(--aura-ok) !important; }
.bg-warning-subtle { background-color: rgba(240, 196, 138, 0.12) !important; color: var(--aura-warn) !important; }
.bg-danger-subtle { background-color: rgba(239, 111, 111, 0.12) !important; color: var(--aura-error) !important; }
.bg-info-subtle { background-color: rgba(159, 180, 255, 0.12) !important; color: var(--aura-info) !important; }
.bg-white, .bg-light { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--aura-text) !important; }
.bg-black, .bg-dark { background-color: rgba(0, 0, 0, 0.45) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--aura-r-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.alert-danger {
  background: rgba(239, 111, 111, 0.12) !important;
  border: 1px solid rgba(239, 111, 111, 0.35) !important;
  color: #f6b3b3 !important;
}
.alert-warning {
  background: rgba(240, 196, 138, 0.12) !important;
  border: 1px solid rgba(240, 196, 138, 0.32) !important;
  color: #f3d6b0 !important;
}
.alert-success {
  background: rgba(143, 227, 192, 0.12) !important;
  border: 1px solid rgba(143, 227, 192, 0.32) !important;
  color: #b6efd8 !important;
}
.alert-info {
  background: rgba(159, 180, 255, 0.12) !important;
  border: 1px solid rgba(159, 180, 255, 0.3) !important;
  color: #c3cfff !important;
}
.alert-light {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--aura-border-soft) !important;
  color: var(--aura-text-2) !important;
}

/* ── Progress ────────────────────────────────────────────────────────────── */
.progress {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar { background: var(--aura-accent); }

/* ── Lists / tables ──────────────────────────────────────────────────────── */
.list-group { --bs-list-group-bg: transparent; }
.list-group-item {
  background: transparent !important;
  border-color: var(--aura-border-hair) !important;
  color: var(--aura-text-2) !important;
}
.table {
  --bs-table-color: var(--aura-text-2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--aura-border-hair);
  --bs-table-hover-color: var(--aura-text);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--aura-text-2);
}
.table > thead {
  color: var(--aura-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.table-light { --bs-table-bg: rgba(255, 255, 255, 0.05); --bs-table-color: var(--aura-text-2); }

/* ── Nav tabs / pills ────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--aura-border-hair); }
.nav-tabs .nav-link {
  color: var(--aura-muted);
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  font-size: 15px;
}
.nav-tabs .nav-link:hover { color: var(--aura-text); border-bottom-color: var(--aura-border); }
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--aura-accent);
  border-bottom-color: var(--aura-accent);
}
.nav-pills .nav-link {
  color: var(--aura-text-2);
  border: 1px solid transparent;
  border-radius: var(--aura-r-chip);
  font-size: 14.5px;
  font-weight: 500;
}
.nav-pills .nav-link:hover { color: var(--aura-text); background: rgba(255, 255, 255, 0.06); }
.nav-pills .nav-link.active {
  background: var(--aura-accent-10);
  border-color: var(--aura-accent-28);
  color: var(--aura-accent);
}

/* ── Dropdowns / modals ──────────────────────────────────────────────────── */
.dropdown-menu {
  background: rgba(20, 20, 22, 0.94) !important;
  border: 1px solid var(--aura-border) !important;
  border-radius: var(--aura-r-card);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-lift);
}
.dropdown-item { color: var(--aura-text-2) !important; }
.dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: var(--aura-text) !important; }
.dropdown-divider { border-color: var(--aura-border-hair); }
.modal-content {
  background: rgba(20, 20, 22, 0.95) !important;
  border: 1px solid var(--aura-border) !important;
  border-radius: var(--aura-r-panel);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  color: var(--aura-text);
}
.modal-header, .modal-footer { border-color: var(--aura-border-hair) !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: 0.6; }
.btn-close:hover { opacity: 1; }

/* ── Spinners ────────────────────────────────────────────────────────────── */
.spinner-border { color: var(--aura-accent); border-width: 2px; }

/* ── Stage layout ────────────────────────────────────────────────────────────
   Resting state is output + composer; every setting lives in an opt-in rail.
   The composer floats over the output at the bottom of the viewport. */
.aura-stage {
  display: flex;
  flex-direction: column;
  /* dvh, nicht vh: auf iOS/Android ist 100vh die Hoehe OHNE Browserleiste, die
     Buehne waere damit rund 100px hoeher als der Schirm und erzeugt Leerlauf. */
  min-height: calc(100dvh - 132px);
}
.aura-stage-body {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: 0;
}
.aura-out { flex: 1 1 auto; min-width: 0; }

/* Settings rail — opt-in, scrolls on its own, panels on a 14px rhythm */
.aura-rail {
  width: 472px;
  flex: none;
  position: sticky;
  /* Falcon's .app-header is sticky at top:0 with max-height:60px — anything
     less than that slides the first panel under it while scrolling. */
  top: 76px;
  /* header + toggle row + the measured composer height (set by the page) */
  max-height: calc(100dvh - 150px - var(--aura-composer-h, 160px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.aura-rail > .card,
.aura-rail > .alert { margin-bottom: 14px !important; }

.aura-advbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: var(--aura-r-ctl);
  font-size: 14.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--aura-border-soft);
  color: var(--aura-text-2);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aura-advbtn:hover { background: rgba(255, 255, 255, 0.09); color: var(--aura-text); }
.aura-advbtn.is-on {
  background: var(--aura-accent-10);
  border-color: var(--aura-accent-28);
  color: var(--aura-accent);
}
/* Fehlt das Referenzfoto, entsteht bei jeder Generierung ein fremdes Gesicht —
   und Token sind trotzdem weg. Warnfarbe statt Akzent, damit es sich vom
   "aktiv"-Zustand daneben unterscheidet. */
.aura-advbtn.is-warn {
  background: rgba(240, 196, 138, 0.1);
  border-color: rgba(240, 196, 138, 0.35);
  color: var(--aura-warn);
}
.aura-advbtn.is-warn:hover {
  background: rgba(240, 196, 138, 0.16);
  color: var(--aura-warn);
}

@media (max-width: 1199.98px) {
  .aura-stage-body { flex-direction: column; }
  .aura-rail { width: 100%; position: static; max-height: none; overflow: visible; padding-right: 0; }
}

/* ── Intim-Schublade am Composer ────────────────────────────────────────────
   Sitzt direkt ueber der Eingabeleiste und teilt deren Breite und Rundung, damit
   beide als ein Moebel gelesen werden. Zugeklappt ist nur der Reiter zu sehen —
   schmal genug, um nicht abzulenken, deutlich genug, um gefunden zu werden.
   Der Zustand steht auf dem Reiter, sonst muesste man aufklappen, um zu sehen,
   ob es an ist. */
.aura-nsfw {
  /* NICHT sticky: der umgebende .aura-composer-wrap klebt bereits unten. Zwei
     sticky-Elemente im selben Behaelter kleben beide an derselben Kante — die
     Schublade landete dadurch UNTER der Eingabeleiste statt darueber und war
     hinter ihr unsichtbar. Sie gehoert in den Block hinein, nicht daneben. */
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto -12px;
  padding-bottom: 12px;
  border-radius: 20px 20px 0 0;
  background: rgba(23, 23, 25, 0.94);
  border: 1px solid var(--aura-border);
  border-bottom: none;
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  overflow: hidden;
  transition: border-color 0.2s;
}
.aura-nsfw.is-on { border-color: rgba(220, 80, 144, 0.42); }

.aura-nsfw-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px 12px 18px;
  border: none;
  /* Leicht abgesetzt vom Rest der Leiste: eine Flaeche, die sich vom Untergrund
     abhebt, liest sich als Bedienelement. Ohne das wirkte der Reiter wie eine
     Ueberschrift — auf dem Handy gibt es kein Ueberfahren, das den Unterschied
     nachtraeglich erklaeren koennte. */
  background: rgba(255, 255, 255, 0.045);
  color: var(--aura-text);
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.15s;
}
.aura-nsfw-tab:hover { background: rgba(255, 255, 255, 0.08); }
.aura-nsfw-tab > i:first-child { font-size: 17px; color: #dc5090; }
/* Der Pfeil sitzt in einem eigenen runden Feld — das ist die Form, die jeder
   als "hier tippen" liest. Vorher ein blasses Zeichen bei 55% Deckkraft, das
   man fuer Zierrat halten konnte. */
.aura-nsfw-tab > i:last-child {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--aura-text);
  font-size: 19px;
  transition: background 0.15s, transform 0.2s;
}
.aura-nsfw-tab:hover > i:last-child { background: rgba(255, 255, 255, 0.16); }
.aura-nsfw.is-open .aura-nsfw-tab > i:last-child { background: rgba(255, 255, 255, 0.14); }

/* ── Lebenszeichen am Reiter ────────────────────────────────────────────────
   Der Reiter wurde zweimal uebersehen. Bewegung ist der einzige Reiz, den das
   Auge ausserhalb der Blickmitte zuverlaessig meldet — und genau dort liegt er,
   waehrend unten im Promptfeld getippt wird.

   EIN Impuls, zwei Traeger. Das Herz schlaegt zuerst: es sitzt links, ueber dem
   Anfang des Eingabefelds, also nah an der Stelle, wo der Blick beim Tippen
   wirklich steht. 70ms spaeter zieht das Pfeilfeld nach, am rechten Rand, wo
   der Klick hingehoert. Die Welle laeuft von der Aufmerksamkeit zur Handlung.
   Beide heben nach OBEN — in die Richtung, in die die Schublade faehrt. Die
   Bewegung zeigt, was der Klick tut, statt nur "hier ist etwas".

   Zwei ungleiche Schlaege je Zyklus, ein voller und ein halber. Bewegt wird
   1,06s von 9s; die restlichen 7,9s steht alles still. Ohne diese langen
   Pausen waere es Zappeln statt eines Lebenszeichens.

   Kein will-change: eine laufende transform-Animation wird ohnehin auf eine
   eigene Compositor-Ebene gehoben und danach wieder freigegeben. will-change
   wuerde die Ebene dauerhaft halten, ausgerechnet im backdrop-filter-Element.

   Kein Hover-Stop: der Reiter ist 52px hoch und volle Breite, die Maus kreuzt
   ihn auf jedem Weg zur Eingabe. Ein Pause-Gate wuerde den Pfeil regelmaessig
   sichtbar mitten im Hub einfrieren — und auf iOS klebt :hover nach dem Tippen. */

/* Nur Zustand (a): zu und aus. (b) is-on und (c) is-open matchen nicht und
   bekommen die Animation gar nicht erst — es gibt dort nichts zu stoppen.
   Das ist das Abschaltkriterium: die Bewegung endet in dem Moment, in dem sie
   ihren Zweck erfuellt hat, nicht nach einer Stoppuhr.

   Bewusst KEINE Farbe: rosa auf dem Pfeilfeld waere zeichengenau das Rosa, mit
   dem die Pille "an" sagt (siehe .aura-nsfw.is-on .aura-nsfw-state). Bei einer
   Zielgruppe, die NSFW ohnehin nicht auf Anhieb versteht, die teuerste
   denkbare Verwechslung. Der Zustand gehoert der Pille und dem Rahmen.

   Der Startverzug ist kein Stilmittel, sondern noetig: intimate.enabled startet
   in page.tsx auf false und wird erst nach dem Mount aus lg_create_prefs
   wiederhergestellt. Ohne Verzug zuckt der Reiter bei jedem Neuladen genau bei
   denen, die NSFW laengst eingeschaltet haben. */
.aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:first-child {
  /* 17px-Glyph, deshalb kleinerer Weg — relativ zur Zeichengroesse derselbe
     Ausschlag wie beim 30px-Feld. */
  --lg-nsfw-beat: 3px;
  animation: lgNsfwBeat 9s linear 2.4s infinite;
}
.aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:last-child {
  /* Ueber dem Feld liegen 11px Luft (1px Rahmen + 10px Innenabstand). Wer das
     Tab-Padding spaeter verkleinert, muss diesen Hub mitziehen — .aura-nsfw hat
     overflow: hidden und schneidet stumm ab. */
  --lg-nsfw-beat: 5px;
  /* 70ms nach dem Herz: aus zwei Wacklern wird eine Welle ueber die Zeile. */
  animation: lgNsfwBeat 9s linear 2.47s infinite;
}

/* Erster Schlag 216ms hoch, 261ms zurueck, kurze Atempause, dann ein halb so
   hoher Nachschlag. Schnell hoch, weich zurueck — diese Asymmetrie trennt
   "absichtsvoll" von "zappelig"; der ungleiche Doppelschlag wirkt organisch
   statt metronomisch. Die Hubhoehe kommt als Custom Property vom Element, damit
   ein Keyframe-Satz fuer beide Traeger reicht und sie nicht auseinanderlaufen. */
@keyframes lgNsfwBeat {
  0%    { transform: translate3d(0, 0, 0);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  2.4%  { transform: translate3d(0, calc(var(--lg-nsfw-beat, 5px) * -1), 0);
          animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  5.3%  { transform: translate3d(0, 0, 0); }
  7.1%  { transform: translate3d(0, 0, 0);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8.9%  { transform: translate3d(0, calc(var(--lg-nsfw-beat, 5px) * -0.52), 0);
          animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  11.8% { transform: translate3d(0, 0, 0); }
  100%  { transform: translate3d(0, 0, 0); }
}

/* Weniger Bewegung, nicht weniger Hinweis: ohne Impuls traegt das Pfeilfeld
   dauerhaft die Aufhellung, die es sonst nur beim Ueberfahren hat. Weiss, nicht
   rosa — es soll "Bedienelement" sagen, nicht "eingeschaltet". Die Hover-Regel
   muss mitgezogen werden: die Basisregel hier ist spezifischer als die weiter
   oben und wuerde die Rueckmeldung sonst schlucken. */
@media (prefers-reduced-motion: reduce) {
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:first-child,
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:last-child {
    animation: none;
    transform: none;
  }
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:last-child {
    background: rgba(255, 255, 255, 0.18);
  }
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab:hover > i:last-child {
    background: rgba(255, 255, 255, 0.26);
  }
}

/* Hinweis, was dahintersteckt — nur solange es aus ist und zu. */
.aura-nsfw-hint {
  color: var(--aura-muted);
  font-size: 12.5px;
}
.aura-nsfw.is-open .aura-nsfw-hint,
.aura-nsfw.is-on .aura-nsfw-hint { display: none; }
@media (max-width: 575.98px) { .aura-nsfw-hint { display: none; } }
.aura-nsfw-state {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--aura-muted);
}
.aura-nsfw.is-on .aura-nsfw-state {
  background: rgba(220, 80, 144, 0.16);
  color: #f0a2c4;
}

.aura-nsfw-body {
  padding: 0 18px 16px;
  /* Bei vielen Optionen und wenig Schirm scrollt der Inhalt, statt die Leiste
     aus dem Bild zu schieben. */
  max-height: 46dvh;
  overflow-y: auto;
}

/* ── Composer ───────────────────────────────────────────────────────────────
   Prompt, format, batch size and the primary action in one floating bar.
   Grid: the action button spans both rows on the right. */
.aura-composer-wrap {
  position: sticky;
  bottom: 18px;
  z-index: 6;
  margin-top: 22px;
  padding-top: 12px;
}
.aura-composer {
  /* Anker + Stapelkontext fuer das Stil-Panel: es soll die VOLLE Boxbreite
     nutzen und ueber den Nachbarleisten zeichnen, nicht nur ueber der linken
     Spalte haengen. */
  position: relative;
  z-index: 31;
  /* Zwei Spalten als Flex, nicht als Raster: links der Inhalt, rechts der
     Aktionsblock. Als Raster musste der Block ueber alle Zeilen gespannt werden,
     deren Zahl sich aber mit dem Zustand aendert (Statuszeile, Multiprompt-Liste).
     Jeder Versuch, das mit einer Zeilenangabe zu treffen, ging schief: "1 / 3"
     liess unten 47px frei, "1 / -1" wirkte gar nicht (negative Linien zaehlen nur
     definierte Zeilen), "span 99" erzeugte 99 leere Zeilen. Mit Flex ergibt sich
     die Hoehe von selbst. */
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 22px;
  background: rgba(23, 23, 25, 0.94);
  border: 1px solid var(--aura-border);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-highlight), 0 18px 48px rgba(0, 0, 0, 0.55);
}
/* The whole bar is the dropzone — a separate target would compete with the
   prompt field for the same gesture. */
.aura-composer.is-drop {
  border-color: var(--aura-accent);
  background: rgba(216, 227, 127, 0.07);
}
.aura-composer.is-drop * { pointer-events: none; }
.aura-composer-tabs { display: flex; gap: 4px; margin-bottom: 2px; }
.aura-composer-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--aura-muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.aura-composer-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.aura-composer-tab.is-on { color: #fff; background: rgba(255, 255, 255, 0.09); }

/* Parsed prompt set — each row toggles whether that prompt runs */
.aura-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  padding-right: 4px;
}
.aura-prompt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.aura-prompt-row:hover { background: rgba(255, 255, 255, 0.06); }
.aura-prompt-row i { color: var(--aura-accent); font-size: 15px; flex: none; }
.aura-prompt-row.is-off { color: var(--aura-dim); }
.aura-prompt-row.is-off i { color: var(--aura-dim); }
.aura-prompt-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aura-composer-row { display: flex; align-items: flex-start; gap: 12px; }
.aura-composer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Linke Spalte: alles, was frueher in Rasterzeile 1 lag, jetzt untereinander. */
.aura-composer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* Zaehler und Fehler unter der Werkzeugzeile, nicht darin — siehe Kommentar im JSX. */
.aura-composer-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -2px;
}
/* Langform/Kurzform eines Labels. Basis: Langform sichtbar; der mobile Block
   dreht das um. Beide immer im Markup, damit kein Zustand verlorengeht. */
.aura-lbl-short { display: none; }

.aura-plus {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--aura-border-soft);
  color: var(--aura-text-2);
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.aura-plus:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: var(--aura-text); }
/* The UA focus ring is bright blue and reads as a foreign element here */
.aura-plus:focus-visible,
.aura-tool:focus-visible,
.aura-advbtn:focus-visible,
.aura-menu-item:focus-visible,
.aura-stepper button:focus-visible {
  outline: 2px solid var(--aura-accent-50);
  outline-offset: 2px;
}
.aura-plus:focus:not(:focus-visible),
.aura-tool:focus:not(:focus-visible) { outline: none; }
.aura-plus:disabled { opacity: 0.4; cursor: not-allowed; }

.aura-composer-field { position: relative; flex: 1 1 auto; min-width: 0; }
.aura-composer-field textarea {
  width: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--aura-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  /* Rechts Platz fuer den Leeren-Knopf, damit der Text nicht darunter laeuft.
     box-sizing explizit: sonst haengt die Feldbreite an Bootstraps Reboot, und
     das Innenmass wuerde die Textflaeche ueber ihren Behaelter hinausschieben. */
  box-sizing: border-box;
  padding: 8px 34px 8px 2px;
  min-height: 48px;
}
.aura-composer-field textarea::placeholder { color: var(--aura-dim); }
/* Height is driven from the page (auto-grow); the cap keeps a very long prompt
   from swallowing the output area, and scrolling takes over past it. */
.aura-composer-field textarea { overflow-y: auto; }
.aura-composer-field textarea::-webkit-scrollbar { width: 6px; }

/* ── Prompt leeren, Ersetzen zuruecknehmen ────────────────────────────── */
/* Der Knopf sitzt im Feld, nicht in der Werkzeugzeile: er gehoert zu dem Text,
   den er wegnimmt, und die Zeile unten bleibt den Einstellungen vorbehalten. */
.aura-clear {
  position: absolute;
  top: 5px;
  right: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: var(--aura-muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* Sichtbar bleiben 28px, treffbar sind 46px — ein Daumen braucht mehr Flaeche,
   als das Bild hergeben darf, ohne die Zeile zu sprengen. */
.aura-clear::after { content: ""; position: absolute; inset: -9px; }
.aura-clear:hover { background: rgba(255, 255, 255, 0.16); color: var(--aura-text); }

.aura-undo {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px 6px 14px;
  border-radius: 999px;
  background: rgba(22, 22, 24, 0.97);
  border: 1px solid var(--aura-border);
  backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-lift);
  color: var(--aura-muted);
  font-size: 13px;
  white-space: nowrap;
}
.aura-undo button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--aura-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.aura-undo button:hover { background: rgba(255, 255, 255, 0.18); }
/* Wegklicken, ohne die 12 Sekunden abzuwarten. Zurueckhaltender als der
   Rueckgaengig-Knopf: die Leiste geht ohnehin von selbst, das ist der
   Nebenweg, nicht die Hauptsache. */
.aura-undo .aura-undo-x {
  position: relative;
  padding: 0;
  width: 26px;
  height: 26px;
  justify-content: center;
  background: transparent;
  color: var(--aura-muted);
  font-size: 16px;
}
.aura-undo .aura-undo-x::after { content: ""; position: absolute; inset: -7px; }
.aura-undo .aura-undo-x:hover { background: rgba(255, 255, 255, 0.12); color: var(--aura-text); }
/* Auf dem Handy tragen die Knoepfe allein — die Erklaerung wuerde die Leiste
   ueber die Feldbreite hinausschieben. Der Abstand von 10px bleibt: die
   Trefferflaeche des X greift 7px nach links aus, ein engerer Spalt liesse sie
   in den Rueckgaengig-Knopf hineinreichen. Platz ist genug da. */
@media (max-width: 575.98px) {
  .aura-undo { padding: 5px 5px 5px 6px; }
  .aura-undo > span { display: none; }
}

.aura-mention {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 20;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  border-radius: var(--aura-r-card);
  background: rgba(22, 22, 24, 0.97);
  border: 1px solid var(--aura-border);
  backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-lift);
}

/* Tool pills */
.aura-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--aura-border-soft);
  color: #fff;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aura-tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.09); color: var(--aura-text); }
.aura-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.aura-tool i { font-size: 15px; opacity: 0.8; }
.aura-tool.is-static { cursor: default; }
.aura-tool.is-static:hover { background: rgba(255, 255, 255, 0.05); color: var(--aura-text-2); }
.aura-tool-wrap { position: relative; display: inline-flex; }

.aura-stepper { gap: 4px; padding: 4px 6px; }
.aura-stepper button {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--aura-text-2);
  cursor: pointer;
}
.aura-stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); color: var(--aura-text); }
.aura-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.aura-stepper > span {
  min-width: 18px;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--aura-text);
}

.aura-menu {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 30;
  min-width: 258px;
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  border-radius: var(--aura-r-card);
  background: rgba(22, 22, 24, 0.97);
  border: 1px solid var(--aura-border);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  box-shadow: var(--aura-lift);
}
.aura-menu-title {
  padding: 6px 10px 10px;
  font-size: 14px;
  color: var(--aura-muted);
}
.aura-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
/* Glyph sits in its own square that highlights with the row */
.aura-menu-glyph {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  transition: background 0.12s;
}
.aura-menu-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  transition: background 0.12s;
}
.aura-menu-item:hover .aura-menu-label,
.aura-menu-item:hover .aura-menu-glyph { background: rgba(255, 255, 255, 0.06); }
.aura-menu-item.is-on .aura-menu-label,
.aura-menu-item.is-on .aura-menu-glyph { background: rgba(255, 255, 255, 0.1); }
.aura-menu-item .ri-check-line { color: #fff; font-size: 17px; }
/* Little proportional glyph so the ratio is readable at a glance.
   Width/height come from the markup — a fixed square here would override them. */
.aura-ratio {
  flex: none;
  display: block;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
}
.aura-menu-backdrop { position: fixed; inset: 0; z-index: 29; }

.aura-thumb { position: relative; width: 38px; height: 38px; flex: none; }
.aura-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.aura-thumb button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid var(--aura-border);
  color: var(--aura-text);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
}

/* Character und Generate bilden EINEN Block im Grid. Zwei getrennte Grid-Kinder
   waeren auf dem Handy auseinandergefallen: dort hat der Composer nur noch eine
   Spalte, und der Character haette allein in einer verschwundenen zweiten
   gestanden. */
.aura-composer-action {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* ── Character in der Leiste ────────────────────────────────────────────────
   Wessen Gesicht erzeugt wird, gehoert dorthin, wo man auf "Generate" drueckt —
   nicht in einen Bereich, den man vorher besucht haben muss. Eigene Spalte
   links vom Knopf, gleiche Hoehe. */
.aura-character {
  position: relative;
  align-self: stretch;
  /* Breite folgt der Hoehe im Bildformat des Referenzfotos. Fest 62px sah neben
     dem 115px hohen Generate-Knopf aus wie ein Streifen. */
  /* FESTE Breite statt eines Seitenverhaeltnisses. Mit aspect-ratio entsteht ein
     Zirkelbezug: die Hoehe haengt am Block, die Breite an der Hoehe, die Blockbreite
     wieder an der Breite — der Browser loest das mit einem Zwischenwert, und der
     Generate-Knopf lief 53px ueber den Rand. 104px sitzen ruhig neben dem Knopf,
     das Foto fuellt sie per object-fit ohne Verzerrung. */
  flex: none;
  width: 104px;
  height: 100%;
  min-height: 62px;
  padding: 0;
  overflow: hidden;
  /* Gleiche Rundung wie der Generate-Knopf daneben. Vorher 16 gegen 18 — bei zwei
     Flaechen, die sich beruehren, liest das Auge den Unterschied als Schlamperei. */
  border-radius: 18px;
  border: 1px dashed var(--aura-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--aura-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.aura-character:hover { border-color: var(--aura-accent-28); background: rgba(255, 255, 255, 0.07); }

/* ── Video-Seite: lesbare Fliesstexte ───────────────────────────────────────
   Die Seite erklaert viel — Referenzrollen, Engine-Grenzen, Trial-Deckel — und
   Bootstraps .small (14px) war dafuer zu klein: Text, den man wirklich lesen
   MUSS, darf nicht so aussehen wie eine Fussnote. Gilt nur hier, damit Karten
   auf anderen Seiten ihre Dichte behalten. */
.lg-video-page .card-body p.small,
.lg-video-page .card-body div.small,
.lg-video-page .card-body .text-muted.small,
.lg-video-page .card-body .lg-note {
  font-size: 1.25rem;
  line-height: 1.55;
  /* Weiss statt Grau: das hier sind keine Fussnoten, sondern die Regeln, nach
     denen die Engine arbeitet — wer sie ueberliest, verbrennt einen Clip. */
  color: var(--aura-text);
}
/* Bootstrap faerbt .text-muted per Utility ein; ohne das gewinnt Grau. */
.lg-video-page .card-body .text-muted.small,
.lg-video-page .card-body p.small .text-muted,
.lg-video-page .card-body div.small .text-muted { color: var(--aura-text) !important; }
.lg-video-page .card-title { font-size: 1.5rem; }

/* Anleitung: zugeklappt eine Zeile, aufgeklappt ein lesbarer Block. Ein Setup,
   das man einmal macht, darf die Karte nicht dauerhaft in die Laenge ziehen. */
.lg-video-page .lg-howto {
  border: 1px solid var(--aura-border);
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--aura-text);
}
.lg-video-page .lg-howto > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.lg-video-page .lg-howto > summary::-webkit-details-marker { display: none; }
.lg-video-page .lg-howto > summary::after {
  content: "▾";
  float: right;
  color: var(--aura-muted);
}
.lg-video-page .lg-howto[open] > summary::after { content: "▴"; }
/* Der globale Reset nimmt Listen ihre Marker — hier sind die Nummern aber die
   Aussage: es ist eine Reihenfolge, kein Sammelsurium von Tipps. */
.lg-video-page .lg-howto ol {
  padding-left: 1.6em;
  list-style: decimal outside;
}
.lg-video-page .lg-howto li {
  display: list-item;
  margin-bottom: 8px;
}
.lg-video-page .lg-howto li::marker { color: var(--aura-accent); font-weight: 600; }
.lg-video-page .lg-howto a { color: var(--aura-accent); }
.lg-video-page .form-label.small { font-size: 1.05rem; color: var(--aura-text); }
.lg-video-page .card-body code { font-size: 1em; }
/* Eingabefelder und Auswahl mitziehen — sonst steht ein 17px-Hinweis ueber
   einem 12px-Feld, und die Karte kippt optisch nach unten weg. */
.lg-video-page .form-control-sm,
.lg-video-page .form-select-sm,
.lg-video-page .btn-sm { font-size: 1.05rem; }

/* ── Bypass ─────────────────────────────────────────────────────────────────
   Sitzt zwischen Character und Generate, weil er genau dazwischen entscheidet:
   laeuft der Prompt MIT ihren Fotos oder ohne. Schmal und vertikal, damit er die
   beiden Nachbarn nicht auseinanderdrueckt. Eingeschaltet traegt er Akzentfarbe —
   das ist ein Zustand, den man beim Druck auf Generate sehen muss. */
.aura-bypass {
  flex: none;
  align-self: stretch;
  width: 62px;
  min-height: 62px;
  padding: 0 6px;
  border-radius: 18px;
  border: 1px dashed var(--aura-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--aura-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transition: box-shadow 0.18s, border-color 0.18s, background 0.18s, color 0.18s;
}
.aura-bypass i { font-size: 18px; }
/* Der Fokusring soll zum Rest passen statt im Browser-Blau dazwischenzustehen. */
.aura-bypass:focus { outline: none; }
.aura-bypass:focus-visible { outline: 2px solid var(--aura-accent); outline-offset: 2px; }

/* Bypass an: das Foto bleibt sichtbar, ist aber sichtbar AUSSER Dienst. Ausblenden
   waere falsch — der Platz wuerde springen und man wuesste nicht mehr, welches
   Foto ignoriert wird. Entfaerbt und abgedunkelt sagt beides auf einmal. */
.aura-character.is-bypassed { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.aura-character.is-bypassed img { filter: grayscale(1); opacity: 0.28; }
.aura-character.is-bypassed .aura-character-label.is-on {
  background: rgba(0, 0, 0, 0.55);
  color: var(--aura-muted);
  text-decoration: line-through;
}
.aura-character.is-bypassed:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.aura-bypass:hover { border-color: var(--aura-accent-28); background: rgba(255, 255, 255, 0.07); color: var(--aura-text); }
.aura-bypass.is-on {
  border-style: solid;
  border-color: var(--aura-accent);
  background: var(--aura-accent-14);
  color: var(--aura-accent);
}
/* Mit Foto: KEIN Rahmen. Ein Strich um ein Bild wirkt aufgeklebt; ein feiner
   Innenrand fasst es, ohne sich davorzustellen — wie ein Passepartout. */
.aura-character.is-filled {
  border-color: transparent;
  border-style: solid;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.aura-character.is-filled:hover {
  box-shadow: inset 0 0 0 1px var(--aura-accent-28), 0 0 0 1px var(--aura-accent-28);
}
.aura-character img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aura-character-plus { font-size: 19px; }
.aura-character-label {
  position: relative;
  z-index: 1;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
/* Auf dem Bild braucht die Beschriftung einen Grund, sonst verschwindet sie im Motiv */
.aura-character-label.is-on {
  margin-top: auto;
  width: 100%;
  padding: 6px 2px 5px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.aura-character-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity 0.15s;
}
.aura-character:hover .aura-character-hover,
.aura-character:focus-visible .aura-character-hover { opacity: 1; }

.aura-generate {
  flex: 1;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 156px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: 16.5px;
  font-weight: 600;
}
.aura-generate i { font-size: 15px; }
.aura-generate > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  opacity: 0.65;
}

@media (max-width: 767.98px) {
  /* Gestapelt: der Aktionsblock rutscht unter den Inhalt, Character links,
     Generate fuellt den Rest der Zeile. */
  .aura-composer { flex-direction: column; align-items: stretch; gap: 12px; }
  .aura-composer-action { align-self: stretch; }
  .aura-generate { width: auto; padding: 12px; }
  .aura-character { width: 76px; min-height: 62px; }
}

/* Section header inside a panel: title left, mono caption right */
.aura-sect-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.aura-sect-head .aura-sect-title { font-size: 16px; font-weight: 500; color: var(--aura-text); }

/* Media tile — reference slots and results */
.aura-tile {
  border-radius: var(--aura-r-ctl);
  overflow: hidden;
  border: 1px dashed var(--aura-border);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.15s, background 0.15s;
}
.aura-tile.is-filled { border-style: solid; border-color: rgba(216, 227, 127, 0.35); background: var(--aura-canvas-raise); }
.aura-tile.is-drop { border-color: var(--aura-accent); background: var(--aura-accent-14); }
.aura-tile-empty-hatch {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0 10px, transparent 10px 20px),
    var(--aura-canvas-raise);
}
/* Der zweite Selektor ist noetig, nicht dekorativ: die Kachel traegt im Markup
   "aura-result aura-shimmer", und .aura-result setzt gleich darunter bei gleicher
   Spezifitaet selbst ein background — weiter unten in der Datei, also gewann es.
   Der Verlauf hier kam nie an. Schlimmer noch: die Shorthand dort setzt
   background-size auf auto zurueck, also lief lgShimmer auf der Glasflaeche von
   .aura-result statt auf diesem Glanz. Es bewegte sich etwas, nur nicht das,
   was hier steht. */
.aura-shimmer,
.aura-result.aura-shimmer {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(216, 227, 127, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: lgShimmer 1.4s ease-in-out infinite;
}

/* Weniger Bewegung, nicht weniger Hinweis: die Kachel bleibt eine belegte
   Flaeche, sie bekommt nur keinen wandernden Glanz mehr. --aura-accent-06 ist
   genau die Ruhelage des Verlaufs oben — 0.03 Weiss an den Raendern, 0.1 Akzent
   in der Mitte. Ohne Fuellung saehe der Platz aus wie ein Fehler statt wie eine
   Kachel, auf die gewartet wird; der Spinner darin traegt die Auskunft "laeuft",
   die sonst die Bewegung uebernimmt.

   Der Doppelselektor der Basisregel muss mit, sonst greift die Ersatzfuellung
   genau an der Kachel nicht, um die es geht: dort steht .aura-result.aura-shimmer
   und wuerde eine Regel auf blossem .aura-shimmer ueberstimmen. Gleicher Selektor,
   spaeter in der Datei — das entscheidet es sauber. */
@media (prefers-reduced-motion: reduce) {
  .aura-shimmer,
  .aura-result.aura-shimmer {
    animation: none;
    background: var(--aura-accent-06);
  }
}

/* Result card frame */
.aura-result {
  border-radius: var(--aura-r-card);
  overflow: hidden;
  border: 1px solid var(--aura-border);
  background: var(--aura-glass-soft);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--aura-lift-sm);
  transition: border-color 0.15s;
}
.aura-result:hover { border-color: rgba(216, 227, 127, 0.4); }

/* Credits pill in the header */
.aura-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--aura-r-ctl);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--aura-text);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.aura-pill:hover { border-color: var(--aura-accent-50); }
.aura-pill .aura-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aura-accent);
  animation: lgPulseDot 2.4s infinite;
  flex: none;
}
.aura-pill-warn .aura-dot { background: var(--aura-warn); }

/* Der Punkt sagt, dass die Zahl daneben lebt — er muss stehen bleiben, nur nicht
   atmen. lgPulseDot faehrt allein die Deckkraft (1 → 0.3 → 1), also genuegt es,
   sie fest auf 1 zu setzen: sichtbarer als jeder Zwischenwert des Pulses.

   Die Zustandsregel darueber muss hier NICHT mitgezogen werden, anders als beim
   Reiter weiter oben. Dort war die Ersatzhelligkeit dieselbe Eigenschaft, die
   auch der Hover faerbt, und haette sie geschluckt. Hier faerbt der Warn-Zustand
   background, angefasst werden nur animation und opacity — die Farbe bleibt von
   selbst am Punkt. */
@media (prefers-reduced-motion: reduce) {
  .aura-pill .aura-dot {
    animation: none;
    opacity: 1;
  }
}

/* Accent-tinted panel — used for the prompt/generate block */
.aura-panel-accent {
  background: var(--aura-glass-accent) !important;
  border-color: var(--aura-accent-28) !important;
}

/* Hairline separator with a mono caption sitting on it */
.aura-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--aura-dim);
}
.aura-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--aura-border-hair);
}

/* "optional" hinter einem Abschnittstitel. Bewusst leise: es soll die
   Ueberschrift einordnen, nicht mit ihr konkurrieren — wer es nicht sucht,
   liest weiter wie bisher. */
.aura-optional {
  margin-left: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--aura-border-hair);
  color: var(--aura-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Bildausschnitt-Skizze (Referenzfoto) ───────────────────────────────────
   Drei Rahmen nebeneinander. Auf schmalen Schirmen bleiben sie nebeneinander
   statt umzubrechen — der Vergleich ist der ganze Zweck, untereinander verliert
   er seine Wirkung. Deshalb schrumpfen sie mit statt zu rollen. */
.aura-framing {
  border-top: 1px solid var(--aura-border-hair);
  padding-top: 16px;
}
.aura-framing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 420px;
}
.aura-framing-fig {
  aspect-ratio: 3 / 4;
  width: 100%;
}
.aura-framing-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 13px;
  color: var(--aura-muted);
}
.aura-framing-item.is-good .aura-framing-label { color: var(--aura-accent); }
.aura-framing-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--aura-dim);
  margin-top: 2px;
}
.aura-framing-list {
  margin: 16px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--aura-text-2);
}
.aura-framing-list li { margin-bottom: 2px; }
@media (max-width: 575.98px) {
  /* Unter 576px traegt die Kurzbegruendung unter jedem Rahmen nicht mehr —
     drei Spalten lassen ihr je gut 90px, das ergibt Wortschnipsel. Die Regeln
     darunter sagen dasselbe in ganzen Saetzen. */
  .aura-framing-note { display: none; }
  .aura-framing-row { gap: 8px; }
  .aura-framing-label { font-size: 12px; }
}

/* Sprachumschalter in der Kopfzeile. Sitzt auf dem farbigen Kopfzeilen-Grund,
   braucht also eigene Farben statt der Aura-Flaechen. */
.aura-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}
.aura-lang-btn:hover { background: rgba(255, 255, 255, 0.24); }
.aura-lang-btn i { font-size: 15px; }
/* Das Menue oeffnet unter dem Knopf, rechtsbuendig — links waere es aus dem
   Schirm gelaufen, weil der Knopf ganz rechts sitzt. */
.aura-lang-menu {
  /* bottom AUSDRUECKLICH zuruecknehmen: .aura-menu klappt mit bottom:100% nach
     OBEN auf, weil es fuer die Eingabeleiste am unteren Rand gebaut ist. In der
     Kopfzeile landet ein nach oben geoeffnetes Menue ausserhalb des Bildschirms —
     der Knopf reagierte, zu sehen war nichts. Nur top zu setzen genuegt nicht:
     mit top UND bottom streckt sich das Element ueber die ganze Hoehe dazwischen. */
  top: calc(100% + 8px);
  bottom: auto;
  margin-bottom: 0;
  right: 0;
  left: auto;
  min-width: 176px;
  max-height: none;
}

/* ── Galerie (History) ──────────────────────────────────────────────────────
   Die Spaltenzahl kommt aus der Kachelbreite, nicht aus festen Rasterklassen —
   nur so kann der Regler sie stufenlos aendern. auto-fill statt auto-fit: bei
   wenigen Bildern bleiben die Kacheln in ihrer Groesse, statt sich ueber die
   ganze Zeile zu strecken. */
.aura-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--aura-tile, 190px), 1fr));
  gap: 14px;
}

/* Falcon setzt .card-header auf display:flex; flex-wrap:nowrap. Im Galeriekopf
   stehen zwei Zeilen untereinander (Titel+Suche, darunter die Aktionsleiste) —
   ohne diese Regel legt Flexbox sie nebeneinander und beide schrumpfen auf ein
   Drittel der Breite. */
.aura-gallery-head {
  display: block !important;
}

/* Suchfeld der Galerie. Auf breiten Schirmen rechts neben dem Titel, schmal
   gehalten; sobald es eng wird, nimmt es eine eigene Zeile ueber die volle
   Breite. Vorher teilte es sich die Zeile mit dem Groessenregler und schrumpfte
   auf gut 100px — von der eigenen Eingabe waren drei Buchstaben zu sehen. */
.aura-hist-search {
  display: flex;
  flex: 1 1 240px;
  max-width: 280px;
  min-width: 0;
  justify-content: flex-end;
}
@media (max-width: 991.98px) {
  .aura-hist-search {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Aktionsleiste ueber der Galerie. Rollt waagerecht statt umzubrechen — sonst
   wandert sie auf schmalen Schirmen in drei Reihen und schiebt die Bilder weg. */
.aura-gallery-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.aura-gallery-bar::-webkit-scrollbar { display: none; }
.aura-gallery-bar > * { flex-shrink: 0; }

/* Groessenregler */
.aura-tile-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}
.aura-tile-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--aura-accent);
  cursor: pointer;
  border: none;
}
.aura-tile-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--aura-accent);
  cursor: pointer;
  border: none;
}
.aura-tile-range input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px var(--aura-accent-28);
}

/* Jede Kachel misst sich selbst. Der Regler kann sie auf 95px stauchen, und dann
   passt "Use prompt" neben Datum und Herunterladen-Icon nicht mehr — der Text
   lief bisher ueber die Nachbarkachel ("Use promptpt"). Eine Abfrage auf die
   Fensterbreite hilft hier nicht: dieselbe Fensterbreite traegt je nach
   Reglerstellung drei oder acht Spalten. */
.aura-gallery > * {
  container-type: inline-size;
}
@container (max-width: 190px) {
  /* Nur noch die Symbole — die Bedeutung steht im title-Attribut. */
  .aura-btn-label { display: none; }
}
@container (max-width: 130px) {
  /* Ganz eng: der Prompt-Text ist ohnehin nach zwei Woertern abgeschnitten,
     das Datum traegt hier mehr. */
  .aura-gallery .card-body > p { display: none; }
  .aura-gallery .card-body { padding: 6px !important; }
  /* Zwei Knoepfe zu je 40px plus 16px Abstand passen nicht in eine 98px-Kachel —
     sie liefen 5px darueber hinaus. Hier zaehlt, dass ueberhaupt beides
     erreichbar bleibt; das grosse Tap-Ziel ist der Auswahlkreis auf dem Bild. */
  .aura-gallery .card-body .btn-link { min-width: 34px !important; }
  .aura-gallery .card-body .d-flex.gap-3 { gap: 2px !important; }
  .aura-gallery .card-body small { font-size: 11px; }
}

/* Auswahlkreis auf der Kachel. Groesse hier statt inline, damit sie am Handy
   mitwachsen kann. */
.aura-pick {
  width: 24px;
  height: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Loeschen an der Kachel. Gedaempft, bis man darauf zeigt — ein dauerhaft roter
   Punkt auf jedem Bild macht die Galerie unruhig, und die Aktion ist endgueltig
   genug, dass sie keine Aufmerksamkeit einwerben muss. */
.aura-pick-del {
  /* Neonrot statt des gedaempften --aura-error (#ef6f6f): auf dem Bild braucht
     das Symbol Leuchtkraft, sonst verschwindet es im Motiv. Der dunkle Grund
     bleibt — ein farbiger Kreis waere auf hellen Bildern schlechter lesbar als
     ein leuchtendes Symbol auf Schwarz. Der zarte Schein aussen loest es von
     hellen Hintergruenden ab. */
  background: rgba(0, 0, 0, 0.6);
  color: #ff2d55;
  box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.45), 0 0 10px rgba(255, 45, 85, 0.35);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.aura-pick-del i {
  /* Der Schein am Glyph selbst — das ist es, was "Neon" ausmacht */
  text-shadow: 0 0 8px rgba(255, 45, 85, 0.75);
}
.aura-pick-del:hover,
.aura-pick-del:focus-visible {
  background: #ff2d55;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 45, 85, 0.9), 0 0 16px rgba(255, 45, 85, 0.6);
}
.aura-pick-del:hover i,
.aura-pick-del:focus-visible i { text-shadow: none; }

/* Rueckfrage vor endgueltigen Aktionen */
.aura-confirm {
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  padding: 22px;
  border-radius: 18px;
  background: rgba(23, 23, 25, 0.98);
  border: 1px solid var(--aura-border);
  box-shadow: var(--aura-highlight), 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* ── Numbered steps (Plugin tab) ────────────────────────────────────────────
   The order is the whole point there: a key without the plugin is useless and
   the plugin without a key does nothing, so step 2 stays visibly shut until
   step 1 is done. Dimmed rather than hidden — people need to see what is
   coming, otherwise the tab reads as if it only hands out keys. */
.aura-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aura-accent-14);
  color: var(--aura-accent);
  border: 1px solid var(--aura-accent-28);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.aura-step-locked .aura-step-num {
  background: rgba(255, 255, 255, 0.06);
  /* --aura-dim traegt hier nur 3.32:1 — eine Schrittziffer muss lesbar bleiben,
     auch wenn der Schritt noch zu ist. */
  color: var(--aura-muted);
  border-color: var(--aura-border-hair);
}
.aura-step-locked .card-title { color: var(--aura-text-2); }

/* Bootstrap faerbt Inline-Code #d63384 (Pink) — in dieser Palette ein Fremdkoerper,
   und auf dunklem Grund nur 4.37:1. Betrifft jedes <code> der App. */
code {
  color: var(--aura-text-2);
  background: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Handy — Befunde des Mobile-Audits vom 2026-07-31
   Zwei Bedingungen, ODER-verknuepft:
     (hover: none) and (pointer: coarse) — faengt Handys und Tablets in JEDER
       Ausrichtung; ein iPhone Pro Max im Querformat ist 932px breit und faellt
       durch jede reine Breiten-Query.
     (max-width: 767.98px) — faengt zusaetzlich schmale Fenster. Noetig, weil
       Desktop-Browser im Responsive-Modus weiterhin "pointer: fine" melden und
       die Regeln sonst nicht pruefbar waeren. Groessere Tap-Ziele in einem
       schmalen Fenster sind harmlos.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Abdunkelnde Flaeche hinter der offenen Navigation. z-index 10 ist bewusst
   KNAPP UNTER Falcons Sidebar (11) und Kopfzeile (12): mit dem urspruenglichen
   Wert 999 lag der Schleier ueber dem Menue und schluckte jeden Tap darauf —
   die Navigation war am Handy nicht mehr bedienbar. */
.aura-scrim {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.55);
  -webkit-tap-highlight-color: transparent;
}
/* Fuer echte Dialoge, die ueber allem liegen muessen — inklusive Navigation. */
.aura-scrim.is-top { z-index: 999; }

@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {

  /* iOS Safari zoomt bei jedem fokussierten Feld unter 16px hinein — und zoomt
     beim Verlassen NICHT zurueck. Ab dem ersten Tippen ist die Seite dauerhaft
     breiter als der Schirm. Falcon liefert 0.9rem/0.7875rem, deshalb !important. */
  .form-control, .form-select, textarea.form-control,
  .form-control-sm, .form-select-sm, .input-group-text,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], textarea {
    font-size: 16px !important;
  }
  .form-control-sm, .form-select, .form-select-sm { min-height: 44px; }
  /* Der Aura-Chevron wird bei right 0.75rem gezeichnet — die Rinne muss bleiben */
  .form-select-sm { padding: 10px 36px 10px 12px; }

  /* Fingergroessen. Vorher: Stepper 24px, Thumbnail-X 17px und halb ausserhalb
     der Kachel — ein falsch abgelegtes Referenzbild war am Handy nicht mehr
     entfernbar. */
  .aura-tool { padding: 12px 14px; }

  /* Die Werkzeugzeile brach auf vier Reihen um und der Composer belegte 426px —
     52% eines iPhone 11, 64% eines SE. Umbrechen kostet Hoehe, und Hoehe ist
     hier das Knappe: was bleibt, ist das Bild. Also eine einzige Reihe, die
     waagerecht scrollt. Kein Element faellt weg, keins wird kleiner als der
     Daumen; das jeweils angeschnittene naechste Element zeigt, dass es
     weitergeht. Umbruch bleibt fuer die Statuszeile darunter erlaubt. */
  .aura-composer-tools {
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Sonst schneidet der Rahmen der Pillen am Rand der Rolle an */
    padding: 2px 0;
  }
  .aura-composer-tools::-webkit-scrollbar { display: none; }
  /* Ohne das quetscht Flexbox die Pillen zusammen, statt sie rollen zu lassen */
  .aura-composer-tools > * { flex-shrink: 0; }

  .aura-lbl-long { display: none; }
  .aura-lbl-short { display: inline; }
  .aura-stepper { padding: 4px 6px; gap: 6px; }
  .aura-stepper button { width: 32px; height: 32px; border-radius: 9px; }
  .aura-thumb { width: 48px; height: 48px; }
  .aura-thumb button { top: -8px; right: -8px; width: 28px; height: 28px; font-size: 15px; }
  .aura-plus { width: 44px; height: 44px; }
  .aura-composer-tab { padding: 10px 14px; }
  .aura-menu-item { min-height: 48px; }
  .aura-prompt-row { padding: 10px; min-height: 44px; }

  /* Ergebnis- und History-Aktionen: rechneten sich auf 360px zu 29x29px
     herunter. Nichts darf unter die Daumengrenze fallen. */
  .aura-result .btn-sm, .card-body .btn-sm { min-height: 40px; }
  /* Volle Buttons in Karten (z. B. der Plugin-Download) kamen auf 36px. */
  .card-body .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; }
  /* Logout in der Kopfzeile lag bei 29px — die kleinste Flaeche der ganzen App.
     Ohne min-width bleibt er als reiner Icon-Knopf 31px schmal. */
  .app-header .btn { min-height: 40px; min-width: 40px; justify-content: center; }

  /* Die Galerie-Leiste sitzt im card-header, die 40px-Regel fuer card-body
     greift dort nicht — die Knoepfe kamen auf 29px, "Aufheben" auf 21px. */
  .aura-gallery-bar .btn { min-height: 40px; }
  .aura-gallery-bar .btn-link { padding: 10px 8px !important; }
  .aura-gallery-bar .aura-stepper button { height: 40px; min-width: 40px; }
  /* Schmalere Luecke: bei 14px passte die zweite Spalte um ein Pixel nicht mehr. */
  .aura-gallery { gap: 10px; }
  /* Der Herunterladen-Knopf auf der Kachel war 17px breit — nur das Icon. */
  .aura-gallery .card-body .btn-link { min-width: 40px; justify-content: center; }
  /* Der Auswahlkreis bleibt bewusst bei 34px und damit UNTER der 40px-Grenze: er
     liegt auf dem Bild, und auf einer 152px-Kachel fraesse ein 40px-Kreis ein
     Viertel der Breite weg. Vertretbar, weil ringsum kein zweites Ziel liegt —
     danebengetippt oeffnet nur die Grossansicht, nichts geht verloren. */
  /* Der Auswahlkreis ist das meistgetippte Ziel der Galerie und war 24px gross. */
  .aura-pick { width: 34px; height: 34px; }
  .aura-pick i { font-size: 17px !important; }

  /* Impressum, Datenschutz, AGB, Widerruf standen als 14px hohe Textzeilen
     nebeneinander — Pflichtangaben, die man treffen koennen muss. */
  .app-footer a {
    display: inline-block;
    padding: 9px 4px;
    line-height: 1.2;
  }
  .aura-result .d-flex.gap-1 { gap: 6px !important; }
  .aura-chip { padding: 10px 15px; }
  .aura-chip-sm { padding: 8px 13px; }

  /* Safe Areas: Home-Indicator unten, Notch oben. Wirkt nur mit
     viewport-fit=cover, das in app/layout.tsx gesetzt ist. */
  /* --aura-kb wird von der Seite aus visualViewport gesetzt: auf iOS ueberlagert
     die Tastatur das Layout, ohne es zu verkleinern — ohne diesen Versatz liegt
     die Leiste darunter und man tippt blind. */
  .aura-composer-wrap {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--aura-kb, 0px));
  }
  .app-header { padding-top: env(safe-area-inset-top, 0px); }
  .sidebar-wrapper { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* 24px Seitenabstand fressen auf 360px 13% der Breite */
  .app-body { padding-left: 12px !important; padding-right: 12px !important; }

  /* Die Werkzeugzeile bricht auf drei Reihen um und die Leiste frisst den halben
     Schirm — Menues oeffnen nach unten statt nach oben, sonst decken sie das
     Feld zu, in das gerade getippt wird. */
  .aura-menu, .aura-mention {
    left: auto;
    right: 0;
    min-width: 0;
    width: min(88vw, 300px);
    max-height: 46dvh;
  }

  /* Ein Blur-Layer weniger auf dem Scrollpfad — auf Mittelklasse-Android kostet
     jede gestapelte backdrop-filter-Ebene spuerbar Bildrate. */
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.05); }
}

/* Gestapelte Spalten: ohne diesen Reset behaelt .aura-out die Ausrichtung des
   Zweispalters und faellt auf Inhaltshoehe zusammen. */
@media (max-width: 1199.98px) {
  .aura-stage-body { align-items: stretch; }
  .aura-out { width: 100%; }
  /* Gestapelt schwebt die Composer-Leiste ueber dem Inhalt statt neben ihm.
     Ohne diesen Freiraum bleibt das untere Ende der Rail dauerhaft verdeckt —
     die Hoehe kommt aus derselben gemessenen Variable wie die Rail-Hoehe. */
  .aura-stage-body { padding-bottom: calc(var(--aura-composer-h, 160px) + 24px); }
}

/* ── Collab Center ───────────────────────────────────────────────────────────
   Dein Model plus bis zu vier weitere Personen in einem Bild. Der Kern ist die
   Buehne: eine Flaeche im Seitenverhaeltnis der Ausgabe, auf der Kacheln
   gezogen werden. Aus der Tiefe folgen Groesse, Fusslinie und Stapelfolge
   zugleich (lib/stage.ts) — die Koepfe liegen dadurch von selbst auf einer
   Augenlinie, und "Riesin vorn, schwebende Freundin hinten" kann gar nicht
   entstehen.

   Der Namensraum heisst aura-set-, NICHT aura-stage-: .aura-stage ist im
   Bestand das Seitenlayout des Dashboards (100dvh-Flexspalte), und page.tsx
   sucht per closest(".aura-stage") danach. Eine verschachtelte zweite Buehne
   unter demselben Namen haette beides gekapert. */
.aura-collab { max-width: 940px; margin: 0 auto; }

.aura-collab-head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 18px;
}
.aura-collab-head h5 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 6px; font-size: 19px; color: var(--aura-text);
}
.aura-collab-head h5 > i { color: var(--aura-accent); font-size: 21px; }
.aura-collab-head p { margin: 0; color: var(--aura-muted); font-size: 14px; max-width: 62ch; }
.aura-collab-cost {
  flex: none; margin-left: auto; padding: 5px 12px;
  border-radius: var(--aura-r-chip);
  background: var(--aura-accent-10); color: var(--aura-accent);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/* ── Besetzung ── */
.aura-collab-cast {
  display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 12px;
}
.aura-cast {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--aura-border-soft);
  background: var(--aura-glass-soft); color: var(--aura-text-2);
  font-size: 13px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  /* Fingerziel: die Kachel auf der Buehne kann verdeckt sein, dieser Chip nie. */
  min-height: 44px;
}
.aura-cast img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.aura-cast.is-sel { border-color: var(--aura-accent); background: var(--aura-accent-06); color: var(--aura-text); }
.aura-cast.is-add { padding-left: 14px; color: var(--aura-muted); }
.aura-cast.is-add > i { font-size: 17px; }

/* ── Leiste der ausgewaehlten Person ── */
.aura-collab-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--aura-r-ctl);
  border: 1px solid var(--aura-border-hair);
  background: var(--aura-glass);
}
.aura-collab-who { font-weight: 600; font-size: 14px; color: var(--aura-text); }
.aura-collab-act {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  border-radius: var(--aura-r-ctl);
  border: 1px solid var(--aura-border-soft);
  background: transparent; color: var(--aura-text-2);
  font-size: 13px; cursor: pointer;
}
.aura-collab-act:hover { background: var(--aura-glass-soft); }
.aura-collab-act.is-del { color: var(--aura-error); border-color: transparent; }

/* ── Ausgabe-Einstellungen ── */
.aura-collab-opts { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.aura-collab-opt { display: flex; align-items: center; gap: 10px; }
.aura-collab-opt > span { color: var(--aura-muted); font-size: 13px; }
.aura-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--aura-r-ctl); background: var(--aura-field); }
.aura-seg button {
  min-width: 44px; min-height: 36px; padding: 0 11px;
  border: none; border-radius: 9px; background: transparent;
  color: var(--aura-muted); font-size: 13px; cursor: pointer;
}
.aura-seg button.is-on { background: var(--aura-accent); color: var(--aura-accent-ink); font-weight: 600; }
.aura-collab-scene { position: relative; }
.aura-collab-scene img { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; display: block; }
.aura-collab-scene button {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.8); color: var(--aura-text); cursor: pointer;
}

/* box-sizing explizit, nicht aus Bootstraps Reboot geliehen: Felder mit
   width: 100% UND Innenabstand laufen sonst um genau diesen Abstand ueber ihren
   Behaelter hinaus. Gemessen auf 375px: 365px Feld bei 335px Platz. Derselbe
   Fehler wie am Composer-Feld — deshalb hier von vornherein festgeschrieben. */
.aura-collab, .aura-collab * { box-sizing: border-box; }
.aura-collab-extra {
  width: 100%; min-height: 46px; padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--aura-r-ctl);
  border: 1px solid var(--aura-field-border);
  background: var(--aura-field); color: var(--aura-text);
  font-family: inherit; font-size: 14.5px;
}
.aura-collab-extra::placeholder { color: var(--aura-dim); }
.aura-collab-extra:focus { outline: none; border-color: var(--aura-accent-50); }

.aura-collab-error {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: var(--aura-error); font-size: 13.5px;
}
.aura-collab-go { width: 100%; min-height: 52px; gap: 9px; }

.aura-collab-results {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.aura-collab-results button { padding: 0; border: none; background: none; cursor: pointer; }
.aura-collab-results img { width: 100%; border-radius: var(--aura-r-card); display: block; }

.aura-collab-empty {
  max-width: 460px; margin: 8vh auto; text-align: center; color: var(--aura-muted);
}
.aura-collab-empty > i { font-size: 40px; color: var(--aura-accent); }
.aura-collab-empty h5 { margin: 14px 0 8px; color: var(--aura-text); font-size: 18px; }
.aura-collab-empty p { margin: 0 0 20px; font-size: 14px; }

@media (max-width: 575.98px) {
  .aura-collab-head { flex-direction: column; gap: 8px; }
  .aura-collab-cost { margin-left: 0; }
  .aura-set { max-height: 48dvh; }
  .aura-collab-opts { gap: 12px; }
  .aura-collab-opt { width: 100%; justify-content: space-between; }
}

/* ── Collab: Prompt-Satz ─────────────────────────────────────────────────────
   Dieselbe Aufteilung wie am Composer (Prompt / Multiprompt), damit niemand
   zwei Bedienlogiken lernen muss. Ein Auftrag je Prompt, dieselbe Aufstellung. */
/* Ordner-Laschen, die am Feld haengen: oben schmaler als unten, Seiten
   schraeg, die aktive verschmilzt mit dem Feld darunter.

   Die Form kommt aus einer perspektivischen Kippung des Hintergrunds, nicht aus
   clip-path: clip-path schneidet Rand und Schatten mit weg, und gerundete Ecken
   braeuchten dort einen ausgeschriebenen Pfad. Die Kippung sitzt auf einem
   ::before, damit die Beschriftung gerade stehen bleibt — eine geneigte Schrift
   waere genau die Bastel-Optik, die hier nicht hin soll.

   transform-origin: bottom laesst die Unterkante liegen und zieht nur die
   Oberkante zusammen. Der Einzug haengt von Perspektive UND Laschenhoehe ab und
   ist deshalb ausgemessen, nicht geschaetzt: perspective(10px) rotateX(2.2deg)
   ergibt bei 38px Hoehe 5,6px je Seite. Mit den ersten Werten (14px/1,4deg)
   waren es 2,7px — bei normaler Groesse sah die Lasche damit gerade aus. */
.aura-collab-tabs {
  display: flex;
  gap: 3px;
  padding-left: 14px;
  /* Teilt sich die Kante mit dem Feld — sonst laege eine Fuge dazwischen und
     die Lasche haenge nicht am Fenster, sondern schwebte darueber. */
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.aura-collab-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 22px;
  border: none; background: transparent;
  color: var(--aura-muted);
  font-size: 13.5px; cursor: pointer;
  transition: color 0.15s;
}
.aura-collab-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--aura-field-border);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 255, 255, 0.028);
  transform: perspective(10px) rotateX(2.2deg);
  transform-origin: bottom;
  transition: background 0.15s, border-color 0.15s;
}
.aura-collab-tab:hover { color: var(--aura-text-2); }
.aura-collab-tab:hover::before { background: rgba(255, 255, 255, 0.055); }
/* Die aktive Lasche traegt exakt Fuellung und Rand des Feldes. Zusammen mit dem
   fehlenden unteren Rand und dem -1px oben liest sich beides als EIN Moebel. */
.aura-collab-tab.is-on { color: var(--aura-text); }
.aura-collab-tab.is-on::before {
  background: var(--aura-field);
  border-color: var(--aura-field-border);
}

/* Die Hoehe steuert der Effekt in CollabPanel (mitwachsen bis zum Deckel),
   deshalb kein resize-Griff: er wuerde bei der naechsten Eingabe ueberschrieben
   und sich damit kaputt anfuehlen. Ueber dem Deckel scrollt das Feld. */
textarea.aura-collab-extra {
  resize: none;
  line-height: 1.5;
  overflow-y: auto;
  min-height: 46px;
}
textarea.aura-collab-extra::-webkit-scrollbar { width: 6px; }

.aura-collab-prompts { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 12px; }
.aura-collab-prompt {
  display: flex; align-items: center; gap: 9px;
  /* 44px, nicht 40: die Zeile IST der Schalter, mit dem ein Prompt an- und
     abgewaehlt wird — darunter wird das Antippen am Daumen unzuverlaessig. */
  min-height: 44px; padding: 0 12px; width: 100%;
  border: none; border-radius: var(--aura-r-chip);
  background: transparent; color: var(--aura-text-2);
  font-size: 13.5px; text-align: left; cursor: pointer;
}
.aura-collab-prompt:hover { background: var(--aura-glass-soft); }
.aura-collab-prompt > i { color: var(--aura-accent); font-size: 17px; flex: none; }
.aura-collab-prompt > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Abgewaehlt bleibt lesbar, nicht unsichtbar: man muss erkennen koennen, was
   man gerade NICHT erzeugt. */
.aura-collab-prompt.is-off { color: var(--aura-dim); }
.aura-collab-prompt.is-off > i { color: var(--aura-dim); }

.aura-collab-golane { display: flex; gap: 10px; align-items: stretch; }
.aura-collab-golane .aura-collab-go { flex: 1; }

/* ── Ergebnisse je Prompt ── */
.aura-collab-runs { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.aura-collab-run { }
.aura-collab-runhead {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  color: var(--aura-text-2); font-size: 13.5px;
}
.aura-collab-runhead > span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aura-collab-runhead > i, .aura-collab-runhead > .spinner-border { margin-left: auto; flex: none; }
.aura-collab-run.is-queued .aura-collab-runhead { color: var(--aura-dim); }
.aura-collab-run.is-done .aura-collab-runhead > i { color: var(--aura-ok); }
.aura-collab-run.is-failed .aura-collab-runhead > i { color: var(--aura-error); }
.aura-collab-runerr { margin: 0 0 8px; color: var(--aura-error); font-size: 13px; }


/* ── Collab: die fuenf Plaetze ───────────────────────────────────────────────
   Ersetzt die Zieh-Buehne. Platz 1 gehoert dem eigenen Model und laesst sich
   nicht raeumen; die vier daneben nehmen je ein Foto. Die ganze Reihe ist
   zugleich Ablageflaeche — vier Bilder auf einmal fallen lassen, ohne vier
   Ziele einzeln treffen zu muessen. */
.aura-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: var(--aura-r-panel);
  border: 1px dashed var(--aura-border-soft);
  background: var(--aura-field);
  transition: border-color 0.15s, background 0.15s;
}
.aura-slots.is-drop { border-color: var(--aura-accent); background: var(--aura-accent-06); }

.aura-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--aura-r-card);
  overflow: hidden;
}
.aura-slot.is-filled { border: 1px solid var(--aura-border); }
.aura-slot.is-self { border-color: var(--aura-accent); }
.aura-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aura-slot.is-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 4px;
  border: 1px dashed var(--aura-border-soft);
  background: transparent; color: var(--aura-dim);
  font-size: 11.5px; text-align: center; cursor: pointer;
}
.aura-slot.is-empty > i { font-size: 20px; }
.aura-slot.is-empty:hover { border-color: var(--aura-accent-50); color: var(--aura-muted); }

.aura-slot-name {
  position: absolute; left: 6px; bottom: 6px;
  /* Nicht ueber die volle Breite: eine Plakette, die sich an den Namen anpasst,
     liest sich als Beschriftung — eine, die den Platz ausfuellt, als Balken.
     max-width deckelt lange Dateinamen, ellipsis erledigt den Rest. */
  max-width: calc(100% - 12px);
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: var(--aura-text); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aura-slot.is-self .aura-slot-name { background: var(--aura-accent); color: var(--aura-accent-ink); font-weight: 600; }

/* Die Werkzeuge liegen auf dem Bild und sind IMMER da.
   Der naheliegende Weg waere, sie beim Ueberfahren einzublenden und per
   @media (hover: none) am Finger dauerhaft zu zeigen. Das ist eine Wette auf
   eine Angabe, die Geraete falsch machen: ein Touch-Notebook meldet
   hover: hover, und dort waeren Loeschen und Tauschen dann ueberhaupt nicht
   erreichbar. Zwei kleine dunkle Knoepfe in der Ecke sind der guenstigere
   Preis. Beim Ueberfahren werden sie nur deutlicher. */
.aura-slot-acts {
  position: absolute; top: 5px; right: 5px;
  display: flex; gap: 4px;
  opacity: 0.8; transition: opacity 0.15s;
}
.aura-slot:hover .aura-slot-acts, .aura-slot:focus-within .aura-slot-acts { opacity: 1; }
.aura-slot-acts button {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.7); color: var(--aura-text);
  font-size: 15px; cursor: pointer;
}
/* Sichtbar 28px, treffbar 44px — ein Daumen braucht mehr Flaeche, als das Bild
   hergeben darf, ohne das Foto zuzudecken. */
.aura-slot-acts button::after { content: ""; position: absolute; inset: -8px; }
.aura-slot-acts button { position: relative; }
.aura-slot-acts button.is-del { color: #ff2d55; }

.aura-slots-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; color: var(--aura-dim); font-size: 12.5px;
}
.aura-slots-hint > i { font-size: 15px; }

@media (max-width: 575.98px) {
  /* Fuenf Spalten auf 375px waeren 57px je Platz — ein Gesicht ist darin nicht
     mehr erkennbar. Drei Spalten lassen 100px. */
  .aura-slots { grid-template-columns: repeat(3, 1fr); }
}

/* ── Collab: Prompt-Feld mit Leeren-Knopf, acht Formate ──────────────────────
   Der Knopf sitzt im Feld statt daneben: er gehoert zu dem Text, den er
   wegnimmt. Gleiche Bauart wie am Composer, gleiche Klasse (.aura-clear). */
.aura-collab-field { position: relative; }
.aura-collab-field .aura-collab-extra { padding-right: 40px; }
.aura-collab-field .aura-clear { top: 11px; right: 10px; }

/* Acht Formate passen auf einer Zeile nur am Schreibtisch. Umbrechen statt
   quetschen — ein 30px breiter Knopf mit "16:9" darin ist unlesbar. */
.aura-seg-wrap { flex-wrap: wrap; }
.aura-collab-opt.is-wide { flex: 1 1 100%; align-items: flex-start; }
.aura-collab-opt.is-wide > span { padding-top: 9px; }

/* ── Collab: Bilder an die Partnerinnen schicken ─────────────────────────────
   Sitzt zwischen Knopf und Ergebnissen und ist zugeklappt, bis es etwas zu
   verschicken gibt. Aufgeklappt zeigt es beide Felder und den Hinweis, was
   tatsaechlich passiert — Anhaenge verlassen die Plattform, Antworten gehen
   ans eigene Postfach. */
.aura-mail {
  margin-top: 18px;
  border-radius: var(--aura-r-ctl);
  border: 1px solid var(--aura-border-hair);
  background: var(--aura-glass-soft);
  overflow: hidden;
}
.aura-mail.is-open { border-color: var(--aura-border-soft); }
.aura-mail-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 0 14px;
  border: none; background: transparent; color: var(--aura-text);
  font-size: 14px; cursor: pointer; text-align: left;
}
.aura-mail-tab > i:first-child { color: var(--aura-accent); font-size: 18px; flex: none; }
.aura-mail-tab > span:nth-child(2) { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-mail-tab > i:last-child { flex: none; font-size: 19px; color: var(--aura-muted); }
.aura-mail-tab:hover { background: rgba(255, 255, 255, 0.03); }
.aura-mail-count {
  flex: none; padding: 2px 9px; border-radius: 999px;
  background: var(--aura-accent-10); color: var(--aura-accent);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.aura-mail-body { padding: 4px 14px 14px; }
.aura-mail-body .aura-collab-extra { margin-bottom: 8px; }
.aura-mail-fine {
  margin: 2px 0 12px; color: var(--aura-dim);
  font-size: 12px; line-height: 1.45;
}
.aura-mail-ok {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  color: var(--aura-ok); font-size: 13.5px;
}
.aura-mail-go { width: 100%; min-height: 46px; gap: 8px; }

@media (max-width: 575.98px) { .aura-mail-count { display: none; } }

/* ── Video-Handbuch ───────────────────────────────────────────────────────
   Die Anleitung liegt im selben Typo-Kontext wie die Videoseite (.lg-video-page),
   erbt also deren groessere Schrift. Was hier dazukommt, sind die drei Dinge,
   die eine Anleitung von einem Formular unterscheiden: kopierbare Prompts,
   nummerierte Schritte und Tabellen, die man quer liest. */
.lg-video-page .lg-code {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--aura-border);
  border-radius: 10px;
  padding: 14px 16px;
  /* Prompts sind Text zum Kopieren, keine Prosa: fester Zeichenabstand, damit
     Platzhalter wie [outfit] als Platzhalter erkennbar bleiben. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--aura-text);
  white-space: pre-wrap;      /* lange Zeilen brechen, statt die Seite zu dehnen */
  overflow-x: auto;
  margin: 0;
}
.lg-video-page .lg-code code { color: inherit; background: none; padding: 0; }

/* Der globale Reset entfernt Listenmarker. In der Anleitung sind die Nummern
   die Aussage — Schritt 1 vor Schritt 2 —, also kommen sie hier zurueck. */
.lg-video-page section ol { padding-left: 1.6em; list-style: decimal outside; }
.lg-video-page section ul { padding-left: 1.4em; list-style: disc outside; }
.lg-video-page section li { display: list-item; }

/* Vergleichstabellen: die Zeile ist die Antwort, deshalb Trennlinien statt
   Zebrastreifen — das Auge folgt der Zeile, nicht dem Block. */
.lg-video-page table { color: var(--aura-text); }
/* Das Falcon-Theme faerbt jede Tabellenkopfzeile violett ein — eine Farbe, die
   in der Aura-Palette nicht vorkommt. Hier ist der Kopf nur eine Beschriftung,
   keine Flaeche. */
.lg-video-page table th {
  font-size: 1rem;
  font-weight: 600;
  color: var(--aura-muted);
  background: transparent !important;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--aura-border);
}
.lg-video-page table td { border-bottom: 1px solid var(--aura-border-soft, rgba(255,255,255,.06)); }

/* Sprungmarken duerfen nicht unter dem Kopfbereich landen. */
.lg-video-page section { scroll-margin-top: 90px; }

/* Kopierknopf am Prompt: sitzt im Block, nicht daneben — sonst waendert das Auge
   erst zum Text und dann zurueck. Auf dem Handy bleibt er sichtbar, am Rechner
   erscheint er beim Ueberfahren, damit er die Vorlage nicht zerschneidet. */
.lg-video-page .lg-prompt-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: .85rem;
  padding: 3px 10px;
  color: var(--aura-muted);
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--aura-border);
  border-radius: 8px;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s;
}
.lg-video-page .lg-prompt:hover .lg-prompt-copy,
.lg-video-page .lg-prompt-copy:focus-visible { opacity: 1; }
.lg-video-page .lg-prompt-copy:hover { color: var(--aura-accent); border-color: var(--aura-accent); }
@media (hover: none) {
  .lg-video-page .lg-prompt-copy { opacity: 1; }
}
/* Der Knopf schwebt ueber dem Text — die erste Zeile bekommt Platz. */
.lg-video-page .lg-prompt .lg-code { padding-right: 96px; }

/* Zwischenueberschriften in der Anleitung: im vergroesserten Typo-Kontext der
   Videoseite war h6 kleiner als der Fliesstext darunter. */
.lg-video-page section h6 { font-size: 1.2rem; margin-bottom: .5rem; }

/* ── Handy: Klickflaechen ─────────────────────────────────────────────────────
   Auf dem Telefon gingen Taps regelmaessig ins Leere. Drei Ursachen, gemessen
   am 375er-Schirm, nicht geraten:

   1. Der Kopfbereich passte nicht: die Token-Pille lag ueber dem Markennamen.
      Zwei Klickflaechen an derselben Stelle — was man trifft, ist Zufall.
   2. Ziele unter 44 px. Ein Finger ist kein Mauszeiger; Apple und Google nennen
      beide 44 px als Untergrenze, unsere Loeschknoepfe waren 31 px breit.
   3. Der Composer belegte 47 % der Schirmhoehe. Er ist sticky, also wandert
      beim Scrollen staendig etwas darunter — und der Tap landet auf ihm statt
      auf dem Knopf am Bild. */
@media (max-width: 575.98px) {
  /* 1 — Der Markenname weicht. Burger und Breadcrumb sagen ohnehin, wo man ist,
     und das Guthaben ist die Information, die hier gebraucht wird. */
  .app-header .app-brand,
  .app-header .fw-bold.fs-5 { display: none !important; }
  /* Die Pille traegt nur noch die Zahl — "tokens" steht daneben ohnehin im Weg. */
  .aura-pill .aura-mono-dim { display: none; }
  .aura-pill { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 991.98px) {
  /* 2 — Mindestgroesse fuer alles, was man antippt. min-height statt height:
     der Inhalt darf wachsen, nur nicht darunter fallen. */
  .aura-stage button,
  .aura-stage a.btn,
  .lg-video-page button,
  .lg-video-page a.btn,
  .app-header button,
  .app-header a.btn {
    min-height: 44px;
  }
  /* Quadratische Knoepfe auf Kacheln (Loeschen, Auswaehlen) sind absichtlich
     klein — sie sollen das Bild nicht zudecken. Statt sie zu vergroessern,
     bekommen sie eine unsichtbare Trefferflaeche darum herum. */
  .lg-video-page .btn-danger.position-absolute,
  .aura-pick {
    position: relative;
  }
  .lg-video-page .btn-danger.position-absolute::after,
  .aura-pick::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .aura-pick { position: absolute; }   /* Positionierung des Hakens bleibt */

  /* 3 — Der Composer wird kompakter: kleinere Innenabstaende, engere Abstaende
     zwischen den Zeilen, und die Statuszeile ("2/10 REFS") ruecht neben die
     Werkzeuge statt in eine eigene Zeile. Zusammen rund 70 px, die der Inhalt
     darueber zurueckbekommt. */
  .aura-composer { padding: 10px; gap: 8px; }
  .aura-composer-main { gap: 8px; }
  .aura-composer-tabs { min-height: 0; }
  .aura-composer-status { margin-top: -4px; }
}

/* Griff am Composer. Am Rechner gibt es ihn nicht: dort steht die Leiste neben
   dem Inhalt und nimmt niemandem etwas weg. */
.aura-composer-grip { display: none; }

@media (max-width: 991.98px) {
  .aura-composer-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    /* 44 px Trefferflaeche, aber optisch nur ein Strich — der Griff soll den
       Composer nicht um eine weitere sichtbare Zeile verlaengern. */
    min-height: 30px;
    margin: -6px 0 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--aura-muted);
    font-size: .95rem;
  }
  .aura-composer-grip-bar {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--aura-border);
    flex: none;
  }
  .aura-composer-grip:hover .aura-composer-grip-bar { background: var(--aura-accent); }
  /* Die Beschriftung erscheint erst im zugeklappten Zustand: dort ist nicht mehr
     zu sehen, was der Strich oeffnet. */
  .aura-composer-grip-label { display: none; }
  .aura-composer.is-collapsed .aura-composer-grip-label { display: inline; }

  /* Zugeklappt bleibt genau das stehen, was zum Ausloesen noetig ist:
     Modellfoto, Bypass und der Generieren-Knopf. */
  .aura-composer.is-collapsed .aura-composer-tabs,
  .aura-composer.is-collapsed .aura-composer-row,
  .aura-composer.is-collapsed .aura-composer-tools,
  .aura-composer.is-collapsed .aura-composer-status { display: none; }
  .aura-composer.is-collapsed .aura-composer-main { gap: 0; }
}

@media (max-width: 991.98px) {
  /* Icon-Knoepfe ohne Beschriftung brauchen die 44 px in beiden Richtungen —
     bei ihnen gibt es keinen Text, der die Flaeche mitbringt. Bootstraps
     .btn-sm setzt eine feste Hoehe, deshalb hier mit Nachdruck. */
  .app-header .btn,
  .aura-stage .btn-sm.px-0,
  .lg-video-page .btn-sm.position-absolute {
    min-height: 44px !important;
    min-width: 44px;
  }
}

/* ── Stil-Chips + visueller Picker (Higgsfield-Aufteilung) ──────────────────
   Chips über der Prompt-Box; der Picker klappt IM FLUSS auf statt zu
   überlagern — auf dem Handy schiebt er den Composer, statt ihn zu verdecken.
   Kacheln in 4:3, wie die Vorschaubilder generiert sind. */
.aura-pchip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.aura-pchip-row::-webkit-scrollbar { display: none; }
.aura-pchip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--aura-border-soft);
  color: var(--aura-text-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.aura-pchip:hover { background: rgba(255, 255, 255, 0.09); }
.aura-pchip.is-open { border-color: var(--aura-accent-50); }
.aura-pchip.is-set { color: var(--aura-text); border-color: var(--aura-border); }
.aura-pchip-thumb {
  width: 40px;
  height: 30px;               /* 4:3 wie die Previews */
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  font-size: 15px;
  color: var(--aura-accent);
  flex: none;
}
.aura-pchip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aura-pchip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.aura-pchip-cat {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* text-2 statt dim: die 10px-dim-Variante war auf dem Glas kaum lesbar. */
  color: var(--aura-text-2);
  white-space: nowrap;
}
.aura-pchip-val { font-size: 14px; font-weight: 600; white-space: nowrap; }

.aura-style-panel {
  font-size: 15px;
  /* Overlay wie .aura-menu, nur breit: klappt UEBER dem Composer auf statt ihn
     aufzublasen — sonst streckt die rechte Aktionsspalte (Character/Bypass/
     Generate) auf Panelhoehe mit und sieht maximal kacke aus. */
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 10px;
  z-index: 30;
  padding: 12px;
  border-radius: var(--aura-r-card);
  background: rgba(22, 22, 24, 0.97);
  border: 1px solid var(--aura-border);
  backdrop-filter: var(--aura-blur);
  -webkit-backdrop-filter: var(--aura-blur);
  max-height: 480px;
  overflow-y: auto;
}
.aura-style-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.aura-style-clear {
  background: transparent;
  border: 1px solid var(--aura-border-soft);
  border-radius: 999px;
  color: var(--aura-text-2);
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
}
.aura-style-clear:hover { color: var(--aura-text); border-color: var(--aura-border); }
/* Die Aktion im Panelkopf ist ein Angebot, kein Hinweis — in Akzentfarbe, damit
   sie als anklickbar gelesen wird statt als graue Beschriftung unterzugehen. */
.aura-style-clear { color: var(--aura-accent); border-color: var(--aura-accent-28); }
.aura-style-clear:hover { color: var(--aura-accent); border-color: var(--aura-accent); background: var(--aura-accent-14); }
.aura-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.aura-style-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--aura-text-2);
}
.aura-style-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255, 255, 255, 0.10), transparent 60%),
    rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}
.aura-style-tile:hover .aura-style-img { transform: translateY(-1px); border-color: var(--aura-border); }
.aura-style-tile.is-on .aura-style-img { border-color: var(--aura-accent); }
.aura-style-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aura-style-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aura-accent);
  color: #101010;
  font-size: 14px;
}
.aura-style-name { font-size: 15px; font-weight: 600; color: var(--aura-text); }
.aura-style-tile.is-on .aura-style-name { color: var(--aura-accent); }
.aura-style-hint {
  font-size: 13px;
  color: var(--aura-dim);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.aura-pchip-thumb i.ri-heart-2-line { color: #dc5090; }
.aura-pchip.is-set .aura-pchip-val { color: var(--aura-accent); }

/* Hover-Lupe des Stil-Pickers: grosse 4:3-Vorschau am Viewport, per Portal
   ausserhalb des Panels gerendert (Overflow/backdrop-filter wuerden clippen). */
.aura-style-zoom {
  position: fixed;
  z-index: 3000;
  width: min(460px, 44vw);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--aura-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: aura-zoom-in 0.12s ease-out;
  background: #101012;
}
.aura-style-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes aura-zoom-in {
  from { opacity: 0; scale: 0.96; }
  to { opacity: 1; scale: 1; }
}
/* Auf Touch-Geraeten gibt es kein Hover — die Lupe waere nur ein Artefakt. */
@media (hover: none) {
  .aura-style-zoom { display: none; }
}

/* Schliessen-Knopf der Chip-Panels — rund, klein, immer an derselben Stelle. */
.aura-style-x {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--aura-border-soft);
  color: var(--aura-text-2);
  font-size: 16px;
  cursor: pointer;
}
.aura-style-x:hover { background: rgba(255, 255, 255, 0.13); color: var(--aura-text); }

/* Prompt-Notizbuch: kompakte Liste, Text auf zwei Zeilen geklemmt, Aktionen
   rechts. Klick auf den Eintrag fuegt in die Prompt-Box ein. */
.aura-notes-list { display: flex; flex-direction: column; gap: 6px; }
.aura-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--aura-border-soft);
}
.aura-note:hover { background: rgba(255, 255, 255, 0.08); }
.aura-note-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.aura-note-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--aura-text);
  margin-bottom: 1px;
}
.aura-note-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  color: var(--aura-text-2);
  line-height: 1.35;
}
.aura-note-actions { display: flex; gap: 4px; flex: none; }
.aura-note-actions button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--aura-text-2);
  font-size: 15px;
  cursor: pointer;
}
.aura-note-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--aura-text);
}

/* ── Aktionsspalte am Rechner halbieren ─────────────────────────────────────
   Character, Bypass und Generate strecken sich per align-self: stretch auf die
   Hoehe des Composers. Seit die Chip-Leiste darueber sitzt, ist der Composer
   deutlich hoeher — und die drei Flaechen wuchsen stumm mit, bis sie den halben
   Balken fuellten. Ab Tablet-Breite deshalb feste, halbe Groesse und mittig
   ausgerichtet; auf dem Handy bleibt alles wie gehabt, dort ist die Flaeche
   Fingerziel und darf gross sein. */
@media (min-width: 768px) {
  .aura-composer-action { align-items: center; gap: 8px; }
  .aura-character {
    align-self: center;
    width: 52px;
    height: 56px;
    min-height: 0;
    border-radius: 12px;
    gap: 2px;
  }
  .aura-character-plus { font-size: 15px; }
  .aura-character-label { font-size: 9px; }
  .aura-bypass {
    align-self: center;
    width: 44px;
    height: 56px;
    min-height: 0;
    border-radius: 12px;
    font-size: 9px;
    gap: 2px;
  }
  .aura-bypass i { font-size: 14px; }
  .aura-generate {
    align-self: center;
    height: 56px;
    min-width: 112px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14.5px;
  }
  .aura-generate i { font-size: 13px; }
}

/* ── Aktionsknoepfe in der Werkzeugzeile ────────────────────────────────────
   Character, Bypass und Generate sitzen jetzt IN der Zeile mit Engine, Format
   und Anzahl statt als eigene Spalte daneben. Das spart die komplette Hoehe
   dieser Spalte — der Composer wird flach, und ueber ihm bleibt Platz fuer die
   Chip-Leiste. Rechtsbuendig per auto-Rand; passt die Zeile nicht mehr, bricht
   der Block sauber in die naechste um (flex-wrap der Werkzeugzeile). */
.aura-composer-tools > .aura-composer-action { margin-left: auto; }
@media (min-width: 768px) {
  /* Auf Werkzeugzeilen-Hoehe: die Nachbarn sind 38px hohe Pillen. */
  .aura-character,
  .aura-bypass,
  .aura-generate { height: 42px; }
  .aura-character { width: 38px; border-radius: 10px; }
  .aura-bypass { width: 38px; border-radius: 10px; }
  .aura-generate { min-width: 104px; border-radius: 10px; font-size: 14px; }
  .aura-character-label { font-size: 8px; }
  .aura-bypass span { display: none; }   /* Icon genuegt, Titel erklaert */
}

/* Stil-Kachel ohne Vorschaubild: dezente Flaeche statt Loch. Tritt auf, solange
   fuer ein neues Preset noch keine Vorschau gerendert wurde. */
.aura-style-img.is-blank,
.aura-pchip-img.is-blank {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,.02) 8px 16px);
}

/* Trenner vor der zerstoerenden Aktion in den Auswahlleisten.
   Zwei Aufgaben zugleich: er schiebt das Loeschen ans rechte Ende, solange
   Platz da ist (margin-left: auto), und er zieht einen Strich — Abstand allein
   wuerde auf einer schmalen, waagerecht scrollenden Leiste verschwinden, weil
   dort kein freier Platz uebrig bleibt. Der Strich bleibt in jedem Fall. */
.aura-bar-gap {
  flex: 0 0 auto;
  margin-left: auto;
  /* Mindestabstand auch ohne freien Platz — 28px sind rund ein Daumenbreite
     weniger, als ein Fehlklick ueberbrueckt. */
  padding-left: 28px;
  border-left: 1px solid var(--aura-border-soft);
  align-self: stretch;
  min-height: 24px;
}

/* Verweis auf die eigene Installationsseite, im Plugin-Bereich unter Schritt 2.
   Als Karte statt als Textlink: wer hier sitzt, hat gerade seinen Schluessel
   erzeugt und sucht als naechstes das Plugin — das darf nicht wie eine
   Fussnote aussehen. */
.aura-install-link {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 12px 14px;
  border-radius: var(--aura-r-ctl);
  border: 1px solid var(--aura-accent-28);
  background: var(--aura-accent-06);
  color: var(--aura-text); text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.aura-install-link:hover { background: var(--aura-accent-10); border-color: var(--aura-accent-50); color: var(--aura-text); }
.aura-install-link > i:first-child { font-size: 22px; color: var(--aura-accent); flex: none; }
.aura-install-link > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aura-install-title { font-size: 14px; font-weight: 600; }
.aura-install-sub { font-size: 12.5px; color: var(--aura-muted); }
.aura-install-arrow { font-size: 18px; color: var(--aura-muted); flex: none; }