@layer reset, base, components, views, states, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  [hidden] { display: none !important; }
}

@layer base {
  :root {
    --header-block-size: clamp(3.5rem, 7dvh, 4rem);
    --dock-block-size: 4rem;
    --nav-block-size: 4rem;
    --nav-gap: var(--space-4);
    --nav-space: calc(var(--nav-block-size) + var(--nav-gap) + var(--safe-bottom));
    --rail-inline-size: 6rem;
    --content-max: 90rem;
    --content-edge: max(var(--space-6), calc((100vw - var(--rail-inline-size) - var(--space-4) - var(--content-max)) / 2 + var(--space-6)));
    --rail-tail: calc(var(--space-4) + var(--space-3) + 3.5rem + var(--space-4) + 4 * 4rem + 3 * var(--space-2));
  }

  html, body {
    inline-size: 100%;
    block-size: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--page-bg) var(--bg);
    color: var(--tx);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    font-variant-numeric: tabular-nums lining-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
  }

  input, textarea, [contenteditable],
  .pinned-card-text, .comment-text {
    user-select: text;
    -webkit-user-select: text;
  }

  button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex="0"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}

@layer components {
  input:focus,
  input:focus-visible,
  textarea:focus,
  textarea:focus-visible,
  .form-input:focus,
  .form-input:focus-visible,
  .form-textarea:focus,
  .form-textarea:focus-visible,
  .search-input:focus,
  .search-input:focus-visible,
  .room-comment-input:focus,
  .room-comment-input:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 0;
    background-color: var(--field);
  }

  .icon, .icon-xs, .icon-sm {
    flex-shrink: 0;
    pointer-events: none;
  }
  .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  .icon-xs { inline-size: 0.75rem; block-size: 0.75rem; }
  .icon-sm { inline-size: 1rem; block-size: 1rem; }

  .track-meta,
  .playlist-view-title,
  .room-card-title,
  .stage-seat-name,
  .pinned-card-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .form-input, .form-textarea, .search-input, .room-comment-input {
    inline-size: 100%;
    background-color: var(--field);
    border: 0;
    border-radius: var(--r-full);
    color: var(--tx);
    font-family: inherit;
    font-size: var(--fs-input);
    line-height: var(--leading-normal);
    outline: none;
  }

  .btn-icon,
  .btn-icon-subtle,
  .btn-chat-circle,
  .btn-card-menu,
  .btn-create-room-fab,
  .btn-room-leave,
  .btn-room-fab,
  .btn-action-tonal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    border: none;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: transform var(--transition-fast);
  }
  .btn-icon:active,
  .btn-icon-subtle:active,
  .btn-chat-circle:active,
  .btn-card-menu:active,
  .btn-create-room-fab:active,
  .btn-room-leave:active,
  .btn-room-fab:active,
  .btn-action-tonal:active {
    transform: scale(0.92);
  }

  .btn-icon {
    inline-size: var(--tap);
    block-size: var(--tap);
    color: var(--tx2);
  }
  .btn-icon:hover { background-color: var(--sheet2); color: var(--tx); }

  .btn-card-menu {
    inline-size: var(--tap);
    block-size: var(--tap);
    color: var(--tx2);
    order: 10;
    flex-shrink: 0;
  }
  .btn-card-menu:hover,
  .btn-card-menu[aria-expanded="true"] {
    background-color: var(--sheet2);
    color: var(--tx);
  }

  .btn-circle-header,
  .btn-glass-icon {
    inline-size: var(--tap);
    block-size: var(--tap);
    border-radius: var(--r-full);
    background-color: var(--sf);
    color: var(--tx2);
    flex-shrink: 0;
  }
  .btn-circle-header:hover,
  .btn-circle-header[aria-expanded="true"],
  .btn-glass-icon:hover,
  .btn-glass-icon[aria-expanded="true"] {
    background-color: var(--acs);
    color: var(--ac);
  }

  .btn-icon-subtle {
    inline-size: var(--tap);
    block-size: var(--tap);
    color: var(--tx2);
    padding: 0.25rem;
  }
  .btn-icon-subtle:hover { color: var(--ac); background-color: var(--acs); }

  .speed-indicator {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    direction: ltr;
    pointer-events: none;
  }

  .btn-chat-circle {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--r-full);
    background-color: var(--acf);
    color: var(--onac);
    border: none;
    flex-shrink: 0;
  }
  .btn-chat-circle:hover { background-color: var(--acf); }
  .btn-chat-circle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }


  .btn-primary-block, .btn-danger-tonal {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 3rem;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-normal);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: transform var(--transition-fast);
  }
  .btn-primary-block {
    background-color: var(--acf);
    color: var(--onac);
    border: none;
  }
  .btn-primary-block:hover { background-color: var(--acf); }
  .btn-primary-block:active { background-color: var(--acf); transform: scale(0.98); }

  .btn-danger-tonal {
    background-color: var(--dgf);
    border: none;
    color: var(--on-fill);
    margin-block-start: var(--space-2);
  }
  .btn-danger-tonal:hover {
    background-color: color-mix(in srgb, var(--dgf) 88%, var(--bg));
  }
  .btn-danger-tonal:active {
    transform: scale(0.98);
  }

  .app-flyout-menu {
    position: absolute;
    z-index: var(--z-overlay);
    min-inline-size: 11.5rem;
    max-inline-size: min(85vw, 16rem);
    background-color: var(--pop);
    border-radius: var(--r-card);
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    animation: panel-slide-down var(--transition-fast);
  }

  .flyout-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--space-2) var(--space-3);
    min-block-size: 2.875rem;
    border: none;
    background: transparent;
    color: var(--tx);
    font-family: inherit;
    font-size: 0.9375rem;
    border-radius: var(--r-badge);
    cursor: pointer;
    text-align: start;
    inline-size: 100%;
    white-space: nowrap;
    user-select: none;
    touch-action: manipulation;
  }
  .flyout-item svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex-shrink: 0;
    fill: currentColor;
  }
  .flyout-item:hover,
  .flyout-item:focus-visible {
    background-color: var(--acs);
    color: var(--ac);
  }
  .flyout-sep {
    block-size: 1px;
    margin: 0.375rem var(--space-2);
    background-color: var(--bd);
  }
  .flyout-item[data-action*="delete"]:hover,
  .flyout-item[data-action*="delete"]:focus-visible {
    background-color: color-mix(in srgb, var(--dg) 15%, transparent);
    color: var(--dg);
  }

  .app-root {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-block-start: var(--safe-top);
    padding-inline-end: var(--safe-right);
    padding-inline-start: var(--safe-left);
  }

  .app-header {
    block-size: var(--header-block-size);
    inline-size: 100%;
    display: flex;
    align-items: center;
    padding-inline: var(--space-4);
    background: transparent;
    z-index: var(--z-sticky);
    flex-shrink: 0;
  }

  .header-main-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
  }

  .header-search-bar {
    flex: 1;
    min-inline-size: 0;
    display: flex;
  }
  .header-search-bar .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    inline-size: 100%;
  }
  .btn-search-clear {
    position: absolute;
    inset-inline-end: 0;
    inline-size: var(--tap);
    block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: radial-gradient(circle, var(--sf2) 0.875rem, transparent 0.9rem);
    color: var(--tx2);
    cursor: pointer;
  }
  .header-search-bar .search-icon {
    position: absolute;
    inset-inline-start: var(--space-3);
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--tx3);
    pointer-events: none;
  }
  .header-search-bar .search-input {
    block-size: var(--tap);
    padding-inline-start: 2.5rem;
    padding-inline-end: var(--tap);
    background-color: var(--sf);
    border: 0;
    border-radius: var(--r-full);
    font-size: var(--fs-body);
    color: var(--tx);
  }
  .header-search-bar .search-input:focus,
  .header-search-bar .search-input:focus-visible {
    background-color: var(--sf);
  }
  .search-recent {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline: 0;
    z-index: var(--z-overlay);
    list-style: none;
    padding: var(--space-1);
    background-color: var(--pop);
    border-radius: var(--r-card);
    display: flex;
    flex-direction: column;
    animation: panel-slide-down var(--transition-fast);
  }
  .search-recent-row {
    display: flex;
    align-items: center;
  }
  .search-recent-item {
    flex: 1;
    min-inline-size: 0;
    min-block-size: var(--tap);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--r-ctl);
    background: transparent;
    color: var(--tx);
    font: inherit;
    font-size: var(--fs-body);
    text-align: start;
    cursor: pointer;
  }
  .search-recent-item .icon { color: var(--tx3); }
  .search-recent-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-recent-remove {
    inline-size: var(--tap);
    block-size: var(--tap);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
  }
  .search-recent-item:hover,
  .search-recent-item:focus-visible,
  .search-recent-remove:hover,
  .search-recent-remove:focus-visible {
    background-color: var(--sf2);
  }
  .search-input::-webkit-search-cancel-button,
  .search-input::-webkit-search-decoration,
  .search-input::-webkit-search-results-button,
  .search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .header-room-pill {
    flex: 1;
    min-inline-size: 0;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-2);
    background-color: var(--sf);
    border-radius: var(--r-full);
    animation: panel-slide-down var(--transition-fast);
  }
  .room-pill-status {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    padding-inline: var(--space-2);
  }
  .room-pill-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--r-full);
    background-color: var(--ok);
    flex-shrink: 0;
    animation: pulse-live 1.6s infinite ease-in-out;
  }
  .room-pill-label {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-pill-label.is-track-flash {
    color: var(--ok);
    animation: pill-track-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1), pill-track-pulse 1.2s ease-in-out 450ms 1;
  }
  @keyframes pill-track-in {
    from { opacity: 0; transform: translateX(1.5rem); }
    to { opacity: 1; transform: none; }
  }
  @keyframes pill-track-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-pill-label.is-track-flash { animation: none; }
  }
  .engine-status-indicator {
    --tone: var(--ac);
    position: fixed;
    inset-block-start: calc(var(--safe-top) + var(--space-3));
    inset-inline: var(--space-4);
    max-inline-size: 28rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 3.25rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--pop);
    color: var(--tx);
    border-radius: var(--r-card);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
    z-index: var(--z-toast);
    pointer-events: none;
    animation: toast-in var(--transition-base);
  }
  .engine-status-indicator::before {
    content: "";
    flex-shrink: 0;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--r-full);
    background-color: color-mix(in srgb, var(--tone) 16%, transparent);
  }
  .engine-status-indicator::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.75rem;
    inset-block-start: calc(50% - 1rem);
    inline-size: 2rem;
    block-size: 2rem;
    background-color: var(--tone);
    -webkit-mask: var(--toast-icon);
    mask: var(--toast-icon);
  }
  .engine-status-indicator.is-notice { --tone: var(--ac); --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.5v7.5M12 6v.01'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }
  .engine-status-indicator.is-success { --tone: var(--ok); --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }
  .engine-status-indicator.is-danger { --tone: var(--dg); --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5v8.5M12 18.5v.01'/%3E%3C/svg%3E") center / 1.25rem no-repeat; }
  .engine-status-indicator.has-action { pointer-events: auto; }
  .engine-status-indicator.is-dismissible { pointer-events: auto; touch-action: none; cursor: grab; user-select: none; }
  .notice-retry {
    flex-shrink: 0;
    margin-inline-start: auto;
    min-block-size: var(--tap);
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--r-badge);
    background-color: var(--acs);
    color: var(--tx);
    font: inherit;
    font-size: var(--fs-label);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }
  .notice-retry:disabled { opacity: 0.6; cursor: default; }
  @keyframes toast-in {
    from { opacity: 0; transform: translate3d(0, -0.75rem, 0); }
    to { opacity: 1; transform: none; }
  }

  .btn-notifications { position: relative; }
  .btn-notifications.has-unread svg {
    animation: bell-ring 2.2s infinite ease-in-out;
    transform-origin: top center;
  }
  @keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(15deg); }
    20%, 40% { transform: rotate(-15deg); }
    50% { transform: rotate(0); }
  }

  .notifications-badge {
    position: absolute;
    inset-block-start: -0.125rem;
    inset-inline-end: -0.125rem;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: var(--r-full);
    background-color: var(--dgf);
    color: var(--on-fill);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums lining-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    border: none;
  }

  .notifications-panel {
    position: absolute;
    inset-block-start: calc(var(--header-block-size) + var(--space-2));
    inset-inline: var(--space-4);
    max-inline-size: 28rem;
    margin-inline: auto;
    background-color: var(--pop);
    border-radius: var(--r-card);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panel-slide-down var(--transition-fast);
  }
  @keyframes panel-slide-down {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
  }

  .notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--bd);
  }
  .notifications-title { font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--tx); }
  .notifications-list { display: flex; flex-direction: column; padding: var(--space-3); gap: var(--space-3); max-block-size: 22rem; overflow-y: auto; }

  .notification-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--sheet2);
    border: none;
    border-radius: var(--r-card);
  }
  .notification-card-title { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; font-weight: var(--font-weight-semibold); color: var(--tx); }
  .notification-card-desc { font-size: 0.875rem; color: var(--tx2); line-height: var(--leading-normal); }

  .main-viewport {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-4) calc(var(--dock-h, var(--dock-block-size)) + var(--nav-space) + var(--space-6));
    scroll-padding-block-end: calc(var(--dock-h, var(--dock-block-size)) + var(--nav-space) + var(--space-6));
    display: flex;
    flex-direction: column;
    position: relative;
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black calc(100% - (var(--dock-h, var(--dock-block-size)) + var(--nav-space) + var(--space-8))),
      transparent calc(100% - (var(--nav-space) + var(--space-2)))
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black calc(100% - (var(--dock-h, var(--dock-block-size)) + var(--nav-space) + var(--space-8))),
      transparent calc(100% - (var(--nav-space) + var(--space-2)))
    );
  }

  .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    min-block-size: 50vh;
    grid-column: 1 / -1;
  }
  .empty-state-icon {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .empty-state-icon svg {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .empty-state-title {
    font-size: var(--fs-card);
    font-weight: var(--font-weight-bold);
    color: var(--tx);
  }
  .empty-state-text {
    font-size: var(--fs-2);
    color: var(--tx2);
    max-inline-size: 22rem;
  }
  .empty-state-action {
    inline-size: auto;
    min-inline-size: 10rem;
    margin-block-start: var(--space-2);
  }

  .pill-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: var(--space-1);
  }
  .pill-row::-webkit-scrollbar { display: none; }
  .pill-btn {
    flex-shrink: 0;
    block-size: var(--tap);
    padding-inline: var(--space-4);
    border-radius: var(--r-full);
    border: 0;
    background-color: var(--sf);
    color: var(--tx2);
    font: inherit;
    font-size: var(--fs-2);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    touch-action: manipulation;
  }
  .pill-btn[aria-selected="true"] {
    background-color: var(--acf);
    color: var(--onac);
  }

  .panel-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-block: var(--space-8);
    text-align: center;
    color: var(--tx2);
  }
  .placeholder-desc { font-size: var(--fs-label); max-inline-size: 18rem; }

  .playlist-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .playlist-title-wrap {
    flex: 1;
    min-inline-size: 0;
  }
  .playlist-view-title {
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--tx);
  }
  .playlist-view-artist {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-3);
  }
  .playlist-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    min-block-size: 6.5rem;
    padding: var(--space-3);
    background: var(--card-bg);
    border: 0;
    border-radius: var(--r-card);
    color: var(--tx);
    font: inherit;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast);
  }
  .playlist-card:active { transform: scale(0.985); }
  .playlist-card-title {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .playlist-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .playlist-card-count {
    min-inline-size: 2rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--r-full);
    background-color: var(--sf);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    direction: ltr;
  }
  .playlist-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
  }
  .playlist-card-icon svg { inline-size: 1.125rem; block-size: 1.125rem; }

  .skeleton-card, .skeleton-row {
    display: flex;
    pointer-events: none;
  }
  .skeleton-card {
    flex-direction: column;
    justify-content: space-between;
    min-block-size: 6.5rem;
    padding: var(--space-3);
    background: var(--card-bg);
    border-radius: var(--r-card);
  }
  .skeleton-row {
    align-items: center;
    gap: var(--space-3);
    min-block-size: 4.25rem;
    padding-inline: var(--space-2) var(--space-4);
  }
  .skeleton-row + .skeleton-row { border-block-start: 1px solid var(--bd); }
  .sk {
    display: block;
    border-radius: 0.5rem;
    background-color: var(--sf2);
    animation: sk-pulse 1.6s ease-in-out infinite;
  }
  .sk-line { block-size: 0.875rem; inline-size: 70%; flex: 1; max-inline-size: 70%; }
  .skeleton-card .sk-line { flex: none; }
  .sk-chip { block-size: 1.5rem; inline-size: 2.5rem; border-radius: var(--r-full); }
  .sk-dot { block-size: 2rem; inline-size: 2rem; border-radius: var(--r-full); flex: none; }
  .sk-btn { block-size: 1.5rem; inline-size: 1.5rem; border-radius: var(--r-full); flex: none; margin-inline-start: auto; }
  .skeleton-room { justify-content: flex-start; gap: var(--space-3); padding: 14px; min-block-size: 0; }
  .sk-room-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .sk-room-top .sk-line { flex: none; inline-size: 55%; }
  .sk-room-top .sk-chip { inline-size: 4.5rem; }
  .sk-avatar { block-size: 36px; inline-size: 36px; border-radius: var(--r-full); }
  .sk-short { inline-size: 35%; max-inline-size: 35%; }
  @keyframes sk-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sk { animation: none; }
  }

  .tracks-list { display: flex; flex-direction: column; }
  .tracks-list.is-group {
    background: var(--card-bg);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  .track-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 4.25rem;
    padding-inline: var(--space-2) var(--space-1);
    content-visibility: auto;
    contain-intrinsic-size: auto 4.25rem;
  }
  .track-item + .track-item { border-block-start: 1px solid var(--bd); }
  .track-item.is-playing { background-color: var(--acs); }
  .track-hit {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 4.25rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;
  }
  .track-num {
    inline-size: 2rem;
    block-size: 2rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    background-color: var(--sf2);
    color: var(--tx2);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    direction: ltr;
  }
  .track-item.is-playing .track-num { background-color: var(--acf); color: var(--onac); }
  .track-info { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.125rem; }
  .track-name {
    font-size: 1rem;
    line-height: 1.375rem;
    color: var(--tx);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .track-item.is-playing .track-name { color: var(--ac); font-weight: var(--font-weight-semibold); }
  .track-meta { font-size: 0.875rem; line-height: 1.25rem; color: var(--tx3); }
  .track-item .btn-icon { inline-size: var(--tap); block-size: var(--tap); color: var(--tx2); flex: none; }
  .track-item.is-saved .track-dl { color: var(--ok); }
  .track-item.is-resume .track-num { background-color: var(--acs); color: var(--ac); }
  .track-num svg { inline-size: 1rem; block-size: 1rem; }
  .track-item.is-resume .track-num svg { inline-size: 1.25rem; block-size: 1.25rem; }

  .rooms-lobby-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: 100%;
  }
  .room-float {
    position: fixed;
    inset-inline-start: var(--space-4);
    inset-block-end: calc(var(--nav-space) + var(--space-3));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    z-index: var(--z-player);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .room-float.is-placed { inset: auto; }
  .room-float-main {
    position: relative;
    inline-size: 64px;
    block-size: 64px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(var(--acs), var(--acs)), var(--sheet);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .room-float-main:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 3px; }
  .room-float-live {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--r-full);
    background-color: var(--ok);
    animation: pulse-live 1.6s infinite ease-in-out;
  }
  .room-mini-avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .room-mini-avatar.is-talking {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
  }
  .room-mini-action.btn-room-fab {
    inline-size: var(--tap);
    block-size: var(--tap);
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .room-float-live { animation: none; }
  }
  .rooms-lobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-3);
  }

  .room-card {
    display: flex;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 0;
    border-radius: var(--r-card);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast);
  }
  .room-card:active {
    transform: scale(0.985);
  }
  .room-card-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-inline-size: 0;
    flex: 1;
  }
  .room-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .room-card-title {
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
    line-height: var(--leading-tight);
    min-inline-size: 0;
  }
  .room-card-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .room-status-chip {
    --tone: var(--wait);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background-color: var(--acs);
    background-color: color-mix(in srgb, var(--tone) 16%, transparent);
    color: var(--tone);
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }
  .room-status-chip.is-live { --tone: var(--ok); }
  .room-status-chip.is-host { --tone: var(--host); }
  .room-card-note {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
  }
  .room-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-inline-size: 0;
  }
  .room-card-hostrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .room-card-people {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .room-card-speaker,
  .room-card-people > .room-card-badge {
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--r-full);
    flex-shrink: 0;
  }
  .room-card-avatar,
  .room-card-badge {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .room-card-avatar {
    position: relative;
    background-color: var(--sf);
    color: var(--ac);
  }
  .room-card-avatar::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid var(--ok);
    pointer-events: none;
    animation: live-breathe 2.2s ease-in-out infinite;
  }
  .room-card-avatar > svg:not(.avatar-letter) {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
  }
  .room-card-badge {
    background-color: var(--sf);
    color: var(--tx);
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .room-card-host {
    font-size: 14px;
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
  }
  .room-card.is-offscreen .room-card-avatar::before { animation-play-state: paused; }
  @keyframes live-breathe {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce) {
    .room-card-avatar::before { animation: none; opacity: 0.7; }
  }

  .btn-create-room-fab {
    position: fixed;
    inset-inline-start: var(--space-4);
    inset-block-end: calc(var(--nav-space) + var(--space-3));
    block-size: var(--tap);
    padding-inline: var(--space-4);
    gap: var(--space-2);
    border-radius: var(--r-full);
    background: var(--acf);
    border: 0;
    color: var(--onac);
    font-family: inherit;
    font-size: var(--fs-2);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    z-index: calc(var(--z-sticky) + 1);
  }
  #btn-create-room-fab::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid var(--acf);
    pointer-events: none;
    animation: live-breathe 2.2s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    #btn-create-room-fab::before { animation: none; opacity: 0.7; }
  }
  .btn-create-room-fab svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .rooms-inside-panel {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    flex: 1;
    justify-content: space-between;
    gap: var(--space-2);
    position: relative;
  }

  .room-stage-section {
    inline-size: 100%;
    padding-block-start: var(--space-1);
  }
  .room-stage-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: 24rem;
    margin-inline: auto;
    gap: var(--space-2);
  }
  .stage-seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-inline-size: 0;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
  }
  .stage-seat-avatar-wrap {
    position: relative;
    inline-size: 68px;
    block-size: 68px;
    border-radius: var(--r-full);
    background-color: var(--sheet);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac);
    flex-shrink: 0;
  }
  .stage-seat-avatar-wrap svg {
    inline-size: 2rem;
    block-size: 2rem;
    fill: currentColor;
  }
  .stage-seat.is-host .stage-seat-avatar-wrap {
    background-color: color-mix(in srgb, var(--ok) 12%, var(--sheet));
    color: var(--ok);
  }
  .stage-seat.is-empty .stage-seat-avatar-wrap {
    background-color: var(--seat-empty);
    color: var(--ac);
  }
  .stage-seat.is-speaking .stage-seat-avatar-wrap {
    background-color: color-mix(in srgb, var(--ok) 20%, var(--sheet));
  }
  .stage-seat.is-away .stage-seat-avatar-wrap {
    opacity: 0.55;
  }
  .stage-seat.is-away .stage-seat-name { opacity: 0.7; }
  .stage-seat.is-closing .stage-seat-avatar-wrap {
    opacity: 1;
    background-color: var(--sheet);
    outline: 2px solid var(--warn);
    outline-offset: 3px;
  }
  .stage-seat-countdown {
    color: var(--warn);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums lining-nums;
    direction: ltr;
  }
  .stage-seat.is-talking .stage-seat-avatar-wrap {
    outline: 2px solid var(--ac);
    outline-offset: 3px;
  }
  .stage-seat-mic {
    position: absolute;
    inset-block-end: -0.125rem;
    inset-inline-end: -0.125rem;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sheet);
    color: var(--dg);
  }
  .stage-seat-mic svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }
  .stage-seat-mic.is-off,
  .stage-seat-mic.is-locked {
    inset: 0;
    inline-size: auto;
    block-size: auto;
    background-color: var(--dim);
    color: var(--on-fill);
  }
  .stage-seat-mic.is-off svg,
  .stage-seat-mic.is-locked svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
  .stage-seat-mic.is-locked {
    background-color: color-mix(in srgb, var(--dgf) 55%, var(--dim));
  }
  .stage-seat-mic.is-device {
    background-color: var(--acf);
    color: var(--onac);
  }
  .stage-seat-badge {
    position: absolute;
    inset-block-end: -0.6875rem;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sheet);
    color: var(--ac);
    pointer-events: none;
    z-index: 1;
  }
  .stage-seat-avatar-wrap .stage-seat-badge svg {
    inline-size: 0.8125rem;
    block-size: 0.8125rem;
  }
  .stage-seat-crown { color: var(--host); }
  .mod-avatar.avatar > svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }
  .stage-seat-hand {
    position: absolute;
    inset-block-start: -0.375rem;
    inset-inline-end: -0.25rem;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--r-full);
    background-color: var(--warn);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: pulse-live 1.6s infinite ease-in-out;
  }
  .stage-seat-hand svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }
  .stage-seat-hand.is-speaking-signal {
    animation: pulse-live 0.8s infinite ease-in-out;
    transform: scale(1.15);
  }
  .stage-seat-name {
    font-size: var(--fs-label);
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
    text-align: center;
    max-inline-size: 100%;
  }

  .reaction-badge-pop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: reaction-pop 1.8s ease-in-out forwards;
    pointer-events: none;
    z-index: var(--z-elevated);
  }
  @keyframes reaction-pop {
    0% { transform: scale(0.4); opacity: 0; }
    25% { transform: scale(1.25); opacity: 1; }
    75% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.7); opacity: 0; }
  }

  .room-listeners-section {
    inline-size: 100%;
  }
  .room-listeners-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    inline-size: 100%;
    padding-block: var(--space-1);
  }
  .listener-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    touch-action: manipulation;
    user-select: none;
  }
  .listener-avatar {
    position: relative;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background-color: var(--sf);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ac);
    flex-shrink: 0;
  }
  button.listener-avatar { cursor: pointer; }
  button.listener-avatar::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
  }
  .listener-avatar svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: currentColor;
  }
  .listener-avatar.is-more {
    background-color: var(--sf);
    color: var(--tx);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
  }
  .listener-name {
    font-size: var(--fs-label);
    color: var(--tx2);
    text-align: center;
    max-inline-size: 3.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .room-pinned-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--card-bg);
    border-radius: var(--r-card);
    margin-block: var(--space-1);
  }
  .pinned-card-side-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .pinned-gray-icon {
    color: var(--tx2);
  }
  .pinned-card-body {
    flex: 1;
    min-inline-size: 0;
  }
  .pinned-card-text {
    font-size: var(--fs-2);
    color: var(--tx2);
    line-height: var(--leading-normal);
    white-space: normal;
  }
  .pinned-card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
  }

  .room-chat-section {
    flex: 1 1 0;
    min-block-size: 6rem;
    overflow-y: auto;
    padding-block: var(--space-4) var(--space-2);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-6));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--space-6));
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .room-comments-flow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: auto;
  }
  .room-comment-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 100%;
  }
  .comment-avatar {
    inline-size: 42px;
    block-size: 42px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background-color: var(--sf);
    color: var(--ac);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .comment-avatar > svg:not(.avatar-letter) {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: currentColor;
  }
  .comment-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: 6px;
  }
  .comment-avatar > .comment-avatar-logo {
    object-fit: cover;
    padding: 0;
  }
  .comment-body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }
  .comment-author {
    font-size: 13px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
    color: var(--tx3);
  }
  .comment-text {
    font-size: 15px;
    line-height: 22px;
    color: var(--tx);
    word-break: break-word;
    white-space: normal;
  }
  .comment-text a {
    color: var(--ac);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .room-comment-bubble.is-system .comment-body { flex: 1; }
  .room-comment-bubble.is-system .comment-text { text-align: justify; text-align-last: start; }
  .comment-notice-tag {
    display: inline-block;
    margin-inline-end: 0.375rem;
    padding-inline: 0.5rem;
    border-radius: 6px;
    background-color: var(--acf);
    color: var(--onac);
    font-size: 13px;
    line-height: 20px;
    font-weight: var(--font-weight-semibold);
  }

  .room-active-dock {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: 100%;
    position: relative;
    z-index: var(--z-sticky);
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom, 0px));
  }

  .room-dock-row {
    display: flex;
    inline-size: 100%;
  }

  .room-dock-actions-row {
    position: relative;
    align-items: center;
    justify-content: center;
    align-self: center;
    inline-size: auto;
    max-inline-size: 100%;
    gap: var(--space-4);
    block-size: 72px;
    padding-inline: 10px;
    border-radius: var(--r-dock);
    background-color: var(--nav);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
  @supports not (backdrop-filter: blur(1px)) {
    .room-dock-actions-row { background-color: var(--nav-solid); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .room-dock-actions-row { background-color: var(--nav-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  .btn-room-fab,
  .btn-room-leave {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--r-full);
    background-color: var(--sf);
    color: var(--tx);
    flex-shrink: 0;
    position: relative;
  }
  .btn-room-fab:hover {
    background-color: var(--sf2);
  }
  .btn-room-fab.is-hand-fab.is-active {
    background-color: var(--warn);
    color: var(--onac);
  }
  .btn-room-fab.is-mic-fab {
    color: var(--tx);
  }
  .btn-room-fab.is-mic-fab.is-active,
  .btn-room-fab.is-device-fab[aria-pressed="true"] {
    background-color: var(--acf);
    color: var(--onac);
  }
  .btn-room-fab.is-mic-fab.is-locked {
    background-color: var(--dgf);
    color: var(--on-fill);
  }
  .fab-lock {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--r-full);
    background-color: var(--sheet);
    color: var(--dg);
    display: none;
    align-items: center;
    justify-content: center;
  }
  .fab-lock svg { inline-size: 0.6875rem; block-size: 0.6875rem; }
  .btn-room-fab.is-locked .fab-lock { display: inline-flex; }
  .btn-room-fab.is-reaction-fab {
    color: var(--tx);
  }
  .btn-room-fab.is-reaction-fab svg {
    fill: currentColor;
    inline-size: 2rem;
    block-size: 2rem;
  }

  .btn-room-leave {
    background-color: var(--dgf);
    color: var(--on-fill);
  }
  .btn-room-leave:hover {
    background-color: var(--dgf);
    filter: brightness(1.08);
  }
  .btn-room-leave svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .room-reactions-menu {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    left: 50%;
    translate: -50% 0;
    transform-origin: var(--pop-origin-x, 50%) 100%;
    inline-size: max-content;
    max-inline-size: calc(100vw - 2 * var(--space-4));
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background-color: var(--pop);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-full);
    z-index: var(--z-overlay);
    animation: reactions-pop-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
  }
  @keyframes reactions-pop-in {
    from { scale: 0.15; opacity: 0; }
    to { scale: 1; opacity: 1; }
  }
  .room-now-playing {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--sheet2);
    border-radius: var(--r-card);
    z-index: var(--z-overlay);
    animation: reactions-pop-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
    transform-origin: var(--pop-origin-x, 50%) 100%;
  }
  .room-now-playing-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
  }
  .room-now-playing-label {
    font-size: var(--fs-label);
    color: var(--tx2);
  }
  .room-now-playing-title {
    font-size: var(--fs-2);
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-player-mute {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .room-player-mute[aria-pressed="true"] {
    background-color: color-mix(in srgb, var(--dg) 18%, var(--sheet));
    color: var(--dg);
  }
  .btn-reaction-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.375rem;
    block-size: 2.375rem;
    border-radius: var(--r-full);
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: transform var(--transition-fast);
  }
  .btn-reaction-item:active {
    transform: scale(1.35);
  }

  .room-dock-comment-row {
    inline-size: 100%;
  }
  .room-comment-form {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    inline-size: 100%;
    padding: 3px;
    background-color: var(--sf);
    border-radius: var(--r-full);
  }
  .room-comment-form:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .room-comment-form .room-comment-input,
  .room-comment-form .room-comment-input:focus,
  .room-comment-form .room-comment-input:focus-visible {
    flex: 1;
    min-inline-size: 0;
    block-size: 2.75rem;
    padding-inline: var(--space-2) var(--space-4);
    background-color: transparent;
    border: none;
    outline: none;
    border-radius: var(--r-full);
    font-size: var(--fs-input);
    color: var(--tx);
  }
  .form-input::placeholder, .form-textarea::placeholder, .search-input::placeholder, .room-comment-input::placeholder {
    color: var(--tx3);
    opacity: 1;
  }
  .btn-comment-send {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
    border: none;
    flex-shrink: 0;
  }
  .btn-comment-send:hover {
    background-color: var(--sf2);
  }
  .btn-comment-send svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
  }

  .room-queue-badge {
    position: absolute;
    inset-block-start: -0.125rem;
    inset-inline-end: -0.125rem;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--r-full);
    background-color: var(--warn);
    color: var(--bg);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums lining-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .modal-desc-text {
    font-size: var(--fs-label);
    color: var(--tx2);
    text-align: center;
    line-height: var(--leading-normal);
  }

  .audio-dock {
    position: fixed;
    inset-inline: var(--space-4);
    inset-block-end: calc(var(--nav-space) + 0.625rem);
    max-inline-size: calc(48rem - var(--space-4) * 2);
    margin-inline: auto;
    block-size: var(--dock-block-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: var(--space-4) var(--space-2);
    background-color: var(--pop);
    border-radius: 18px;
    overflow: hidden;
    z-index: var(--z-player);
    touch-action: manipulation;
    transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
  }
  .dock-grab,
  .dock-scrubber-row,
  .dock-controls-row { display: none; }
  .audio-dock:not(.is-docked):not(.is-player-expanded) { display: none; }
  .dock-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .dock-open {
    flex: 1;
    min-inline-size: 0;
    min-block-size: var(--tap);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tx);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .dock-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-series {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dock-series:empty { display: none; }
  .dock-mini-controls {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: none;
  }
  .dock-mini-progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 3px;
    background-color: var(--sf2);
    direction: ltr;
  }
  .dock-mini-progress span {
    display: block;
    block-size: 100%;
    inline-size: var(--seek-progress, 0%);
    background-color: var(--ac);
  }

  .player-btn {
    inline-size: var(--tap);
    block-size: var(--tap);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--tx);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  }
  .player-btn:hover { background-color: var(--sf); }
  .player-btn:active { transform: scale(0.92); }
  .player-btn.is-primary { background: var(--btn-glass-bg); border: 0; color: var(--btn-glass-ic); }
  .player-btn.is-primary:hover { background: var(--btn-glass-bg); }
  .player-btn.is-large { inline-size: 3.75rem; block-size: 3.75rem; }
  .player-btn.is-large svg { inline-size: 1.625rem; block-size: 1.625rem; }
  .player-btn.is-mode { color: var(--tx2); }
  .player-btn.is-mode.is-repeat-one { color: var(--ac); }
  .player-btn.is-speed { color: var(--tx2); }
  .player-btn.is-primary svg { fill: currentColor; }

  .audio-dock.is-player-expanded {
    inset-inline: 0;
    inset-block-end: 0;
    max-inline-size: 48rem;
    block-size: auto;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: 0.5rem var(--space-4) calc(var(--space-4) + var(--safe-bottom));
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    overflow: visible;
    z-index: var(--z-overlay);
    animation: sheet-up var(--transition-base);
  }
  .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) {
    block-size: auto;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-radius: var(--r-sheet);
  }
  .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .dock-title { white-space: nowrap; }
  .audio-dock.is-player-expanded .dock-grab,
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-grab {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    inline-size: 3rem;
    block-size: 1.5rem;
    margin-block: -0.5rem -0.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    cursor: pointer;
    touch-action: none;
  }
  .dock-grab::before {
    content: "";
    inline-size: 2.25rem;
    block-size: 0.25rem;
    border-radius: 2px;
    background-color: var(--sf2);
  }
  .dock-grab:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-mini-controls,
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-mini-progress,
  .audio-dock.is-player-expanded .dock-mini-controls,
  .audio-dock.is-player-expanded .dock-mini-progress { display: none; }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-open,
  .audio-dock.is-player-expanded .dock-open { cursor: default; gap: 0.25rem; }
  .audio-dock.is-player-expanded .dock-open { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-2); }
  .audio-dock.is-player-expanded .dock-series {
    display: inline-flex;
    align-items: center;
    block-size: 1.625rem;
    padding-inline: var(--space-2);
    border-radius: var(--r-ctl);
    background-color: var(--sf);
    color: var(--tx2);
    max-inline-size: 100%;
  }
  .audio-dock.is-player-expanded .dock-series:empty { display: none; }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-title,
  .audio-dock.is-player-expanded .dock-title { font-size: 1.0625rem; line-height: 1.5rem; white-space: normal; }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-series,
  .audio-dock.is-player-expanded .dock-series { font-size: 0.8125rem; line-height: 1.25rem; }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-scrubber-row,
  .audio-dock.is-player-expanded .dock-scrubber-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .dock-times {
    display: flex;
    justify-content: space-between;
  }
  .time-readout {
    font-size: 0.75rem;
    color: var(--tx3);
    font-variant-numeric: tabular-nums lining-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .audio-dock.is-docked:not(.is-dock-collapsed) .dock-controls-row,
  .audio-dock.is-player-expanded .dock-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    inline-size: min(26rem, calc(100% + var(--space-3)));
    margin-inline: max(calc(-1 * var(--space-3)), calc((100% - 26rem) / 2)) 0;
  }
  .dock-controls-row .player-btn {
    flex: 0 1 var(--tap);
    min-inline-size: 2rem;
  }
  .dock-controls-row .player-btn.is-large {
    flex: 0 0 auto;
    inline-size: clamp(3rem, 16vw, 3.75rem);
    block-size: clamp(3rem, 16vw, 3.75rem);
  }
  @keyframes sheet-up {
    from { transform: translate3d(0, 1.5rem, 0); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .audio-dock.is-player-expanded { animation: none; }
  }
  .player-bubble {
    position: fixed;
    inset-inline-end: var(--space-4);
    inset-block-end: calc(var(--nav-space) + var(--space-3));
    inline-size: 3.5rem;
    block-size: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-full);
    background: conic-gradient(var(--ac) var(--seek-progress, 0%), var(--sf2) 0);
    color: var(--ac);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: var(--z-player);
    transition: transform var(--transition-fast);
  }
  .btn-create-room-fab, .pub-filter-fab { transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0s; }
  .player-bubble:not(.is-dragging) { transition: transform var(--transition-fast), opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0s; }
  .app-root.is-fabs-away :is(.btn-create-room-fab, .pub-filter-fab, .player-bubble:not(.is-dragging)) { opacity: 0; translate: 0 1.25rem; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s; }
  @media (prefers-reduced-motion: reduce) {
    .btn-create-room-fab, .pub-filter-fab, .player-bubble, .app-root.is-fabs-away :is(.btn-create-room-fab, .pub-filter-fab, .player-bubble) { translate: none; }
  }
  .player-bubble.is-placed { inset: auto; }
  .player-bubble.is-dragging { transition: none; transform: scale(1.08); }
  .player-bubble:active:not(.is-dragging) { transform: scale(0.94); }
  .player-bubble:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px; }
  .player-bubble-core {
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--acs), var(--acs)), var(--sheet);
  }
  .player-bubble-icon { inline-size: 1.5rem; block-size: 1.5rem; }
  .player-bubble-eq {
    display: none;
    align-items: flex-end;
    gap: 3px;
    block-size: 1.125rem;
  }
  .player-bubble-eq > span {
    inline-size: 3px;
    block-size: 100%;
    border-radius: 2px;
    background-color: currentColor;
    transform-origin: 50% 100%;
    animation: bubble-eq 0.9s ease-in-out infinite alternate;
  }
  .player-bubble-eq > span:nth-child(1) { transform: scaleY(0.55); animation-delay: -0.35s; }
  .player-bubble-eq > span:nth-child(2) { transform: scaleY(1); animation-delay: -0.7s; animation-duration: 0.75s; }
  .player-bubble-eq > span:nth-child(3) { transform: scaleY(0.75); animation-delay: -0.15s; animation-duration: 1.05s; }
  @keyframes bubble-eq {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
  }
  .player-bubble.is-playing .player-bubble-icon { display: none; }
  .player-bubble.is-playing .player-bubble-eq { display: flex; }
  @media (prefers-reduced-motion: reduce) {
    .player-bubble-eq > span { animation: none; }
  }
  .audio-dock[hidden] ~ .player-bubble,
  .app-root:not(.is-room-listener) .audio-dock.is-docked ~ .player-bubble,
  .audio-dock.is-player-expanded ~ .player-bubble { display: none; }
  .player-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--scrim);
    z-index: calc(var(--z-overlay) - 1);
  }
  .audio-dock.is-player-expanded + .player-scrim { display: block; }

  .seek-slider {
    direction: ltr;
    inline-size: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    block-size: 1.5rem;
    margin: 0;
    outline: none;
  }
  .seek-slider::-webkit-slider-runnable-track {
    block-size: 0.25rem;
    background: linear-gradient(to right, var(--ac) var(--seek-progress, 0%), var(--sf2) var(--seek-progress, 0%));
    border: none;
    border-radius: var(--r-full);
  }
  .seek-slider::-moz-range-track {
    block-size: 0.25rem;
    background: linear-gradient(to right, var(--ac) var(--seek-progress, 0%), var(--sf2) var(--seek-progress, 0%));
    border: none;
    border-radius: var(--r-full);
  }
  .seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    block-size: 0.875rem;
    inline-size: 0.875rem;
    border-radius: var(--r-full);
    background-color: var(--ac);
    border: none;
    margin-block-start: -0.3125rem;
  }
  .seek-slider::-moz-range-thumb {
    block-size: 0.875rem;
    inline-size: 0.875rem;
    border: none;
    border-radius: var(--r-full);
    background-color: var(--ac);
  }

  .bottom-navigation {
    position: fixed;
    inset-block-end: calc(var(--nav-gap) + var(--safe-bottom));
    inset-inline: var(--nav-gap);
    max-inline-size: calc(48rem - var(--nav-gap) * 2);
    margin-inline: auto;
    block-size: var(--nav-block-size);
    padding: 0.375rem;
    background-color: var(--nav);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--r-sheet);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    align-items: stretch;
    z-index: var(--z-sticky);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .bottom-navigation { background-color: var(--nav-solid); }
  }
  @media (prefers-reduced-transparency: reduce) {
    .bottom-navigation { background-color: var(--nav-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }

  .nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-block-size: var(--tap);
    min-inline-size: var(--tap);
    padding: 0;
    border-radius: var(--r-card);
    color: var(--tx2);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  .nav-tab svg {
    inline-size: 1.375rem;
    block-size: 1.375rem;
  }
  .nav-tab.active {
    color: var(--ac);
    background-color: var(--acs);
  }
  .bottom-navigation,
  .bottom-navigation .nav-tab { touch-action: none; }
  .bottom-navigation.is-scrubbing .nav-tab.active:not(.is-scrub-target) {
    color: var(--tx2);
    background-color: transparent;
  }
  .nav-tab.is-scrub-target {
    color: var(--ac);
    background-color: var(--acs);
  }
  .nav-label { font-size: 0.6875rem; font-weight: var(--font-weight-medium); line-height: 1.2; }

  .app-modal {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--tx);
    inline-size: 100%;
    max-inline-size: 32rem;
    max-block-size: calc(100dvh - var(--safe-top) - var(--space-8));
    margin: auto auto 0;
    overflow: visible;
  }
  .app-modal[open] {
    display: flex;
    flex-direction: column;
    animation: sheet-in var(--transition-base);
  }
  .app-modal::backdrop {
    background-color: var(--scrim);
    opacity: var(--sheet-fade, 1);
    transition: opacity var(--sheet-fling, 120ms) linear;
  }
  .modal-card {
    flex: 1 1 auto;
    min-block-size: 0;
    background-color: var(--sheet);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding: 0 var(--space-4) calc(var(--space-4) + var(--safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .sheet-grab {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    flex-shrink: 0;
    block-size: var(--space-6);
    margin-block-end: calc(-1 * var(--space-2));
    margin-inline: calc(-1 * var(--space-4));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sheet);
    cursor: grab;
    touch-action: none;
  }
  .sheet-grab::before {
    content: "";
    inline-size: 2.25rem;
    block-size: 0.25rem;
    border-radius: var(--r-full);
    background-color: var(--sf2);
  }
  .app-modal.is-compact,
  .app-modal.is-dialog {
    margin: auto;
  }
  .app-modal.is-compact {
    inline-size: fit-content;
    min-inline-size: min(15rem, calc(100% - 2 * var(--space-4)));
    max-inline-size: min(22rem, calc(100% - 2 * var(--space-4)));
  }
  .app-modal.is-dialog {
    inline-size: calc(100% - 2 * var(--space-4));
    max-inline-size: 26rem;
  }
  .app-modal.is-compact[open],
  .app-modal.is-dialog[open] { animation-name: dialog-in; }
  .app-modal[open].is-closing { animation: sheet-out var(--transition-fast) forwards; pointer-events: none; }
  .app-modal[open].is-closing.is-flung { animation: none; }
  .app-modal.is-compact[open].is-closing,
  .app-modal.is-dialog[open].is-closing { animation-name: dialog-out; }
  .app-modal.is-compact .modal-card,
  .app-modal.is-dialog .modal-card {
    border-radius: var(--r-sheet);
    padding: var(--space-4);
  }
  .app-modal.is-compact .modal-card { gap: var(--space-2); }
  @keyframes sheet-in {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: none; }
  }
  @keyframes dialog-in {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  @keyframes sheet-out {
    to { transform: translate3d(0, 100%, 0); }
  }
  @keyframes dialog-out {
    to { transform: scale(0.96); opacity: 0; }
  }
  .modal-card .form-input { block-size: auto; min-block-size: 3rem; }
  .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .modal-title { font-size: var(--fs-card); font-weight: var(--font-weight-semibold); color: var(--tx); }
  .modal-form { display: flex; flex-direction: column; gap: var(--space-3); }

  .form-group { display: flex; flex-direction: column; gap: var(--space-2); }
  .form-label { font-size: var(--fs-label); font-weight: var(--font-weight-medium); color: var(--tx2); }
  .form-input { block-size: 2.75rem; padding-inline: var(--space-4); }
  .form-textarea { padding: var(--space-3) var(--space-4); border-radius: 1.5rem; line-height: var(--leading-normal); resize: vertical; }
  @media (pointer: coarse) { .form-textarea { resize: none; } }
  .form-error-msg {
    font-size: var(--fs-label);
    color: var(--dg);
    background-color: color-mix(in srgb, var(--dg) 10%, transparent);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-badge);
    border: none;
  }

  .modal-footer,
  .modal-dialog-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
    inline-size: 100%;
  }
  .modal-footer {
    flex-direction: column;
  }
  .modal-dialog-actions {
    flex-direction: row;
  }

  .modal-dialog-actions button,
  .modal-dialog-actions .btn-action-tonal,
  .modal-dialog-actions .btn-primary-block,
  .modal-card footer button {
    flex: 1;
    min-block-size: 3rem;
    padding-inline: var(--space-3);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--r-full);
    white-space: nowrap;
  }

  .modal-dialog-actions button[type="submit"],
  .modal-card footer button[type="submit"] {
    background-color: var(--acf);
    color: var(--onac);
    border: none;
  }
  .modal-dialog-actions button[type="submit"]:hover,
  .modal-card footer button[type="submit"]:hover {
    background-color: var(--acf);
  }
  .modal-dialog-actions button[type="submit"].is-danger,
  .modal-dialog-actions button[type="submit"].is-danger:hover {
    background-color: var(--dgf);
    color: var(--on-fill);
  }
  .confirm-text {
    white-space: pre-line;
  }

  .modal-dialog-actions button:not([type="submit"]):not(.btn-primary-block),
  .modal-card footer button:not([type="submit"]):not(.btn-primary-block) {
    background-color: var(--sf);
    color: var(--tx);
    border: 0;
  }
  .modal-dialog-actions button:not([type="submit"]):not(.btn-primary-block):hover,
  .modal-card footer button:not([type="submit"]):not(.btn-primary-block):hover {
    background-color: var(--sf2);
  }

  .mod-user-info {
    text-align: center;
    padding-block: var(--space-2);
  }
  .mod-name {
    font-size: var(--fs-body);
    font-weight: var(--font-weight-bold);
    color: var(--tx);
  }
  .app-modal.is-compact .mod-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-2);
    text-align: start;
  }
  .mod-avatar {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--r-full);
    background-color: var(--sheet);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .app-modal.is-compact .btn-action-tonal {
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }
  .btn-action-tonal.is-kick {
    color: var(--warn);
    background-color: color-mix(in srgb, var(--warn) 14%, transparent);
  }
  .btn-action-tonal.is-kick:hover {
    background-color: color-mix(in srgb, var(--warn) 22%, transparent);
  }
  .btn-action-tonal.is-ban {
    color: var(--on-fill);
    background-color: var(--dgf);
    font-weight: var(--font-weight-semibold);
  }
  .btn-action-tonal.is-ban:hover {
    background-color: color-mix(in srgb, var(--dgf) 88%, var(--bg));
  }
  .modal-actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .btn-action-tonal {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 3rem;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    background-color: var(--sf);
    color: var(--tx);
    cursor: pointer;
  }
  .btn-action-tonal:hover {
    background-color: var(--sf2);
  }
  .btn-action-tonal.is-warning {
    color: var(--warn);
    background-color: color-mix(in srgb, var(--warn) 15%, transparent);
  }
  .btn-action-tonal.is-danger {
    color: var(--on-fill);
    background-color: var(--dgf);
  }
  .btn-action-tonal.is-danger:hover {
    background-color: color-mix(in srgb, var(--dgf) 88%, var(--bg));
  }
  .listeners-full-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: var(--space-3);
    max-block-size: 20rem;
    overflow-y: auto;
    padding: var(--space-2);
  }

  .room-queue-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-block-size: 20rem;
    overflow-y: auto;
  }
  .room-queue-list > .placeholder-desc {
    align-self: center;
    text-align: center;
    color: var(--tx2);
    padding-block: var(--space-4);
  }
  .room-queue-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background-color: var(--sheet);
    border-radius: var(--r-ctl);
  }
  .room-queue-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 9rem;
    min-inline-size: 0;
    font-size: var(--fs-2);
    font-weight: var(--font-weight-semibold);
    color: var(--tx);
  }
  .room-queue-avatar {
    position: relative;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-full);
    background-color: var(--field);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .room-queue-avatar > svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    fill: currentColor;
  }
  .room-queue-avatar-hand {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--r-full);
    background-color: var(--warn);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .room-queue-avatar-hand svg {
    inline-size: 0.6875rem;
    block-size: 0.6875rem;
  }
  .room-queue-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-queue-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .btn-queue-action {
    min-block-size: 2.25rem;
    padding-inline: var(--space-3);
    border: none;
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: var(--fs-label);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: transform var(--transition-fast);
  }
  .btn-queue-action:active {
    transform: scale(0.96);
  }
  .btn-queue-grant {
    background-color: var(--acf);
    color: var(--onac);
  }
  .btn-queue-grant:hover {
    background-color: var(--acf);
  }
  .btn-queue-dismiss {
    background-color: var(--sf);
    color: var(--tx);
  }
  .btn-queue-dismiss:hover {
    background-color: var(--sf2);
  }

  .toast-region {
    position: fixed;
    inset-block-start: calc(var(--header-block-size) + var(--space-3));
    inset-inline: var(--space-4);
    max-inline-size: 26rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast);
    pointer-events: none;
  }

  @keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(0.95); }
    50% { opacity: 0.4; transform: scale(1.15); }
  }

  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--r-full);
  }
  .avatar svg { fill: currentColor; }
  .avatar-sm { inline-size: 2.25rem; block-size: 2.25rem; }
  .avatar-sm svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .avatar-lg { inline-size: 4rem; block-size: 4rem; }
  .avatar-lg svg { inline-size: 2rem; block-size: 2rem; }

  .account-view { display: flex; flex-direction: column; gap: var(--space-3); }
  .account-lead { font-size: var(--fs-2); color: var(--tx); line-height: var(--leading-normal); }
  .account-note { font-size: var(--fs-label); color: var(--tx2); line-height: var(--leading-normal); }
  .account-note:empty { display: none; }
  .consent-line { font-size: 0.78125rem; color: var(--tx2); line-height: var(--leading-normal); text-align: center; margin-block-start: var(--space-2); }
  .consent-line a, .settings-block .account-note a { color: var(--ac); text-decoration: underline; text-underline-offset: 0.15em; }
  .legal-body { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-2); line-height: var(--leading-normal); color: var(--tx); max-block-size: 60vh; overflow-y: auto; }
  .legal-editor { display: flex; flex-direction: column; gap: var(--space-2); }
  .legal-input { min-block-size: 40vh; }
  .google-signin { display: block; inline-size: 100%; max-inline-size: 25rem; margin-inline: auto; padding: 0; border: 0; border-radius: var(--r-full); background: transparent; font: inherit; cursor: pointer; touch-action: manipulation; }
  .google-signin-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-block-size: 3rem;
    padding-inline: var(--space-4);
    border-radius: inherit;
    background-color: var(--google-bg);
    color: var(--google-tx);
    font-size: var(--fs-2);
    font-weight: var(--font-weight-medium);
    transition: opacity var(--transition-base);
  }
  .google-signin:disabled { cursor: progress; }
  .google-signin:disabled .google-signin-face { opacity: 0.55; }
  .google-signin:focus-visible { outline: none; }
  .google-signin:focus-visible .google-signin-face { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
  .google-signin-logo { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
  .account-signin { text-align: center; }
  .account-signin .account-lead { color: var(--tx2); }
  .signin-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .signin-brand img { inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--r-card); }
  .signin-welcome { font-size: var(--fs-body); font-weight: var(--font-weight-bold); color: var(--tx); }
  .signin-or { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-label); color: var(--tx2); }
  .signin-or::before, .signin-or::after { content: ''; flex: 1; border-block-start: 1px solid var(--bd); }
  .account-choice { border: none; min-inline-size: 0; }
  .account-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .account-segment {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 2.75rem;
    border-radius: var(--r-full);
    background-color: var(--sf);
    color: var(--tx);
    font-size: var(--fs-2);
    cursor: pointer;
  }
  .account-segment:has(input:checked) { background-color: var(--acf); color: var(--onac); }
  .account-segment:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
  .account-segment svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
  .account-identity { display: flex; align-items: center; gap: var(--space-3); }
  .register-photo { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .register-photo-btn { position: relative; padding: 0; border: 0; background: transparent; border-radius: var(--r-full); cursor: pointer; color: var(--ac); }
  .register-photo-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 3px; }
  .register-photo-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 5rem; block-size: 5rem; background-color: var(--sf); color: var(--ac); overflow: hidden; }
  .register-photo-avatar svg { inline-size: 2.5rem; block-size: 2.5rem; fill: currentColor; }
  .register-photo-plus { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 1.625rem; block-size: 1.625rem; border-radius: var(--r-full); background-color: var(--acf); color: var(--onac); border: 2px solid var(--sheet); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: var(--font-weight-bold); line-height: 1; }
  .register-photo .account-note { text-align: center; }
  .account-identity-name { font-size: var(--fs-body); font-weight: var(--font-weight-semibold); color: var(--tx); }
  .account-name-row { display: flex; gap: var(--space-2); }
  .account-name-row .form-input { flex: 1; min-inline-size: 0; }
  .account-name-row .form-input[readonly] { color: var(--tx2); }
  .account-name-row .btn-action-tonal { flex: 0 0 auto; inline-size: auto; min-block-size: 2.75rem; padding-inline: var(--space-4); }
  .account-owner { margin-block-start: var(--space-3); }
  .account-owner-summary {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    font-size: var(--fs-label);
    color: var(--tx2);
    cursor: pointer;
  }
  .account-owner[open] .account-owner-summary { margin-block-end: var(--space-2); }
  .account-owner.is-direct { margin-block-start: 0; }
  .account-owner.is-direct > .account-owner-summary { display: none; }
  .account-logout { inline-size: 100%; margin-block-start: var(--space-3); }
  .account-passkey-btn { inline-size: 100%; min-block-size: 2.75rem; }
  .btn-app-menu { padding: 0; overflow: hidden; }
  .app-menu-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; block-size: 100%; border-radius: var(--r-full); }
  .app-menu-avatar.avatar svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .app-menu-panel { max-inline-size: 18rem; margin-inline: 0 auto; inset-inline: auto var(--space-4); }
  .app-menu-identity { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%; padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-block-end: 1px solid var(--bd); border-radius: 0; color: var(--tx); font: inherit; text-align: start; cursor: pointer; }
  .app-menu-identity:hover { background-color: var(--sf); }
  .app-menu-identity-chevron { margin-inline-start: auto; color: var(--tx3); transform: scaleX(-1); flex: none; }
  .profile-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .profile-photo-btn { position: relative; padding: 0; border: 0; background: transparent; border-radius: var(--r-full); cursor: pointer; color: var(--ac); }
  .profile-photo-btn:disabled { cursor: default; }
  .profile-photo-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 3px; }
  .profile-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 5rem; block-size: 5rem; }
  .profile-avatar svg:not(.avatar-letter) { inline-size: 2.5rem; block-size: 2.5rem; fill: currentColor; }
  .profile-badge { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 1.625rem; block-size: 1.625rem; border-radius: var(--r-full); background-color: var(--acf); color: var(--onac); border: 2px solid var(--sheet); display: inline-flex; align-items: center; justify-content: center; }
  .profile-badge.is-delete { background-color: var(--dgf); color: var(--on-fill); }
  .profile-badge svg { inline-size: 0.875rem; block-size: 0.875rem; fill: currentColor; }
  .profile-name-row { display: grid; grid-template-columns: 1fr minmax(0, max-content) 1fr; align-items: center; column-gap: var(--space-1); inline-size: 100%; }
  .profile-name-row .account-identity-name { grid-column: 2; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-name-pencil { grid-column: 3; justify-self: start; }
  .profile-link-row { display: grid; grid-template-columns: 1fr minmax(0, max-content) 1fr; align-items: center; column-gap: var(--space-1); inline-size: 100%; }
  .profile-link-row .account-note { grid-column: 2; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .profile-link-copy { grid-column: 3; justify-self: start; }
  .app-menu-name { font-size: var(--fs-2); font-weight: var(--font-weight-semibold); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-menu-list { display: flex; flex-direction: column; padding: 0.375rem; }
  .app-menu-list .flyout-item.is-danger { color: var(--dg); }
  .flyout-text { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-inline-size: 0; white-space: normal; }
  .flyout-note { font-size: var(--fs-label); color: var(--tx3); line-height: var(--leading-normal); }
  .flyout-note[hidden] { display: none; }
  .menu-switch { position: relative; flex: none; inline-size: 2.5rem; block-size: 1.5rem; border-radius: var(--r-full); background-color: var(--ctl-bd); }
  .menu-switch::after { content: ""; position: absolute; inset-block-start: 0.125rem; inset-inline-start: 0.125rem; inline-size: 1.125rem; block-size: 1.125rem; border-radius: var(--r-full); background-color: var(--sheet); transition: transform var(--transition-fast); }
  .flyout-switch[aria-checked="true"] .menu-switch { background-color: var(--acf); }
  .flyout-switch[aria-checked="true"] .menu-switch::after { transform: translateX(-1rem); background-color: var(--onac); }
  .flyout-switch:disabled { opacity: 0.6; }
  .settings-group:not(:has(.settings-row:not([hidden]))) { display: none; }
  .app-menu-theme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-3); min-block-size: 2.75rem; }
  .app-menu-theme-label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; color: var(--tx); white-space: nowrap; }
  .app-menu-theme-label svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
  .seg { display: inline-flex; padding: 2px; border-radius: var(--r-full); background: var(--sf); touch-action: pan-y; }
  .seg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 2.25rem; min-block-size: 2.25rem; border: none; border-radius: var(--r-full); background: transparent; color: var(--tx2); cursor: pointer; touch-action: manipulation; }
  .seg-btn::after { content: ""; position: absolute; inset: -0.3125rem 0; }
  .seg-btn svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .seg-btn.seg-text { inline-size: auto; padding-inline: 0.75rem; font-size: 0.875rem; font-weight: 600; }
  .seg-btn[aria-checked="true"] { background: var(--acf); color: var(--onac); }
  .seg-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 1px; }
  .settings-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .settings-version, .app-menu-version { font-size: 0.75rem; color: var(--tx3); text-align: center; font-variant-numeric: lining-nums; }
  .app-menu-version { margin: 0; padding: var(--space-1) var(--space-3) var(--space-2); }
  .settings-group { display: flex; flex-direction: column; border-radius: var(--r-card); background-color: var(--sheet2); }
  .settings-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title action" "icon sub action" "icon note action";
    align-items: center;
    align-content: center;
    column-gap: var(--space-3);
    row-gap: 0;
    min-block-size: 3.75rem;
    padding: var(--space-2) var(--space-3);
  }
  .settings-row + .settings-row { border-block-start: 1px solid var(--bd); }
  .settings-row-icon {
    grid-area: icon;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .settings-row-title { grid-area: title; font-size: var(--fs-body); font-weight: var(--font-weight-medium); color: var(--tx); }
  .settings-row-sub,
  .settings-row-note { font-size: 0.875rem; color: var(--tx2); line-height: 1.45; margin-block-start: 0.125rem; }
  .settings-row-sub { grid-area: sub; }
  .settings-row-note { grid-area: note; }
  .settings-row-icon, .settings-row .settings-row-btn, .settings-row-note.is-ok { grid-row: 1 / -1; }
  .settings-row-note.is-ok {
    grid-column: 3;
    margin-block-start: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ok);
    font-weight: var(--font-weight-semibold);
  }
  .settings-row-note.is-ok::before {
    content: "";
    inline-size: 1.125rem;
    block-size: 1.125rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .settings-row .settings-row-btn { grid-area: action; }
  .settings-row-btn { flex-shrink: 0; inline-size: auto; padding-inline: var(--space-4); }
  .switch {
    position: relative;
    inline-size: 3.25rem;
    block-size: var(--tap);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
  }
  .switch::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - 1rem);
    block-size: 2rem;
    border-radius: var(--r-full);
    background-color: var(--ctl-bd);
  }
  .switch::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 0.75rem);
    inset-inline-start: 0.25rem;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--r-full);
    background-color: var(--sheet);
    transition: transform var(--transition-fast);
  }
  .switch[aria-checked="true"]::before { background-color: var(--acf); }
  .switch[aria-checked="true"]::after { transform: translateX(-1.25rem); background-color: var(--onac); }
  .switch:disabled { opacity: 0.6; cursor: wait; }
  .switch:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; border-radius: var(--r-full); }
  .settings-block { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-ctl); background-color: var(--field); }
  .usage-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
  .usage-list:empty { display: none; }
  .usage-item { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-label); color: var(--tx2); }
  .usage-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
  .usage-item-label { color: var(--tx); }
  .usage-item-percent { flex-shrink: 0; font-weight: var(--font-weight-semibold); }
  .usage-bar { block-size: 0.375rem; border-radius: var(--r-full); background-color: var(--sheet2); overflow: hidden; }
  .usage-bar-fill { block-size: 100%; inline-size: 0; border-radius: inherit; background-color: var(--ok); }
  .usage-item.is-warn .usage-bar-fill { background-color: var(--warn); }
  .usage-item.is-high .usage-bar-fill { background-color: var(--dg); }
  .usage-item.is-warn .usage-item-percent { color: var(--warn); }
  .usage-item.is-high .usage-item-percent { color: var(--dg); }
  .platform-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .platform-actions .btn-action-tonal,
  #platform-modal .account-segmented .btn-action-tonal { min-block-size: 2.75rem; inline-size: 100%; }
  #platform-modal .account-segmented .btn-action-tonal[aria-pressed="true"] { background: var(--acf); color: var(--onac); }
  .notification-card.is-unread .notification-card-title::before { content: ""; flex-shrink: 0; inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: var(--r-full); background-color: var(--ac); }
  .notification-card.is-report .notification-card-title::before { display: none; }
  .notification-report-dot { flex-shrink: 0; inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--r-full); background-color: var(--dg); }
  .notification-card-time { font-size: var(--fs-label); color: var(--tx3); }
  .articles-list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .article-card { display: flex; flex-direction: column; gap: var(--space-1); inline-size: 100%; padding: var(--space-3); border: 1px solid var(--card-bd); border-radius: var(--r-card); background: var(--card-bg); color: var(--tx); text-align: start; font: inherit; cursor: pointer; }
  .article-card:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  .article-card-title { font-size: var(--fs-body); font-weight: var(--font-weight-semibold); }
  .article-card-meta { font-size: var(--fs-label); color: var(--ac); }
  .article-card-excerpt { font-size: var(--fs-2); color: var(--tx2); line-height: var(--leading-normal); overflow-wrap: anywhere; }
  .settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .settings-actions .btn-action-tonal { min-block-size: 2.75rem; }
  .settings-check { display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; font-size: var(--fs-2); color: var(--tx); }
  .settings-check input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--acf); }
  .settings-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-2); }
  .settings-levels label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-label); color: var(--tx2); }
  .app-menu-room { display: flex; flex-direction: column; padding-block-end: var(--space-2); margin-block-end: var(--space-2); border-block-end: 1px solid var(--sheet2); }
  .room-files-list { display: flex; flex-direction: column; gap: var(--space-2); max-block-size: 50vh; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
  .room-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-card);
    background-color: var(--sheet);
  }
  .room-file > * { grid-column: 1; min-inline-size: 0; }
  .room-file > .room-file-actions { grid-column: 2; grid-row: 1 / span 3; }
  .room-file.is-offer { grid-template-columns: minmax(0, 1fr); }
  .room-file.is-offer > .room-file-actions { grid-column: 1; grid-row: auto; }
  .room-file-title {
    inline-size: 100%;
    min-block-size: 2rem;
    padding: 0;
    border: none;
    border-block-end: 1px solid transparent;
    background: transparent;
    color: var(--tx);
    font: inherit;
    font-size: var(--fs-2);
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
  }
  .room-file-title:focus { outline: none; border-block-end-color: var(--ac); }
  .room-file-title:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .room-file-meta { font-size: var(--fs-label); color: var(--tx2); overflow-wrap: anywhere; }
  .room-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  .room-file-actions .btn-action-tonal { inline-size: auto; min-block-size: 2.75rem; padding-inline: var(--space-3); }
  .btn-file-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tap);
    block-size: var(--tap);
    border: 0;
    border-radius: var(--r-full);
    background-color: var(--sf);
    color: var(--tx2);
    cursor: pointer;
    touch-action: manipulation;
  }
  .btn-file-action svg { fill: currentColor; }
  .btn-file-action.is-primary { background-color: var(--acf); color: var(--onac); }
  .btn-file-action.is-primary:hover { background-color: var(--acf); }
  .btn-file-action.is-danger { color: var(--dg); }
  .btn-file-action:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
  .room-file-progress { inline-size: 100%; block-size: 0.375rem; accent-color: var(--acf); }
  .notification-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-1); }
  .notification-card-actions .btn-action-tonal { flex: 1 1 8rem; inline-size: auto; padding-inline: var(--space-3); font-size: 0.875rem; }
  .room-comment-bubble[tabindex] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .room-comment-bubble[tabindex]:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  .form-select {
    block-size: 2.75rem;
    padding-inline: var(--space-4) 2.75rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23C6C4D4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 1.125rem;
  }
  :root[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%234E4B66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  }
  .picker { position: relative; }
  .picker-button { display: flex; align-items: center; inline-size: 100%; text-align: start; font: inherit; color: var(--tx); }
  .picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .picker-list {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    min-inline-size: 12rem;
    max-inline-size: 100%;
    padding: 0.375rem;
    border-radius: var(--r-card);
    background-color: var(--pop);
    transform-origin: 50% 100%;
    animation: reactions-pop-in 150ms ease-out;
  }
  .picker-list:focus { outline: none; }
  .picker-list:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .picker-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.75rem;
    padding-inline: var(--space-3);
    border-radius: var(--r-badge);
    color: var(--tx);
    font-size: 0.9375rem;
    cursor: pointer;
  }
  .picker-option:hover, .picker-option.is-active { background-color: var(--acs); color: var(--ac); }
  .picker-option[aria-selected="true"] { font-weight: var(--font-weight-semibold); }
  .picker-option[aria-selected="true"]::after {
    content: "";
    margin-inline-start: auto;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (prefers-reduced-motion: reduce) { .picker-list { animation: none; } }
  .category-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--space-4) * -1);
    padding: 2px var(--space-4);
    scroll-padding-inline: var(--space-4);
  }
  .category-row::-webkit-scrollbar { display: none; }
  .category-custom {
    flex: 0 0 8.5rem;
    min-block-size: var(--tap);
    block-size: var(--tap);
    border-radius: var(--r-full);
    padding-inline: var(--space-4);
    font-size: 0.875rem;
  }
  .category-chip {
    flex: none;
    white-space: nowrap;
    min-block-size: var(--tap);
    padding-inline: var(--space-4);
    border-radius: var(--r-full);
    border: 0;
    background-color: var(--sf);
    color: var(--tx);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    touch-action: manipulation;
  }
  .category-chip[aria-pressed="true"] {
    background-color: var(--acf);
    color: var(--onac);
  }
  .category-chip:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
  .room-card-audience {
    align-self: center;
    padding: 0.125rem var(--space-2);
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
    font-size: var(--fs-label);
    font-weight: var(--font-weight-semibold);
  }
  .account-passkey-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
  .account-passkey-list:empty { display: none; }
  .account-passkey-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-ctl);
    background-color: var(--sheet2);
    font-size: var(--fs-label);
    color: var(--tx2);
  }
  .account-passkey-remove { min-block-size: 2.75rem; min-inline-size: 3.5rem; padding-inline: var(--space-3); inline-size: auto; }
  .settings-photo-actions { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; }
  .settings-photo-actions .btn-action-tonal { inline-size: auto; min-block-size: 2.75rem; padding-inline: var(--space-3); }
  .avatar-review-item { flex-wrap: wrap; }
  .avatar-review-main { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 12rem; min-inline-size: 0; }
  .avatar-review-label { min-inline-size: 0; overflow-wrap: anywhere; }
  .avatar-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1 1 100%; }
  .avatar-review-actions .form-input { flex: 1 1 8rem; min-inline-size: 0; }
  .avatar-review-actions .btn-action-tonal { inline-size: auto; min-block-size: 2.75rem; padding-inline: var(--space-3); }
}

@layer views {
  .app-root.is-keyboard .room-float { display: none; }
  .app-root:has(.audio-dock[hidden]) .main-viewport,
  .app-root:has(.audio-dock:not(.is-docked)) .main-viewport,
  .app-root.is-room-listener .main-viewport {
    padding-block-end: calc(var(--nav-space) + var(--space-4));
    scroll-padding-block-end: calc(var(--nav-space) + var(--space-4));
    mask-image: linear-gradient(to bottom, black 0%, black calc(100% - (var(--nav-space) + var(--space-8))), transparent calc(100% - (var(--nav-space) + var(--space-2))));
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - (var(--nav-space) + var(--space-8))), transparent calc(100% - (var(--nav-space) + var(--space-2))));
  }

  .view-panel { display: none; }
  .view-panel.active {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    animation: view-fade-in var(--transition-fast) forwards;
    gap: var(--space-4);
  }
  #rooms-view.active { gap: 0; block-size: 100%; }

  @keyframes view-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }

  .playlist-header-actions.is-root-view {
    display: none;
  }

  .app-root.is-searching .view-panel.active { display: none; }
  .search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    inline-size: 100%;
  }
  .search-group { display: flex; flex-direction: column; gap: var(--space-3); }
  .search-group-title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--tx2);
  }
  .search-status { font-size: 0.875rem; color: var(--tx3); }
  .search-status.is-empty { padding-block: var(--space-8); text-align: center; font-size: 1rem; color: var(--tx2); }
  .search-rooms {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  .search-room {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    align-items: center;
    min-block-size: 4.25rem;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--tx);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .search-room + .search-room { border-block-start: 1px solid var(--bd); }
  .search-room svg {
    grid-row: span 2;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0.375rem;
    border-radius: var(--r-full);
    background-color: var(--acs);
    color: var(--ac);
  }
  .search-room-title { font-size: 1rem; line-height: 1.375rem; }
  .search-room-host { font-size: 0.875rem; color: var(--tx2); }

  .app-root.is-in-room .audio-dock:not(.is-player-expanded) { display: none; }

  .pub-view { display: flex; flex-direction: column; gap: var(--space-3); }
  .pub-feed { display: flex; flex-direction: column; gap: var(--space-3); }
  #publish-feed-view { padding-block-end: 5rem; }
  #publish-page { padding-block-end: 6rem; }
  .pub-status { font-size: var(--fs-2); color: var(--tx2); text-align: center; }
  .pub-status:empty { display: none; }
  .pub-sentinel { block-size: 1px; }
  .pub-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 14px; background: var(--card-bg); border-radius: var(--r-card); }
  .pub-head { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
  .pub-head .avatar { inline-size: 2.5rem; block-size: 2.5rem; }
  .pub-who { flex: 1; display: flex; flex-direction: column; min-inline-size: 0; }
  .pub-name-row { display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
  .pub-name { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pub-verified { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--ac); }
  .pub-follow { position: relative; flex: none; margin-inline-start: 4px; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--r-badge); background: none; font: inherit; font-size: var(--fs-label); font-weight: var(--font-weight-semibold); line-height: 1.5; color: var(--ac); cursor: pointer; touch-action: manipulation; }
  .pub-follow::after { content: ""; position: absolute; inset: -10px -4px; }
  .pub-time { font-size: var(--fs-label); color: var(--tx3); }
  .pub-head .btn-card-menu { margin-inline-end: -10px; margin-block: -8px; }
  .pub-text { font-size: 15px; line-height: 1.65; color: var(--tx); overflow-wrap: anywhere; white-space: pre-line; }
  .pub-q { font-size: 16px; font-weight: var(--font-weight-semibold); line-height: 1.6; color: var(--tx); overflow-wrap: anywhere; white-space: pre-line; }
  .pub-more { align-self: flex-start; min-block-size: 1.5rem; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--font-weight-semibold); color: var(--ac); cursor: pointer; }
  .pub-answer { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; background: var(--acs); border-radius: var(--r-badge); }
  .pub-answer .pub-head .avatar { inline-size: 2rem; block-size: 2rem; }
  .pub-answer .pub-text { font-size: 15px; }
  .pub-answer .pub-time { color: var(--tx2); }
  .pub-clamp { overflow: hidden; max-block-size: 6.6em; max-block-size: 4lh; }
  .pub-clamp.is-clamped { mask-image: linear-gradient(to bottom, #000 50%, rgb(0 0 0 / 0.5)); -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgb(0 0 0 / 0.5)); }
  .pub-clamp + .pub-more { margin-block-start: calc(-1 * var(--space-2)); }
  .pub-drop { float: right; float: inline-start; display: flex; align-items: center; justify-content: center; block-size: 3.1em; block-size: 2lh; margin-inline-end: var(--space-2); color: var(--ac); }
  .pub-drop.is-question { min-inline-size: 0.9em; font-size: 2.65em; block-size: 1.18em; font-weight: var(--font-weight-bold); line-height: 1.2; }
  .pub-drop.is-quote svg { inline-size: 2.25rem; block-size: 2.25rem; transform: scaleX(-1); }
  .pub-drop.is-poll svg { inline-size: 2rem; block-size: 2rem; }
  .pub-show-answer { align-self: flex-start; min-block-size: var(--tap); margin-block: calc(-1 * var(--space-2)); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-2); font-weight: var(--font-weight-semibold); color: var(--ac); cursor: pointer; touch-action: manipulation; }
  .pub-acts { display: flex; align-items: center; gap: var(--space-2); margin-block: -6px -4px; margin-inline: -8px; }
  .pub-act { display: inline-flex; align-items: center; gap: 6px; min-inline-size: var(--tap); min-block-size: var(--tap); padding-inline: var(--space-2); border: 0; border-radius: var(--r-full); background: none; font: inherit; font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--tx2); cursor: pointer; touch-action: manipulation; }
  .pub-act svg { inline-size: 1.375rem; block-size: 1.375rem; flex: none; }
  .pub-act.is-like { color: var(--tx); }
  .pub-acts.has-comment { gap: var(--space-1); margin-inline-start: 0; }
  .pub-acts.has-comment > .pub-comment { flex: 1; min-inline-size: 0; }
  .pub-acts.is-writing > .pub-act { display: none; }
  .pub-replies-link { position: relative; align-self: flex-start; margin-block: calc(-1 * var(--space-2)) calc(-1 * var(--space-1)); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-2); color: var(--tx2); cursor: pointer; touch-action: manipulation; }
  .pub-replies-link::after { content: ""; position: absolute; inset: -12px -6px; }
  .pub-act:hover, .pub-act:focus-visible { background-color: var(--acs); }
  .pub-comment { display: flex; align-items: flex-end; gap: var(--space-2); padding: 3px; padding-inline-end: var(--space-1); background: var(--sf); border-radius: 1.4rem; }
  .pub-comment:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .pub-comment .avatar { inline-size: 2rem; block-size: 2rem; margin: 6px; margin-inline-end: 0; flex: none; }
  .pub-comment textarea { flex: 1; min-inline-size: 0; block-size: 2.75rem; max-block-size: calc(4.5em + 1.2rem + 2px); padding: 0.6rem var(--space-1); border: 0; background: transparent; color: var(--tx); font: inherit; font-size: var(--fs-input); line-height: 1.5; resize: none; outline: none; overflow-y: auto; }
  .pub-comment.is-compact { padding-inline-start: var(--space-2); }
  .pub-comment.is-compact:not(.is-active) textarea { max-block-size: 2.75rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pub-comment textarea::placeholder { color: var(--tx2); opacity: 1; }
  .pub-comment .btn-comment-send { flex: none; }
  .pub-label { margin-block-start: var(--space-2); font-size: var(--fs-2); font-weight: var(--font-weight-semibold); color: var(--tx2); }
  .room-status-chip > svg { inline-size: 0.875rem; block-size: 0.875rem; fill: none; }
  .pub-note { font-size: var(--fs-label); color: var(--tx2); }
  .pub-topbar { display: flex; align-items: center; gap: var(--space-2); }
  .pub-topbar h2 { flex: 1; font-size: var(--fs-card); font-weight: var(--font-weight-semibold); outline: none; }
  a.pub-name { text-decoration: none; }
  a.pub-name:hover { text-decoration: underline; }
  .pf-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-block: var(--space-2) var(--space-1); text-align: center; }
  .pf-head .avatar { inline-size: 5rem; block-size: 5rem; }
  .pf-name-row { display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: var(--font-weight-bold); color: var(--tx); overflow-wrap: anywhere; }
  .pf-link { min-block-size: 1.5rem; padding: 0 var(--space-2); border: 0; background: transparent; font: inherit; font-size: var(--fs-2); color: var(--tx2); cursor: pointer; }
  .pf-stats { display: flex; gap: var(--space-4); font-size: var(--fs-2); color: var(--tx2); }
  .pf-stats b { color: var(--tx); font-variant-numeric: tabular-nums; }
  .pf-stat { position: relative; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
  .pf-stat::after { content: ""; position: absolute; inset: -12px -6px; }
  .pf-stat:hover span, .pf-stat:focus-visible span { text-decoration: underline; }
  .pub-follows-seg, .pub-follows-more { align-self: center; }
  .pub-follows-seg .seg-btn { inline-size: auto; padding-inline: var(--space-4); font: inherit; font-size: var(--fs-2); font-weight: var(--font-weight-semibold); }
  .pub-follows { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  .pub-follows-row { display: flex; align-items: center; gap: var(--space-2); min-block-size: 3.5rem; }
  .pub-follows-who { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; min-block-size: var(--tap); padding: 0; border: 0; background: none; font: inherit; color: var(--tx); text-align: start; cursor: pointer; }
  span.pub-follows-who { cursor: default; }
  .pub-follows-who .avatar { inline-size: 2.5rem; block-size: 2.5rem; flex: none; }
  .pub-list-follow { flex: none; inline-size: auto; min-inline-size: 5.5rem; min-block-size: var(--tap); padding-inline: var(--space-3); font-size: var(--fs-2); }
  .pub-list-follow[aria-pressed="false"] { background: var(--acf); color: var(--onac); }
  .pub-list-block, .pub-list-remove { flex: none; color: var(--tx2); }
  .pub-follows-row .btn-icon { inline-size: var(--tap); }
  .pub-follows-row .pub-list-follow { min-inline-size: 5rem; }
  .pf-actions { display: flex; gap: var(--space-2); }
  .pf-actions .btn-primary-block { inline-size: auto; min-inline-size: 8rem; }
  .pf-actions .btn-icon { background: var(--sf); }
  .pf-more { align-self: center; }
  .pub-answer-bar { position: fixed; inset-inline: 0; inset-block-end: calc(var(--nav-space) + var(--space-1)); z-index: calc(var(--z-sticky) + 1); padding: var(--space-2) var(--space-4); background: var(--bg); }
  .app-root.is-keyboard .pub-answer-bar { inset-block-end: 0; padding-block-end: calc(var(--space-2) + var(--safe-bottom)); }
  .pub-filter-fab { position: fixed; inset-inline-start: calc(var(--space-4) + 6px); inset-block-end: calc(var(--nav-space) + var(--space-3) + var(--tap) + var(--space-3)); z-index: calc(var(--z-sticky) + 1); display: inline-flex; align-items: center; justify-content: center; inline-size: var(--tap); block-size: var(--tap); border: 0; border-radius: var(--r-full); background: var(--sf); color: var(--tx2); cursor: pointer; touch-action: manipulation; }
  .pub-filter-fab svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .pub-filter-fab.is-active { background: var(--acf); color: var(--onac); }
  .pub-filter-menu { position: fixed; inset-inline-start: calc(var(--space-4) + 6px + var(--tap) + var(--space-2)); inset-block-end: calc(var(--nav-space) + var(--space-3) + var(--tap) + var(--space-3)); min-inline-size: 10rem; }
  .pub-filter-menu .pub-check { margin-inline-start: auto; color: var(--ac); }
  .pub-filter-menu .flyout-item[aria-checked="false"] .pub-check { visibility: hidden; }
  .pub-card-menu { position: fixed; background-color: color-mix(in srgb, var(--pop) 90%, var(--tx)); outline: 1px solid var(--bd); }
  .pub-card-menu .flyout-item.is-danger { color: var(--dg); }
  .pub-card-menu .flyout-item { font-weight: var(--font-weight-semibold); }
  .app-modal.is-tall .modal-card { min-block-size: min(86dvh, 46rem); }
  .pub-chooser, .pub-compose-form { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
  .pub-sheet-q { margin-block-start: var(--space-2); font-size: 19px; font-weight: var(--font-weight-bold); text-align: center; }
  .pub-types { display: flex; flex-direction: column; gap: var(--space-2); }
  .pub-type { display: flex; align-items: center; gap: var(--space-4); min-block-size: 4.25rem; padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--r-card); background: var(--card-bg); font: inherit; color: var(--tx); text-align: start; cursor: pointer; touch-action: manipulation; }
  .pub-type:hover, .pub-type:focus-visible { background: var(--acs); }
  .pub-type-ic { flex: none; display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--r-full); background: var(--acs); color: var(--ac); }
  .pub-type-ic svg { inline-size: 1.5rem; block-size: 1.5rem; fill: currentColor; }
  .pub-type-text { display: flex; flex-direction: column; gap: 2px; }
  .pub-type-name { font-size: var(--fs-card); font-weight: var(--font-weight-semibold); }
  .pub-type-note { font-size: var(--fs-label); color: var(--tx2); }
  .pub-compose-head { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); }
  .pub-compose-head .pub-type-ic { inline-size: 2.25rem; block-size: 2.25rem; }
  .pub-compose-head .pub-type-ic svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .pub-compose-head h2 { flex: 1; font-size: var(--fs-card); font-weight: var(--font-weight-semibold); }
  .pub-compose { min-block-size: 8rem; }
  .pub-extra { display: flex; flex-direction: column; gap: var(--space-2); }
  .pub-field-label { font-size: var(--fs-label); font-weight: var(--font-weight-semibold); color: var(--tx2); }
  .pub-poll-inputs { display: flex; flex-direction: column; gap: var(--space-2); }
  .pub-add { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; min-block-size: var(--tap); padding-inline: var(--space-2); border: 0; background: none; font: inherit; font-size: var(--fs-2); font-weight: var(--font-weight-semibold); color: var(--ac); cursor: pointer; }
  .pub-add svg { inline-size: 1.125rem; block-size: 1.125rem; }
  .pub-duration { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .pub-seg .seg-btn { inline-size: auto; padding-inline: var(--space-4); font: inherit; font-size: var(--fs-2); font-weight: var(--font-weight-semibold); }
  .pub-anon { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--tap); padding: 0; border: 0; background: none; font: inherit; color: var(--tx); text-align: start; cursor: pointer; }
  .pub-anon > svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--tx2); flex: none; }
  .pub-anon-text { flex: 1; display: flex; flex-direction: column; }
  .pub-anon-note { font-size: var(--fs-label); color: var(--tx2); }
  .pub-anon[aria-checked="true"] .menu-switch { background-color: var(--acf); }
  .pub-anon[aria-checked="true"] .menu-switch::after { transform: translateX(-1rem); background-color: var(--onac); }
  .pub-grow { flex: 1; }
  .pub-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .pub-counter { font-size: var(--fs-label); color: var(--tx3); font-variant-numeric: tabular-nums; }
  .pub-counter.is-over { color: var(--dg); }
  .pub-compose-foot .btn-primary-block { inline-size: auto; min-inline-size: 7rem; }
  .pub-sheet-title { font-size: var(--fs-card); font-weight: var(--font-weight-semibold); text-align: center; }
  .pub-replies { display: flex; flex-direction: column; gap: var(--space-4); }
  .pub-reply { display: flex; gap: var(--space-3); align-items: flex-start; }
  .pub-reply .avatar { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
  .pub-reply-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .pub-reply .pub-text { font-size: 15px; }
  .pub-reply .btn-card-menu { margin-block: -10px; margin-inline-end: -10px; }
  .avatar.pub-anon-av { background: var(--sf2); color: var(--tx2); }
  .avatar.pub-anon-av svg { inline-size: 60%; block-size: 60%; }
  .pub-quote { margin: 0; font-size: 16px; font-weight: var(--font-weight-medium); line-height: 1.75; color: var(--tx); overflow-wrap: anywhere; white-space: pre-line; }
  .pub-source { align-self: flex-start; max-inline-size: 100%; padding: 6px 12px; border-radius: var(--r-badge); background: var(--sf); font-size: var(--fs-2); font-weight: var(--font-weight-semibold); color: var(--tx2); overflow-wrap: anywhere; }
  .pub-poll { display: flex; flex-direction: column; gap: var(--space-2); }
  .pub-opt { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--tap); padding-inline: var(--space-4); border: 1.5px solid var(--ctl-bd); border-radius: var(--r-ctl); background: none; overflow: hidden; font: inherit; font-size: 15px; color: var(--tx); text-align: start; cursor: pointer; touch-action: manipulation; }
  .pub-opt:hover, .pub-opt:focus-visible { background: var(--acs); }
  .pub-poll.is-revealed .pub-opt { border-color: transparent; background: var(--sf); cursor: default; }
  .pub-opt-bar { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: -1; background: var(--acs); }
  .pub-opt.is-mine { font-weight: var(--font-weight-semibold); }
  .pub-opt.is-mine .pub-opt-bar { background: var(--sf2); }
  .pub-opt-pct { font-size: var(--fs-2); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: var(--tx2); }
  .pub-opt-label { display: inline-flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
  .pub-opt-label svg { inline-size: 1.125rem; block-size: 1.125rem; color: var(--ac); flex: none; }
  .pub-poll.is-faded { mask-image: linear-gradient(to bottom, #000 40%, rgb(0 0 0 / 0.25)); -webkit-mask-image: linear-gradient(to bottom, #000 40%, rgb(0 0 0 / 0.25)); }
  .pub-poll-meta { font-size: var(--fs-label); color: var(--tx3); }

  .rd-view { display: flex; flex-direction: column; gap: var(--space-3); padding-block-end: 6rem; }
  .rd-shelf { display: flex; gap: var(--space-3); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4); }
  .rd-shelf::-webkit-scrollbar { display: none; }
  .cover { --cv-base: oklch(var(--cv-l) var(--cv-c) var(--cv-h)); --cv-accent: oklch(var(--cv-la) var(--cv-ca) var(--cv-h)); flex: none; inline-size: 128px; block-size: 192px; border: 0; border-radius: var(--r-badge); display: flex; flex-direction: column; align-items: center; padding: 12px; background: var(--sf2); background: var(--cv-base); color: var(--tx); font: inherit; text-align: center; scroll-snap-align: start; cursor: pointer; touch-action: manipulation; }
  .cover:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .cover-icon { flex: none; inline-size: 18px; block-size: 18px; color: var(--tx2); }
  .cover-badge { flex: none; padding-block-start: 4px; font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1.3; color: var(--tx2); }
  .cover-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding-block-start: 10px; inline-size: 100%; min-block-size: 0; }
  .cover-title { margin-block: auto 0; font-size: 17px; font-weight: var(--font-weight-bold); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
  .cover-rule { inline-size: 24px; block-size: 2px; border-radius: var(--r-full); background: var(--cv-accent); margin-block-end: auto; }
  .cover-author { font-size: 13px; font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--tx2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .rd-dots { display: flex; justify-content: center; align-items: center; gap: 6px; block-size: 24px; }
  .rd-dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: var(--tx3); transition: inline-size var(--transition-fast); }
  .rd-dot.is-on { inline-size: 20px; background: var(--ac); }
  .rd-articles { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .rd-article { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; padding: 14px; border: 0; border-radius: var(--r-card); background: var(--card-bg); font: inherit; color: var(--tx); text-align: start; cursor: pointer; touch-action: manipulation; }
  .rd-article:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .rd-article-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
  .rd-article-title { font-size: var(--fs-card); font-weight: var(--font-weight-semibold); }
  .rd-article-desc { font-size: var(--fs-2); color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rd-article > svg { flex: none; inline-size: 1.375rem; block-size: 1.375rem; color: var(--tx2); }
  .reader-modal { --rd-bg: var(--rd-night-bg); --rd-tx: var(--rd-night-tx); --rd-size: 18px; position: fixed; inset: 0; inline-size: 100%; max-inline-size: none; block-size: 100%; max-block-size: none; margin: 0; padding: 0; border: 0; background: var(--rd-bg); color: var(--rd-tx); }
  .reader-modal[open] { display: block; }
  .rd-top { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; display: grid; grid-template-columns: minmax(var(--tap), 1fr) auto minmax(var(--tap), 1fr); align-items: center; justify-items: center; gap: var(--space-2); padding: calc(var(--safe-top) + var(--space-2)) var(--space-3) 0; pointer-events: none; transition: opacity 280ms ease, transform 280ms ease; }
  .rd-top > * { pointer-events: auto; }
  #btn-reader-close { grid-column: 1; }
  #reader-tools { grid-column: 2; }
  .rd-top-end { grid-column: 3; display: flex; align-items: center; gap: var(--space-2); }
  .rd-capsule { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid color-mix(in srgb, var(--rd-tx) 16%, transparent); border-radius: var(--r-full); background: color-mix(in srgb, var(--rd-tx) 9%, var(--rd-bg)); color: var(--rd-tx); }
  .rd-capsule[hidden] { display: none; }
  .reader-modal .rd-round, .reader-modal .btn-icon.rd-round:hover { border: 1px solid color-mix(in srgb, var(--rd-tx) 16%, transparent); background: color-mix(in srgb, var(--rd-tx) 9%, var(--rd-bg)); }
  .rd-capsule .btn-icon:disabled { opacity: 0.35; }
  .rd-dock { position: absolute; inset-inline: 0; inset-block-end: calc(var(--kb, 0px) + var(--safe-bottom) + var(--space-3)); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); pointer-events: none; transition: opacity 280ms ease, transform 280ms ease; }
  .rd-dock[hidden] { display: none; }
  .rd-dock > * { pointer-events: auto; }
  .rd-progress { min-inline-size: 4.5rem; text-align: center; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
  .ed-main { display: flex; align-items: center; gap: var(--space-2); }
  .ed-save { flex: none; display: inline-grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border: 0; border-radius: var(--r-full); background: var(--acf); color: var(--onac); cursor: pointer; }
  .ed-save svg { inline-size: 1.4rem; block-size: 1.4rem; }
  .ed-save:disabled { opacity: 0.6; }
  .ed-save:focus-visible, .rd-tools button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }
  .rd-tools button { display: inline-grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border: 0; border-radius: var(--r-full); background: none; color: var(--rd-tx); cursor: pointer; }
  .rd-tools button svg { inline-size: 1.25rem; block-size: 1.25rem; fill: currentColor; }
  .rd-tools button[aria-pressed="true"] { background: color-mix(in srgb, var(--rd-tx) 20%, transparent); }
  .reader-modal.is-immersive .rd-top { opacity: 0; transform: translateY(-120%); }
  .reader-modal.is-immersive .rd-dock { opacity: 0; transform: translateY(120%); }
  .reader-modal.is-immersive .rd-top *, .reader-modal.is-immersive .rd-dock * { pointer-events: none; }
  .rd-pop.is-end { margin-inline: auto 0; }
  .rd-pop.is-stack { flex-direction: column; align-items: stretch; }
  .rd-top-end { justify-self: end; }
  #btn-reader-close { justify-self: start; }
  .rd-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: 1.9; color: var(--tx); }
  .rd-notes-input { min-block-size: 10rem; resize: vertical; line-height: 1.8; }
  .rd-readmode { color: var(--rd-tx); }
  .rd-readmode > svg { color: var(--rd-tx); }
  .rd-readmode:disabled { opacity: 0.5; cursor: default; }
  .rd-page { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; padding: calc(var(--safe-top) + var(--tap) + var(--space-6)) 22px calc(var(--safe-bottom) + var(--kb, 0px) + 7rem); font-size: var(--rd-size); line-height: 1.9; outline: none; }
  .reader-modal.is-editing .rd-page { padding-block-end: calc(var(--safe-bottom) + var(--kb, 0px) + 12rem); }
  .rd-editable { min-block-size: 40vh; outline: none; caret-color: currentColor; }
  .rd-editable:empty::before { content: attr(data-placeholder); opacity: 0.6; }
  .reader-modal[data-mode="paper"] { --rd-bg: var(--rd-paper-bg); --rd-tx: var(--rd-paper-tx); }
  .reader-modal::backdrop { background: var(--scrim); }
  .reader-modal .btn-icon { color: var(--rd-tx); }
  .reader-modal .btn-icon:hover { background-color: transparent; color: var(--rd-tx); }
  .rd-pop { position: absolute; inset-block-start: calc(var(--safe-top) + var(--tap) + var(--space-4)); inset-inline: var(--space-3); z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-3); max-inline-size: 22rem; margin-inline: auto; padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--rd-tx) 22%, transparent); border-radius: var(--r-ctl); background: var(--rd-bg); color: var(--rd-tx); }
  .rd-pop[hidden] { display: none; }
  .rd-pop.is-small { inline-size: fit-content; }
  .rd-pop-hint { flex: none; font-size: var(--fs-label); opacity: 0.8; }
  .rd-step { inline-size: var(--tap); block-size: var(--tap); border: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--rd-tx) 12%, transparent); color: var(--rd-tx); font: inherit; font-size: 22px; font-weight: var(--font-weight-bold); line-height: 1; cursor: pointer; }
  .rd-step:disabled { opacity: 0.35; cursor: default; }
  .rd-size { min-inline-size: 2.5ch; text-align: center; font-variant-numeric: tabular-nums; }
  .rd-page h1 { font-size: 1.3em; line-height: 1.5; margin: var(--space-2) 0 var(--space-1); outline: none; }
  .rd-meta { font-size: var(--fs-2); opacity: 0.8; margin-block-end: var(--space-4); }
  .rd-body h2 { font-size: 1.2em; margin: var(--space-4) 0 var(--space-2); }
  .rd-body h3 { font-size: 1.08em; margin: var(--space-4) 0 var(--space-2); }
  .rd-body p { margin-block-end: var(--space-3); overflow-wrap: anywhere; }
  .rd-body blockquote { margin: var(--space-3) 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid currentColor; }
  .rd-body ul, .rd-body ol { margin-block-end: var(--space-3); padding-inline-start: var(--space-6); }
  .rd-body hr { border: 0; block-size: 1px; background: currentColor; opacity: 0.3; margin: var(--space-6) 30%; }
  .rd-modes { display: flex; gap: var(--space-2); }
  .rd-mode { display: inline-grid; place-items: center; inline-size: 6.5rem; block-size: 3.5rem; border-radius: var(--r-ctl); border: 2px solid transparent; font: inherit; font-size: var(--fs-2); font-weight: var(--font-weight-semibold); cursor: pointer; }
  .rd-mode.is-paper { background: var(--rd-paper-bg); color: var(--rd-paper-tx); }
  .rd-mode.is-night { background: var(--rd-night-bg); color: var(--rd-night-tx); }
  .rd-mode[aria-checked="true"] { border-color: var(--acf); }
  .rd-slider { inline-size: 100%; min-block-size: var(--tap); accent-color: var(--acf); }
  .rd-chapters { display: flex; flex-direction: column; gap: 2px; }
  .rd-chapter { display: flex; align-items: center; gap: var(--space-3); min-block-size: 3rem; padding-inline: var(--space-3); border: 0; border-radius: var(--r-badge); background: none; font: inherit; font-size: var(--fs-body); color: var(--tx); text-align: start; cursor: pointer; }
  .rd-chapter-num { inline-size: 1.75rem; color: var(--tx2); font-variant-numeric: tabular-nums; }
  .rd-chapter[aria-current="true"] { background: var(--acs); color: var(--ac); font-weight: var(--font-weight-semibold); }
  .rd-chapter[aria-current="true"] .rd-chapter-num { color: var(--ac); }
  .ed-fields { display: flex; flex-direction: column; gap: var(--space-2); }
  .ed-row { display: flex; gap: var(--space-2); align-items: center; }
  .ed-row .form-input { flex: 1; min-inline-size: 0; }
  .ed-kind { align-self: flex-start; }
  .rd-hint { font-size: var(--fs-label); color: var(--tx2); }
  #editor-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
  #editor-counter.is-over { color: var(--dg); }

}

@layer states {
  .avatar.avatar[data-avatar-hue] {
    color: var(--tx);
    background-color: oklch(var(--av-l1) var(--av-c1) var(--av-h));
  }
  .avatar.avatar > svg.avatar-letter { inline-size: 100%; block-size: 100%; fill: currentColor; }
  .avatar.has-photo { position: relative; }
  .avatar.has-photo > img.avatar-photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
  .avatar.avatar.is-pending > img.avatar-photo { filter: brightness(0.6); }
  .avatar-pending-mark {
    position: absolute;
    inset: 30%;
    z-index: 1;
    pointer-events: none;
    background-color: var(--on-fill);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .avatar-letter text { font-family: var(--font-sans); font-size: 42px; font-weight: var(--font-weight-medium); }

  .app-root.is-in-room .main-viewport {
    padding: var(--space-3) var(--space-4) calc(var(--safe-bottom) + var(--space-2));
    scroll-padding-block-end: calc(var(--safe-bottom) + var(--space-2));
    mask-image: none;
    -webkit-mask-image: none;
    overflow: hidden;
  }

  .app-root:not(:has(#rooms-view.active)) #btn-create-room-fab,
  .app-root:not(:has(#read-view.active)) #btn-article-fab,
  .app-root:not(:has(#arena-view.active)) #btn-post-fab,
  .app-root:not(:has(#arena-view.active)) #btn-publish-filter,
  .app-root:has(#publish-page:not([hidden]):not(.is-own-profile)) #btn-post-fab,
  .app-root:has(#publish-page:not([hidden])) #btn-publish-filter,
  .app-root.is-in-room .btn-create-room-fab {
    display: none;
  }
  .app-root:has(#publish-page:not([hidden])) .player-bubble,
  .app-root.is-keyboard #btn-publish-filter { display: none; }

  .app-root.is-in-room .bottom-navigation { display: none; }
  .app-root.is-keyboard .bottom-navigation,
  .app-root.is-keyboard .audio-dock,
  .app-root.is-keyboard .btn-create-room-fab { display: none; }
  .app-root.is-room-listener .audio-dock { display: none; }
  .app-root.is-keyboard .player-bubble,
  .app-root:has(#room-now-playing:not([hidden])) .player-bubble { display: none; }
  .app-root:has(#room-reactions-menu:not([hidden])) .player-bubble { display: none; }
  .app-root.is-in-room #header-search-container { display: none; }
  .app-root.is-in-room #btn-notifications-toggle,
  .app-root.is-in-room #btn-app-menu { display: none; }
  .app-root:not(.is-in-room) #btn-room-menu { display: none; }
  .app-menu-panel.is-room-menu { inset-inline: var(--space-4) auto; margin-inline: auto 0; }
  .app-menu-panel.is-room-menu > :not(.app-menu-list),
  .app-menu-panel.is-room-menu .app-menu-list > :not(#app-menu-room) { display: none; }
  .app-menu-panel.is-room-menu .app-menu-room { padding-block-end: 0; margin-block-end: 0; border-block-end: 0; }

  .app-root.is-in-room .audio-dock.is-player-expanded {
    inset-inline: var(--space-4);
    inset-block-end: calc(var(--space-4) + var(--safe-bottom) + 7.75rem);
    max-inline-size: calc(48rem - var(--space-4) * 2);
    padding-block-end: var(--space-4);
    border-radius: var(--r-sheet);
  }
  .app-root.is-in-room .audio-dock.is-player-expanded .dock-grab { display: none; }
  .app-root.is-in-room .audio-dock.is-player-expanded + .player-scrim { display: none; }

  .is-live-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  @media (min-width: 900px) {
    .app-root { max-inline-size: none; }
    .app-body { padding-inline-start: calc(var(--rail-inline-size) + var(--space-4)); }
    .app-header { padding-inline: var(--space-6); }
    .header-main-bar { max-inline-size: var(--content-max); margin-inline: auto; }
    .header-search-bar { max-inline-size: 36rem; margin-inline-end: auto; }
    .main-viewport { padding-inline: var(--space-6); padding-block-end: calc(var(--dock-h, var(--dock-block-size)) + var(--space-8)); }
    .main-viewport > * { inline-size: 100%; max-inline-size: var(--content-max); margin-inline: auto; }
    .pub-view { inline-size: 100%; max-inline-size: 40rem; margin-inline: auto; }
    .bottom-navigation {
      inset-block: var(--space-4) auto;
      inset-inline-start: var(--space-4);
      inset-inline-end: auto;
      inline-size: var(--rail-inline-size);
      max-inline-size: none;
      block-size: auto;
      margin: 0;
      padding: calc(var(--space-3) + 3.5rem + var(--space-4)) var(--space-2) calc(var(--space-3) + var(--tap) + var(--space-2) + var(--tap) + var(--space-3));
      grid-template-columns: none;
      grid-auto-rows: 4rem;
      align-content: start;
      gap: var(--space-2);
      z-index: calc(var(--z-sticky) - 1);
    }
    .nav-label { font-size: var(--fs-label); }
    .app-root.is-in-room .bottom-navigation { display: grid; padding-block-end: var(--space-3); }
    #btn-notifications-toggle, #btn-app-menu { position: fixed; inset-inline-start: calc(var(--space-4) + (var(--rail-inline-size) - var(--tap)) / 2); z-index: calc(var(--z-sticky) + 1); }
    #btn-notifications-toggle { inset-block-start: calc(var(--rail-tail) + var(--space-3)); }
    #btn-app-menu { inset-block-start: calc(var(--rail-tail) + var(--space-3) + var(--tap) + var(--space-2)); }
    .notifications-panel { position: fixed; inset-block: auto var(--space-4); inset-inline: calc(var(--rail-inline-size) + var(--space-4) + var(--space-2)) auto; margin-inline: 0; inline-size: 28rem; max-block-size: calc(100vh - var(--space-8)); }
    .app-menu-panel { inline-size: 18rem; }
    .app-root.is-keyboard .bottom-navigation { display: grid; }
    .btn-create-room-fab { inset-block: calc(var(--space-4) + var(--space-3)) auto; inset-inline-start: calc(var(--space-4) + (var(--rail-inline-size) - 3.5rem) / 2); inline-size: 3.5rem; block-size: 3.5rem; padding-inline: 0; }
    .btn-create-room-fab span { display: none; }
    .btn-create-room-fab svg { inline-size: 1.5rem; block-size: 1.5rem; }
    .app-root.is-fabs-away .btn-create-room-fab { opacity: 1; translate: none; visibility: visible; pointer-events: auto; }
    .player-bubble { inset-inline-end: var(--content-edge); inset-block-end: var(--space-6); }
    .pub-filter-fab { inset-inline-start: calc(var(--rail-inline-size) + var(--space-4) + var(--content-edge)); inset-block-end: var(--space-6); }
    .pub-filter-menu { inset-inline-start: calc(var(--rail-inline-size) + var(--space-4) + var(--content-edge) + var(--tap) + var(--space-2)); inset-block-end: var(--space-6); }
    .audio-dock { inset-inline: calc(var(--rail-inline-size) + var(--space-4) + var(--content-edge)) var(--content-edge); inset-block-end: var(--space-4); max-inline-size: none; }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) {
      display: grid;
      grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr) minmax(14rem, 1fr);
      grid-template-rows: auto auto;
      column-gap: var(--space-6);
      row-gap: var(--space-1);
      align-items: center;
      padding: var(--space-2) var(--space-6);
    }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .dock-grab { display: none; }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .player-btn.is-large { inline-size: 3rem; block-size: 3rem; }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .dock-head { grid-column: 1; grid-row: 1 / 3; }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .dock-controls-row { grid-column: 2; grid-row: 1; justify-self: center; margin-inline: 0; }
    .audio-dock.is-docked:not(.is-dock-collapsed):not(.is-player-expanded) .dock-scrubber-row { grid-column: 2; grid-row: 2; }
    .audio-dock.is-player-expanded, .app-root.is-in-room .audio-dock.is-player-expanded { inset-inline: calc(var(--rail-inline-size) + var(--space-4) + var(--content-edge)) var(--content-edge); inset-block-end: var(--space-4); max-inline-size: none; padding-block: var(--space-4); border-radius: var(--r-sheet); }
    .audio-dock.is-player-expanded .dock-grab { display: none; }
    .audio-dock.is-player-expanded .dock-controls-row { margin-inline: auto; }
    .reader-modal .rd-page { padding-inline: clamp(2rem, 8vw, 8rem); }
    .rd-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }
    .rd-article { align-items: flex-start; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}