/* ═══════════════════════════════════════════════════════════════════════════
   ELSA — Design-System (Portierung von Factionmanager)

   Factionmanager rendert sein Design ueber Tailwind + `@apply` in
   `apps/web/app/globals.css`. ELSA hat keinen Build-Step (Tailwind laeuft als
   Play-CDN), deshalb steht hier dasselbe System als PLAIN CSS:

     1. die Farb-Tokens (`--color-*`) fuer Light/Dark — identische Werte wie in
        Factionmanager, damit beide Apps wirklich gleich aussehen;
     2. die `fm-*` Komponenten-Klassen (Card, Panel, Button, Input, Table, …);
     3. ein paar Utilities (Scrollbar, Progressbar, Papier-Ansicht);
     4. Legacy-Aliase (`.glass`, `.tr`, `.glass-card`, …) — alte Views sehen
        damit auch ohne Umbau schon nach Factionmanager aus.

   Die Tokens werden in `views/partials/head.ejs` zusaetzlich in die
   Tailwind-Config gehaengt, deshalb funktionieren `bg-surface`, `text-fg-muted`,
   `border-line`, `bg-accent/10` … hier genau wie in Factionmanager.

   WICHTIG: Utilities gewinnen. Tailwind-CDN injiziert seine Styles zur Laufzeit
   ans Ende von <head>, also nach diesem Stylesheet — eine Utility-Klasse auf
   einem `.fm-card` ueberschreibt die Komponente, exakt wie `@layer components`
   es in Factionmanager tut.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── 1. Tokens ─────────────── */

:root {
  color-scheme: light;
  --color-canvas: 255 255 255;
  --color-surface: 248 250 252;
  --color-elevated: 241 245 249;
  --color-line: 226 232 240;
  --color-fg: 15 23 42;
  --color-fg-secondary: 100 116 139;
  --color-fg-muted: 148 163 184;
  --color-accent: 37 99 235;
  --color-accent-hover: 29 78 216;
  --color-accent-muted: 219 234 254;
  --color-accent-fg: 255 255 255;
  --color-danger: 220 38 38;
  --color-warn: 217 119 6;
  --color-ok: 22 163 74;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

.dark {
  color-scheme: dark;
  --color-canvas: 9 9 11;
  --color-surface: 24 24 27;
  --color-elevated: 39 39 42;
  --color-line: 63 63 70;
  --color-fg: 250 250 250;
  --color-fg-secondary: 161 161 170;
  --color-fg-muted: 113 113 122;
  --color-accent: 96 165 250;
  --color-accent-hover: 147 197 253;
  --color-accent-muted: 30 58 138;
  --color-accent-fg: 9 9 11;
  --color-danger: 248 113 113;
  --color-warn: 251 191 36;
  --color-ok: 74 222 128;
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
}

/* ─────────────────────────────────────────────── 2. Base ───────────────── */

/* Die Grundfarbe haengt am <html>, NICHT am <body>: der Aurora-Layer aus
   `partials/head.ejs` liegt auf `-z-10`, und ein negativer z-index wird zwar
   ueber dem Canvas, aber UNTER dem Hintergrund eines in-flow Blocks gemalt —
   ein eigener Body-Hintergrund wuerde die Aurora also schlicht zudecken. */
html {
  background-color: rgb(var(--color-canvas));
}

html,
body {
  color: rgb(var(--color-fg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: transparent;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
  background-color: rgb(var(--color-accent) / 0.2);
  color: rgb(var(--color-accent));
}

/* Formular-Elemente erben die Schrift nicht von selbst. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Native Controls (Checkbox, Radio, Range, Datepicker-Icon) in Theme-Farbe. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: rgb(var(--color-accent));
}

/*
 * Element-Defaults fuer Eingabefelder.
 *
 * Damit sieht JEDES Feld der App sofort richtig aus — auch eines, das noch keine
 * `fm-input`-Klasse traegt. Die Kaskade muss dabei sauber gestaffelt bleiben:
 * Element-Regel (0,0,1) < `.fm-input` (0,1,0) < Tailwind-Utility (0,1,0, spaeter
 * injiziert). Tailwinds Preflight setzt Raender ueber den `*`-Selektor (0,0,0)
 * zurueck und verliert deshalb gegen diese Regeln, egal in welcher Reihenfolge
 * die Stylesheets landen.
 *
 * Die Ausnahmen stehen in `:where()` und NICHT in `:not()`. `:not()` uebernimmt
 * die Spezifitaet seines Arguments: zehn `:not([type=…])` haetten den Selektor
 * auf (0,10,1) gehoben und damit jede Utility auf einem Feld ueberschrieben —
 * `class="fm-input pl-10"` behielt dann seine 12px Innenabstand und das
 * Such-Icon lag auf dem Platzhaltertext. `:where()` zaehlt null, der Selektor
 * bleibt bei (0,0,1).
 */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"])),
select,
textarea {
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-line));
  background-color: rgb(var(--color-elevated));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-fg));
  outline: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
input:where(:focus),
select:where(:focus),
textarea:where(:focus) {
  border-color: rgb(var(--color-accent));
  box-shadow: 0 0 0 2px rgb(var(--color-accent) / 0.2);
}
input::placeholder,
textarea::placeholder {
  color: rgb(var(--color-fg-muted));
}
/* Ein <option> traegt in Dark-Mode sonst die weissen System-Farben. */
option,
optgroup {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-fg));
}
/* Ein Feld darf nie breiter werden als seine Karte. */
input,
select,
textarea {
  max-width: 100%;
}

/* Der Kalender-/Uhr-Button in Chromium ist sonst schwarz auf dunklem Feld. */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.6);
}

/* ─────────────────────────────────── 3. Komponenten (fm-*) ─────────────── */

/* Die Standard-Karte. */
.fm-card {
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-line));
  background-color: rgb(var(--color-surface));
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Karte, die als Ganzes klickbar ist (Kachel, Listeneintrag). */
.fm-card-interactive {
  cursor: pointer;
}
.fm-card-interactive:hover {
  border-color: rgb(var(--color-accent) / 0.4);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transform: translateY(-2px);
}

/* Weiche Flaeche — das Panel-Pendant zur Karte (Detailseiten, Formular-Bloecke).
   Ohne `backdrop-filter`: ein Dutzend blurrende Karten ist genau die Ursache
   fuer das Scroll-Ruckeln, das Factionmanager im User-Portal abgestellt hat. */
.fm-panel {
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-line) / 0.7);
  background-color: rgb(var(--color-surface));
  padding: 1.25rem;
  box-shadow: 0 18px 40px -30px rgb(0 0 0 / 0.35);
}
@media (min-width: 640px) {
  .fm-panel {
    padding: 1.5rem;
  }
}

/* Der Seitenkopf: Panel mit Accent-Hairline oben und weichem Accent-Glow. */
.fm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgb(var(--color-line) / 0.7);
  background-color: rgb(var(--color-surface) / 0.5);
  padding: 1.75rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.03);
}
@media (min-width: 640px) {
  .fm-hero {
    padding: 2.25rem;
  }
}
.fm-hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    rgb(var(--color-accent) / 0.6),
    transparent
  );
}
.fm-hero::after {
  content: "";
  position: absolute;
  top: -6rem;
  right: -4rem;
  height: 16rem;
  width: 16rem;
  border-radius: 9999px;
  background-color: rgb(var(--color-accent) / 0.15);
  filter: blur(110px);
  pointer-events: none;
}
.fm-hero > * {
  position: relative;
}

/* Icon-Chip im Seitenkopf (das quadratische Accent-Kaestchen vor dem Titel). */
.fm-hero-icon {
  display: grid;
  place-items: center;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-accent) / 0.25);
  background-color: rgb(var(--color-accent) / 0.15);
  color: rgb(var(--color-accent));
  box-shadow: 0 1px 2px 0 rgb(var(--color-accent) / 0.1);
}

/* Die Kapitaelchen-Zeile ueber dem Titel. */
.fm-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgb(var(--color-accent));
}

.fm-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  border: 1px solid rgb(var(--color-line));
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.fm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgb(var(--color-accent));
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-accent-fg));
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-button:hover {
  background-color: rgb(var(--color-accent-hover));
}
.fm-button:active {
  transform: translateY(1px);
}
.fm-button:disabled,
.fm-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Sekundaerer Button: nur Rahmen. */
.fm-ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-line));
  background-color: transparent;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(var(--color-fg-secondary));
  cursor: pointer;
  text-decoration: none;
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-ghost-button:hover {
  background-color: rgb(var(--color-elevated));
  color: rgb(var(--color-fg));
}
.fm-ghost-button:disabled,
.fm-ghost-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Destruktive Aktion (loeschen, widerrufen, sperren). */
.fm-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(var(--color-danger) / 0.4);
  background-color: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: rgb(var(--color-danger));
  cursor: pointer;
  text-decoration: none;
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-danger-button:hover {
  background-color: rgb(var(--color-danger) / 0.1);
}
.fm-danger-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.fm-input,
.fm-select,
.fm-textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-line));
  background-color: rgb(var(--color-elevated));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(var(--color-fg));
  outline: none;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-input::placeholder,
.fm-textarea::placeholder {
  color: rgb(var(--color-fg-muted));
}
.fm-input:focus,
.fm-select:focus,
.fm-textarea:focus {
  border-color: rgb(var(--color-accent));
  box-shadow: 0 0 0 2px rgb(var(--color-accent) / 0.2);
}
.fm-input:disabled,
.fm-select:disabled,
.fm-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Ein <select> traegt in Dark-Mode sonst weisse System-Optionen. */
.fm-select option {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-fg));
}

.fm-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--color-fg-muted));
}

/* Freitext, den ein MENSCH getippt hat (Gruende, Notizen, Bemerkungen).
   Zwei Dinge muss er ueberleben: die Zeilenumbrueche (`pre-wrap`) und eine
   eingefuegte URL — ein einziges Token, das sonst aus der Karte schiesst.
   `anywhere` statt `break-word`, weil nur `anywhere` auch in die
   min-content-Breite eingeht: ein Flex-/Grid-Parent kann so gar nicht erst
   von der URL aufgezogen werden. */
.fm-usertext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tabelle. */
.fm-table-wrapper {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-line));
  background-color: rgb(var(--color-surface));
  box-shadow: var(--shadow-card);
}
.fm-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgb(var(--color-line));
  padding: 1rem 1.5rem;
}
.fm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.fm-th {
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--color-fg-muted));
  background-color: rgb(var(--color-elevated) / 0.4);
  white-space: nowrap;
}
.fm-td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
}
.fm-tr {
  border-top: 1px solid rgb(var(--color-line));
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fm-tr:hover {
  background-color: rgb(var(--color-elevated) / 0.6);
}

/* Hinweisleisten (Flash-Messages, Inline-Hinweise). */
.fm-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--color-line));
  background-color: rgb(var(--color-surface));
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(var(--color-fg-secondary));
}
.fm-alert-danger {
  border-color: rgb(var(--color-danger) / 0.4);
  background-color: rgb(var(--color-danger) / 0.1);
  color: rgb(var(--color-danger));
}
.fm-alert-ok {
  border-color: rgb(var(--color-ok) / 0.4);
  background-color: rgb(var(--color-ok) / 0.1);
  color: rgb(var(--color-ok));
}
.fm-alert-warn {
  border-color: rgb(var(--color-warn) / 0.4);
  background-color: rgb(var(--color-warn) / 0.1);
  color: rgb(var(--color-warn));
}

/* Der Leer-Zustand einer Liste. */
.fm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: rgb(var(--color-fg-muted));
}
.fm-empty i {
  font-size: 1.75rem;
  color: rgb(var(--color-fg-muted));
  opacity: 0.5;
}

/* ─────────────────────────────────── 4. Utilities ──────────────────────── */

/* Duenne, durchscheinende Scrollbar — fuer Chrome, das AUF etwas sitzt. */
.fm-scroll-thin {
  --fm-scroll-thumb: rgb(100 116 139 / 0.4);
  --fm-scroll-thumb-hover: rgb(100 116 139 / 0.65);
  scrollbar-width: thin;
  scrollbar-color: var(--fm-scroll-thumb) transparent;
}
.dark .fm-scroll-thin {
  --fm-scroll-thumb: rgb(255 255 255 / 0.32);
  --fm-scroll-thumb-hover: rgb(255 255 255 / 0.55);
}
.fm-scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.fm-scroll-thin::-webkit-scrollbar-track,
.fm-scroll-thin::-webkit-scrollbar-corner {
  background: transparent;
}
.fm-scroll-thin::-webkit-scrollbar-thumb {
  background-color: var(--fm-scroll-thumb);
  border-radius: 9999px;
}
.fm-scroll-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--fm-scroll-thumb-hover);
}

/* Gar keine Scrollbar — fuer einen Streifen, der SEITWAERTS scrollt und seine
   Affordanz selbst mitbringt (Tab-Leiste). Gescrollt wird weiter. */
.fm-scroll-none {
  scrollbar-width: none;
}
.fm-scroll-none::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Fokus-Ring fuer alles, was kein `fm-input` ist. */
.fm-focus:focus-visible {
  outline: 2px solid rgb(var(--color-accent));
  outline-offset: 2px;
}

/* Unbestimmter Fortschrittsbalken (Seitenwechsel). */
@keyframes fm-navbar-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(360%);
  }
}
.fm-navbar {
  animation: fm-navbar-slide 1s ease-in-out infinite;
}

@keyframes fm-fade-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fm-fade-up {
  animation: fm-fade-up 0.6s ease-out both;
}

/* ─────────────────────────────── 5. Papier-Ansicht ─────────────────────── */

/* Ein Dokument, das gedruckt oder als Urkunde gezeigt wird (Waffenschein,
   oeffentliche Akte, Haftbefehl). Unabhaengig vom App-Theme: das Blatt bringt
   seine eigenen fuenf Tokens mit, damit nichts Dunkles auf weissem Papier
   klebt. Identisch zu `.doc-paper` in Factionmanager. */
.doc-paper {
  --paper-bg: #ffffff;
  --paper-fg: #0f172a;
  --paper-muted: #64748b;
  --paper-soft: #f1f5f9;
  --paper-line: #e2e8f0;
  --paper-accent: #2563eb;
  background: var(--paper-bg);
  color: var(--paper-fg);
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px -12px rgb(0 0 0 / 0.25);
  padding: 3.25rem 3.5rem 4rem;
}
.doc-paper .paper-head {
  color: var(--paper-muted);
}
.doc-paper .paper-line {
  border-color: var(--paper-line);
}
.doc-paper .paper-title {
  color: var(--paper-fg);
}
.doc-paper .paper-soft {
  background: var(--paper-soft);
}
.doc-paper .paper-accent {
  color: var(--paper-accent);
}

@media print {
  .doc-paper {
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    padding: 0;
  }
  .fm-no-print,
  nav,
  footer {
    display: none !important;
  }
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
}

/* ───────────────────────────── 6. Legacy-Aliase ────────────────────────── */

/*
 * Die alten ELSA-Klassen zeigen ab hier auf das neue System. Sie bleiben
 * bestehen, damit KEIN View kaputt aussieht — auch nicht die Stellen, die noch
 * inline `<style>`-Bloecke mitbringen. Neue Markup-Stellen benutzen bitte die
 * `fm-*`-Klassen; die Aliase sind nur die Rueckfallebene.
 */

/* `.glass` / `.glass-card` / `.glass-panel` / `.glass-nav` waren
   halbtransparente, geblurrte Flaechen. In Factionmanager traegt die Flaeche
   selbst den Kontrast — kein `backdrop-filter`, das bei jedem Scroll neu
   rastert. */
.glass,
.glass-card,
.glass-panel,
.glass-nav {
  background: rgb(var(--color-surface));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgb(var(--color-line));
  box-shadow: var(--shadow-card);
}
.dark .glass,
.dark .glass-card,
.dark .glass-panel,
.dark .glass-nav {
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-line));
  box-shadow: var(--shadow-card);
}

/* Die alte Allzweck-Transition. */
.tr {
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Der alte Fokus-Ring. */
.fr:focus {
  outline: 2px solid rgb(var(--color-accent));
  outline-offset: 2px;
}

/* Das Punktraster und die Glow-Orbs des alten Hintergrunds: abgeschaltet.
   Der Hintergrund kommt jetzt aus `partials/head.ejs` (Aurora, siehe dort). */
.dot-pattern {
  background-image: none;
}
.dark .dot-pattern {
  background-image: none;
}

/* Das alte Eingabefeld der Login-Seiten. */
.input-gov {
  border: 1px solid rgb(var(--color-line)) !important;
  background: rgb(var(--color-elevated)) !important;
  color: rgb(var(--color-fg));
}
.input-gov:focus {
  border-color: rgb(var(--color-accent)) !important;
  box-shadow: 0 0 0 2px rgb(var(--color-accent) / 0.2) !important;
  outline: none;
}