/* Design-system primitives (buttons, chips, cards, forms, feedback) and the
   components rendered by js/ui/components.js + overlays.js. Owned by D1.
   Class prefix c- for generated components; shared primitives are unprefixed. */

@layer components {
  /* ================================================================ icons */

  .icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    overflow: visible;
  }

  .icon--play,
  .icon--pause,
  .icon--stop,
  .icon--next,
  .icon--prev {
    fill: currentColor;
  }

  /* ============================================================== buttons */

  .btn {
    --btn-bg: color-mix(in oklab, var(--text) 7%, transparent);
    --btn-bg-hover: color-mix(in oklab, var(--text) 13%, transparent);
    --btn-fg: var(--text);
    --btn-border: var(--border);
    --btn-border-hover: var(--border-strong);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    touch-action: manipulation;
    transition:
      background-color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      transform var(--dur-1) var(--ease-out),
      filter var(--dur-2) var(--ease-out);
  }

  .btn:hover {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
  }

  .btn:active {
    transform: translateY(1px) scale(0.985);
  }

  .btn:disabled,
  .btn[aria-disabled='true'] {
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
  }

  .btn[aria-pressed='true'],
  .btn.is-active {
    --btn-bg: var(--accent-soft);
    --btn-bg-hover: color-mix(in oklab, var(--accent) 26%, transparent);
    --btn-border: color-mix(in oklab, var(--accent) 55%, transparent);
    --btn-fg: var(--accent);
  }

  .btn--primary {
    --btn-fg: var(--accent-ink);
    --btn-border: transparent;
    --btn-border-hover: transparent;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--accent-2)));
    box-shadow: 0 0 22px -6px var(--accent-glow), inset 0 1px 0 color-mix(in oklab, white 35%, transparent);
  }

  .btn--primary:hover {
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--accent-2)));
    filter: brightness(1.1) saturate(1.1);
    box-shadow: 0 0 30px -4px var(--accent-glow), inset 0 1px 0 color-mix(in oklab, white 40%, transparent);
  }

  .btn--primary[aria-pressed='true'],
  .btn--primary.is-active {
    --btn-fg: var(--accent-ink);
    --btn-border: transparent;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--accent-2)));
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-border: transparent;
    --btn-border-hover: var(--border);
    --btn-fg: var(--text-dim);
  }

  .btn--ghost:hover {
    --btn-fg: var(--text);
  }

  .btn--danger {
    --btn-fg: var(--danger);
    --btn-border: color-mix(in oklab, var(--danger) 45%, transparent);
    --btn-border-hover: var(--danger);
    --btn-bg: color-mix(in oklab, var(--danger) 10%, transparent);
    --btn-bg-hover: color-mix(in oklab, var(--danger) 22%, transparent);
  }

  .btn--sm {
    min-height: 36px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-xs);
    gap: var(--sp-1);
  }

  .btn--lg {
    min-height: 54px;
    padding: 0 var(--sp-5);
    font-size: var(--fs-md);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  .btn--icon {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: var(--radius-sm);
  }

  .btn--icon.btn--sm {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .btn--icon.btn--lg {
    width: 56px;
    min-width: 56px;
    border-radius: var(--radius);
  }

  @media (pointer: coarse) {
    .btn--icon.btn--sm {
      width: 44px;
      min-width: 44px;
      min-height: 44px;
    }
  }

  /* ================================================================ chips */

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 32px;
    max-width: 100%;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--text) 5%, transparent);
    color: var(--text-dim);
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition:
      background-color var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out);
  }

  a.chip,
  button.chip {
    cursor: pointer;
    touch-action: manipulation;
  }

  a.chip:hover,
  button.chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text);
  }

  .chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chip__count {
    padding-left: var(--sp-2);
    border-left: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-mute);
  }

  .chip--active,
  .chip[aria-current='true'] {
    border-color: color-mix(in oklab, var(--accent) 60%, transparent);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 16px -6px var(--accent-glow);
  }

  .chip--active:hover,
  a.chip--active:hover,
  button.chip--active:hover {
    background: color-mix(in oklab, var(--accent) 24%, transparent);
    color: var(--accent);
  }

  .chip--active .chip__count {
    color: color-mix(in oklab, var(--accent) 75%, var(--text));
    border-color: color-mix(in oklab, var(--accent) 35%, transparent);
  }

  @media (pointer: coarse) {
    a.chip,
    button.chip {
      min-height: 40px;
    }
  }

  /* ========================================================= glass / cards */

  .glass {
    background-color: var(--surface);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
      background-color: var(--surface-strong);
    }
  }

  .card {
    position: relative;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    box-shadow: var(--shadow-1);
  }

  .card--interactive {
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }

  .card--interactive:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-1), var(--glow-1);
    transform: translateY(-2px);
  }

  /* Corner-cut neon frame. The border follows the straight edges; the two
     diagonal cuts are drawn with gradients because clip-path removes borders. */
  .hud-frame {
    --hud-line: var(--border-strong);
    --_c: var(--cut);
    border: 1px solid var(--hud-line);
    border-radius: 0;
    clip-path: polygon(
      var(--_c) 0, 100% 0,
      100% calc(100% - var(--_c)), calc(100% - var(--_c)) 100%,
      0 100%, 0 var(--_c)
    );
    background-image:
      linear-gradient(135deg, transparent calc(var(--_c) * 0.7071 - 0.5px), var(--hud-line) calc(var(--_c) * 0.7071 - 0.5px), var(--hud-line) calc(var(--_c) * 0.7071 + 1.2px), transparent calc(var(--_c) * 0.7071 + 1.2px)),
      linear-gradient(315deg, transparent calc(var(--_c) * 0.7071 - 0.5px), var(--hud-line) calc(var(--_c) * 0.7071 - 0.5px), var(--hud-line) calc(var(--_c) * 0.7071 + 1.2px), transparent calc(var(--_c) * 0.7071 + 1.2px));
    background-size: var(--_c) var(--_c), var(--_c) var(--_c);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-origin: border-box;
  }

  .hud-frame--accent {
    --hud-line: color-mix(in oklab, var(--accent) 70%, transparent);
  }

  .hud-frame--sm {
    --_c: calc(var(--cut) * 0.6);
  }

  /* ================================================================ forms */

  .input,
  .select,
  .textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: color-mix(in oklab, var(--bg-0) 58%, transparent);
    color: var(--text);
    font-size: var(--fs-md);
    line-height: 1.3;
    caret-color: var(--accent);
    transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  }

  .input:hover,
  .select:hover,
  .textarea:hover {
    border-color: var(--border-strong);
  }

  .input:focus,
  .select:focus,
  .textarea:focus {
    outline: none;
    border-color: var(--accent);
    background-color: color-mix(in oklab, var(--bg-0) 75%, transparent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px -8px var(--accent-glow);
  }

  .input:disabled,
  .select:disabled,
  .textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .input[aria-invalid='true'],
  .select[aria-invalid='true'],
  .textarea[aria-invalid='true'] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
  }

  .input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: calc(var(--sp-4) + 22px);
    cursor: pointer;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
      linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .select option {
    background-color: var(--bg-2);
    color: var(--text);
  }

  .textarea {
    min-height: 96px;
    padding: var(--sp-3) var(--sp-4);
    line-height: var(--lh);
    resize: vertical;
  }

  .field {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
  }

  .field__label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-dim);
  }

  .field__hint {
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }

  .field__hint[role='alert'],
  .field.is-invalid .field__hint {
    color: var(--danger);
  }

  /* ---- switch: <input class="switch"> or <label class="switch"><input><span class="switch__track"></span>… */

  input.switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--text) 8%, transparent);
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  input.switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  input.switch:checked {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 16px -4px var(--accent-glow);
  }

  input.switch:checked::after {
    transform: translateX(20px);
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  input.switch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  label.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 44px;
    cursor: pointer;
    user-select: none;
  }

  label.switch > input {
    position: absolute;
    inset: 0 auto 0 0;
    width: 46px;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .switch__track {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--text) 8%, transparent);
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  .switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  label.switch > input:checked + .switch__track {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 16px -4px var(--accent-glow);
  }

  label.switch > input:checked + .switch__track::after {
    transform: translateX(20px);
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  label.switch > input:focus-visible + .switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  label.switch > input:disabled + .switch__track {
    opacity: 0.45;
  }

  .switch__label {
    font-size: var(--fs-md);
    color: var(--text);
  }

  /* ---- range: native input; --range-fill (0–100%) is kept in sync by initComponents */

  input.range {
    --range-fill: 0%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
  }

  input.range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--accent) 0 var(--range-fill), color-mix(in oklab, var(--text) 14%, transparent) var(--range-fill) 100%);
  }

  input.range::-moz-range-track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--text) 14%, transparent);
  }

  input.range::-moz-range-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }

  input.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg-0);
    box-shadow: 0 0 12px var(--accent-glow);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  input.range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg-0);
    box-shadow: 0 0 12px var(--accent-glow);
  }

  input.range:hover::-webkit-slider-thumb,
  input.range:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 18px var(--accent-glow);
  }

  input.range:focus-visible {
    outline: none;
  }

  input.range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  input.range:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  input.range:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* ---- checkbox */

  input.checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 6px;
    background: color-mix(in oklab, var(--bg-0) 55%, transparent);
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  input.checkbox:hover {
    border-color: var(--accent);
  }

  input.checkbox:checked,
  input.checkbox:indeterminate {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px -2px var(--accent-glow);
  }

  input.checkbox::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--accent-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--dur-1) var(--ease-out);
  }

  input.checkbox:checked::after {
    transform: rotate(45deg) scale(1);
  }

  input.checkbox:indeterminate::after {
    left: 4px;
    top: 7px;
    width: 10px;
    height: 0;
    border-width: 0 0 2px;
    transform: none;
  }

  input.checkbox:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* ============================================== segmented control / tabs */

  .segmented {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--bg-0) 50%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .segmented > button,
  .segmented > a,
  .segmented > label,
  .segmented__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex: 1 0 auto;
    min-height: 38px;
    padding: 0 var(--sp-4);
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  .segmented > label > input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
  }

  .segmented > :hover,
  .segmented__item:hover {
    color: var(--text);
    background: var(--surface-hover);
  }

  .segmented > [aria-pressed='true'],
  .segmented > [aria-checked='true'],
  .segmented > [aria-selected='true'],
  .segmented > [aria-current]:not([aria-current='false']),
  .segmented > .is-active,
  .segmented > label:has(input:checked),
  .segmented__item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent), 0 0 14px -6px var(--accent-glow);
  }

  .segmented > label:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  @media (pointer: coarse) {
    .segmented > button,
    .segmented > a,
    .segmented > label,
    .segmented__item {
      min-height: 44px;
    }
  }

  .tabs {
    display: flex;
    gap: var(--sp-1);
    max-width: 100%;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    min-height: 44px;
    padding: 0 var(--sp-4);
    color: var(--text-dim);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-2) var(--ease-out);
  }

  .tab::after {
    content: '';
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    transform: scaleX(0);
    transition: transform var(--dur-3) var(--ease-out);
  }

  .tab:hover {
    color: var(--text);
  }

  .tab[aria-selected='true'],
  .tab[aria-current]:not([aria-current='false']),
  .tab.is-active {
    color: var(--accent);
  }

  .tab[aria-selected='true']::after,
  .tab[aria-current]:not([aria-current='false'])::after,
  .tab.is-active::after {
    transform: scaleX(1);
  }

  /* ================================================== badges, kbd, meter */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: color-mix(in oklab, var(--text) 6%, transparent);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge--ok {
    color: var(--ok);
    border-color: color-mix(in oklab, var(--ok) 40%, transparent);
    background: color-mix(in oklab, var(--ok) 10%, transparent);
  }

  .badge--warn {
    color: var(--warn);
    border-color: color-mix(in oklab, var(--warn) 40%, transparent);
    background: color-mix(in oklab, var(--warn) 10%, transparent);
  }

  .badge--danger {
    color: var(--danger);
    border-color: color-mix(in oklab, var(--danger) 45%, transparent);
    background: color-mix(in oklab, var(--danger) 12%, transparent);
  }

  .badge--accent {
    color: var(--accent);
    border-color: color-mix(in oklab, var(--accent) 45%, transparent);
    background: var(--accent-soft);
  }

  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--text) 6%, transparent);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1;
  }

  .meter {
    --value: 0%;
    position: relative;
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--text) 12%, transparent);
    overflow: hidden;
  }

  .meter > span,
  .meter__bar {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-accent);
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width var(--dur-3) var(--ease-out);
  }

  .tooltip {
    z-index: var(--z-tooltip);
    width: max-content;
    max-width: min(320px, 80vw);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface-strong);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow-1), var(--glow-1);
    color: var(--text);
    font-size: var(--fs-xs);
    line-height: 1.4;
    pointer-events: none;
  }

  /* ============================================================ loading */

  .spinner {
    --spinner-size: 24px;
    display: inline-block;
    flex: none;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    filter: drop-shadow(0 0 4px var(--accent-glow));
    animation: c-spin 0.8s linear infinite;
  }

  @keyframes c-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes c-pulse {
    50% {
      opacity: 0.35;
    }
  }

  .skeleton {
    display: block;
    border-radius: var(--radius-sm);
    background-color: color-mix(in oklab, var(--text) 6%, transparent);
    background-image: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in oklab, var(--accent) 14%, transparent) 50%,
      transparent 80%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: c-shimmer 1.5s ease-in-out infinite;
  }

  @keyframes c-shimmer {
    from {
      background-position: 160% 0;
    }

    to {
      background-position: -60% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner {
      animation: c-pulse 1.4s ease-in-out infinite;
    }

    .skeleton {
      animation: none;
    }
  }

  :root[data-reduce-motion] .spinner {
    animation: c-pulse 1.4s ease-in-out infinite;
  }

  :root[data-reduce-motion] .skeleton {
    animation: none;
  }

  /* ============================================================== layout */

  .scroll-x {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .scroll-x::-webkit-scrollbar {
    display: none;
  }

  .scroll-x > * {
    flex: none;
    scroll-snap-align: start;
  }

  .grid-cards {
    --card-min: 168px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: var(--sp-4);
  }

  .section {
    display: block;
    min-width: 0;
  }

  .section + .section {
    margin-top: var(--sp-6);
  }

  .section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
  }

  .section__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    margin-right: auto;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .section__title::before {
    content: '';
    flex: none;
    width: 3px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  .section__title > .icon {
    color: var(--accent);
  }

  .section__title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .section__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 36px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color var(--dur-2) var(--ease-out);
  }

  .section__more:hover {
    background: var(--accent-soft);
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
  }

  .empty__icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%);
    color: var(--accent);
    box-shadow: 0 0 36px -10px var(--accent-glow);
  }

  .empty__title {
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .empty__text {
    max-width: 44ch;
    color: var(--text-dim);
    font-size: var(--fs-sm);
  }

  .empty .btn {
    margin-top: var(--sp-2);
  }

  .empty--error .empty__icon {
    border-color: color-mix(in oklab, var(--danger) 45%, transparent);
    background: radial-gradient(circle, color-mix(in oklab, var(--danger) 16%, transparent), transparent 70%);
    color: var(--danger);
    box-shadow: 0 0 36px -10px var(--danger);
  }

  .divider {
    height: 1px;
    margin: var(--sp-4) 0;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  }

  .divider--v {
    align-self: stretch;
    width: 1px;
    height: auto;
    margin: 0 var(--sp-3);
    background: linear-gradient(180deg, transparent, var(--border-strong), transparent);
  }

  /* ============================================================ station art */

  .c-art {
    --art-size: 56px;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--art-size);
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    container-type: inline-size;
    background:
      radial-gradient(circle at 25% 20%, hsl(var(--art-hue, 200) 90% 62% / 0.55), transparent 60%),
      linear-gradient(135deg, hsl(var(--art-hue, 200) 70% 34%), hsl(calc(var(--art-hue, 200) + 55) 75% 18%));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 14%, transparent);
  }

  .c-art__tile {
    font-family: var(--font-display);
    font-size: clamp(0.7rem, 34cqw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: hsl(var(--art-hue, 200) 100% 92%);
    text-shadow: 0 0 14px hsl(var(--art-hue, 200) 100% 65% / 0.8);
    user-select: none;
  }

  .c-art__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    object-fit: contain;
  }

  .c-art.is-loaded {
    background: var(--bg-3);
  }

  .c-art.is-loaded .c-art__tile {
    opacity: 0;
  }

  /* ============================================================ live state */

  .c-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .c-ico--pause,
  .c-ico--load,
  .c-ico--heart-fill,
  .c-label--pause {
    display: none;
  }

  [data-station].is-playing .c-ico--play,
  [data-station].is-playing .c-label--play,
  [data-station].is-loading .c-ico--play {
    display: none;
  }

  [data-station].is-playing .c-ico--pause,
  [data-station].is-playing .c-label--pause {
    display: inline-flex;
  }

  [data-station].is-loading .c-ico--load {
    display: inline-flex;
  }

  [data-station].is-fav .c-ico--heart {
    display: none;
  }

  [data-station].is-fav .c-ico--heart-fill {
    display: inline-flex;
    color: var(--accent-3);
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent-3) 70%, transparent));
  }

  .c-fav {
    transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  }

  [data-station].is-fav .c-fav:active {
    transform: scale(1.2);
  }

  /* Equalizer bars shown while a station is audible. */
  .c-eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    flex: none;
  }

  .c-eq > i {
    display: block;
    width: 3px;
    height: 100%;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    transform-origin: bottom;
    animation: c-eq 0.9s ease-in-out infinite alternate;
  }

  .c-eq > i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
  .c-eq > i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.6s; }
  .c-eq > i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.1s; }

  @keyframes c-eq {
    from {
      transform: scaleY(0.2);
    }

    to {
      transform: scaleY(1);
    }
  }

  [data-station].is-playing .c-eq {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: reduce) {
    .c-eq > i {
      animation: none;
      transform: scaleY(0.7);
    }
  }

  :root[data-reduce-motion] .c-eq > i {
    animation: none;
    transform: scaleY(0.7);
  }

  /* =============================================================== actions */

  .c-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .c-actions--row {
    flex-wrap: nowrap;
    gap: 0;
    flex: none;
  }

  .c-actions--compact {
    flex-wrap: nowrap;
  }

  .c-actions .btn[data-action='play'] {
    min-width: 44px;
  }

  /* ================================================================ cards */

  .c-card {
    --card-radius: var(--radius);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
    min-width: 0;
    padding: var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background-color: var(--surface);
    transition:
      border-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out);
  }

  .c-card:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-strong);
    box-shadow: var(--shadow-1), var(--glow-1);
    transform: translateY(-2px);
  }

  .c-card.is-current {
    border-color: color-mix(in oklab, var(--accent) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), 0 0 30px -8px var(--accent-glow);
  }

  .c-card.is-offline .c-card__media {
    filter: grayscale(0.85) brightness(0.8);
  }

  .c-card__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: calc(var(--card-radius) - 4px);
    overflow: hidden;
  }

  .c-card__link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .c-card__media .c-art {
    width: 100%;
    height: 100%;
    border-radius: 0;
    transition: transform var(--dur-4) var(--ease-out);
  }

  .c-card:hover .c-card__media .c-art {
    transform: scale(1.05);
  }

  .c-card__play {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    z-index: 2;
    border-radius: var(--radius-pill);
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  .c-card:hover .c-card__play,
  .c-card:focus-within .c-card__play,
  .c-card.is-current .c-card__play,
  .c-card__play:focus-visible {
    opacity: 1;
    transform: none;
  }

  @media (hover: none) {
    .c-card__play {
      opacity: 1;
      transform: none;
    }
  }

  .c-card__rank,
  .c-card__flag {
    position: absolute;
    top: var(--sp-2);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    line-height: 1;
  }

  .c-card__rank {
    left: var(--sp-2);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent);
  }

  .c-card__flag {
    right: var(--sp-2);
  }

  .c-card__media > .c-eq {
    position: absolute;
    left: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 1;
  }

  .c-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: 0 var(--sp-2) var(--sp-1);
    min-width: 0;
  }

  .c-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 2.6em;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
  }

  .c-card__title:hover {
    color: var(--accent);
  }

  .c-card.is-current .c-card__title {
    color: var(--accent);
  }

  .c-card__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: var(--fs-xs);
  }

  .c-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 38px;
  }

  .c-card__foot .c-badges {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .c-card__tools {
    display: inline-flex;
    margin-left: auto;
    margin-right: calc(var(--sp-2) * -1);
  }

  .c-card--sm .c-card__title {
    font-size: var(--fs-xs);
  }

  .c-card--sm .c-card__meta,
  .c-card--sm .c-badges {
    display: none;
  }

  .c-card--lg {
    --card-radius: var(--radius-lg);
    padding: var(--sp-3);
  }

  .c-card--lg .c-card__title {
    font-size: var(--fs-md);
  }

  .c-carousel__item:has(> .c-card--sm) { --card-w: 132px; }
  .c-carousel__item:has(> .c-card--lg) { --card-w: 232px; }

  /* ================================================================== rows */

  .c-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 64px;
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }

  .c-row:hover {
    background: var(--surface-hover);
  }

  .c-row.is-current {
    border-color: color-mix(in oklab, var(--accent) 35%, transparent);
    background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
  }

  .c-row.is-current::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
  }

  .c-row.is-offline .c-art {
    filter: grayscale(0.85) brightness(0.8);
  }

  .c-row__rank {
    flex: none;
    min-width: 2ch;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-mute);
  }

  .c-row__art {
    position: relative;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .c-row__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--scrim);
    color: var(--text);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .c-row__art:hover .c-row__overlay,
  .c-row__art:focus-visible .c-row__overlay,
  .c-row.is-current .c-row__overlay {
    opacity: 1;
  }

  .c-row.is-current .c-row__overlay {
    color: var(--accent);
  }

  .c-row__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .c-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.3;
  }

  .c-row__name:hover {
    color: var(--accent);
  }

  .c-row.is-current .c-row__name {
    color: var(--accent);
  }

  .c-row__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: var(--fs-xs);
  }

  @media (max-width: 520px) {
    .c-row__badge {
      display: none;
    }
  }

  /* ================================================ badges, tags, skeletons */

  .c-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
  }

  .c-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .c-skeletons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .c-row--skeleton {
    pointer-events: none;
  }

  .c-skel-art {
    flex: none;
    width: 48px;
    height: 48px;
  }

  .c-skel-line {
    width: 70%;
    height: 12px;
    margin-block: 3px;
  }

  .c-skel-line--short {
    width: 40%;
  }

  .c-skel-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0;
  }

  .c-card--skeleton {
    pointer-events: none;
  }

  .c-card--skeleton:hover {
    transform: none;
    box-shadow: none;
  }

  /* ============================================================== carousel */

  .c-carousel__track {
    --card-w: 176px;
    gap: var(--sp-3);
    margin-inline: calc(var(--sp-2) * -1);
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
    scroll-padding-inline: var(--sp-2);
  }

  .c-carousel__item {
    width: var(--card-w);
    scroll-snap-align: start;
  }

  .c-carousel__nav {
    display: inline-flex;
    gap: var(--sp-1);
  }

  @media (hover: none) {
    .c-carousel__nav {
      display: none;
    }
  }

  /* =============================================================== overlays */

  html.is-scroll-locked #view {
    overflow: hidden;
  }

  /* ---- modal */

  .c-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: max(var(--sp-4), var(--safe-top)) max(var(--sp-4), var(--safe-right)) max(var(--sp-4), var(--safe-bottom)) max(var(--sp-4), var(--safe-left));
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .c-modal.is-open {
    opacity: 1;
  }

  .c-modal.is-closing {
    opacity: 0;
    pointer-events: none;
  }

  .c-modal--sm { --modal-w: 400px; }
  .c-modal--md { --modal-w: 540px; }
  .c-modal--lg { --modal-w: 820px; }

  .c-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, var(--modal-w, 540px));
    max-height: min(88dvh, 760px);
    background-color: var(--surface-strong);
    box-shadow: var(--shadow-2);
    transform: translateY(14px) scale(0.98);
    transition: transform var(--dur-3) var(--ease-out);
  }

  .c-modal.is-open .c-modal__panel {
    transform: none;
  }

  .c-modal__panel:focus {
    outline: none;
  }

  .c-modal__head,
  .c-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-5);
  }

  .c-modal__head:not(:has(.c-modal__title)),
  .c-sheet__head:not(:has(.c-sheet__title)) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: var(--sp-2);
  }

  .c-modal__title,
  .c-sheet__title {
    min-width: 0;
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .c-modal__body,
  .c-sheet__body {
    flex: 1;
    min-height: 0;
    padding: var(--sp-2) var(--sp-5) var(--sp-5);
  }

  .c-modal__text {
    color: var(--text-dim);
  }

  .c-modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--border);
  }

  .c-modal__error {
    color: var(--danger);
  }

  /* ---- sheet: side drawer on desktop, bottom sheet on compact screens */

  .c-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--scrim);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .c-sheet.is-open {
    opacity: 1;
  }

  .c-sheet.is-closing {
    opacity: 0;
    pointer-events: none;
  }

  .c-sheet__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    border-width: 0 0 0 1px;
    border-radius: 0;
    background-color: var(--surface-strong);
    background-image: none;
    clip-path: none;
    box-shadow: var(--shadow-2);
    transform: translateX(32px);
    transition: transform var(--dur-3) var(--ease-out);
  }

  .c-sheet.is-open .c-sheet__panel {
    transform: none;
  }

  .c-sheet__panel:focus {
    outline: none;
  }

  .c-sheet__grip {
    display: none;
  }

  .c-sheet__body {
    padding-bottom: var(--sp-5);
  }

  .c-sheet--bottom .c-sheet__panel {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 90dvh;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }

  .c-sheet--bottom.is-open .c-sheet__panel {
    transform: none;
  }

  .c-sheet--bottom .c-sheet__grip {
    display: block;
    flex: none;
    align-self: center;
    width: 64px;
    height: 20px;
    margin-top: var(--sp-1);
    cursor: grab;
    touch-action: none;
  }

  .c-sheet--bottom .c-sheet__grip::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--border-strong);
  }

  /* ---- menu (anchored popover; bottom sheet on compact screens) */

  .c-menu-layer {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 1);
  }

  .c-menu-layer--sheet {
    background: var(--scrim);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
  }

  .c-menu-layer--sheet.is-open {
    opacity: 1;
  }

  .c-menu-layer.is-closing {
    pointer-events: none;
  }

  .c-menu {
    position: fixed;
    min-width: 232px;
    max-width: min(340px, calc(100vw - 16px));
    padding: var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface-strong);
    box-shadow: var(--shadow-2), var(--glow-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }

  .c-menu.is-up {
    transform: translateY(6px) scale(0.97);
    transform-origin: bottom right;
  }

  .c-menu-layer.is-open .c-menu {
    opacity: 1;
    transform: none;
  }

  .c-menu-layer.is-closing .c-menu {
    opacity: 0;
  }

  .c-menu:focus {
    outline: none;
  }

  .c-menu--sheet {
    inset: auto 0 0 0;
    min-width: 0;
    max-width: none;
    max-height: 82dvh;
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-bottom));
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 1;
    transform: translateY(100%);
    transform-origin: bottom center;
  }

  .c-menu-layer.is-open .c-menu--sheet {
    transform: none;
  }

  .c-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: 42px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    text-align: left;
    transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }

  .c-menu__item:hover,
  .c-menu__item:focus-visible {
    background: var(--surface-active);
    outline: none;
  }

  .c-menu__item:focus-visible {
    box-shadow: inset 0 0 0 1px var(--accent);
  }

  .c-menu__item:disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .c-menu__item.is-danger {
    color: var(--danger);
  }

  .c-menu__item.is-checked {
    color: var(--accent);
  }

  .c-menu__icon {
    display: inline-flex;
    flex: none;
    width: 18px;
    color: var(--text-dim);
  }

  .c-menu__item.is-checked .c-menu__icon,
  .c-menu__item.is-danger .c-menu__icon {
    color: inherit;
  }

  .c-menu__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .c-menu__check {
    display: inline-flex;
    flex: none;
    width: 16px;
    color: var(--accent);
  }

  .c-menu__sep {
    height: 1px;
    margin: var(--sp-2) var(--sp-1);
    background: var(--border);
  }

  .c-menu__header {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    color: var(--text-mute);
    font-family: var(--font-display);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  @media (pointer: coarse) {
    .c-menu__item {
      min-height: 48px;
    }
  }

  /* ---- toasts */

  #toasts {
    position: fixed;
    right: max(var(--sp-4), var(--safe-right));
    bottom: calc(var(--player-h) + var(--sp-4) + var(--safe-bottom));
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: min(400px, calc(100vw - var(--sp-4) * 2));
    pointer-events: none;
  }

  :root[data-mode='mobile'] #toasts {
    right: var(--sp-3);
    left: var(--sp-3);
    bottom: calc(var(--tabbar-h) + var(--mini-player-h) + var(--safe-bottom) + var(--sp-3));
    width: auto;
  }

  :root[data-mode='car'] #toasts,
  :root[data-mode='ambient'] #toasts {
    z-index: calc(var(--z-ambient) + 1);
    bottom: var(--sp-5);
  }

  .c-toast {
    --toast-c: var(--info);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    border-left: 3px solid var(--toast-c);
    background-color: var(--surface-strong);
    box-shadow: var(--shadow-1), 0 0 24px -10px var(--toast-c);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
  }

  .c-toast--success { --toast-c: var(--ok); }
  .c-toast--warn { --toast-c: var(--warn); }
  .c-toast--error { --toast-c: var(--danger); }

  .c-toast.is-open {
    opacity: 1;
    transform: none;
  }

  .c-toast.is-closing {
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
  }

  .c-toast__icon {
    display: inline-flex;
    flex: none;
    color: var(--toast-c);
  }

  .c-toast__text {
    flex: 1;
    min-width: 0;
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .c-toast__action {
    flex: none;
    color: var(--toast-c);
  }

  .c-toast__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--toast-c);
    box-shadow: 0 0 8px var(--toast-c);
    transform-origin: left;
    animation: c-toast-bar var(--toast-ms, 4000ms) linear forwards;
  }

  .c-toast.is-paused .c-toast__bar {
    animation-play-state: paused;
  }

  @keyframes c-toast-bar {
    to {
      transform: scaleX(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-toast__bar {
      display: none;
    }
  }

  :root[data-reduce-motion] .c-toast__bar {
    display: none;
  }
}