* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* `.panel` schneidet Überlauf ab (runde Ecken); erst diese eigene Scroll-Box macht breite Tabellen erreichbar. */
      .tbl-wrap {
        overflow-x: auto;
      }
      /* Sonst presst `.table{width:100%}` des Systems die Tabelle auf die Box, und die Zellen laufen still über den Rand. `max-content` ist nur ein Boden. */
      .tbl-wrap .table {
        min-width: max-content;
      }

      /* `--ui-zoom` liest das System: `.doc` rechnet den Zoom zurück, damit der Druck auf A4 passt. Am `html`, damit fixierte Overlays mitskalieren. */
      html {
        zoom: 1.1;
        --ui-zoom: 1.1;
      }

      body {
        font-family: var(--font-sans);
        background: var(--background);
        color: var(--foreground);
        font-size: var(--text-2);
        line-height: var(--leading-2);
        /* `vh` misst vor dem Zoom; roh stünde der Body 10 % zu hoch und bräche die Höhenkette, an der das Scrollen von `.content` hängt. */
        min-height: calc(100vh / var(--ui-zoom, 1));
        transition:
          background var(--motion-base) var(--ease-out),
          color var(--motion-base) var(--ease-out);
      }

      .field {
        margin-bottom: var(--space-group);
      }

      .toolbar__settings {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-stack);
      }
      .toolbar__settings .icon {
        width: 16px;
        height: 16px;
      }
      .toolbar__settings-menu {
        top: calc(100% + var(--space-stack));
        right: 0;
        min-width: 208px;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        animation: none;
        transition: opacity var(--motion-fast), transform var(--motion-fast);
      }
      .toolbar__settings.open .toolbar__settings-menu {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .toolbar__settings-menu .menu__item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--control-lg);
        padding: 0 var(--space-inset);
        border: 0;
        border-radius: var(--radius-2);
        background: none;
        color: var(--foreground);
        font: inherit;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
      }
      .toolbar__settings-menu .menu__item:hover,
      .toolbar__settings-menu .menu__item:focus-visible {
        background: var(--surface-hover);
      }
      a.btn {
        text-decoration: none;
      }

      .shell-account {
        position: relative;
        margin-top: auto;
      }
      .shell-theme {
        display: flex;
        align-items: center;
        gap: var(--space-inset);
        width: 100%;
        padding: var(--space-inset);
        margin-bottom: var(--space-stack);
        border: 0;
        border-radius: var(--radius-2);
        background: transparent;
        color: var(--muted-foreground);
        font: inherit;
        font-size: var(--text-2);
        cursor: pointer;
      }
      .shell-theme:hover { background: var(--surface-hover); }
      .shell-theme__track {
        margin-left: auto;
        width: 32px;
        height: 20px;
        flex: none;
        padding: 3px;
        border-radius: 20px;
        background: var(--border);
      }
      .shell-theme__track::after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--foreground);
      }
      .shell-theme[aria-checked="true"] .shell-theme__track { background: var(--accent); }
      .shell-theme[aria-checked="true"] .shell-theme__track::after { transform: translateX(12px); }
      .shell-account__button {
        display: flex;
        align-items: center;
        gap: var(--space-inset);
        width: 100%;
        min-height: var(--control-lg);
        padding: var(--space-stack) var(--space-inset);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-2);
        background: var(--surface-subtle);
        color: var(--foreground);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }
      .shell-account__button:hover,
      .shell-account__button:focus-visible {
        background: var(--surface-hover);
      }
      .shell-account__copy {
        display: grid;
        min-width: 0;
        flex: 1;
      }
      .shell-account__name,
      .shell-account__email {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .shell-account__name {
        font-size: var(--text-1);
        font-weight: var(--weight-semibold);
      }
      .shell-account__email {
        margin-top: 2px;
        color: var(--muted-foreground);
        font-size: var(--text-0);
      }
      .shell-account__chevron {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
      }
      .shell-account__menu {
        right: 0;
        bottom: calc(100% + var(--space-stack));
        left: 0;
        min-width: 208px;
        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        animation: none;
        transition: opacity var(--motion-fast), transform var(--motion-fast);
      }
      .shell-account.open .shell-account__menu {
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .shell-account__message {
        margin: 0;
        padding: var(--space-inset);
        color: var(--danger-foreground);
        font-size: var(--text-1);
      }
      .shell-account__items {
        display: grid;
        gap: 2px;
        padding: var(--space-stack);
      }
      .shell-account__items .menu__item {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--control-lg);
        padding: 0 var(--space-inset);
        border: 0;
        border-radius: var(--radius-2);
        background: none;
        color: var(--foreground);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }
      .shell-account__items .menu__item:hover,
      .shell-account__items .menu__item:focus-visible {
        background: var(--surface-hover);
      }
      .shell-account__items .menu__item.danger {
        color: var(--danger-foreground);
      }
      .shell-account__loading {
        display: block;
        padding: var(--space-inset);
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }

      .overview {
        display: grid;
        gap: var(--space-section);
      }
      .overview__controls {
        display: flex;
        align-items: end;
        gap: var(--space-group);
      }
      .overview__range {
        display: grid;
        gap: var(--space-inline);
        min-width: 180px;
        width: 220px;
      }
      .overview__controls > .hint {
        padding-bottom: var(--space-stack);
      }
      .overview__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
        gap: var(--space-group);
        align-items: start;
      }
      .overview__attention,
      .overview__side > .panel {
        min-width: 0;
      }
      .overview__side {
        display: grid;
        gap: var(--space-group);
      }
      .overview__panel-note {
        display: block;
        margin-top: var(--space-inline);
      }
      .overview__columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-stack);
      }
      .overview__board {
        padding: var(--space-group);
      }
      .overview__board-meta {
        margin-bottom: var(--space-stack);
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .overview__column {
        display: grid;
        align-content: start;
        gap: var(--space-inset);
        min-width: 0;
        padding: var(--space-stack);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-2);
        background: var(--surface-subtle);
      }
      .overview__column-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: var(--space-group);
      }
      .overview__column .overview__column-label {
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .overview__column-head > strong {
        min-width: 2ch;
        text-align: right;
        font-size: var(--text-5);
        line-height: var(--leading-5);
        font-weight: var(--weight-semibold);
      }
      .overview__cards { display: grid; gap: var(--space-inline); }
      .overview__order-card {
        display: grid;
        gap: 4px;
        padding: var(--space-inset);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-1);
        background: var(--surface);
        color: var(--foreground);
        text-decoration: none;
      }
      .overview__order-card:hover,
      .overview__order-card:focus-visible { background: var(--surface-hover); }
      .overview__order-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-inline);
        min-width: 0;
      }
      .overview__order-main strong {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: var(--text-2);
        line-height: var(--leading-2);
        font-weight: var(--weight-semibold);
      }
      .overview__order-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline); min-width: 0; }
      .overview__order-main span,
      .overview__order-meta > span:last-child,
      .overview__column-empty { color: var(--muted-foreground); font-size: var(--text-1); }
      .overview__order-main span { max-width: 100%; overflow-wrap: anywhere; font-size: var(--text-2); line-height: var(--leading-2); }
      .overview__order-card > .badge { justify-self: start; }
      .overview__column-empty { padding: var(--space-inset) 0; }
      .overview__trend-legend { display: flex; flex-wrap: wrap; gap: var(--space-stack); color: var(--muted-foreground); font-size: var(--text-1); }
      .overview__trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
      .overview__chart-body { min-width: 0; padding: var(--space-group); }
      .overview__legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
      .overview__legend-dot--calls { background: var(--warning-foreground); }
      .overview__legend-dot--replies { background: var(--success-foreground); }
      .overview__trend { margin-top: var(--space-stack); }
      .overview__plot { display: block; width: 100%; height: 180px; overflow: visible; }
      .overview__plot-grid { stroke: var(--border-subtle); stroke-width: 1; }
      .overview__plot-label { fill: var(--muted-foreground); font-family: var(--font-sans); font-size: 11px; }
      .overview__plot-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
      .overview__plot-line--orders { stroke: var(--accent); }
      .overview__plot-line--calls { stroke: var(--warning-foreground); }
      .overview__plot-line--replies { stroke: var(--success-foreground); }
      .overview__trend-details { margin-top: var(--space-stack); border-top: 1px solid var(--border-subtle); padding-top: var(--space-stack); }
      .overview__trend-details summary { color: var(--accent-text); cursor: pointer; font-size: var(--text-1); }
      .overview__trend-details .overview__data { max-height: 200px; display: block; overflow: auto; }
      .overview__channel-total { display: grid; gap: var(--space-inline); margin-top: var(--space-group); padding-top: var(--space-stack); border-top: 1px solid var(--border-subtle); color: var(--muted-foreground); font-size: var(--text-1); }
      .overview__bars {
        display: grid;
        gap: var(--space-inset);
        padding: var(--space-inset) 0;
      }
      .overview__bar-row {
        display: grid;
        grid-template-columns: minmax(60px, 72px) minmax(0, 1fr) auto;
        gap: var(--space-stack);
        align-items: center;
        min-width: 0;
        font-size: var(--text-1);
      }
      .overview__bar-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
      .overview__bar {
        height: 8px;
        overflow: hidden;
        border-radius: var(--radius-pill);
        background: var(--surface-active);
      }
      .overview__bar i {
        display: block;
        height: 100%;
        min-width: 0;
        border-radius: inherit;
        background: var(--accent);
      }
      .overview__bar-row strong {
        min-width: 2ch;
        text-align: right;
        font-weight: var(--weight-semibold);
      }
      .overview__data {
        width: 100%;
        margin-top: var(--space-stack);
        border-collapse: collapse;
        font-size: var(--text-1);
      }
      .overview__data caption {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
      }
      .overview__data th,
      .overview__data td {
        padding: var(--space-inline) 0;
        border-top: 1px solid var(--border-subtle);
        text-align: left;
      }
      .overview__data td { text-align: right; }
      .overview__activity {
        display: grid;
        gap: 0;
        margin: 0;
        padding: 0 var(--space-inset);
        list-style: none;
      }
      .overview__activity li {
        display: grid;
        gap: 2px;
        padding: var(--space-inset) 0;
        border-top: 1px solid var(--border-subtle);
      }
      .overview__activity a {
        display: grid;
        gap: 2px;
        color: var(--foreground);
        text-decoration: none;
      }
      .overview__activity a:hover strong,
      .overview__activity a:focus-visible strong {
        color: var(--accent-text);
      }
      .overview__activity li:first-child { border-top: 0; }
      .overview__activity span,
      .overview__empty {
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .overview__empty { padding: var(--space-section) var(--space-inset); }

      .overview__koerbe .panel__head {
        border-left: 3px solid var(--warning-foreground);
      }
      .koerbe {
        display: grid;
        gap: var(--space-group);
        padding: var(--space-inset);
      }
      .koerbe__karte { min-width: 0; }
      .koerbe__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-group);
        padding: var(--space-stack) var(--space-group) 0;
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .koerbe__posten {
        display: grid;
        gap: var(--space-inline);
        margin: 0;
        padding: var(--space-stack) var(--space-group);
        list-style: none;
      }
      .koerbe__posten li {
        padding: var(--space-inline) 0;
        border-top: 1px solid var(--border-subtle);
        font-size: var(--text-2);
        overflow-wrap: anywhere;
      }
      .koerbe__posten li:first-child { border-top: 0; }
      .koerbe__bemerkung { color: var(--muted-foreground); }
      .koerbe__aktionen {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-stack);
        padding: var(--space-stack) var(--space-group) var(--space-group);
      }
      @media (max-width: 860px) {
        .overview__grid { grid-template-columns: 1fr; }
      }
      @media (max-width: 520px) {
        .overview__controls { align-items: stretch; flex-direction: column; gap: var(--space-stack); }
        .overview__range { width: 100%; }
        .overview__controls > .hint { padding: 0; }
        .overview__columns { grid-template-columns: 1fr; }
      }

      /* `--surface-hover` misst gegen die Karte nur 1.054 (hell) / 1.077 (dunkel), das Feld verschwindet; `--surface-active` 1.123 / 1.165. `:where()` hält die Spezifität bei null, damit Fokus und Fehler gewinnen. */
      :where(html) .input,
      :where(html) .select,
      :where(html) .textarea {
        background: var(--surface-active);
      }

      .login-box .input {
        width: 100%;
        margin-bottom: var(--space-3);
      }
      .login-box .btn {
        width: 100%;
      }

      /* Auch die Nebenseiten (`seite.css`) lesen `--page-max`. */
      :root {
        --page-max: 1440px;
      }
      /* `vh` misst vor `zoom: 1.1`. `overflow: hidden`, sonst richtet sich die implizite Grid-Zeile nach dem längeren Kind statt nach der Höhe. */
      .shell {
        height: calc(100vh / var(--ui-zoom, 1));
        overflow: hidden;
      }
      /* Expliziter Breitenwert statt nur `margin: auto`: als Flex-Kind schaltet eine Auto-Quer-Margin `stretch` ab, und `.content` schrumpfte auf seinen Inhalt. */
      .content {
        width: min(100%, var(--page-max));
        margin: 0 auto;
      }
      .shell__menu-btn {
        display: none;
      }
      .shell__top {
        margin-bottom: var(--space-group);
      }
      .shell__name {
        font-family: var(--font-sans);
        font-size: var(--text-2);
        line-height: var(--leading-2);
        font-weight: var(--weight-semibold);
      }
      .shell__group + .shell__group {
        margin-top: var(--space-section);
      }
      /* Der allgemeine 120-ms-Farbübergang lässt schnelles Überfahren hinterherlaufen. */
      .shell__nav .nav-item {
        transition: none;
      }
      #haus-filter[hidden] {
        /* `.segmented` setzt `display: flex` und schlägt damit die UA-Regel für `[hidden]`. */
        display: none;
      }

      /* Fläche und z-index kommen von `.scrim` des Systems; hier nur, was ein <button> zusätzlich braucht. */
      .shell__scrim {
        border: none;
        padding: 0;
        cursor: default;
      }
      @media (max-width: 760px) {
        .shell__menu-btn {
          display: inline-grid;
        }
        .toolbar__settings > #app-settings-button {
          width: var(--control-lg);
          min-width: var(--control-lg);
          padding: 0;
          justify-content: center;
        }
        .toolbar__settings > #app-settings-button span {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
        }
        .shell {
          grid-template-columns: 1fr;
        }
        .shell__nav {
          position: fixed;
          inset: 0 25% 0 0;
          z-index: 100;
          transform: translateX(-100%);
          transition: transform var(--motion-base) var(--ease-out);
        }
        .shell--open .shell__nav {
          transform: none;
        }
        /* Unter 760px greift zugleich die 1000px-Regel des Systems (nur Icons). Der Vorhang zeigt die volle Sidebar; `revert` rollte auch die Basisform zurück, darum die Desktop-Werte wörtlich. */
        .shell__nav {
          padding: var(--space-section) var(--space-inset);
        }
        .shell__nav .shell__name,
        .shell__nav .nav-item__label,
        .shell__nav .nav-label {
          display: inline;
        }
        .shell__nav .nav-item__count {
          display: inline-flex;
        }
        .shell__nav .nav-item,
        .shell__nav .shell__brand {
          justify-content: flex-start;
          padding-left: var(--space-inset);
          padding-right: var(--space-inset);
        }
        .shell__nav .shell__top {
          flex-direction: row;
        }
      }
      /* Ein offen gebliebener Vorhang darf beim Verbreitern des Fensters nicht hängen bleiben. */
      @media (min-width: 761px) {
        .shell__scrim {
          display: none;
        }
      }

      .section {
        display: none;
      }
      .section.active {
        display: block;
      }
      .l-stats {
        margin-bottom: var(--space-page);
      }

      /* Das System hat am `.btn-icon` keine gefüllte Primär-Variante. */
      .btn-icon--primary {
        background: var(--primary);
        color: var(--primary-foreground);
      }
      .btn-icon--primary:hover {
        background: var(--primary-hover);
        color: var(--primary-foreground);
      }

      .badge.neu,
      .badge.pending_review,
      .badge.unknown {
        background: var(--info-badge);
        color: var(--info-badge-foreground);
      }
      .badge.akzeptiert,
      .badge.confirmed,
      .badge.verkauf,
      .badge.sent,
      .badge.opted_in {
        background: var(--success-badge);
        color: var(--success-badge-foreground);
      }
      .badge.in_bearbeitung,
      .badge.submitting,
      .badge.test,
      .badge.pending {
        background: var(--warning-badge);
        color: var(--warning-badge-foreground);
      }
      .badge.submit_failed,
      .badge.reconciliation_required,
      .badge.error,
      .badge.opted_out {
        background: var(--danger-badge);
        color: var(--danger-badge-foreground);
      }
      .badge.abgeschlossen,
      .badge.rejected,
      .badge.opt_in_expired {
        background: var(--neutral-badge);
        color: var(--neutral-badge-foreground);
      }
      .badge.admin {
        background: var(--accent-surface);
        color: var(--accent-text-strong);
      }
      .badge.dev {
        background: var(--primary);
        color: var(--primary-foreground);
      }

      /* z-index 1000: Sprosse des Toast-Stapels auf der Leiter. */
      .toast-wrap {
        position: fixed;
        bottom: var(--space-page);
        right: var(--space-page);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: var(--space-stack);
      }
      .toast {
        animation: toastIn var(--motion-slow) var(--ease-out);
      }
      .toast .ti {
        display: grid;
        place-items: center;
        flex: none;
      }
      .toast .ti svg {
        width: 14px;
        height: 14px;
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateX(20px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* z-index 100 = Modal-Ebene: nichts darf über der Anmeldemaske liegen. */
      #login-overlay,
      #auth-status {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #login-overlay.hidden,
      #login-overlay[hidden],
      #auth-status[hidden],
      #auth-retry[hidden] {
        display: none;
      }
      .login-box {
        width: 360px;
        padding: var(--space-7);
        background-color: var(--surface);
        border: none;
        border-radius: var(--radius-3);
        box-shadow: var(--shadow-float);
        background-image:
          var(--mat-grain-layer),
          radial-gradient(ellipse at 85% 95%, var(--mat-sheen) 0%, transparent 50%),
          linear-gradient(var(--mat-base), var(--mat-base));
      }
      .login-marke {
        display: flex;
        justify-content: center;
        margin-bottom: var(--space-5);
      }
      .login-marke .logo {
        height: var(--control-lg);
      }
      .login-marke__gruen {
        display: none;
      }
      html.light .login-marke__weiss {
        display: none;
      }
      html.light .login-marke__gruen {
        display: block;
      }
      .login-box p {
        color: var(--muted-foreground);
        font-size: var(--text-1);
        line-height: var(--leading-1);
        margin-bottom: var(--space-page);
        text-align: center;
      }
      .login-box .err {
        color: var(--danger-foreground);
        font-size: var(--text-1);
        line-height: var(--leading-1);
        margin-bottom: var(--space-3);
        display: none;
      }
      .login-box .input,
      .login-box .btn {
        width: 100%;
      }
      .login-box .input {
        margin-bottom: var(--space-3);
      }

      .theme-toggle .moon {
        display: block;
      }
      .theme-toggle .sun {
        display: none;
      }
      html.light .theme-toggle .moon {
        display: none;
      }
      html.light .theme-toggle .sun {
        display: block;
      }

      /* Netz, falls `class="ui"` am <body> fehlt: der Fokusring des Systems hängt an `:where(.ui *)`. */
      :where(body) :focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
        border-radius: var(--radius-1);
      }

.login-forgot {
  margin-top: var(--space-group);
  text-align: center;
}
.login-forgot a {
  font-size: var(--text-1);
  color: var(--muted-foreground);
}
.ask-msg {
  font-size: var(--text-2);
  color: var(--muted-foreground);
  line-height: var(--leading-2);
  margin-bottom: var(--space-group);
  white-space: pre-line;
}
.ask-date-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-inline);
  margin-bottom: var(--space-group);
}
.ask-date-options[hidden],
.ask-date-field[hidden] {
  display: none;
}
.ask-date-options__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline);
}
.ask-date-field {
  margin-bottom: 0;
}
.ask-actions {
  margin-top: var(--space-section);
}

      /* Die Höhenbegrenzung liegt auf der Liste statt dem Popover, damit das Suchfeld beim Scrollen stehen bleibt. */
      .felder-auswahl {
        max-height: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: var(--space-inline);
      }
      .felder-auswahl__suche {
        flex: none;
      }
      .felder-auswahl__liste {
        max-height: 260px;
        overflow-y: auto;
      }
      /* Pfeiltasten-Markierung sieht aus wie Hover, sonst hat die Tastatur einen stilleren Zustand. */
      .felder-auswahl__liste .dropdown__opt[data-markiert] {
        background: var(--surface-hover);
      }

      /* Die Spin-Pfeile sind OS-Bedienelemente, nehmen keine Tokens an und standen als weisser Block in der dunklen Maske. */
      input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
      }
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
      }

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 23px;
  flex: none;
  margin-left: auto;
  padding: 0 var(--space-inline);
  border-radius: var(--radius-pill);
  background: var(--danger-solid);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-2);
  line-height: var(--leading-1);
  font-weight: var(--weight-semibold);
}
.tab-badge[hidden] {
  display: none;
}

html:not(.light) {
  --primary: color-mix(in srgb, var(--teal-8) 55%, transparent);
  --primary-hover: color-mix(in srgb, var(--teal-8) 70%, transparent);
  --accent: color-mix(in srgb, var(--teal-8) 55%, transparent);
  --accent-hover: color-mix(in srgb, var(--teal-8) 70%, transparent);
  --accent-surface: color-mix(in srgb, var(--teal-8) 30%, transparent);
  --accent-text: #d0fff5;
  --accent-text-strong: #ffffff;
}