/* `b` und `strong` erben sonst 700 vom Browser, eine Stufe ausserhalb unseres Budgets. */
      #outbound b,
      #outbound strong {
        font-weight: var(--weight-semibold);
      }

      #cw-steps {
        min-width: 0;
        margin: var(--space-stack) 0 var(--space-group);
      }
      #cw-steps .step {
        padding: 8px 10px;
        border-radius: var(--radius-2);
        font-size: var(--text-2);
        gap: 8px;
      }
      #cw-steps .step--current {
        background: var(--accent-surface);
        color: var(--accent-text);
      }
      #cw-steps .step__line {
        min-width: 8px;
      }
      .cw-confirm {
        box-sizing: border-box;
        margin: auto;
        width: min(540px, calc(100% - 32px));
        max-height: calc(100dvh / var(--ui-zoom, 1) - 32px);
        overflow-y: auto;
        padding: var(--space-group);
        border: 1px solid var(--border);
        border-radius: var(--radius-3);
        background: var(--background);
        color: var(--foreground);
      }
      .cw-confirm::backdrop {
        background: rgb(0 0 0 / 55%);
      }
      .cw-confirm h3 {
        margin: 0 0 var(--space-group);
      }
      .cw-confirm-recipients {
        max-height: 100px;
        overflow-y: auto;
        overflow-wrap: anywhere;
        color: var(--muted-foreground);
        font-size: var(--text-2);
        margin-bottom: var(--space-group);
      }
      @media (prefers-reduced-motion: no-preference) {
        .cw-confirm[open] {
          animation: cw-confirm-enter 180ms ease-out;
        }
        @keyframes cw-confirm-enter {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      }
      @media (max-width: 520px) {
        #cw-steps {
          max-width: 100%;
          overflow-x: auto;
          overscroll-behavior-inline: contain;
          padding: var(--space-inline) 0;
          scroll-padding-inline: var(--space-inline);
          scrollbar-width: thin;
        }
        #cw-steps .step {
          flex: 0 0 auto;
          white-space: nowrap;
        }
      }
      /* Bewusste Abweichung vom System (dort ist `.step__line` immer `--border-subtle`): die gegangene Strecke zeigt den Fortschritt. */
      .step__line--erledigt {
        background: var(--accent);
      }
      .step[role="button"] {
        cursor: pointer;
      }
      .step[role="button"]:hover {
        color: var(--foreground);
      }

      .ob-results {
        display: flex;
        flex-direction: column;
        gap: 2px; /* optisch: Fuge zwischen Zeilen, kein Abstand */
        margin-top: var(--space-inline);
        max-height: 200px;
        overflow-y: auto;
      }
      .ob-results button,
      .ob-results .check {
        width: 100%;
        text-align: left;
        padding: var(--space-stack) var(--space-inset);
        border: 0;
        border-radius: var(--radius-2);
        background: none;
        color: var(--foreground);
        font: inherit;
        font-size: var(--text-2);
        line-height: var(--leading-2);
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        cursor: pointer;
        transition: background var(--motion-fast);
      }
      .ob-results button:hover,
      .ob-results .check:hover {
        background: var(--surface-hover);
      }
      .ob-results .check.sel {
        background: var(--accent-surface);
      }
      .ob-results .rp {
        margin-left: auto;
        font-family: var(--font-mono);
        font-size: var(--text-1);
        color: var(--muted-foreground);
      }
      .ob-results .check.disabled {
        cursor: not-allowed;
        opacity: 0.55;
      }
      .ob-results .check.disabled:hover {
        background: none;
      }
      .ob-results .check.disabled .rp {
        margin-left: 0;
      }
      .ob-results .check .badge {
        margin-left: auto;
      }
      .ob-checklist {
        max-height: 280px;
        border-radius: var(--radius-2);
        background: var(--background);
        padding: var(--space-inline);
      }

      .ob-results .check.cw-customer {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) auto;
        min-height: 56px;
        padding-block: var(--space-stack);
      }
      .cw-customer-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .cw-customer-name {
        overflow-wrap: anywhere;
      }
      .cw-customer-phone {
        color: var(--muted-foreground);
        font-family: var(--font-mono);
        font-size: var(--text-1);
        overflow-wrap: anywhere;
      }
      .ob-results .check.cw-customer.disabled {
        opacity: 1;
        color: var(--muted-foreground);
      }
      .ob-results .check.cw-customer .badge {
        margin-left: 0;
        max-width: 160px;
        white-space: normal;
        text-align: right;
      }
      .ob-results .check.cw-alle-zeile {
        border-radius: 0;
        border-bottom: 1px solid var(--border);
      }
      @media (max-width: 600px) {
        .ob-results .check.cw-customer {
          grid-template-columns: 20px minmax(0, 1fr);
        }
        .ob-results .check.cw-customer .badge {
          grid-column: 2;
          justify-self: start;
          max-width: 100%;
          text-align: left;
        }
      }

      #ob-home > .panel > .panel__head {
        justify-content: flex-end;
      }

      #cw-wizard {
        container-type: inline-size;
        min-width: 0;
        width: 100%;
        margin: 0;
      }
      .cwz-head {
        display: flex;
        align-items: center;
        gap: var(--space-inset);
        margin-bottom: var(--space-section);
      }
      .cwz-head h2 {
        font-size: var(--text-4);
        line-height: var(--leading-4);
        letter-spacing: var(--tracking-4);
        font-weight: var(--weight-semibold);
      }
      .cwz-grid {
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        height: calc(100dvh / var(--ui-zoom, 1) - 160px);
        min-height: 560px;
        align-items: stretch;
      }
      .cwz-grid > * {
        min-width: 0;
      }
      .cwz-main {
        display: flex;
        min-height: 0;
      }
      .cwz-body {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        padding: var(--space-group);
      }
      #cw-step-body {
        flex: 1;
        min-width: 0;
        min-height: 0;
        padding: 4px;
        margin: -4px;
        overflow-y: auto;
      }
      #cw-step-body:has(#cw-cust-results) {
        display: flex;
        flex-direction: column;
      }
      #cw-step-body > .section-label {
        margin-top: 0;
      }
      #cw-step-body > .cw-seg {
        flex-shrink: 0;
      }
      .cw-segdetail:has(#cw-cust-results) {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 180px;
      }
      .cw-segdetail > .field,
      .cw-segdetail > .cw-rec-filter {
        flex-shrink: 0;
      }
      .cw-segdetail > #cw-cust-results {
        flex: 1;
        min-height: 140px;
        max-height: none;
        scrollbar-width: thin;
      }
      #cw-cust-results > .check {
        flex-shrink: 0;
      }
      #cw-cust-results {
        padding: 0;
      }
      #cw-cust-results .cw-alle-zeile {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--background);
      }
      .cwz-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-stack);
        margin-top: var(--space-section);
      }
      .cwz-side {
        min-height: 0;
        overflow-y: auto;
        padding: var(--space-group);
        border-left: 1px solid var(--border);
        background: var(--background);
      }
      @container (max-width: 820px) {
        .cwz-grid {
          grid-template-columns: minmax(0, 1fr);
          height: auto;
          min-height: 0;
        }
        .cwz-side {
          border-left: 0;
          border-top: 1px solid var(--border);
        }
      }

      .cw-tpl-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-inset);
        align-items: stretch;
        max-height: calc(100vh - 320px);
        overflow-y: auto;
        padding: 2px; /* optisch: Platz für den Fokusring am Kartenrand */
        margin-top: 2px; /* optisch: dito, obere Kante */
      }
      @media (max-width: 700px) {
        .cw-tpl-scroll {
          grid-template-columns: 1fr;
        }
      }
      .cw-tpl-pick .ob-preview,
      .tpl-tile .ob-preview {
        flex: 1;
      }
      .cw-tpl-pick .tn,
      .tpl-tile .tn {
        font-weight: var(--weight-semibold);
      }
      .cw-tpl-pick.sel,
      .tpl-tile.open {
        background: var(--accent-surface);
      }

      .cwz-recbox {
        padding: 0;
        overflow: hidden;
        margin-top: var(--space-inset);
      }
      .cwz-rec-head {
        padding: var(--space-inset);
        font-weight: 600;
        font-size: var(--text-2);
      }
      .cwz-rec-list {
        max-height: 280px;
        overflow-y: auto;
        scrollbar-width: thin;
      }
      .cwz-rec-empty {
        padding: 0 var(--space-inset) var(--space-inset);
        color: var(--muted-foreground);
        font-size: var(--text-2);
      }
      .cwz-recrow {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        min-height: var(--target-min);
        padding: 0 var(--space-inset);
        border-top: 1px solid var(--border-subtle);
        font-size: var(--text-2);
      }
      .cwz-recname {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .wa-head {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        padding: var(--space-inset);
        border-bottom: 1px solid var(--border-subtle);
      }
      .wa-avatar {
        width: var(--control-md);
        height: var(--control-md);
        border-radius: var(--radius-circle);
        background: var(--accent-surface);
        color: var(--accent-text);
        font-weight: var(--weight-semibold);
        font-size: var(--text-2);
        display: grid;
        place-items: center;
        flex: none;
      }
      .wa-name {
        font-size: var(--text-2);
        font-weight: var(--weight-semibold);
      }
      .wa-name small {
        display: block;
        font-size: var(--text-1);
        line-height: var(--leading-1);
        font-weight: var(--weight-regular);
        color: var(--muted-foreground);
      }

      /* Rohwerte, weil es WhatsApps eigene Farben sind: eine Vorschau in unseren Farben würde lügen. */
      .ob-preview,
      .wa-chat,
      .wsim {
        --wa-bg: #0b141a; /* optisch: WhatsApp-Wert, kein Token */
        --wa-in: #202c33; /* optisch: WhatsApp-Wert, kein Token */
        --wa-out: #005c4b; /* optisch: WhatsApp-Wert, kein Token */
        --wa-text: #e9edef; /* optisch: WhatsApp-Wert, kein Token */
        --wa-meta: #8696a0; /* optisch: WhatsApp-Wert, kein Token */
        --wa-divider: #2f3b43; /* optisch: WhatsApp-Wert, kein Token */
        --wa-accent: #53bdeb; /* optisch: WhatsApp-Wert, kein Token */
        position: relative;
        overflow: hidden;
      }
      html.light .ob-preview,
      html.light .wa-chat,
      html.light .wsim {
        --wa-bg: #e5ddd5; /* optisch: WhatsApp-Wert, kein Token */
        --wa-in: #ffffff; /* optisch: WhatsApp-Wert, kein Token */
        --wa-out: #d9fdd3; /* optisch: WhatsApp-Wert, kein Token */
        --wa-text: #262626; /* optisch: WhatsApp-Wert, kein Token */
        --wa-meta: #667781; /* optisch: WhatsApp-Wert, kein Token */
        --wa-divider: #dadde1; /* optisch: WhatsApp-Wert, kein Token */
        --wa-accent: #00a5f4; /* optisch: WhatsApp-Wert, kein Token */
      }
      .ob-preview::before,
      .wa-chat::before,
      .wsim-body::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Absolut ab Wurzel: relativ löste der Browser gegen css/bereiche/ auf (404). */
        background: url("/dashboard/assets/wa-doodle.png") repeat;
        background-size: 412px auto;
        opacity: 0.06;
        filter: invert(1);
        pointer-events: none;
      }
      html.light .ob-preview::before,
      html.light .wa-chat::before,
      html.light .wsim-body::before {
        filter: none;
      }
      .ob-preview {
        background-color: var(--wa-bg);
        border-radius: var(--radius-2);
        padding: var(--space-inset);
        display: flex;
        flex-direction: column;
      }
      .ob-bubble {
        position: relative;
        align-self: flex-start;
        max-width: 94%;
        min-width: min(230px, 94%);
        background: var(--wa-in);
        color: var(--wa-text);
        border-radius: var(--radius-1);
        border-top-left-radius: 0;
        font-family:
          BlinkMacSystemFont,
          -apple-system,
          Roboto,
          Arial,
          sans-serif;
        box-shadow: var(--shadow-raised);
        word-wrap: break-word;
      }
      .ob-bubble::after {
        content: "";
        position: absolute;
        top: 0;
        left: -7px;
        width: 8px;
        height: 13px;
        background: var(--wa-in);
        clip-path: polygon(100% 0, 0 0, 100% 100%);
      }
      .bt-main {
        position: relative;
      }
      .bt-text {
        padding: var(--space-stack);
        font-size: var(--text-2);
        line-height: var(--leading-2);
        white-space: pre-wrap;
        word-break: break-word;
      }
      .bt-leer {
        color: var(--wa-meta);
      }
      /* reserviert Platz für die Zeit auf der letzten Zeile (Meta-Idiom) */
      .bt-sp {
        display: inline-block;
        width: 44px;
      }
      .ob-bubble .param {
        color: var(--wa-accent);
        font-weight: var(--weight-semibold);
      }
      .ob-bubble .wa-var {
        display: inline-block;
        padding: 0 var(--space-stack);
        border-radius: var(--radius-pill);
        background: color-mix(in srgb, var(--wa-accent) 14%, transparent);
        color: var(--wa-accent);
        font-size: var(--text-1);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-3);
        vertical-align: baseline;
        white-space: nowrap;
      }
      .wa-meta {
        position: absolute;
        bottom: 3px; /* optisch: die Zeit sitzt auf der Grundlinie der Bubble */
        right: 7px; /* optisch: dito, rechte Kante */
        font-size: var(--text-1);
        line-height: var(--leading-1);
        color: var(--wa-meta);
        user-select: none;
      }
      .wa-chat {
        background-color: var(--wa-bg);
        padding: var(--space-inset);
        min-height: 260px;
        display: flex;
        flex-direction: column;
        gap: var(--space-inline);
      }
      /* Höhe = Fingerziel, wie WhatsApp die Knöpfe zeichnet, nicht unsere Knopfleiter. */
      .wa-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-inline);
        border-top: 1px solid var(--wa-divider);
        color: var(--wa-accent);
        font-size: var(--text-2);
        line-height: var(--leading-2);
        min-height: var(--target-min);
        padding: 0 var(--space-stack);
        white-space: pre-wrap;
      }
      .wa-btn svg {
        width: 17px;
        height: 17px;
        fill: currentColor;
        flex: none;
      }

      .ob-tpl-wrap {
        padding: var(--space-section) var(--space-group) var(--space-group);
      }
      /* minmax(0, …): eine Spalte «1fr» wächst bis zum breitesten Inhalt
         (lange Zeile, Antwort-Knopf), und die dritte Kachel lief rechts aus
         dem Bild (25.10.2026). */
      .tplgrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-inset);
      }
      .tplgrid > .tile {
        min-width: 0;
      }
      @media (max-width: 1100px) {
        .tplgrid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 700px) {
        .tplgrid {
          grid-template-columns: 1fr;
        }
      }
      .ob-state-wide {
        grid-column: 1 / -1;
      }
      .tpl-th {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
      }
      .tpl-th .tn {
        font-size: var(--text-2);
        font-weight: var(--weight-semibold);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tpl-th .lang {
        font-size: var(--text-0);
        line-height: var(--leading-0);
        letter-spacing: var(--tracking-0);
        font-weight: var(--weight-semibold);
        color: var(--muted-foreground);
        text-transform: uppercase;
        flex: none;
      }
      .tpl-th .badge {
        margin-left: auto;
        flex: none;
      }
      .tpl-th .btn-icon {
        flex: none;
      }
      .tpl-editor {
        grid-column: 1 / -1;
        background: var(--surface-hover);
        border-radius: var(--radius-2);
        padding: var(--space-section);
        animation: accIn var(--motion-base) var(--ease-out);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        gap: var(--space-section);
      }
      @media (max-width: 760px) {
        .tpl-editor {
          grid-template-columns: 1fr;
        }
      }
      .tpl-editor .hint {
        margin-top: var(--space-stack);
      }
      .tpl-editor .ed-actions {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        margin-top: var(--space-inline);
      }
      .ed-save {
        margin-left: auto;
      }

      /* Zwei Klassen, sonst gewinnt das später definierte `.input` und das senkrechte Polster fällt auf 0. */
      .input.msg-editor {
        display: block;
        text-align: left;
        min-height: 110px;
        height: auto;
        padding: var(--space-stack) var(--space-inset);
        line-height: var(--leading-3);
        white-space: pre-wrap;
        word-break: break-word;
        overflow-y: auto;
        cursor: text;
      }
      .msg-editor:empty::before,
      .msg-editor.empty::before {
        content: attr(data-ph);
        color: var(--muted-foreground);
        pointer-events: none;
      }
      /* Kein `.chip`: der ist flex und eine Zeile hoch und reisst im contenteditable die Zeile auf. */
      .msg-editor .msg-var {
        display: inline-block;
        padding: 0 var(--space-stack);
        margin: 0 1px; /* optisch: Fuge zum Nachbarwort */
        border-radius: var(--radius-pill);
        font-size: var(--text-1);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-3);
        white-space: nowrap;
        user-select: none;
      }
      .msg-editor .msg-var.auto {
        background: var(--accent);
        color: var(--accent-foreground);
      }
      .msg-editor .msg-var.free {
        background: transparent;
        color: var(--accent-text);
        box-shadow: inset 0 0 0 1px var(--accent-border);
      }
      .vb-wrap {
        position: relative;
        margin-top: var(--space-stack);
      }
      .vb-wrap .menu {
        top: calc(100% + var(--space-inline));
        left: 0;
        min-width: 240px;
      }
      .vb-items {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-inline);
      }

      .tpl-btn-row {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        margin-bottom: var(--space-stack);
        max-width: 52%;
        min-width: 220px;
      }
      .tpl-btn-row .tpl-btn-input {
        flex: 1;
        min-width: 0;
      }
      .tpl-optin-row {
        display: flex;
        gap: var(--space-stack);
      }

      /* Die Karte schneidet ab (`overflow: hidden`), also scrollt die Liste selbst. 788 = 180 Name + 524 feste Spalten + 5×12 Fugen + 2×12 Polster; `.cw-detail` braucht dieselbe Grenze. */
      #cw-list {
        overflow-x: auto;
      }
      #cw-list .cw-head,
      #cw-list .cw-row,
      #cw-list .cw-detail {
        min-width: 788px;
      }
      #cw-list .cw-head,
      #cw-list .cw-row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) 116px 96px 104px 88px 120px;
        align-items: center;
        gap: var(--space-inset);
        padding: var(--space-inset);
      }
      #cw-list .cw-head {
        font-size: var(--text-0);
        line-height: var(--leading-0);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: var(--tracking-0);
        color: var(--muted-foreground);
      }
      #cw-list .cw-row {
        border-top: 1px solid var(--border-subtle);
        cursor: pointer;
        transition: background var(--motion-fast);
      }
      #cw-list .cw-row:hover {
        background: var(--surface-hover);
      }
      #cw-list .cw-row.laedt .skeleton {
        height: 12px;
      }
      #cw-list .cw-row .cn {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-weight: var(--weight-semibold);
        font-size: var(--text-2);
      }
      #cw-list .cw-row .cn,
      #cw-list .cw-row .cn small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #cw-list .cw-row .cn small {
        font-weight: var(--weight-regular);
        font-size: var(--text-1);
        color: var(--muted-foreground);
      }
      #cw-list .cnum {
        font-size: var(--text-2);
        font-variant-numeric: tabular-nums;
      }
      #cw-list .cnum.muted {
        color: var(--muted-foreground);
      }
      #cw-list .cw-row .cact {
        justify-self: end;
        display: flex;
        align-items: center;
      }

      .cw-detail .acc {
        margin: var(--space-stack) var(--space-group) var(--space-inset);
      }
      .cw-fehler {
        color: var(--danger-foreground);
      }
      .cw-funnel {
        grid-column: 1 / -1;
        display: flex;
        align-items: stretch;
        gap: var(--space-stack);
        margin-bottom: var(--space-inset);
        flex-wrap: wrap;
      }
      .cw-funnel .stat {
        flex: 1;
        min-width: 116px;
      }
      .cw-funnel .stat__value {
        display: flex;
        align-items: baseline;
        gap: var(--space-inline);
      }
      .cw-funnel .stat__value small {
        font-size: var(--text-1);
        font-weight: var(--weight-semibold);
        color: var(--accent-text);
      }
      .cw-funnel .fn-arrow {
        align-self: center;
        color: var(--muted-foreground);
        font-size: var(--text-5);
        flex: none;
      }

      .cw-seg {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-inset);
        margin-bottom: var(--space-stack);
      }
      .cw-segchoice {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--control-lg);
        gap: var(--space-inline);
        min-width: 0;
        padding: var(--space-inset);
        border: 1px solid var(--border);
        border-radius: var(--radius-2);
        background: transparent;
        color: var(--foreground);
        font: inherit;
        text-align: left;
        cursor: pointer;
      }
      .cw-segchoice:hover {
        background: var(--surface-hover);
      }
      .cw-segchoice.on {
        border-color: var(--accent);
        background: var(--accent-surface);
      }
      .cw-segtitle {
        font-size: var(--text-2);
        font-weight: var(--weight-semibold);
      }
      .cw-segcount {
        flex-shrink: 0;
        color: var(--muted-foreground);
        font-size: var(--text-1);
        font-variant-numeric: tabular-nums;
      }
      .cw-segchoice.on .cw-segcount {
        color: var(--accent-text);
      }
      .cw-segdetail {
        min-width: 0;
        padding: 2px;
      }
      @container (max-width: 480px) {
        .cw-seg {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      .cw-alle-zeile {
        border-bottom: 1px solid var(--border-subtle);
        border-radius: 0;
        margin-bottom: var(--space-stack);
      }

      .cw-rec-filter {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        min-width: 0;
        min-height: var(--control-lg);
        margin-bottom: var(--space-stack);
      }
      .cw-filter-product {
        flex: 1;
        min-width: 0;
        justify-content: space-between;
      }
      .cw-filter-product > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cw-filter-change {
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .cw-filter-period {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        flex-shrink: 0;
        font-size: var(--text-1);
        color: var(--muted-foreground);
      }
      .cw-filter-period .input {
        width: 72px;
        text-align: center;
      }
      @container (max-width: 480px) {
        .cw-rec-filter {
          flex-wrap: wrap;
        }
        .cw-filter-product {
          flex-basis: 100%;
        }
      }

      .ob-link {
        border: 0;
        background: none;
        padding: 0;
        font: inherit;
        font-size: var(--text-1);
        font-weight: var(--weight-semibold);
        color: var(--accent-text);
        cursor: pointer;
      }
      .ob-link:hover {
        text-decoration: underline;
      }

      .ob-summary {
        font-size: var(--text-2);
        margin: var(--space-inset) 0;
      }
      #cw-step-body .hint {
        margin: var(--space-stack) 0;
      }
      #cw-step-body .toggle,
      .cw-schedule {
        margin: var(--space-inset) 0;
      }
      #outbound .toggle:has(input:disabled) {
        cursor: default;
      }
      #outbound .toggle input:disabled + .toggle__track {
        opacity: 0.5;
      }

      .ob-sk-label,
      .ob-sk-line,
      .ob-sk-tile,
      .ob-sk-badge {
        display: block;
      }
      .ob-sk-label {
        width: 55%;
        height: 11px;
      }
      .ob-sk-line {
        width: 70%;
        height: 12px;
        margin-top: var(--space-stack);
      }
      .ob-sk-badge {
        width: 70px;
        height: 18px;
        margin-left: auto;
      }
      .ob-sk-tile {
        width: 100%;
        height: 64px;
      }

.cw-draft-heading { display: flex; flex-direction: column; gap: 5px; padding: 20px 24px 12px; }
.cw-draft-heading span { color: var(--muted-foreground); font-size: var(--text-1); }
#cw-list.cw-list--draft-only .cw-row { grid-template-columns: minmax(0, 1fr) auto 36px; padding: 20px 24px; }
#cw-list.cw-list--draft-only .cnum { display: none; }
#cw-list.cw-list--draft-only .cn small { color: var(--accent-text); }
html:not(.light) { --wa-out: var(--primary); }

#outbound.active:has(#ob-home:not([hidden])) { height: 100%; display: flex; flex-direction: column; }
#ob-home:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
#ob-home > .panel { flex: 1; display: flex; flex-direction: column; }
#ob-pane-campaigns:not([hidden]),
#ob-pane-templates:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
#cw-list:has(> .state),
#ob-pane-templates .ob-tpl-wrap:has(.state),
#ob-tpl-list:has(> .state) { flex: 1; display: flex; flex-direction: column; }
#cw-list > .state,
#ob-tpl-list > .state { flex: 1; justify-content: center; }

#mail.active { display: flex; flex-direction: column; height: 100%; }
#mail > .panel { flex: 1; display: flex; flex-direction: column; }
#mail .state { flex: 1; justify-content: center; }

.mail-chicken { width: 160px; height: 112px; overflow: visible; }
.mail-chicken__head { transform-origin: 112px 80px; animation: mail-chicken-peck 2.8s ease-in-out infinite; }
@keyframes mail-chicken-peck {
  0%, 28%, 68%, 100% { transform: rotate(0deg); }
  40%, 56% { transform: rotate(72deg); }
  47% { transform: rotate(48deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mail-chicken__head { animation: none; }
}