@layer tokens, reset, layout, components, states, utilities;

@layer tokens {
  :root {
    --slf-font-ui: "Inter", "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif;
    --slf-bg-1: #2a277f;
    --slf-bg-2: #332fbe;
    --slf-bg-3: #4946c8;
    --slf-accent-cyan: #08bcb8;
    --slf-accent-pink: #f8307e;
    --slf-accent-blue: #6f8bff;
    /* Bereichsfarben laut docs/design-spec.md (Wellen-System) */
    --slf-bewegung: #f8307e;
    --slf-ernaehrung: #08bcb8;
    --slf-ruhe: #675ce3;
    /* Bewusst zurueckhaltend, damit sich besonders die Ruhe-Fuellung
       (#675ce3) klar von der leeren Spur abhebt. */
    --slf-wave-track: rgba(237, 234, 255, 0.07);
    --slf-panel-bg: #ffffff;
    --slf-text-1: #232535;
    --slf-text-2: #63677b;
    --slf-line: #e7e9f1;

    --slf-radius-sm: 8px;
    --slf-radius-md: 10px;
    --slf-radius-lg: 16px;
    --slf-radius-xl: 22px;

    --slf-shadow-sm: 0 4px 14px rgba(21, 20, 64, 0.18);
    --slf-shadow-md: 0 10px 28px rgba(16, 14, 62, 0.3);
    --slf-shadow-lg: 0 16px 40px rgba(21, 20, 64, 0.2);

    --slf-sidebar-w: 310px;
    --slf-shell-gap: 1.5rem;
    --slf-bottom-nav-h: 64px;

    --slf-space-1: 0.25rem;
    --slf-space-2: 0.5rem;
    --slf-space-3: 0.75rem;
    --slf-space-4: 1rem;
    --slf-space-5: 1.25rem;
    --slf-space-6: 1.5rem;

    --slf-size-sm: 0.875rem;
    --slf-size-md: 1rem;
    --slf-size-lg: 1.3rem;

    --slf-fw-normal: 400;
    --slf-fw-medium: 500;
    --slf-fw-semibold: 600;
    --slf-fw-bold: 700;
  }

  /* Desktop: Sidebar breit genug, dass die einzeilige Wellen-Zeile
     (Label links, Welle mit Mindestbreite, Wert rechts) dieselbe Optik
     hat wie mobil. Mobil behaelt 310px fuer die Drawer-Breite. */
  @media (min-width: 960px) {
    :root {
      --slf-sidebar-w: clamp(360px, 27vw, 400px);
    }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }

  body {
    font-family: var(--slf-font-ui);
    color: var(--slf-text-1);
    min-height: 100vh;
    overflow: hidden;
    background:
      linear-gradient(160deg, rgba(248, 48, 126, 0.42) 0%, rgba(248, 48, 126, 0) 46%),
      linear-gradient(68deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(180deg, var(--slf-bg-2) 0%, var(--slf-bg-3) 43%, var(--slf-bg-1) 100%);
    background-attachment: fixed;
  }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--slf-accent-blue);
    outline-offset: 2px;
  }
}

@layer layout {
  .l-app {
    display: grid;
    grid-template-columns: var(--slf-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
  }

  .l-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--slf-space-4);
    padding: var(--slf-shell-gap);
    z-index: 35;
  }

  .l-main {
    padding: var(--slf-shell-gap);
    height: 100vh;
    overflow: hidden;
  }

  .l-sidebar-overlay {
    display: none;
  }

  @media (max-width: 959px) {
    .l-app {
      display: block;
      height: 100vh;
      overflow: hidden;
    }

    .l-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: min(86vw, var(--slf-sidebar-w));
      height: auto;
      transform: translateX(-100%);
      transition: transform 220ms ease;
      overflow: hidden;
      background:
        linear-gradient(160deg, rgba(248, 48, 126, 0.42) 0%, rgba(248, 48, 126, 0) 46%),
        linear-gradient(68deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(180deg, var(--slf-bg-2) 0%, var(--slf-bg-3) 43%, var(--slf-bg-1) 100%);
      box-shadow: 6px 0 24px rgba(16, 14, 62, 0.3);
    }

    .l-main {
      padding: var(--slf-space-4);
      height: calc(100vh - var(--slf-bottom-nav-h));
      overflow: hidden;
    }

    .l-sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 11, 40, 0.5);
      z-index: 30;
    }
  }
}

@layer components {
  .c-card-glass {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--slf-radius-lg);
    box-shadow: var(--slf-shadow-md);
    backdrop-filter: blur(4px);
  }

  .c-sidebar__mobile-actions {
    display: none;
    justify-content: flex-end;
    margin-bottom: var(--slf-space-3);
  }

  .c-icon-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: var(--slf-radius-sm);
    min-width: 2rem;
    height: 2rem;
    cursor: pointer;
  }

  .c-user-card {
    padding: var(--slf-space-5);
    /* Diagonaler Karten-Verlauf (wie der Seitenhintergrund mehrschichtig):
       links oben das gewohnte helle Glas, nach rechts unten kippt die Karte
       eased ins Logo-Dunkel — ab ~70 % Hoehe voller Kontrast, damit die
       unterste (blaue) Welle klar zeichnet. Bleibt halbtransparent, der
       Seitenhintergrund scheint weiter durch. */
    background:
      linear-gradient(128deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0) 60%),
      linear-gradient(148deg, rgba(28, 21, 102, 0) 32%, rgba(28, 21, 102, 0.34) 54%, rgba(24, 18, 92, 0.6) 70%, rgba(22, 16, 86, 0.74) 100%);
  }

  .c-user-card__avatar {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  }

  .c-user-card__name {
    margin: var(--slf-space-3) 0 var(--slf-space-2);
    text-align: center;
    color: #f1eeff;
    font-size: 2rem;
    line-height: 1.1;
  }

  /* Wellen-Statusbalken (V20 Variante 2, docs/design-spec.md):
     Label links, Welle mittig, Prozentwert rechts. Ein gemeinsames Raster
     fuer alle Zeilen — die Label-Spalte richtet sich nach dem laengsten
     Wort, alle Wellen beginnen an derselben Kante. */
  .c-report {
    display: grid;
    /* Mindestbreite fuer die Welle: die Zeile bleibt ueberall einzeilig
       (Label links, Welle mittig, Wert rechts) und die Welle faellt nie
       unter ~4 Boegen; die Sidebar-Breite (Token oben) traegt das. */
    grid-template-columns: auto minmax(120px, 1fr) auto;
    column-gap: 0.8rem;
    /* Enger Zeilenabstand: die drei Wellen ruecken zusammen und lesen sich
       als Wellenbild wie im Logo (mobil setzt 0.36rem, hier aehnlich). */
    row-gap: 0.32rem;
    align-items: center;
  }

  .c-report__row {
    display: contents;
  }

  /* Gleiche Zeilen-Typo wie mobil — identische Optik auf allen Geraeten. */
  .c-report__label {
    font-size: 0.86rem;
    font-weight: 650;
    color: rgba(221, 218, 255, 0.84);
    line-height: 1;
    /* Die Karte zentriert Text — Labels bleiben linksbuendig. */
    text-align: left;
  }

  .c-report__value {
    font-size: 0.86rem;
    font-weight: 650;
    color: rgba(221, 218, 255, 0.84);
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 3.2em;
    line-height: 1;
  }

  .c-report__wave {
    display: block;
    width: 100%;
    height: 22px;
    overflow: visible;
  }

  .c-report__wave-track {
    fill: none;
    stroke: var(--slf-wave-track);
    stroke-width: 7;
    stroke-linecap: round;
  }

  .c-report__fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    /* Bei 0 % wuerde der runde Linienabschluss einen Punkt zeichnen. */
    visibility: hidden;
  }

  .c-report__fill--bewegung { stroke: var(--slf-bewegung); }
  .c-report__fill--ernaehrung { stroke: var(--slf-ernaehrung); }
  .c-report__fill--ruhe { stroke: var(--slf-ruhe); }

  /* Eintrag-Flow, Ein-Knopf-Konzept: EIN Primaerbutton, darunter die leise
     Nebenaktions-Zeile — Inhalt (Wellen, Textfeld, Review) inline darueber.
     Farbwerte mit !important: eine globale Utilities-Regel setzt sonst
     fast-weissen Text auf alle Buttons/Absaetze (siehe CSS-Aufraeum-Todo). */
  .c-voice-capture .c-voice-capture__frame {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
  }

  /* Ruhezustand: der Knopf bleibt an seinem festen Platz unten; die Buehne
     zeigt die drei ruhenden Markenwellen — beim Aufnehmen werden sie lebendig. */
  .c-entry-idle-visual {
    display: none;
    flex: 1;
    min-height: 0;
    align-items: center;
    justify-content: center;
    /* Schiebt Begruessung + Fragen ein Stueck ueber die optische Mitte. */
    padding-bottom: 3.2rem;
  }

  .c-voice-capture .c-voice-capture__frame.is-entry-idle .c-entry-idle-visual {
    display: flex;
  }

  .c-entry-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Etwas Luft zwischen Inhalt (v. a. Textfeld) und dem Knopf darunter. */
    padding-bottom: 0.35rem;
  }

  .c-entry-panel {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .c-entry-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }

  .c-entry-primary {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #6b5ed6 0%, #314fbd 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.7rem 1.5rem rgba(49, 79, 189, 0.28);
    -webkit-tap-highlight-color: transparent;
  }

  .c-entry-primary__icon {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
  }

  .c-entry-primary__icon svg {
    width: 26px;
    height: 26px;
  }

  .c-entry-primary[data-entry-action="record"] [data-entry-icon="record"],
  .c-entry-primary[data-entry-action="compose"] [data-entry-icon="compose"],
  .c-entry-primary[data-entry-action="stop"] [data-entry-icon="stop"],
  .c-entry-primary[data-entry-action="confirm"] [data-entry-icon="confirm"],
  .c-entry-primary[data-entry-action="wait"] [data-entry-icon="confirm"] {
    display: flex;
  }

  /* Warten = gesperrter Haken, kein eigenes Symbol. */
  .c-entry-primary[data-entry-action="wait"] {
    opacity: 0.45;
    pointer-events: none;
  }

  .c-entry-primary {
    color: #fff !important;
  }

  /* Leise Nebenaktions-Zeile: bewusst zurueckhaltend, nie konkurrenzfaehig
     zum grossen Knopf. Ganze Saetze ("Willst du lieber tippen?"), damit die
     Erwartung eindeutig ist. */
  .c-entry-secondary {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    color: #9d97c9 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(157, 151, 201, 0.5);
    padding: 0.35rem 0.6rem;
    margin-top: 0.1rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Leerzustand haelt die Zeilenhoehe — der Knopf darueber bleibt fix. */
  .c-entry-secondary.is-blank {
    visibility: hidden;
  }

  .c-entry-waves {
    display: block;
    width: min(190px, 70%);
    height: auto;
    margin: 0.4rem auto;
    overflow: visible;
  }

  /* Neutrale Aufnahme-Welle: eine ruhige Linie ueber die Breite. */
  .c-entry-waves--neutral {
    width: min(240px, 78%);
  }

  /* Einladende Fragen im Ruhezustand (ersetzen Logo und Erklaertext). */
  .c-entry-prompts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: center;
    /* Schmales Padding + leicht kleinere Schrift: die laengste Frage soll am
       iPhone einzeilig bleiben (der Block ergibt dann eine schoene Raute). */
    padding: 0 0.4rem;
  }

  .c-entry-prompts p {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 550;
    line-height: 1.35;
    color: #3d3787 !important;
  }

  .c-entry-prompts .c-entry-prompts__greeting {
    font-size: 1.18rem;
    font-weight: 700;
    color: #29246f !important;
    margin-bottom: 0.25rem;
  }

  .c-entry-prompts .c-entry-prompts__soft {
    font-size: 0.9rem;
    font-weight: 450;
    color: #8a84bd !important;
    margin-top: 0.1rem;
  }

  /* Technische Zusatzzeile in Mikrofon-Fehlermeldungen (Testphase). */
  .c-mic-flow__error-detail {
    font-size: 0.72rem;
    opacity: 0.65;
  }

  /* Aufnahme-Robustheit: Timer, Limit-Warnung, Transkript, Retry. */
  /* !important gegen den globalen Utilities-Farbschleier — sonst fast weiss. */
  .c-mic-flow__elapsed {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: #55509a !important;
  }

  .c-mic-flow__limit-warning {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #b3134f !important;
  }

  .c-mic-flow__transcript {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: #55509a !important;
  }

  .c-mic-review-transcript {
    margin: 0.35rem 0 0.1rem;
    font-size: 0.8rem;
    text-align: left;
  }

  .c-mic-review-transcript summary {
    cursor: pointer;
    color: #55509a !important;
  }

  .c-mic-review-transcript p {
    margin: 0.3rem 0 0;
    font-style: italic;
    color: #55509a !important;
  }

  .c-mic-flow__retry {
    margin-top: 0.55rem;
    border: 1px solid rgba(42, 39, 127, 0.35);
    background: rgba(42, 39, 127, 0.08);
    /* !important gegen den globalen Utilities-Farbschleier — sonst fast weiss. */
    color: #29246f !important;
    border-radius: 999px;
    padding: 0.42rem 1rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
  }

  .c-nav {
    border-radius: var(--slf-radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: var(--slf-shadow-sm);
    max-height: var(--slf-nav-max-h, none);
    overflow-y: auto;
  }

  .c-nav__section + .c-nav__section { border-top: 1px solid rgba(255, 255, 255, 0.14); }

  .c-nav__title {
    cursor: pointer;
    padding: var(--slf-space-2) 0.8rem;
    font-size: var(--slf-size-lg);
    font-weight: var(--slf-fw-semibold);
    color: rgba(196, 212, 242, 0.78);
    background: linear-gradient(90deg, rgba(111, 139, 255, 0.22) 0%, rgba(111, 139, 255, 0.05) 62%, rgba(111, 139, 255, 0) 100%);
  }

  .c-nav__section[open] > .c-nav__title { color: #d6eeff; }

  .c-nav__sub {
    padding: var(--slf-space-2) 0.7rem 0.65rem;
  }

  .c-nav__item {
    display: block;
    padding: 0.25rem 0.45rem;
    margin-left: 0.1rem;
    font-size: 1rem;
    color: rgba(212, 208, 255, 0.82);
    border-left: 2px solid transparent;
  }

  .c-nav__item:hover { color: #fff; }

  .c-nav__subhead {
    margin: 0.35rem 0 0.25rem;
    padding: 0 0.45rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(200, 198, 244, 0.58);
  }

  .c-nav__units {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-nav__section--course[open] .c-nav__units {
    max-height: var(--slf-course-units-max-h, 18rem);
    overflow-y: auto;
    padding-right: 0.2rem;
  }

  .c-nav__section--course[open] .c-nav__units::-webkit-scrollbar {
    width: 3px;
  }

  .c-nav__section--course[open] .c-nav__units::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
  }

  .c-nav__unit {
    display: flex;
    align-items: center;
    gap: var(--slf-space-2);
    margin: 0 0 0.12rem 0.8rem;
    padding: 0.22rem 0.4rem 0.22rem 0.5rem;
    color: rgba(212, 208, 255, 0.65);
    font-size: 0.9rem;
    border-left: 2px solid rgba(255, 255, 255, 0.16);
  }

  .c-nav__unit-badge {
    width: 0.9rem;
    text-align: center;
    font-size: 0.72rem;
  }

  .c-nav__unit.is-done { color: rgba(170, 241, 203, 0.72); }

  .c-nav__unit.is-current {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-left-color: var(--slf-accent-blue);
    border-radius: 0 var(--slf-radius-sm) var(--slf-radius-sm) 0;
  }

  .c-nav__unit.is-locked {
    color: rgba(188, 185, 230, 0.48);
    opacity: 0.7;
    pointer-events: none;
  }

  .c-sidebar-footer {
    margin-top: auto;
    padding: var(--slf-space-2) 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--slf-space-2);
  }

  .c-sidebar-footer__icon-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: rgba(225, 222, 255, 0.74);
    border-radius: 999px;
  }

  .c-sidebar-footer__logout-form {
    display: flex;
    margin: 0;
  }

  .c-sidebar-footer__logout-form .c-sidebar-footer__icon-link {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }

  .c-sidebar-footer__icon-link:hover,
  .c-sidebar-footer__icon-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  .c-sidebar-footer__icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 1.05rem;
    display: block;
    opacity: 0.78;
  }

  .c-sidebar-footer__icon-link::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(12, 13, 40, 0.92);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.32rem 0.45rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .c-sidebar-footer__icon-link:hover::after,
  .c-sidebar-footer__icon-link:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .c-main-header {
    display: flex;
    align-items: flex-start;
    gap: var(--slf-space-3);
    margin-bottom: var(--slf-space-4);
  }

  .c-main-header h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .c-main-header p {
    margin: 0.45rem 0 0;
    color: var(--slf-text-2);
  }

  .c-main-header__menu-btn {
    display: none;
    margin-top: var(--slf-space-1);
  }

  .c-content-card {
    background: var(--slf-panel-bg);
    border: 1px solid var(--slf-line);
    border-radius: var(--slf-radius-xl);
    padding: clamp(1rem, 2.2vw, 2rem);
    box-shadow: var(--slf-shadow-lg);
    height: calc(100vh - (var(--slf-shell-gap) * 2));
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .c-kpi-grid {
    margin-top: var(--slf-space-2);
    display: grid;
    gap: var(--slf-space-4);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .c-content-card__scroll {
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  .c-kpi-tile {
    border: 1px solid var(--slf-line);
    border-radius: 14px;
    padding: var(--slf-space-4);
    background: #fff;
  }

  .c-kpi-tile h3 {
    margin: 0;
    font-size: 1.05rem;
  }

  .c-kpi-tile p {
    margin: 0.35rem 0 0.8rem;
  }

  .c-btn {
    border: 1px solid transparent;
    border-radius: var(--slf-radius-md);
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    font-weight: var(--slf-fw-semibold);
    background: linear-gradient(140deg, var(--slf-bg-2), var(--slf-bg-3));
    color: #fff;
    cursor: pointer;
  }

  .c-btn--ghost {
    background: #fff;
    border-color: var(--slf-line);
    color: var(--slf-text-1);
  }

  .c-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(31, 32, 72, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
  }

  .c-bottom-nav__item {
    text-align: center;
    color: rgba(219, 219, 247, 0.74);
    padding: 0.72rem 0.35rem;
    font-size: 0.83rem;
    font-weight: var(--slf-fw-medium);
    background: transparent;
    border: 0;
  }

  @media (max-width: 959px) {
    .c-sidebar__mobile-actions {
      display: flex;
    }

    .c-main-header__menu-btn {
      display: inline-block;
    }

    .c-content-card {
      height: 100%;
      min-height: 0;
      border-radius: var(--slf-radius-lg);
    }

    .c-bottom-nav {
      display: grid;
      min-height: var(--slf-bottom-nav-h);
    }
  }
}

@layer states {
  .c-nav__item.is-active {
    color: #fff;
    border-left-color: var(--slf-accent-blue);
    background: rgba(255, 255, 255, 0.18);
    margin-left: -0.45rem;
    padding-left: 0.85rem;
    border-radius: 0 8px 8px 0;
  }

  .c-bottom-nav__item.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(111, 139, 255, 0.3), rgba(111, 139, 255, 0));
  }

  @media (max-width: 959px) {
    .l-app.is-sidebar-open .l-sidebar {
      transform: translateX(0);
    }

    .l-app.is-sidebar-open .l-sidebar-overlay {
      display: block;
    }

    .l-app.is-sidebar-open {
      overflow: hidden;
    }
  }
}

@layer utilities {
  .u-muted { color: var(--slf-text-2); }
}