/* ==========================================================================
   LIQUID METAL – Design Library
   Komponenten-Klassen mit Prefix .lm-  ·  Dark-first  ·  Tailwind-kompatibel
   Verhalten (Combobox, Menü, Tabs, Dialog, Toast): liquid-metal.js
   Doku für Menschen & KI-Chats: LIQUID-METAL.md

   Einbinden
   - Tailwind v4:   import tailwindcss, then import this file
   - Tailwind v3:   @tailwind base; @tailwind components; @tailwind utilities;
                    (und liquid-metal.css vorher per postcss-import einbinden)
   - Ohne Tailwind: <link rel="stylesheet" href="liquid-metal.css">

   Alles liegt in @layer components, damit Tailwind-Utilities (z. B. px-8,
   rounded-xl, w-full) die Klassen jederzeit überschreiben können.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Flächen */
  --lm-bg: #050816;
  --lm-surface: #111217;
  --lm-surface-2: #0f1730;
  --lm-line: rgba(150, 175, 255, 0.14);
  --lm-line-strong: rgba(150, 175, 255, 0.28);

  /* Text */
  --lm-text: #eef2ff;
  --lm-text-muted: #8d99b8;
  --lm-text-on-metal: #0a1020;

  /* Chrome-Skala (hell → dunkel) */
  --lm-chrome-100: #ffffff;
  --lm-chrome-200: #e8edf7;
  --lm-chrome-300: #c3ccdd;
  --lm-chrome-400: #98a4bb;
  --lm-chrome-500: #6b778f;
  --lm-chrome-700: #2a3246;

  /* Licht */
  --lm-blue: #3b6bff;
  --lm-blue-soft: #7fa6ff;
  --lm-violet: #8a5bff;
  --lm-amber: #ffa24d;
  --lm-green: #38e08c;

  /* Form */
  --lm-radius-sm: 10px;
  --lm-radius-md: 14px;
  --lm-radius-lg: 22px;
  --lm-radius-pill: 999px;

  /* Typo */
  --lm-font:
    "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --lm-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* Motion */
  --lm-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --lm-spring: cubic-bezier(0.3, 1.25, 0.45, 1); /* leichtes Überschwingen */
}

/* Winkel für den umlaufenden Ghost-Rand (muss außerhalb des Layers stehen) */
@property --lm-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@layer components {
  /* ---------- Basis-Helfer ------------------------------------------------ */
  .lm-surface {
    background: var(--lm-bg);
    color: var(--lm-text);
    font-family: var(--lm-font);
    -webkit-font-smoothing: antialiased;
  }

  .lm-focus:focus-visible,
  .lm-btn:focus-visible,
  .lm-btn-ghost:focus-visible,
  .lm-btn-soft:focus-visible,
  .lm-btn-outline:focus-visible,
  .lm-btn-danger:focus-visible,
  .lm-btn-link:focus-visible,
  .lm-pill:focus-visible,
  .lm-page:focus-visible,
  .lm-icon-btn:focus-visible,
  .lm-input:focus-visible,
  .lm-select:focus-visible,
  .lm-switch:focus-visible,
  .lm-check:focus-visible,
  .lm-radio:focus-visible {
    outline: 2px solid var(--lm-blue-soft);
    outline-offset: 3px;
  }

  /* Chrom-Text für Headlines */
  .lm-text-chrome {
    background: linear-gradient(
      180deg,
      #fff 0%,
      #dfe5f1 40%,
      #8f9bb3 62%,
      #eef2fb 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0.08em; /* keep descenders inside the clip box */
  }

  .lm-display {
    font-family: var(--lm-font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  /* Generische Metall-Fläche (Icons, Chips, Thumbs) */
  .lm-metal {
    background: linear-gradient(
      180deg,
      #fff 0%,
      #dfe5f1 18%,
      #9aa6bc 46%,
      #5d6a83 52%,
      #aab5ca 70%,
      #f4f7fc 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.5);
  }

  /* ==========================================================================
   BUTTON · Liquid Metal  (Hero-Komponente)
   Aufbau: Außenring (Chrom) → dunkle Fuge → Innenfläche (::before) → Glanz (::after)
   ========================================================================== */
  .lm-btn {
    --lm-btn-h: 3.25rem;
    --lm-btn-rim: 5px;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: var(--lm-btn-h);
    padding: 0 2.25rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    font: 600 1.0625rem/1 var(--lm-font);
    letter-spacing: -0.01em;
    color: var(--lm-text-on-metal);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Außenring */
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #dfe5f0 14%,
      #8d98ae 36%,
      #232b3f 50%,
      #7a869c 54%,
      #e9eef8 76%,
      #9ba6bc 100%
    );
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.55),
      inset 0 -8px 14px rgba(8, 14, 40, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.35),
      0 14px 28px -10px rgba(59, 107, 255, 0.75),
      0 34px 46px -22px rgba(59, 107, 255, 0.55);
    transition:
      transform 0.25s var(--lm-ease),
      box-shadow 0.35s var(--lm-ease),
      filter 0.35s var(--lm-ease);
  }

  /* Innenfläche */
  .lm-btn::before {
    content: "";
    position: absolute;
    inset: var(--lm-btn-rim);
    z-index: -1;
    border-radius: inherit;
    background:
      radial-gradient(
        60% 55% at 22% 8%,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0) 70%
      ),
      radial-gradient(
        70% 40% at 70% 100%,
        rgba(120, 160, 255, 0.6),
        rgba(120, 160, 255, 0) 70%
      ),
      linear-gradient(
        180deg,
        #ffffff 0%,
        #eef1f8 20%,
        #d3dae8 44%,
        #aab4c9 62%,
        #6d7a96 72%,
        #3f4a66 79%,
        #a7b2c8 87%,
        #eef2fa 96%,
        #cfd7e6 100%
      );
    box-shadow:
      inset 0 2px 2px rgba(255, 255, 255, 0.95),
      inset 0 -3px 6px rgba(60, 75, 110, 0.35),
      0 0 0 1px rgba(10, 16, 32, 0.55);
  }

  /* Wandernder Glanz */
  .lm-btn::after {
    content: "";
    position: absolute;
    inset: var(--lm-btn-rim);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
      112deg,
      transparent 36%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.85) 48%,
      rgba(190, 215, 255, 0.55) 52%,
      transparent 60%
    );
    background-size: 260% 100%;
    background-position: 160% 0;
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.3s var(--lm-ease);
  }

  .lm-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.7),
      inset 0 -8px 14px rgba(8, 14, 40, 0.3),
      0 1px 0 rgba(255, 255, 255, 0.4),
      0 18px 34px -10px rgba(59, 107, 255, 0.9),
      0 40px 56px -22px rgba(59, 107, 255, 0.65);
  }
  .lm-btn:hover::after {
    opacity: 1;
    animation: lm-sheen 1.1s var(--lm-ease) 1 forwards;
  }

  .lm-btn:active {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
      inset 0 -4px 10px rgba(8, 14, 40, 0.45),
      0 6px 14px -8px rgba(59, 107, 255, 0.8);
  }

  .lm-btn[disabled],
  .lm-btn[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(0.85) brightness(0.7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    transform: none;
  }
  .lm-btn[disabled]::after,
  .lm-btn[aria-disabled="true"]::after {
    display: none;
  }

  /* Größen */
  .lm-btn--sm {
    --lm-btn-h: 2.5rem;
    --lm-btn-rim: 4px;
    padding: 0 1.4rem;
    font-size: 0.9375rem;
  }
  .lm-btn--lg {
    --lm-btn-h: 4.25rem;
    --lm-btn-rim: 6px;
    padding: 0 3.25rem;
    font-size: 1.3125rem;
  }

  /* ==========================================================================
   BUTTON · Flache Familie  (Ghost · Soft · Outline · Danger · Link)
   Look wie „My wallet“: dunkle Fläche, heller 1px-Rand, 14px Radius.
   Gemeinsame Größen-Modifier:  .lm-sm  .lm-lg
   ========================================================================== */
  .lm-btn-ghost,
  .lm-btn-soft,
  .lm-btn-outline,
  .lm-btn-danger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 2.875rem;
    padding: 0 1.4rem;
    border-radius: var(--_r, var(--lm-radius-md));
    font: 500 0.9375rem/1 var(--lm-font);
    white-space: nowrap;
    color: var(--lm-text);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background 0.25s var(--lm-ease),
      border-color 0.25s var(--lm-ease),
      color 0.25s var(--lm-ease),
      transform 0.2s var(--lm-ease),
      box-shadow 0.25s var(--lm-ease);
  }
  .lm-btn-ghost:active,
  .lm-btn-soft:active,
  .lm-btn-outline:active,
  .lm-btn-danger:active {
    transform: scale(0.985);
  }
  .lm-btn-ghost[disabled],
  .lm-btn-soft[disabled],
  .lm-btn-outline[disabled],
  .lm-btn-danger[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
  }
  .lm-sm {
    --_r: var(--lm-radius-sm);
    min-height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
  }
  .lm-lg {
    min-height: 3.5rem;
    padding: 0 2rem;
    font-size: 1.0625rem;
  }

  /* Ghost: heller Rand + Farbschimmer, der um den GANZEN Rand läuft.
   Rand     = Gradient-Border-Trick (deckende Plate im padding-box, Conic im border-box)
   ::before = Halo außerhalb des Buttons. Ein Conic-Verlauf wird per Maske auf einen
              Rahmen um den Button begrenzt, der nach außen weich abklingt
              (4 Kantenstreifen + 4 Eckviertel, ohne filter/blur).
   Beide nutzen --lm-angle und laufen synchron. Radius kommt aus --_r.        */
  .lm-btn-ghost {
    --_plate: #090d1c;
    --_edge: rgba(255, 255, 255, 0.62);
    --_glow: 16px;
    --_sweep: conic-gradient(
      from var(--lm-angle),
      transparent 0 70%,
      #4b7bff 76%,
      #7d6bff 85%,
      #ffa24d 93%,
      transparent 99%
    );
    isolation: isolate;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--_plate), var(--_plate)) padding-box,
      var(--_sweep) border-box,
      linear-gradient(var(--_edge), var(--_edge)) border-box;
    animation: lm-orbit 4.6s linear infinite;
  }
  .lm-btn-ghost::before {
    --_g: var(--_glow);
    --_rr: var(--_r, var(--lm-radius-md));
    --_gr: calc(var(--_g) + var(--_rr));
    --_fall:
      transparent 0%, rgba(0, 0, 0, 0.07) 22%, rgba(0, 0, 0, 0.22) 42%,
      rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.8) 82%, #000 100%;
    --_rad:
      transparent calc(var(--_rr) - 2px), #000 var(--_rr),
      rgba(0, 0, 0, 0.8) calc(var(--_rr) + var(--_g) * 0.18),
      rgba(0, 0, 0, 0.5) calc(var(--_rr) + var(--_g) * 0.38),
      rgba(0, 0, 0, 0.22) calc(var(--_rr) + var(--_g) * 0.58),
      rgba(0, 0, 0, 0.07) calc(var(--_rr) + var(--_g) * 0.78),
      transparent var(--_gr);
    --_m:
      linear-gradient(to bottom, var(--_fall)) var(--_gr) 0 /
        calc(100% - 2 * var(--_gr)) var(--_g) no-repeat,
      linear-gradient(to top, var(--_fall)) var(--_gr) 100% /
        calc(100% - 2 * var(--_gr)) var(--_g) no-repeat,
      linear-gradient(to right, var(--_fall)) 0 var(--_gr) / var(--_g)
        calc(100% - 2 * var(--_gr)) no-repeat,
      linear-gradient(to left, var(--_fall)) 100% var(--_gr) / var(--_g)
        calc(100% - 2 * var(--_gr)) no-repeat,
      radial-gradient(circle at 100% 100%, var(--_rad)) 0 0 / var(--_gr)
        var(--_gr) no-repeat,
      radial-gradient(circle at 0 100%, var(--_rad)) 100% 0 / var(--_gr)
        var(--_gr) no-repeat,
      radial-gradient(circle at 100% 0, var(--_rad)) 0 100% / var(--_gr)
        var(--_gr) no-repeat,
      radial-gradient(circle at 0 0, var(--_rad)) 100% 100% / var(--_gr)
        var(--_gr) no-repeat;
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(var(--_g) * -1 - 1px);
    background: var(--_sweep);
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.25s var(--lm-ease);
    -webkit-mask: var(--_m);
    mask: var(--_m);
  }
  .lm-btn-ghost:hover {
    --_plate: #101630;
    --_edge: #fff;
  }
  .lm-btn-ghost:hover::before {
    opacity: 1;
  }

  /* Soft: gefüllt, ohne Rand (z. B. „Send money“) */
  .lm-btn-soft {
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .lm-btn-soft:hover {
    background: rgba(255, 255, 255, 0.13);
  }

  /* Outline: ruhiger Rand ohne Schimmer */
  .lm-btn-outline {
    border: 1px solid var(--lm-line-strong);
    background: transparent;
  }
  .lm-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(190, 205, 255, 0.5);
  }

  /* Danger */
  .lm-btn-danger {
    border: 1px solid rgba(255, 107, 125, 0.4);
    background: rgba(255, 107, 125, 0.12);
    color: #ffa1ad;
  }
  .lm-btn-danger:hover {
    background: rgba(255, 107, 125, 0.2);
    border-color: rgba(255, 107, 125, 0.65);
  }

  /* Link-Button */
  .lm-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 500 0.9375rem/1.2 var(--lm-font);
    color: #b6e36b; /* wie „See all“ im Wallet – per Utility überschreibbar */
    text-underline-offset: 4px;
  }
  .lm-btn-link:hover {
    text-decoration: underline;
  }

  /* Button-Gruppe */
  .lm-btn-group {
    display: inline-flex;
  }
  .lm-btn-group > * {
    border-radius: 0;
  }
  .lm-btn-group > *:first-child {
    border-top-left-radius: var(--lm-radius-md);
    border-bottom-left-radius: var(--lm-radius-md);
  }
  .lm-btn-group > *:last-child {
    border-top-right-radius: var(--lm-radius-md);
    border-bottom-right-radius: var(--lm-radius-md);
  }
  .lm-btn-group > * + * {
    margin-left: -1px;
  }

  /* Runder Chrom-Icon-Button (Hero-Stil) */
  .lm-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    color: var(--lm-text-on-metal);
    cursor: pointer;
    background:
      radial-gradient(
        80% 60% at 50% 0%,
        rgba(255, 255, 255, 0.9),
        transparent 60%
      ),
      linear-gradient(180deg, #e9eef8 0%, #9aa6bc 50%, #dfe5f0 100%);
    box-shadow:
      inset 0 1px 1px #fff,
      inset 0 -3px 6px rgba(50, 62, 95, 0.4),
      0 0 0 1px rgba(10, 16, 32, 0.6),
      0 8px 18px -8px rgba(59, 107, 255, 0.8);
    transition:
      transform 0.2s var(--lm-ease),
      filter 0.2s var(--lm-ease);
  }
  .lm-icon-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .lm-icon-btn:active {
    transform: scale(0.94);
  }

  /* Quadratischer, dunkler Icon-Button (wie „···“ im Wallet) */
  .lm-icon-btn--soft {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .lm-icon-btn--soft:hover {
    background: rgba(255, 255, 255, 0.14);
    filter: none;
    transform: none;
  }

  @keyframes lm-orbit {
    from {
      --lm-angle: 0deg;
    }
    to {
      --lm-angle: 360deg;
    }
  }

  /* ==========================================================================
   CARDS
   ========================================================================== */
  .lm-card {
    position: relative;
    border-radius: var(--lm-radius-lg);
    border: 1px solid var(--lm-line);
    background:
      linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.012) 55%
      ),
      rgba(14, 15, 19, 0.78);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 1.5rem;
    color: var(--lm-text);
  }

  /* Neon-Rand für hervorgehobene Karten (z. B. Pricing „Pro“) */
  .lm-card--glow {
    border-color: rgba(86, 134, 255, 0.85);
    box-shadow:
      0 0 0 1px rgba(86, 134, 255, 0.28),
      0 0 36px rgba(59, 107, 255, 0.38),
      inset 0 0 28px rgba(59, 107, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Glas-Karte: Lichtkante oben/unten + diagonale Reflexion */
  .lm-card--glass {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 12, 18, 0.72);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(255, 255, 255, 0.22),
      0 20px 40px -24px rgba(0, 0, 0, 0.9);
  }
  .lm-card--glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0) 52%,
      rgba(255, 255, 255, 0.055) 52.2%,
      rgba(255, 255, 255, 0.015) 100%
    );
  }
  .lm-card--glass::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.95),
      transparent
    );
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
  }

  /* ==========================================================================
   LIQUID SURFACE  (animierte Flüssigmetall-Fläche, nur CSS)
   ========================================================================== */
  .lm-liquid {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--lm-radius-lg);
    border: 1px solid var(--lm-line);
    background: #040720;
  }
  .lm-liquid::before,
  .lm-liquid::after {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: -1;
  }
  .lm-liquid::before {
    background: conic-gradient(
      from 0deg at 50% 50%,
      #0a1670,
      #2f5cff,
      #86d4ff,
      #7a4dff,
      #0a1670,
      #1b2fc4,
      #c6a7ff,
      #0a1670
    );
    filter: blur(34px) saturate(1.35);
    animation: lm-spin 22s linear infinite;
  }
  .lm-liquid::after {
    background:
      repeating-radial-gradient(
        ellipse 70% 45% at 28% 62%,
        rgba(255, 255, 255, 0) 0 26px,
        rgba(255, 255, 255, 0.3) 34px,
        rgba(130, 170, 255, 0.2) 40px,
        rgba(255, 255, 255, 0) 52px
      ),
      repeating-radial-gradient(
        ellipse 55% 80% at 78% 30%,
        rgba(0, 0, 40, 0) 0 30px,
        rgba(0, 0, 60, 0.35) 40px,
        rgba(0, 0, 40, 0) 56px
      );
    mix-blend-mode: overlay;
    filter: blur(4px);
    animation: lm-spin 40s linear infinite reverse;
  }

  /* ==========================================================================
   FORM
   ========================================================================== */
  .lm-field {
    position: relative;
    display: block;
  }
  .lm-field > svg {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    transform: translateY(-50%);
    color: var(--lm-text-muted);
    pointer-events: none;
  }
  .lm-label {
    display: block;
    margin-bottom: 0.45rem;
    font: 500 0.875rem/1.2 var(--lm-font);
    color: var(--lm-text);
  }
  .lm-hint {
    font: 400 0.8125rem/1.4 var(--lm-font);
    color: var(--lm-text-muted);
  }

  .lm-input,
  .lm-select {
    width: 100%;
    min-height: 2.875rem;
    padding: 0 1rem;
    border: 1px solid var(--lm-line);
    border-radius: var(--lm-radius-md);
    background: rgba(255, 255, 255, 0.035);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      inset 0 8px 16px -10px rgba(0, 0, 0, 0.6);
    color: var(--lm-text);
    font: 400 0.9375rem/1 var(--lm-font);
    transition:
      border-color 0.2s var(--lm-ease),
      box-shadow 0.2s var(--lm-ease),
      background-color 0.2s var(--lm-ease);
  }
  .lm-input::placeholder {
    color: #66728f;
  }
  .lm-input:hover,
  .lm-select:hover {
    border-color: var(--lm-line-strong);
  }
  .lm-input:focus,
  .lm-select:focus {
    outline: none;
    border-color: var(--lm-blue-soft);
    background-color: rgba(59, 107, 255, 0.07);
    box-shadow:
      0 0 0 3px rgba(59, 107, 255, 0.22),
      inset 0 8px 16px -10px rgba(0, 0, 0, 0.6);
  }
  .lm-input[aria-invalid="true"] {
    border-color: #ff6b7d;
    box-shadow: 0 0 0 3px rgba(255, 107, 125, 0.18);
  }
  .lm-input:disabled,
  .lm-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .lm-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d99b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
  }
  .lm-select option {
    background: #111217;
    color: var(--lm-text);
  }

  /* Switch: <input type="checkbox" class="lm-switch" role="switch"> */
  .lm-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 3.25rem;
    height: 1.875rem;
    margin: 0;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 0 0 1px var(--lm-line),
      inset 0 4px 8px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition:
      background 0.3s var(--lm-ease),
      box-shadow 0.3s var(--lm-ease);
  }
  .lm-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.875rem - 6px);
    height: calc(1.875rem - 6px);
    border-radius: 50%;
    background:
      radial-gradient(80% 60% at 50% 0%, #fff, transparent 65%),
      linear-gradient(180deg, #e9eef8, #98a4bb 55%, #dfe5f0);
    box-shadow:
      inset 0 -2px 4px rgba(50, 62, 95, 0.4),
      0 2px 5px rgba(0, 0, 0, 0.55);
    transition: transform 0.35s var(--lm-ease);
  }
  .lm-switch:checked {
    background: linear-gradient(180deg, #5b86ff, #2f5cff);
    box-shadow:
      inset 0 0 0 1px rgba(160, 190, 255, 0.6),
      inset 0 2px 6px rgba(0, 20, 120, 0.5),
      0 0 18px rgba(59, 107, 255, 0.55);
  }
  .lm-switch:checked::before {
    transform: translateX(1.375rem);
  }
  .lm-switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Checkbox: <input type="checkbox" class="lm-check"> */
  .lm-check {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border-radius: 7px;
    border: 1px solid var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition:
      background 0.2s var(--lm-ease),
      box-shadow 0.2s var(--lm-ease),
      border-color 0.2s var(--lm-ease);
  }
  .lm-check:checked {
    border-color: rgba(160, 190, 255, 0.7);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 72% no-repeat,
      linear-gradient(180deg, #6a92ff, #2f5cff);
    box-shadow: 0 0 14px rgba(59, 107, 255, 0.5);
  }

  /* Segmented Control – der Chrom-Thumb gleitet (JS legt .lm-indicator an) */
  .lm-seg {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--lm-radius-md);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px var(--lm-line);
  }
  .lm-seg > button {
    position: relative;
    z-index: 1;
    min-height: 2.25rem;
    padding: 0 1rem;
    border: 0;
    border-radius: calc(var(--lm-radius-md) - 3px);
    background: transparent;
    color: var(--lm-text-muted);
    font: 500 0.875rem/1 var(--lm-font);
    cursor: pointer;
    transition: color 0.15s ease-out;
  }
  .lm-seg > button:hover {
    color: var(--lm-text);
  }
  .lm-seg > button[aria-pressed="true"],
  .lm-seg > button[aria-selected="true"] {
    color: var(--lm-text-on-metal);
  }
  /* ohne JS: Fläche direkt auf dem aktiven Button */
  .lm-seg:not([data-lm-ready]) > button[aria-pressed="true"],
  .lm-seg:not([data-lm-ready]) > button[aria-selected="true"] {
    background: linear-gradient(180deg, #f4f7fc, #b6c0d4 55%, #e3e8f2);
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 8px rgba(0, 0, 0, 0.45);
  }

  /* ==========================================================================
   LISTEN, BADGES, DATEN
   ========================================================================== */
  .lm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
  }
  .lm-list > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font: 400 0.9375rem/1.3 var(--lm-font);
    color: var(--lm-text);
  }
  .lm-list > li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E")
        center / 62% no-repeat,
      linear-gradient(180deg, #7aa0ff, #3b6bff);
    box-shadow:
      0 0 12px rgba(59, 107, 255, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .lm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3rem 0.7rem;
    border-radius: var(--lm-radius-pill);
    border: 1px solid rgba(110, 150, 255, 0.45);
    background: rgba(59, 107, 255, 0.16);
    color: #cfdcff;
    font: 600 0.75rem/1 var(--lm-font);
    letter-spacing: 0.02em;
  }
  .lm-badge--up {
    border-color: rgba(56, 224, 140, 0.4);
    background: rgba(56, 224, 140, 0.12);
    color: var(--lm-green);
  }
  .lm-badge--down {
    border-color: rgba(255, 107, 125, 0.4);
    background: rgba(255, 107, 125, 0.12);
    color: #ff8f9e;
  }

  .lm-stat-value {
    font: 700 2.5rem/1 var(--lm-font);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }

  .lm-divider {
    height: 1px;
    border: 0;
    background: var(--lm-line);
    margin: 1rem 0;
  }

  .lm-progress {
    height: 0.5rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }
  .lm-progress > span {
    display: block;
    height: 100%;
    width: var(--lm-value, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, #2f5cff, #86b0ff 60%, #fff);
    box-shadow: 0 0 14px rgba(59, 107, 255, 0.7);
  }

  .lm-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    background:
      linear-gradient(var(--lm-bg), var(--lm-bg)) padding-box,
      linear-gradient(180deg, #fff, #7a869c 50%, #e9eef8) border-box;
  }

  /* ---------- Keyframes --------------------------------------------------- */
  @keyframes lm-sheen {
    from {
      background-position: 160% 0;
    }
    to {
      background-position: -60% 0;
    }
  }
  @keyframes lm-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---------- Reduced Motion --------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .lm-btn,
    .lm-btn::before,
    .lm-btn::after,
    .lm-btn-ghost,
    .lm-btn-ghost::before,
    .lm-liquid::before,
    .lm-liquid::after,
    .lm-skeleton,
    .lm-popover,
    .lm-dialog,
    .lm-toast,
    .lm-sheet,
    .lm-sheet::backdrop,
    .lm-indicator,
    .lm-collapse,
    .lm-navbar,
    .lm-navbar__panel,
    .lm-navbar__item,
    .lm-sidebar,
    .lm-burger::before,
    .lm-burger::after {
      animation: none !important;
      transition: none !important;
    }
    .lm-btn-ghost {
      --lm-angle: 160deg;
    }
  }

  /* ==========================================================================
   PILLS & STATUS
   <span class="lm-pill lm-pill--success"><i class="lm-dot"></i>Paid</span>
   <button class="lm-pill" aria-pressed="true">Filter</button>
   ========================================================================== */
  .lm-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2rem;
    padding: 0 0.9rem;
    border: 1px solid var(--lm-line);
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    color: var(--lm-text-muted);
    font: 500 0.8125rem/1 var(--lm-font);
    white-space: nowrap;
    transition:
      background-color 0.1s ease-out,
      border-color 0.1s ease-out,
      color 0.1s ease-out,
      box-shadow 0.12s ease-out,
      transform 0.1s ease-out;
  }
  button.lm-pill {
    cursor: pointer;
  }
  button.lm-pill:active {
    transform: scale(0.95);
  }
  button.lm-pill:hover {
    color: var(--lm-text);
    border-color: var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.07);
  }
  .lm-pill--active,
  .lm-pill[aria-pressed="true"] {
    color: #dbe6ff;
    border-color: rgba(110, 150, 255, 0.6);
    background: rgba(59, 107, 255, 0.2);
    box-shadow: 0 0 16px rgba(59, 107, 255, 0.25);
  }
  .lm-pill--metal {
    color: var(--lm-text-on-metal);
    border-color: rgba(10, 16, 32, 0.5);
    background: linear-gradient(180deg, #f6f8fc, #b6c0d4 55%, #e3e8f2);
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .lm-pill--success {
    color: var(--lm-green);
    border-color: rgba(56, 224, 140, 0.35);
    background: rgba(56, 224, 140, 0.1);
  }
  .lm-pill--warning {
    color: #ffc46b;
    border-color: rgba(255, 196, 107, 0.35);
    background: rgba(255, 196, 107, 0.1);
  }
  .lm-pill--danger {
    color: #ff8f9e;
    border-color: rgba(255, 107, 125, 0.35);
    background: rgba(255, 107, 125, 0.1);
  }
  .lm-pill--info {
    color: var(--lm-blue-soft);
    border-color: rgba(110, 150, 255, 0.35);
    background: rgba(59, 107, 255, 0.12);
  }
  .lm-pill--sm {
    height: 1.625rem;
    padding: 0 0.65rem;
    font-size: 0.75rem;
  }

  .lm-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
  }
  .lm-pill__x {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: -0.35rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
  }
  .lm-pill__x:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* ==========================================================================
   CARD-STRUKTUR  (shadcn-Muster: header · content · footer)
   ========================================================================== */
  .lm-card__header {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
  }
  .lm-card__title {
    margin: 0;
    font: 600 1.0625rem/1.25 var(--lm-font);
    letter-spacing: -0.01em;
  }
  .lm-card__desc {
    margin: 0;
    font: 400 0.875rem/1.45 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-card__content {
    display: grid;
    gap: 1rem;
  }
  .lm-card__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lm-line);
  }
  .lm-card__media {
    margin: -1.5rem -1.5rem 1.25rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--lm-radius-lg) var(--lm-radius-lg) 0 0;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-card__media > img,
  .lm-card__media > svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lm-card--flush {
    padding: 0;
    overflow: hidden;
  }

  /* Klickbare Karte */
  .lm-card--interactive {
    cursor: pointer;
    transition:
      transform 0.3s var(--lm-ease),
      border-color 0.3s var(--lm-ease),
      box-shadow 0.3s var(--lm-ease);
  }
  .lm-card--interactive:hover {
    transform: translateY(-2px);
    border-color: rgba(110, 150, 255, 0.5);
    box-shadow:
      0 18px 40px -22px rgba(59, 107, 255, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

  /* Kennzahl */
  .lm-stat {
    display: grid;
    gap: 0.5rem;
  }
  .lm-stat__label {
    font: 500 0.875rem/1.2 var(--lm-font);
    color: var(--lm-text-muted);
  }

  /* Listenzeile (Transaktionen, Aktivität) */
  .lm-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-item:last-child {
    border-bottom: 0;
  }
  .lm-item__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lm-radius-sm);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .lm-item__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
  }
  .lm-item__title {
    font: 500 0.9375rem/1.2 var(--lm-font);
  }
  .lm-item__meta {
    font: 400 0.8125rem/1.2 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-item__end {
    font: 600 0.9375rem/1 var(--lm-font);
    font-variant-numeric: tabular-nums;
  }

  /* Leerer Zustand */
  .lm-empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    text-align: center;
  }
  .lm-empty__title {
    font: 600 1rem/1.2 var(--lm-font);
  }
  .lm-empty__desc {
    max-width: 30ch;
    font: 400 0.875rem/1.45 var(--lm-font);
    color: var(--lm-text-muted);
  }

  /* ==========================================================================
   TABELLE
   <div class="lm-table-wrap"><table class="lm-table">…</table></div>
   Modifier: --striped  --compact   ·  Zelle rechts: class="lm-num"
   Ausgewählte Zeile: <tr aria-selected="true">
   ========================================================================== */
  .lm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lm-line);
    border-radius: var(--lm-radius-lg);
    background: rgba(14, 15, 19, 0.78);
  }
  .lm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font: 400 0.9rem/1.3 var(--lm-font);
    color: var(--lm-text);
  }
  .lm-table caption {
    padding: 1rem 1.1rem;
    text-align: left;
    color: var(--lm-text-muted);
    font-size: 0.875rem;
  }
  .lm-table th {
    padding: 0.8rem 1.1rem;
    text-align: left;
    white-space: nowrap;
    font: 500 0.8125rem/1.2 var(--lm-font);
    color: var(--lm-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-table td {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--lm-line);
    vertical-align: middle;
  }
  .lm-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .lm-table tbody tr {
    transition: background 0.15s var(--lm-ease);
  }
  .lm-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.035);
  }
  .lm-table tbody tr[aria-selected="true"] td {
    background: rgba(59, 107, 255, 0.12);
  }
  .lm-table .lm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .lm-table--striped tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
  }
  .lm-table--compact th,
  .lm-table--compact td {
    padding: 0.55rem 0.9rem;
  }
  .lm-table--sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: blur(10px);
    background: rgba(14, 20, 42, 0.9);
  }
  .lm-table-cell-strong {
    font-weight: 600;
  }

  .lm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }

  /* Pagination */
  .lm-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .lm-page {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius-sm);
    background: transparent;
    color: var(--lm-text-muted);
    font: 500 0.875rem/1 var(--lm-font);
    cursor: pointer;
    transition:
      background 0.2s var(--lm-ease),
      color 0.2s var(--lm-ease);
  }
  .lm-page:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--lm-text);
  }
  .lm-page[aria-current="page"] {
    color: var(--lm-text-on-metal);
    background: linear-gradient(180deg, #f4f7fc, #b6c0d4 55%, #e3e8f2);
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .lm-page[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* ==========================================================================
   RADIO  &  RADIO-CARDS
   Einfach:  <label class="lm-choice"><input type="radio" class="lm-radio" name="x"> Text</label>
   Card:     <label class="lm-radio-card"><input type="radio" class="lm-radio-card__input" name="x">
               <span class="lm-radio-card__body">…</span></label>
   Die Karte schaltet über  input:checked + .lm-radio-card__body  (kein JS nötig).
   Auch mit type="checkbox" nutzbar (Zusatzklasse .lm-radio-card--check).
   ========================================================================== */
  .lm-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    font: 400 0.9375rem/1.3 var(--lm-font);
  }
  .lm-radio-group {
    display: grid;
    gap: 0.8rem;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .lm-radio {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition:
      background 0.2s var(--lm-ease),
      border-color 0.2s var(--lm-ease),
      box-shadow 0.2s var(--lm-ease);
  }
  .lm-radio:hover {
    border-color: rgba(190, 205, 255, 0.5);
  }
  .lm-radio:checked {
    border-color: rgba(160, 190, 255, 0.7);
    background:
      radial-gradient(circle, #fff 0 26%, transparent 29%),
      linear-gradient(180deg, #7aa0ff, #3b6bff);
    box-shadow: 0 0 14px rgba(59, 107, 255, 0.5);
  }
  .lm-radio:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .lm-radio-cards {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .lm-radio-card {
    position: relative;
    display: block;
    cursor: pointer;
  }
  .lm-radio-card__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
  }
  .lm-radio-card__body {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--lm-line);
    border-radius: var(--lm-radius-md);
    background: rgba(255, 255, 255, 0.03);
    transition:
      border-color 0.25s var(--lm-ease),
      background 0.25s var(--lm-ease),
      box-shadow 0.25s var(--lm-ease);
  }
  /* Indikator rechts */
  .lm-radio-card__body::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 1px solid var(--lm-line-strong);
    transition:
      background 0.2s var(--lm-ease),
      border-color 0.2s var(--lm-ease),
      box-shadow 0.2s var(--lm-ease);
  }
  .lm-radio-card:hover .lm-radio-card__body {
    border-color: var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.05);
  }
  .lm-radio-card__input:checked + .lm-radio-card__body {
    border-color: rgba(110, 150, 255, 0.85);
    background: linear-gradient(
      160deg,
      rgba(59, 107, 255, 0.16),
      rgba(59, 107, 255, 0.05)
    );
    box-shadow:
      0 0 0 1px rgba(86, 134, 255, 0.3),
      0 0 30px rgba(59, 107, 255, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .lm-radio-card__input:checked + .lm-radio-card__body::after {
    border-color: rgba(160, 190, 255, 0.7);
    background:
      radial-gradient(circle, #fff 0 26%, transparent 29%),
      linear-gradient(180deg, #7aa0ff, #3b6bff);
    box-shadow: 0 0 14px rgba(59, 107, 255, 0.55);
  }
  .lm-radio-card__input:focus-visible + .lm-radio-card__body {
    outline: 2px solid var(--lm-blue-soft);
    outline-offset: 3px;
  }
  .lm-radio-card__input:disabled + .lm-radio-card__body {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .lm-radio-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lm-radius-sm);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
  .lm-radio-card__text {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
  }
  .lm-radio-card__title {
    font: 600 0.9375rem/1.25 var(--lm-font);
  }
  .lm-radio-card__desc {
    font: 400 0.8125rem/1.4 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-radio-card__meta {
    margin-top: 0.35rem;
    font: 600 0.9375rem/1 var(--lm-font);
    font-variant-numeric: tabular-nums;
  }

  /* Kachel: vertikal, Indikator oben rechts */
  .lm-radio-card--tile .lm-radio-card__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
  }
  .lm-radio-card--tile .lm-radio-card__body::after {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    margin: 0;
  }
  .lm-radio-card--tile .lm-radio-card__text {
    justify-items: center;
  }

  /* Checkbox-Variante: eckiger Indikator mit Haken */
  .lm-radio-card--check .lm-radio-card__body::after {
    border-radius: 7px;
  }
  .lm-radio-card--check
    .lm-radio-card__input:checked
    + .lm-radio-card__body::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 72% no-repeat,
      linear-gradient(180deg, #6a92ff, #2f5cff);
  }

  /* ==========================================================================
   POPOVER · COMBOBOX (Select mit Suche) · DROPDOWN-MENÜ
   Verhalten kommt aus liquid-metal.js  (data-lm-combobox, data-lm-dropdown)
   ========================================================================== */
  .lm-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    padding: 0.35rem;
    border: 1px solid var(--lm-line-strong);
    border-radius: var(--lm-radius-md);
    background: rgba(17, 18, 23, 0.985);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow:
      0 28px 56px -18px rgba(0, 0, 0, 0.85),
      0 0 0 1px rgba(255, 255, 255, 0.025) inset,
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    animation: lm-pop 0.16s var(--lm-ease);
    transform-origin: top center;
  }
  .lm-popover[hidden] {
    display: none;
  }
  .lm-popover--end {
    left: auto;
    right: 0;
  }
  .lm-popover--up {
    top: auto;
    bottom: calc(100% + 0.4rem);
    transform-origin: bottom center;
  }

  .lm-combobox,
  .lm-dropdown {
    position: relative;
  }
  .lm-dropdown {
    display: inline-block;
  }

  .lm-combobox__trigger {
    display: flex;
    align-items: center;
    text-align: left;
  }
  .lm-combobox__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lm-combobox__value[data-empty="true"] {
    color: #66728f;
  }

  .lm-combobox__search {
    position: relative;
    padding: 0.1rem 0.1rem 0.35rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-combobox__search > svg {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    margin-top: -0.55rem;
    width: 1rem;
    height: 1rem;
    color: var(--lm-text-muted);
    pointer-events: none;
  }
  .lm-combobox__search > input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem 0 2.3rem;
    border: 0;
    border-radius: var(--lm-radius-sm);
    background: transparent;
    color: var(--lm-text);
    font: 400 0.9375rem/1 var(--lm-font);
  }
  .lm-combobox__search > input:focus {
    outline: none;
  }
  .lm-combobox__search > input::placeholder {
    color: #66728f;
  }

  /* Feld mit Icon links (für Inline-Combobox / Suche) */
  .lm-field--left > svg {
    left: 0.9rem;
    right: auto;
  }
  .lm-field--left > .lm-input {
    padding-left: 2.6rem;
  }

  .lm-listbox {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .lm-listbox__group[hidden] {
    display: none;
  }
  .lm-listbox__label {
    padding: 0.5rem 0.75rem 0.3rem;
    font: 500 0.75rem/1 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-listbox__empty {
    padding: 1.2rem 0.75rem;
    text-align: center;
    font: 400 0.875rem/1.3 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-listbox__empty[hidden] {
    display: none;
  }

  .lm-option,
  .lm-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: var(--lm-radius-sm);
    background: transparent;
    color: var(--lm-text);
    font: 400 0.9375rem/1.2 var(--lm-font);
    text-align: left;
    cursor: pointer;
  }
  .lm-option[hidden] {
    display: none;
  }
  .lm-option[data-active="true"],
  .lm-menu__item:hover,
  .lm-menu__item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
  }
  .lm-option[aria-selected="true"]::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fa6ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }
  .lm-option[aria-disabled="true"],
  .lm-menu__item[disabled] {
    opacity: 0.4;
    pointer-events: none;
  }

  .lm-menu {
    min-width: 13rem;
    right: auto;
  }
  .lm-menu.lm-popover--end {
    left: auto;
    right: 0;
  }
  .lm-menu__label {
    padding: 0.5rem 0.75rem 0.3rem;
    font: 500 0.75rem/1 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-menu__sep {
    height: 1px;
    margin: 0.35rem -0.35rem;
    border: 0;
    background: var(--lm-line);
  }
  .lm-menu__item--danger {
    color: #ff9aa8;
  }
  .lm-menu__item--danger:hover {
    background: rgba(255, 107, 125, 0.12);
  }
  .lm-menu__shortcut {
    margin-left: auto;
    font: 500 0.75rem/1 var(--lm-font);
    color: var(--lm-text-muted);
  }

  .lm-kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--lm-line-strong);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
    font: 500 0.75rem/1 var(--lm-font);
    color: var(--lm-text-muted);
  }

  /* ==========================================================================
   TABS  (Unterstreichung)   JS: data-lm-tabs
   ========================================================================== */
  .lm-tabs {
    position: relative;
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-tab {
    position: relative;
    z-index: 1;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 500 0.9375rem/1 var(--lm-font);
    color: var(--lm-text-muted);
    transition: color 0.15s ease-out;
  }
  .lm-tab:hover {
    color: var(--lm-text);
  }
  .lm-tab[aria-selected="true"] {
    color: var(--lm-text);
  }
  /* ohne JS: statische Unterstreichung */
  .lm-tabs:not([data-lm-ready]) .lm-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      var(--lm-blue),
      var(--lm-blue-soft),
      #fff
    );
    box-shadow: 0 0 12px rgba(59, 107, 255, 0.8);
  }
  .lm-tab:focus-visible {
    outline: 2px solid var(--lm-blue-soft);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .lm-tabpanel {
    padding-top: 1.25rem;
  }
  .lm-tabpanel[hidden] {
    display: none;
  }

  /* Tabs als Pille (Chrom-Thumb gleitet): <div class="lm-tabs lm-tabs--pill"> */
  .lm-tabs--pill {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-bottom: 0;
    border-radius: var(--lm-radius-md);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px var(--lm-line);
  }
  .lm-tabs--pill .lm-tab {
    min-height: 2.25rem;
    padding: 0 1rem;
    border-radius: calc(var(--lm-radius-md) - 3px);
    font-size: 0.875rem;
  }
  .lm-tabs--pill .lm-tab[aria-selected="true"] {
    color: var(--lm-text-on-metal);
  }
  .lm-tabs--pill:not([data-lm-ready]) .lm-tab[aria-selected="true"] {
    background: linear-gradient(180deg, #f4f7fc, #b6c0d4 55%, #e3e8f2);
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 8px rgba(0, 0, 0, 0.45);
  }
  .lm-tabs--pill:not([data-lm-ready]) .lm-tab[aria-selected="true"]::after {
    content: none;
  }

  /* ==========================================================================
   INDICATOR  – gleitendes Element für Tabs, Segmented, Navbar, Sidebar.
   JS (liquid-metal.js) legt <span class="lm-indicator"> an und setzt left/top/width/height.
   Beim Wechsel dehnt es sich erst zum Ziel hin und schnappt dann mit Überschwingen ein.
   ========================================================================== */
  .lm-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition:
      left 0.38s var(--lm-spring),
      width 0.38s var(--lm-spring),
      top 0.38s var(--lm-spring),
      height 0.38s var(--lm-spring),
      opacity 0.2s ease-out;
  }
  [data-lm-ready] > .lm-indicator {
    opacity: 1;
  }

  /* Unterstreichung (nur x-Achse) */
  .lm-tabs:not(.lm-tabs--pill) > .lm-indicator {
    top: auto;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      var(--lm-blue),
      var(--lm-blue-soft),
      #fff
    );
    box-shadow: 0 0 12px rgba(59, 107, 255, 0.8);
  }
  /* Chrom-Thumb */
  .lm-seg > .lm-indicator,
  .lm-tabs--pill > .lm-indicator {
    border-radius: calc(var(--lm-radius-md) - 3px);
    background: linear-gradient(180deg, #f6f8fc, #b6c0d4 55%, #e3e8f2);
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 10px rgba(0, 0, 0, 0.5),
      0 6px 16px -6px rgba(59, 107, 255, 0.6);
  }

  /* ==========================================================================
   DIALOG  (natives <dialog>)   JS: data-lm-dialog-open / data-lm-dialog-close
   ========================================================================== */
  .lm-dialog {
    width: min(32rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 1px solid var(--lm-line-strong);
    border-radius: var(--lm-radius-lg);
    background:
      linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.015) 55%
      ),
      #0b1126;
    color: var(--lm-text);
    box-shadow:
      0 40px 80px -24px rgba(0, 0, 0, 0.9),
      0 0 60px -10px rgba(59, 107, 255, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
  .lm-dialog[open] {
    animation: lm-pop 0.26s var(--lm-spring);
  }
  .lm-dialog[data-closing] {
    animation: lm-pop-out 0.16s ease-in forwards;
  }
  .lm-dialog[data-closing]::backdrop {
    animation: lm-fade-out 0.16s ease-in forwards;
  }
  .lm-dialog::backdrop {
    background: rgba(2, 4, 14, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .lm-dialog__title {
    margin: 0 0 0.35rem;
    font: 600 1.25rem/1.2 var(--lm-font);
    letter-spacing: -0.015em;
  }
  .lm-dialog__desc {
    margin: 0;
    font: 400 0.9375rem/1.5 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-dialog__body {
    margin-top: 1.25rem;
    display: grid;
    gap: 1rem;
  }
  .lm-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  /* ==========================================================================
   ALERT · ACCORDION · TOOLTIP · TOAST · SKELETON · BREADCRUMB · AVATAR-GROUP
   ========================================================================== */
  .lm-alert {
    --_c: var(--lm-blue-soft);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.8rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--_c) 38%, transparent);
    border-radius: var(--lm-radius-md);
    background: color-mix(in srgb, var(--_c) 9%, transparent);
  }
  .lm-alert > svg {
    grid-row: span 2;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    color: var(--_c);
  }
  .lm-alert__title {
    font: 600 0.9375rem/1.3 var(--lm-font);
  }
  .lm-alert__desc {
    font: 400 0.875rem/1.45 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-alert--success {
    --_c: var(--lm-green);
  }
  .lm-alert--warning {
    --_c: #ffc46b;
  }
  .lm-alert--danger {
    --_c: #ff8f9e;
  }

  .lm-accordion {
    box-sizing: border-box;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
    font: 500 0.9375rem/1.3 var(--lm-font);
  }
  .lm-accordion > summary::-webkit-details-marker {
    display: none;
  }
  .lm-accordion > summary::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
      center / contain no-repeat;
    transition: transform 0.25s var(--lm-ease);
  }
  .lm-accordion[open]:not([data-state="closed"]) > summary::after {
    transform: rotate(180deg);
  }
  .lm-accordion > summary:focus-visible {
    outline: 2px solid var(--lm-blue-soft);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .lm-accordion__content {
    padding: 0 0 1rem;
    font: 400 0.9rem/1.55 var(--lm-font);
    color: var(--lm-text-muted);
    max-width: 60ch;
  }

  /* Tooltip: <button data-lm-tip="Text"> */
  [data-lm-tip] {
    position: relative;
  }
  [data-lm-tip]::after {
    content: attr(data-lm-tip);
    position: absolute;
    z-index: 60;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    transform: translate(-50%, 4px);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--lm-line-strong);
    border-radius: 8px;
    background: rgba(17, 18, 23, 0.97);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.8);
    color: var(--lm-text);
    font: 500 0.8125rem/1.2 var(--lm-font);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.15s var(--lm-ease),
      transform 0.15s var(--lm-ease);
  }
  [data-lm-tip]:hover::after,
  [data-lm-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* Toast – wird von LiquidMetal.toast() erzeugt */
  .lm-toaster {
    position: fixed;
    z-index: 100;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.6rem;
    width: min(22rem, calc(100vw - 2rem));
  }
  .lm-toast {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--lm-line-strong);
    border-radius: var(--lm-radius-md);
    background: rgba(17, 18, 23, 0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
      0 24px 48px -18px rgba(0, 0, 0, 0.85),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    animation: lm-toast-in 0.35s var(--lm-ease);
  }
  .lm-toast[data-variant="success"] {
    border-color: rgba(56, 224, 140, 0.45);
  }
  .lm-toast[data-variant="danger"] {
    border-color: rgba(255, 107, 125, 0.5);
  }
  .lm-toast[data-leaving] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.25s,
      transform 0.25s;
  }
  .lm-toast__title {
    font: 600 0.9375rem/1.3 var(--lm-font);
  }
  .lm-toast__desc {
    font: 400 0.8125rem/1.4 var(--lm-font);
    color: var(--lm-text-muted);
  }

  .lm-skeleton {
    display: block;
    min-height: 1rem;
    border-radius: var(--lm-radius-sm);
    background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.05) 70%
    );
    background-size: 250% 100%;
    animation: lm-shimmer 1.6s linear infinite;
  }

  .lm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font: 400 0.875rem/1 var(--lm-font);
    color: var(--lm-text-muted);
  }
  .lm-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }
  .lm-breadcrumb a:hover {
    color: var(--lm-text);
  }
  .lm-breadcrumb li + li::before {
    content: "/";
    margin-right: 0.55rem;
    opacity: 0.5;
  }
  .lm-breadcrumb [aria-current="page"] {
    color: var(--lm-text);
  }

  .lm-avatar-group {
    display: inline-flex;
  }
  .lm-avatar-group > .lm-avatar {
    box-shadow: 0 0 0 2px var(--lm-bg);
  }
  .lm-avatar-group > .lm-avatar + .lm-avatar {
    margin-left: -0.7rem;
  }

  /* Textarea & Range */
  .lm-textarea {
    min-height: 6.5rem;
    padding: 0.8rem 1rem;
    line-height: 1.5;
    resize: vertical;
  }

  .lm-range {
    --lm-fill: 50%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.5rem;
    margin: 0.6rem 0;
    border-radius: var(--lm-radius-pill);
    background: linear-gradient(
      90deg,
      #2f5cff 0,
      #7fa6ff var(--lm-fill),
      rgba(255, 255, 255, 0.09) var(--lm-fill)
    );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }
  .lm-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 0;
    background:
      radial-gradient(80% 60% at 50% 0%, #fff, transparent 65%),
      linear-gradient(180deg, #e9eef8, #98a4bb 55%, #dfe5f0);
    box-shadow:
      inset 0 -2px 4px rgba(50, 62, 95, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.6),
      0 0 0 4px rgba(59, 107, 255, 0.2);
  }
  .lm-range::-moz-range-thumb {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(180deg, #e9eef8, #98a4bb 55%, #dfe5f0);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.6),
      0 0 0 4px rgba(59, 107, 255, 0.2);
  }

  @keyframes lm-pop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes lm-toast-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes lm-shimmer {
    to {
      background-position: -150% 0;
    }
  }

  /* ==========================================================================
   COLLAPSE  (animierte Höhe ohne JS-Messung: grid-template-rows 0fr → 1fr)
   <button data-lm-collapse-trigger aria-expanded="false">…</button>
   <div class="lm-collapse"><div class="lm-collapse__inner">…</div></div>
   ========================================================================== */
  .lm-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--lm-ease);
  }
  .lm-collapse[data-open="true"] {
    grid-template-rows: 1fr;
  }
  .lm-collapse > .lm-collapse__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.45s;
  }
  .lm-collapse[data-open="true"] > .lm-collapse__inner {
    visibility: visible;
    transition-delay: 0s;
  }

  /* ==========================================================================
   NAV  (Link-Leiste mit gleitender Glas-Pille; data-lm-indicator-hover = folgt dem Hover)
   ========================================================================== */
  .lm-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }
  .lm-nav__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--lm-radius-pill);
    color: var(--lm-text-muted);
    font: 500 0.9375rem/1 var(--lm-font);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease-out;
  }
  .lm-nav__link:hover,
  .lm-nav__link[aria-current="page"] {
    color: var(--lm-text);
  }
  .lm-nav > .lm-indicator {
    border-radius: var(--lm-radius-pill);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 10px 22px -12px rgba(59, 107, 255, 0.9);
  }
  .lm-nav:not([data-lm-ready]) .lm-nav__link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.1);
  }

  /* ==========================================================================
   NAVBAR  (schwebende Pille, die sich per Klick zu einem Menü aufzieht)
   <header class="lm-navbar" data-lm-navbar> … </header>  – siehe LIQUID-METAL.md
   ========================================================================== */
  .lm-navbar {
    --_bar: 3.75rem;
    position: relative;
    z-index: 40;
    width: min(100%, 44rem);
    margin-inline: auto;
    border: 1px solid var(--lm-line-strong);
    border-radius: calc(var(--_bar) / 2);
    background:
      linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.075),
        rgba(255, 255, 255, 0.015) 60%
      ),
      rgba(14, 15, 19, 0.84);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    backdrop-filter: blur(20px) saturate(1.3);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 24px 48px -24px rgba(0, 0, 0, 0.9);
    transition:
      width 0.7s var(--lm-spring),
      border-radius 0.6s var(--lm-spring),
      box-shadow 0.5s var(--lm-ease);
  }
  .lm-navbar[data-open="true"] {
    width: min(100%, 58rem);
    border-radius: 1.75rem;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 36px 70px -28px rgba(0, 0, 0, 0.95),
      0 0 70px -14px rgba(59, 107, 255, 0.45);
  }
  .lm-navbar__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    height: var(--_bar);
    padding: 0 0.75rem 0 1.4rem;
  }
  .lm-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-self: start;
    font: 700 1.0625rem/1 var(--lm-font);
    letter-spacing: -0.02em;
    color: var(--lm-text);
    text-decoration: none;
  }
  .lm-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
  }

  .lm-navbar__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--lm-ease);
  }
  .lm-navbar[data-open="true"] .lm-navbar__panel {
    grid-template-rows: 1fr;
  }
  .lm-navbar__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.55s;
  }
  .lm-navbar[data-open="true"] .lm-navbar__inner {
    visibility: visible;
    transition-delay: 0s;
  }
  .lm-navbar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.35rem;
    margin: 0 0.75rem;
    padding: 0.75rem 0 0.9rem;
    border-top: 1px solid var(--lm-line);
  }
  .lm-navbar__item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: var(--lm-radius-md);
    color: var(--lm-text);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition:
      opacity 0.25s var(--lm-ease),
      transform 0.5s var(--lm-spring),
      background-color 0.15s ease-out;
  }
  .lm-navbar[data-open="true"] .lm-navbar__item {
    opacity: 1;
    transform: none;
    transition-delay:
      calc(var(--i, 0) * 55ms + 140ms), calc(var(--i, 0) * 55ms + 140ms), 0s;
  }
  .lm-navbar__item:hover {
    background: rgba(255, 255, 255, 0.06);
  }
  .lm-navbar__item:nth-child(1) {
    --i: 0;
  }
  .lm-navbar__item:nth-child(2) {
    --i: 1;
  }
  .lm-navbar__item:nth-child(3) {
    --i: 2;
  }
  .lm-navbar__item:nth-child(4) {
    --i: 3;
  }
  .lm-navbar__item:nth-child(5) {
    --i: 4;
  }
  .lm-navbar__item:nth-child(6) {
    --i: 5;
  }
  .lm-navbar__item:nth-child(7) {
    --i: 6;
  }
  .lm-navbar__item:nth-child(8) {
    --i: 7;
  }
  .lm-navbar__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lm-radius-sm);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .lm-navbar__title {
    display: block;
    font: 600 0.9375rem/1.25 var(--lm-font);
  }
  .lm-navbar__desc {
    display: block;
    margin-top: 0.2rem;
    font: 400 0.8125rem/1.4 var(--lm-font);
    color: var(--lm-text-muted);
  }

  /* Burger → X */
  .lm-burger {
    position: relative;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
  }
  .lm-burger::before,
  .lm-burger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform 0.5s var(--lm-spring),
      top 0.3s var(--lm-ease);
  }
  .lm-burger::before {
    top: 0.3rem;
  }
  .lm-burger::after {
    top: 0.72rem;
  }
  [aria-expanded="true"] > .lm-burger::before {
    top: 0.51rem;
    transform: rotate(45deg);
  }
  [aria-expanded="true"] > .lm-burger::after {
    top: 0.51rem;
    transform: rotate(-45deg);
  }

  @media (max-width: 760px) {
    .lm-navbar .lm-nav,
    .lm-navbar__cta {
      display: none;
    }
    .lm-navbar__bar {
      grid-template-columns: 1fr auto;
    }
  }

  /* ==========================================================================
   SIDEBAR  (einklappbar zur Icon-Leiste, gleitende Auswahl, Untermenüs)
   <aside class="lm-sidebar" data-collapsed="false"> … </aside>
   ========================================================================== */
  .lm-sidebar {
    --_w: 16rem;
    --_wc: 4.75rem;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 5;
    width: var(--_w);
    height: 100%;
    padding: 0.9rem;
    border-right: 1px solid var(--lm-line);
    background: rgba(14, 15, 19, 0.82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: var(--lm-text);
    transition: width 0.55s var(--lm-spring);
  }
  .lm-sidebar[data-collapsed="true"] {
    width: var(--_wc);
  }

  .lm-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding-left: 0.25rem;
  }
  .lm-sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    max-width: 12rem;
    font: 700 1.0625rem/1 var(--lm-font);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    transition:
      opacity 0.25s var(--lm-ease),
      max-width 0.55s var(--lm-spring);
  }
  .lm-sidebar[data-collapsed="true"] .lm-sidebar__brand {
    max-width: 0;
    opacity: 0;
  }

  .lm-sidenav {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.2rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-width: none;
  }
  .lm-sidenav__label {
    padding: 1rem 0.8rem 0.35rem;
    font: 500 0.75rem/1 var(--lm-font);
    color: var(--lm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.25s var(--lm-ease);
  }
  .lm-sidenav__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    height: 2.75rem;
    padding: 0 0.8rem;
    border: 0;
    border-radius: var(--lm-radius-md);
    background: none;
    color: var(--lm-text-muted);
    font: 500 0.9375rem/1 var(--lm-font);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color 0.15s ease-out,
      background-color 0.15s ease-out;
  }
  .lm-sidenav__item > svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
  }
  .lm-sidenav__item:hover {
    color: var(--lm-text);
    background: rgba(255, 255, 255, 0.05);
  }
  .lm-sidenav__item[aria-current="page"] {
    color: #fff;
    background: none;
  }
  .lm-sidenav__item:focus-visible {
    outline: 2px solid var(--lm-blue-soft);
    outline-offset: -2px;
  }
  .lm-sidenav__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.3s var(--lm-ease);
  }
  .lm-sidenav__badge {
    flex: none;
    padding: 0.2rem 0.5rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(59, 107, 255, 0.25);
    color: #cfdcff;
    font: 600 0.6875rem/1 var(--lm-font);
    transition: opacity 0.25s var(--lm-ease);
  }
  .lm-sidenav__item > .lm-sidenav__chev {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition:
      transform 0.35s var(--lm-spring),
      opacity 0.25s;
  }
  .lm-sidenav__item[aria-expanded="true"] .lm-sidenav__chev {
    transform: rotate(180deg);
  }

  /* Auswahl-Pille (gleitet) */
  .lm-sidenav > .lm-indicator {
    border-radius: var(--lm-radius-md);
    background: linear-gradient(
      90deg,
      rgba(59, 107, 255, 0.28),
      rgba(59, 107, 255, 0.07)
    );
    box-shadow:
      inset 0 0 0 1px rgba(110, 150, 255, 0.4),
      0 0 24px -4px rgba(59, 107, 255, 0.5);
  }
  .lm-sidenav > .lm-indicator::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #fff, #8fb0ff);
    box-shadow: 0 0 10px rgba(127, 166, 255, 0.9);
  }
  .lm-sidenav:not([data-lm-ready]) .lm-sidenav__item[aria-current="page"] {
    background: rgba(59, 107, 255, 0.18);
  }

  /* Untermenü */
  .lm-subnav {
    display: grid;
    gap: 0.15rem;
    margin: 0.2rem 0 0.3rem 1.55rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--lm-line);
  }
  .lm-subnav a {
    display: flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.7rem;
    border-radius: var(--lm-radius-sm);
    color: var(--lm-text-muted);
    text-decoration: none;
    white-space: nowrap;
    font: 500 0.875rem/1 var(--lm-font);
    transition:
      color 0.15s ease-out,
      background-color 0.15s ease-out;
  }
  .lm-subnav a:hover {
    color: var(--lm-text);
    background: rgba(255, 255, 255, 0.05);
  }
  .lm-subnav a[aria-current="page"] {
    color: #fff;
  }

  .lm-sidebar__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0 0 0.1rem;
    border-top: 1px solid var(--lm-line);
    white-space: nowrap;
    overflow: hidden;
  }
  .lm-sidebar__user {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    transition: opacity 0.3s var(--lm-ease);
  }
  .lm-sidebar__user strong {
    font: 600 0.875rem/1.1 var(--lm-font);
  }
  .lm-sidebar__user span {
    font: 400 0.75rem/1.1 var(--lm-font);
    color: var(--lm-text-muted);
  }

  /* Eingeklappt: nur Icons; Texte blenden aus, Tooltips rechts */
  .lm-sidebar[data-collapsed="true"] .lm-sidenav__text,
  .lm-sidebar[data-collapsed="true"] .lm-sidenav__badge,
  .lm-sidebar[data-collapsed="true"] .lm-sidenav__chev,
  .lm-sidebar[data-collapsed="true"] .lm-sidenav__label,
  .lm-sidebar[data-collapsed="true"] .lm-sidebar__user {
    opacity: 0;
    pointer-events: none;
  }
  .lm-sidebar[data-collapsed="true"] .lm-collapse {
    grid-template-rows: 0fr;
  }
  .lm-sidebar[data-collapsed="true"] .lm-sidenav {
    overflow: visible;
  }
  .lm-sidebar:not([data-collapsed="true"]) [data-lm-tip]::after {
    display: none;
  }

  [data-lm-tip-side="right"]::after {
    left: calc(100% + 0.6rem);
    bottom: auto;
    top: 50%;
    transform: translate(-6px, -50%);
  }
  [data-lm-tip-side="right"]:hover::after,
  [data-lm-tip-side="right"]:focus-visible::after {
    transform: translate(0, -50%);
  }

  /* App-Rahmen (Sidebar + Hauptbereich) */
  .lm-shell {
    display: flex;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--lm-line);
    border-radius: var(--lm-radius-lg);
    background: rgba(9, 10, 13, 0.6);
  }
  .lm-shell__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .lm-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.75rem;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-shell__content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem;
  }

  /* ==========================================================================
   SHEET  (Off-Canvas-Drawer als <dialog>; mit --right von rechts)
   ========================================================================== */
  .lm-sheet {
    width: min(20rem, 86vw);
    height: 100dvh;
    max-height: none;
    max-width: none;
    margin: 0;
    padding: 1rem;
    inset: 0 auto 0 0;
    border: 0;
    border-right: 1px solid var(--lm-line-strong);
    border-radius: 0 var(--lm-radius-lg) var(--lm-radius-lg) 0;
    background:
      linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.015) 55%
      ),
      #0b1126;
    color: var(--lm-text);
    box-shadow:
      40px 0 80px -24px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .lm-sheet--right {
    inset: 0 0 0 auto;
    border-right: 0;
    border-left: 1px solid var(--lm-line-strong);
    border-radius: var(--lm-radius-lg) 0 0 var(--lm-radius-lg);
    box-shadow:
      -40px 0 80px -24px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .lm-sheet::backdrop {
    background: rgba(2, 4, 14, 0.65);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  .lm-sheet[open] {
    animation: lm-sheet-in 0.5s var(--lm-spring);
  }
  .lm-sheet[open]::backdrop {
    animation: lm-fade-in 0.3s ease-out;
  }
  .lm-sheet--right[open] {
    animation-name: lm-sheet-in-r;
  }
  .lm-sheet[data-closing] {
    animation: lm-sheet-out 0.24s ease-in forwards;
  }
  .lm-sheet--right[data-closing] {
    animation-name: lm-sheet-out-r;
  }
  .lm-sheet[data-closing]::backdrop {
    animation: lm-fade-out 0.24s ease-in forwards;
  }

  @keyframes lm-pop-out {
    to {
      opacity: 0;
      transform: translateY(-4px) scale(0.97);
    }
  }
  @keyframes lm-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes lm-fade-out {
    to {
      opacity: 0;
    }
  }
  @keyframes lm-sheet-in {
    from {
      transform: translateX(-100%);
    }
  }
  @keyframes lm-sheet-out {
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes lm-sheet-in-r {
    from {
      transform: translateX(100%);
    }
  }
  @keyframes lm-sheet-out-r {
    to {
      transform: translateX(100%);
    }
  }
} /* /@layer components */

/* ==========================================================================
   BUTTONS · eine Bauart
   Dunkle Fläche, 1px-Rand, gleicher Radius und gleiche Höhe für Ghost, Soft, Outline
   und Danger. Der bunte, umlaufende Rand (Orbit + Halo) erscheint nur beim Hovern
   oder Fokussieren. .is-primary = Hauptaktion: dezenter blauer Glow-Rand im Ruhezustand.
   ========================================================================== */
@property --lm-sweep {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.lm-btn-ghost,
.lm-btn-soft,
.lm-btn-outline,
.lm-btn-danger {
  --_plate: #090d1c;
  --_edge: rgba(255, 255, 255, 0.62);
  --_glow: 16px;
  --_sweep: conic-gradient(
    from var(--lm-angle),
    transparent 0 70%,
    color-mix(in srgb, #4b7bff calc(var(--lm-sweep) * 100%), transparent) 76%,
    color-mix(in srgb, #7d6bff calc(var(--lm-sweep) * 100%), transparent) 85%,
    color-mix(in srgb, #ffa24d calc(var(--lm-sweep) * 100%), transparent) 93%,
    transparent 99%
  );
  isolation: isolate;
  border: 1px solid transparent;
  color: var(--lm-text);
  box-shadow: none;
  background:
    linear-gradient(var(--_plate), var(--_plate)) padding-box,
    var(--_sweep) border-box,
    linear-gradient(var(--_edge), var(--_edge)) border-box;
  animation: lm-orbit 4.6s linear infinite paused;
  transition:
    --lm-sweep 0.35s var(--lm-ease),
    background-color 0.25s var(--lm-ease),
    color 0.25s var(--lm-ease),
    transform 0.2s var(--lm-ease),
    box-shadow 0.25s var(--lm-ease);
}
.lm-btn-ghost::before,
.lm-btn-soft::before,
.lm-btn-outline::before,
.lm-btn-danger::before {
  display: block;
  opacity: 0.9;
}
/* Halo teilt sich Maske und Sweep mit Ghost (siehe oben); die übrigen Varianten bekommen dieselbe Regel. */
.lm-btn-soft::before,
.lm-btn-outline::before,
.lm-btn-danger::before {
  --_g: var(--_glow);
  --_rr: var(--_r, var(--lm-radius-md));
  --_gr: calc(var(--_g) + var(--_rr));
  --_fall:
    transparent 0%, rgba(0, 0, 0, 0.07) 22%, rgba(0, 0, 0, 0.22) 42%,
    rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0.8) 82%, #000 100%;
  --_rad:
    transparent calc(var(--_rr) - 2px), #000 var(--_rr),
    rgba(0, 0, 0, 0.8) calc(var(--_rr) + var(--_g) * 0.18),
    rgba(0, 0, 0, 0.5) calc(var(--_rr) + var(--_g) * 0.38),
    rgba(0, 0, 0, 0.22) calc(var(--_rr) + var(--_g) * 0.58),
    rgba(0, 0, 0, 0.07) calc(var(--_rr) + var(--_g) * 0.78),
    transparent var(--_gr);
  --_m:
    linear-gradient(to bottom, var(--_fall)) var(--_gr) 0 /
      calc(100% - 2 * var(--_gr)) var(--_g) no-repeat,
    linear-gradient(to top, var(--_fall)) var(--_gr) 100% /
      calc(100% - 2 * var(--_gr)) var(--_g) no-repeat,
    linear-gradient(to right, var(--_fall)) 0 var(--_gr) / var(--_g)
      calc(100% - 2 * var(--_gr)) no-repeat,
    linear-gradient(to left, var(--_fall)) 100% var(--_gr) / var(--_g)
      calc(100% - 2 * var(--_gr)) no-repeat,
    radial-gradient(circle at 100% 100%, var(--_rad)) 0 0 / var(--_gr)
      var(--_gr) no-repeat,
    radial-gradient(circle at 0 100%, var(--_rad)) 100% 0 / var(--_gr)
      var(--_gr) no-repeat,
    radial-gradient(circle at 100% 0, var(--_rad)) 0 100% / var(--_gr)
      var(--_gr) no-repeat,
    radial-gradient(circle at 0 0, var(--_rad)) 100% 100% / var(--_gr)
      var(--_gr) no-repeat;
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--_g) * -1 - 1px);
  background: var(--_sweep);
  pointer-events: none;
  -webkit-mask: var(--_m);
  mask: var(--_m);
}

.lm-btn-ghost:hover,
.lm-btn-soft:hover,
.lm-btn-outline:hover,
.lm-btn-danger:hover,
.lm-btn-ghost:focus-visible,
.lm-btn-soft:focus-visible,
.lm-btn-outline:focus-visible,
.lm-btn-danger:focus-visible {
  --lm-sweep: 1;
  --_plate: #101630;
  --_edge: #fff;
  animation-play-state: running;
}
.lm-btn-ghost[disabled],
.lm-btn-soft[disabled],
.lm-btn-outline[disabled],
.lm-btn-danger[disabled] {
  --lm-sweep: 0;
  animation-play-state: paused;
}

.lm-btn-danger {
  --_plate: #1a0d17;
  --_edge: rgba(255, 107, 125, 0.4);
  color: #ffa1ad;
}
.lm-btn-danger:hover,
.lm-btn-danger:focus-visible {
  --_plate: #260f1b;
  --_edge: rgba(255, 107, 125, 0.65);
}

/* Hauptaktion: derselbe Button, dezent leuchtender Rand */
.lm-btn-ghost.is-primary {
  --_edge: rgba(130, 168, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(75, 123, 255, 0.18),
    0 0 18px -3px rgba(75, 123, 255, 0.5);
}
.lm-btn-ghost.is-primary:hover,
.lm-btn-ghost.is-primary:focus-visible {
  --_edge: rgba(160, 190, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(75, 123, 255, 0.3),
    0 0 24px -2px rgba(75, 123, 255, 0.65);
}