/* Lumeo components. Every value comes from tokens.css. Showcase: /dev/styleguide. */

/* ---- Icon ---- */
.icon {
    width: var(--size-icon);
    height: var(--size-icon);
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-control);
    padding: 0 var(--space-5);
    border: var(--border-width-strong) solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.btn:hover,
.btn.is-hover { color: var(--color-text); }

.btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.btn--primary:hover,
.btn--primary.is-hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn--primary:active { background: var(--color-accent-pressed); }

.btn--secondary {
    border-color: var(--color-text);
    background: transparent;
}
.btn--secondary:hover,
.btn--secondary.is-hover { background: var(--color-text); color: var(--color-bg); }

.btn--ghost {
    background: transparent;
    color: var(--color-text);
}
.btn--ghost:hover,
.btn--ghost.is-hover { background: var(--color-surface-sunken); }

.btn--danger {
    background: var(--color-danger);
    color: var(--color-surface);
}
.btn--danger:hover,
.btn--danger.is-hover { background: var(--color-text); color: var(--color-surface); }

.btn--chrome {
    background: var(--color-chrome-raised);
    color: var(--color-chrome-text);
    border-color: var(--color-chrome-border);
}
.btn--chrome:hover,
.btn--chrome.is-hover { background: var(--color-chrome-border); color: var(--color-chrome-text); }

.btn--sm { min-height: var(--size-control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--icon { width: var(--size-control); padding: 0; }
.btn--sm.btn--icon { width: var(--size-control-sm); }
.btn--block { width: 100%; }

.btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }

.btn[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.btn--chrome[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--color-surface-sunken);
    border-color: transparent;
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.btn.is-loading { cursor: progress; }

/* ---- Form fields ---- */
.field { display: grid; gap: var(--space-2); }

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.field__hint,
.field__error {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.field__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-danger);
    font-weight: var(--weight-medium);
}

.input,
.select,
.textarea {
    width: 100%;
    min-height: var(--size-control);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.textarea { min-height: calc(var(--size-control) * 2.5); resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }

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

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    border-color: var(--color-text);
    border-radius: var(--radius-md);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
    border-width: var(--border-width-strong);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    background: var(--color-surface-sunken);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.input-group { position: relative; }
.input-group .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.input-group .input { padding-left: calc(var(--space-3) + var(--size-icon) + var(--space-2)); }

.input--chrome {
    background: var(--color-chrome-raised);
    border-color: var(--color-chrome-border);
    color: var(--color-chrome-text);
}
.input--chrome::placeholder { color: var(--color-chrome-muted); }
.input--chrome:hover { border-color: var(--color-chrome-muted); }
.input--chrome:disabled {
    background: var(--color-chrome);
    border-color: var(--color-chrome-border);
    color: var(--color-chrome-muted);
}
.chrome .btn:disabled { background: var(--color-chrome-raised); color: var(--color-chrome-muted); }
.input-group .input--chrome ~ .icon,
.input-group .icon.icon--chrome { color: var(--color-chrome-muted); }

.check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--size-control);
    cursor: pointer;
}

.check input {
    width: var(--size-icon);
    height: var(--size-icon);
    margin: 0;
    accent-color: var(--color-accent-pressed);
}

/* ---- Badges and state indicators ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.badge--live { background: var(--color-live); color: var(--color-on-live); }
.badge--break { background: var(--color-break); color: var(--color-on-break); }
.badge--offline { background: var(--color-offline); color: var(--color-on-offline); }
.badge--premium { background: var(--color-premium); color: var(--color-on-premium); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }

/* The pulsing pixel echoes the last block of the logo. */
.badge--live::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-on-live);
    animation: pixel-pulse var(--duration-pulse) var(--ease-standard) infinite;
}

@keyframes pixel-pulse {
    50% { opacity: 0.25; }
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-scrim);
    color: var(--color-chrome-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

a.tag:hover { background: var(--color-accent-soft); color: var(--color-accent-text); }

/* ---- Avatar ---- */
.avatar {
    display: inline-grid;
    place-items: center;
    width: var(--size-avatar);
    height: var(--size-avatar);
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    overflow: hidden;
}
.avatar--sm { width: var(--size-avatar-sm); height: var(--size-avatar-sm); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.avatar--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font-size: var(--text-2xl); border-radius: var(--radius-lg); }

/* ---- Cards ---- */
.card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.card--padded { padding: var(--space-6); }

.media-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
}

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

.media-card__thumb {
    position: relative;
    aspect-ratio: var(--ratio-video);
    border-radius: var(--radius-lg);
    background: var(--color-chrome-raised);
    color: var(--color-chrome-border);
    overflow: hidden;
    display: grid;
    place-items: center;
    transition: box-shadow var(--duration-base) var(--ease-standard);
}

.media-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card__frame { position: absolute; inset: 0; }
.media-card__thumb .brand__mark { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }
.media-card__thumb .logo__block,
.player__stage .logo__block { fill: var(--color-chrome-border); }

.media-card:hover .media-card__thumb,
.media-card:focus-visible .media-card__thumb {
    box-shadow: 0 0 0 var(--border-width-strong) var(--color-accent), var(--shadow-raised);
}

.media-card__badge { position: absolute; top: var(--space-2); left: var(--space-2); }
.media-card__chip { position: absolute; bottom: var(--space-2); left: var(--space-2); }
.media-card__chip--end { left: auto; right: var(--space-2); }
.media-card__premium { position: absolute; top: var(--space-2); right: var(--space-2); }

.media-card__body {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.media-card__text { min-width: 0; }

.media-card__title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-card__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.channel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.channel-card:hover {
    color: var(--color-text);
    border-color: var(--color-text);
    box-shadow: var(--shadow-raised);
}

.channel-card__name { font-weight: var(--weight-bold); font-size: var(--text-lg); }

/* ---- Player shell ---- */
.player {
    container: player / inline-size;
    background: var(--color-chrome);
    color: var(--color-chrome-text);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.player__stage {
    position: relative;
    aspect-ratio: var(--ratio-video);
    display: grid;
    place-items: center;
    background: var(--color-chrome);
    color: var(--color-chrome-border);
}

.player__stage .brand__mark { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }
.player__stage video { width: 100%; height: 100%; }
.player__status { position: absolute; top: var(--space-4); left: var(--space-4); }
.player__message { position: absolute; inset: auto var(--space-4) var(--space-4) var(--space-4); }

.player__controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-chrome-raised);
}

.player__controls .btn--ghost { color: var(--color-chrome-text); }
.player__controls .btn--ghost:hover { background: var(--color-chrome-border); }
.player__spacer { flex: 1; }

.menu { position: relative; }

.menu__list {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-2));
    z-index: var(--z-dropdown);
    min-width: var(--size-menu-min);
    padding: var(--space-1);
    background: var(--color-chrome-raised);
    border: var(--border-width) solid var(--color-chrome-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

.menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: var(--size-control-sm);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-chrome-text);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.menu__item:hover { background: var(--color-chrome-border); }
.menu__item[aria-checked="true"] { color: var(--color-accent); font-weight: var(--weight-bold); }

/* ---- Chat ---- */
.chat {
    display: flex;
    flex-direction: column;
    background: var(--color-chrome);
    color: var(--color-chrome-text);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: var(--size-chat-min);
    /* The messages never decide the height of the panel: it takes the height of its grid row (the player column) or its
       minimum, and the log scrolls inside. Without this, every new message made the panel taller and moved the form down. */
    contain: size;
}

.chat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-chrome-border);
    font-weight: var(--weight-bold);
}

.chat__log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    overflow-y: auto;
    min-height: 0;
}

.chat__message {
    position: relative;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.chat__message:hover { background: var(--color-chrome-raised); }
.chat__author { font-weight: var(--weight-bold); color: var(--color-accent); margin-right: var(--space-1); }
.chat__author--owner { color: var(--color-premium); }
.chat__role { margin-right: var(--space-1); }
.chat__message--deleted { color: var(--color-chrome-muted); font-style: italic; }

.chat__tools {
    position: absolute;
    top: 0;
    right: var(--space-1);
    display: none;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-chrome-raised);
    border: var(--border-width) solid var(--color-chrome-border);
    border-radius: var(--radius-sm);
}

.chat__message:hover .chat__tools,
.chat__message:focus-within .chat__tools { display: flex; }

.chat__form {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: var(--border-width) solid var(--color-chrome-border);
}

.chat__form .input { flex: 1; }
.chat__note { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-chrome-muted); }

/* ---- Notification bell ---- */
.bell { position: relative; }

.bell__count {
    position: absolute;
    top: calc(var(--space-1) * -1);
    right: calc(var(--space-1) * -1);
    min-width: var(--size-icon);
    height: var(--size-icon);
    padding: 0 var(--space-1);
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 var(--border-width-strong) var(--color-chrome);
}

/* ---- Tables (dashboards) ---- */
.table-wrap { position: relative; overflow-x: auto; }

.table {
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.table th,
.table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: var(--border-width) solid var(--color-border);
}

.table th {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-sunken);
    white-space: nowrap;
}

.table tbody tr:hover { background: var(--color-bg); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.stat {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
}

.stat__value {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
}

/* A word instead of a number ("Офлайн", "Перерва"): a step smaller, so it fits a quarter of the row at 1280 px. */
.stat__value--word { font-size: var(--text-2xl); overflow-wrap: anywhere; }

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--color-border);
    overflow-x: auto;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-control);
    padding: 0 var(--space-4);
    border: 0;
    border-bottom: var(--border-width-strong) solid transparent;
    margin-bottom: calc(var(--border-width) * -1);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

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

.tab[aria-selected="true"],
.tab[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* ---- Modal: native <dialog>, opened with showModal() ---- */
.modal {
    width: calc(100% - var(--space-8));
    max-width: var(--modal-width);
    padding: var(--space-6);
    border: 0;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
}

.modal::backdrop { background: var(--color-scrim); }
.modal__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.modal__body { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---- Pagination ---- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

.pagination a,
.pagination span {
    display: inline-grid;
    place-items: center;
    min-width: var(--size-control);
    height: var(--size-control);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.pagination a:hover { background: var(--color-surface-sunken); }
.pagination [aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.pagination [aria-disabled="true"] { color: var(--color-text-muted); }

/* ---- Alerts ---- */
.alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border-left: var(--space-1) solid currentColor;
    font-size: var(--text-sm);
}

.alert__title { font-weight: var(--weight-bold); }
.alert__body { color: var(--color-text); }
.alert--info { background: var(--color-info-soft); color: var(--color-info); }
.alert--success { background: var(--color-success-soft); color: var(--color-success); }
.alert--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.alert--warning { background: var(--color-break); color: var(--color-on-break); }
.alert--warning .alert__body { color: var(--color-on-break); }

/* ---- Empty and loading states ---- */
.empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    border: var(--border-width-strong) dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty__mark { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.empty__text { max-width: var(--measure); color: var(--color-text-muted); }

.skeleton {
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
    animation: skeleton-pulse var(--duration-skeleton) var(--ease-standard) infinite;
}

.skeleton--thumb { aspect-ratio: var(--ratio-video); border-radius: var(--radius-lg); }
.skeleton--line { height: var(--space-4); }
.skeleton--line + .skeleton--line { margin-top: var(--space-2); width: 60%; }

@keyframes skeleton-pulse {
    50% { opacity: 0.5; }
}

.spinner {
    width: var(--size-icon);
    height: var(--size-icon);
    border: var(--border-width-strong) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: spin var(--duration-spin) linear infinite;
}

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

/* ---- Logo ---- */
.logo__tile { fill: var(--color-chrome); }
.logo__block { fill: var(--color-chrome-text); }
.logo__live { fill: var(--color-live); }
.logo--bare .logo__tile { fill: none; }
.empty .logo__block { fill: var(--color-text); }
.empty .logo__tile { fill: var(--color-surface-sunken); }

/* ---- Styleguide helpers ---- */
.is-focus { box-shadow: var(--focus-ring); }
.chrome .is-focus { box-shadow: var(--focus-ring-chrome); }

.sg-frame {
    border: var(--border-width) dashed var(--color-border-control);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sg-frame .site-header { position: static; }
.sg-frame--padded { padding: var(--space-6); }
.sg-frame--dialog { padding: var(--space-8) var(--space-6); background: var(--color-scrim); }
.sg-frame--dialog .modal { margin: 0 auto; display: block; }
.grid--start { align-items: start; }

.sg-swatch {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.sg-swatch__chip {
    height: var(--size-avatar-lg);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--color-border);
}

.sg-token { min-width: calc(var(--space-16) + var(--space-8)); }

.sg-state-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

@media (max-width: 40rem) {
    .modal__actions { flex-direction: column-reverse; }
    .modal__actions .btn { width: 100%; }
}

/* ---- Account pages: auth card, account type switch, password field, strength meter ---- */
.auth {
    max-width: var(--size-auth);
    margin: var(--space-8) auto 0;
    padding: var(--space-8);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.auth__head {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-align: center;
}

.auth--inline { margin: 0; max-width: none; }
.auth__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); }
.profile-head--compact { margin-bottom: 0; }
.auth__head h1 { font-size: var(--text-2xl); }
.auth__head .brand__mark { width: var(--size-avatar); height: var(--size-avatar); margin-bottom: var(--space-2); }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.segmented {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-md);
}

.segmented input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-control-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.segmented label:hover { color: var(--color-text); }
.segmented input:checked + label { background: var(--color-text); color: var(--color-bg); }
.segmented input:focus-visible + label { box-shadow: var(--focus-ring); }

.input-group--action .input { padding-left: var(--space-3); padding-right: calc(var(--size-control-sm) + var(--space-3)); }
.input-group__action { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); }
.input-group__action .icon { position: static; transform: none; color: inherit; pointer-events: auto; }

.meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.meter span { height: var(--space-1); border-radius: var(--radius-full); background: var(--color-border); }
.meter[data-level="1"] span:nth-child(1) { background: var(--color-danger); }
.meter[data-level="2"] span:nth-child(-n+2) { background: var(--color-accent); }
.meter[data-level="3"] span { background: var(--color-success); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }

.file-button { position: relative; cursor: pointer; }
.file-button:focus-within { box-shadow: var(--focus-ring); }

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-aside); gap: var(--space-6); align-items: start; }
.profile-layout__main, .profile-layout__aside { display: grid; gap: var(--space-6); }
.profile-notices { margin-bottom: var(--space-6); display: grid; gap: var(--space-3); }
.card__title { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.card__lead { margin-bottom: var(--space-4); }
.profile-head { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8); }
/* The text keeps a readable width; when there is no room the buttons go to the next line instead of squeezing it. */
.profile-head__text { flex: 1 1 var(--size-profile-text-min); min-width: 0; }
.profile-head__name { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
/* A long nickname has no spaces: it breaks inside instead of going past the edge of a phone screen. */
.profile-head__name h1 { min-width: 0; overflow-wrap: anywhere; }

.header-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-control);
    padding-right: var(--space-2);
    color: var(--color-chrome-text);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.header-user:hover { color: var(--color-accent); }

@media (max-width: 64rem) {
    .profile-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
    .auth { padding: var(--space-6); margin-top: var(--space-4); }
    .form-row { grid-template-columns: 1fr; }
}

/* ---- Mascot Lumi: the container, the posters and the canvas ---- */
/* The size comes from data-size (no inline style, see the content security policy). */
.mascot[data-size="32"] { --mascot-size: var(--mascot-size-32); }
.mascot[data-size="48"] { --mascot-size: var(--mascot-size-48); }
.mascot[data-size="96"] { --mascot-size: var(--mascot-size-96); }
.mascot[data-size="112"] { --mascot-size: var(--mascot-size-112); }
.mascot[data-size="176"] { --mascot-size: var(--mascot-size-176); }
.mascot[data-size="192"] { --mascot-size: var(--mascot-size-192); }
.mascot[data-size="200"] { --mascot-size: var(--mascot-size-200); }
.mascot[data-size="288"] { --mascot-size: var(--mascot-size-288); }
.mascot[data-size="320"] { --mascot-size: var(--mascot-size-320); }
.mascot[data-size="352"] { --mascot-size: var(--mascot-size-352); }
.mascot {
    --mascot-size: var(--mascot-default-size);
    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--mascot-size);
    aspect-ratio: 14 / 16;
}

.mascot__poster,
.mascot__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.mascot__poster { object-fit: contain; image-rendering: pixelated; }

/* The posters are PNG, so each style has its own. Scripts hide them when a canvas takes over. */
.mascot__poster--amber { display: none; }
html[data-theme="amber"] .mascot__poster--pink { display: none; }
html[data-theme="amber"] .mascot__poster--amber { display: block; }
.mascot[data-mode="3d"] .mascot__poster,
.mascot[data-mode="2d"] .mascot__poster,
.mascot[data-mode="poster"] .mascot__canvas { display: none; }

.mascot__canvas { image-rendering: pixelated; }

/* A light plate behind Lumi for dark surfaces, where the dark body would disappear. */
.mascot--plate {
    padding: var(--space-3);
    box-sizing: content-box;
    width: calc(var(--mascot-size) - var(--space-6));
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.mascot--plate .mascot__poster,
.mascot--plate .mascot__canvas { inset: var(--space-3); width: calc(100% - var(--space-6)); height: calc(100% - var(--space-6)); }

/* The loading indicator hops on the spot. Only transform animates, and reduce motion switches it off. */
.mascot--loader .mascot__canvas,
.mascot--loader .mascot__poster { animation: mascot-hop var(--duration-hop) var(--ease-standard) infinite; }

@keyframes mascot-hop {
    50% { transform: translateY(calc(var(--space-2) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
    .mascot--loader .mascot__canvas,
    .mascot--loader .mascot__poster { animation: none; }
}

/* ---- Mascot lab (dev pages) ---- */
.mascot-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--size-mascot-panel)); gap: var(--space-8); align-items: start; }
.mascot-lab__stage { display: grid; place-items: center; min-height: var(--size-mascot-stage); padding: var(--space-6); border-radius: var(--radius-lg); border: var(--border-width) solid var(--color-border); background: var(--color-bg); }
.mascot-lab__stage[data-surface="dark"] { background: var(--color-chrome); border-color: var(--color-chrome-border); }
.mascot-lab__stats { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4); }
.mascot-lab__stats dt { color: var(--color-text-muted); }
.mascot-lab__stats dd { margin: 0; font-weight: var(--weight-semibold); }
.mascot-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); }
.mascot-figure { display: grid; justify-items: center; gap: var(--space-2); margin: 0; }
.range { width: 100%; accent-color: var(--color-accent-pressed); }

@media (max-width: 64rem) {
    .mascot-lab { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Studio side menu ---- */
.side-nav {
    display: grid;
    gap: var(--space-1);
}

.side-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--size-control);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.side-nav__item:hover { background: var(--color-surface-sunken); color: var(--color-text); }

.side-nav__item[aria-current="page"] {
    background: var(--color-surface-sunken);
    color: var(--color-text);
}

/* ---- Stream key: field and its buttons on one line, wrapping on narrow screens ---- */
.key-field {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.key-field .input { flex: 1 1 var(--size-card-min); width: auto; }

/* ---- Spec list: term and value rows ---- */
.spec-list { display: grid; }

.spec-list > div {
    display: grid;
    grid-template-columns: minmax(0, var(--size-spec-term)) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--color-text-muted); }
/* A server address has no spaces to break at. */
.spec-list dd { overflow-wrap: anywhere; }

/* On a phone the term goes above the value: two columns left a word per line and pushed the address past the edge. */
@media (max-width: 40rem) {
    .spec-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* ---- Live player: video, status over the picture and a cover when nothing plays ---- */
.player__video { position: absolute; inset: 0; background: var(--color-chrome); }

.player__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-chrome);
    color: var(--color-chrome-text);
    text-align: center;
}

.player__note { max-width: var(--size-auth); color: var(--color-chrome-muted); }
.player__viewers { position: absolute; top: var(--space-4); right: var(--space-4); }
.player__stage [hidden] { display: none; }

/* In a small player the cover must not be taller than the picture. */
@container player (max-width: 40rem) {
    .player__overlay { gap: var(--space-2); padding: var(--space-3); }
    .player__overlay .mascot { width: var(--size-mascot-overlay); }
    .player__note { font-size: var(--text-sm); }
}

/* ---- Chat: emoji panel ---- */
.chat__emoji {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--size-emoji), 1fr));
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-top: var(--border-width) solid var(--color-chrome-border);
    background: var(--color-chrome-raised);
    /* Opening the panel takes room from the log, not from the page; 50 Premium smileys scroll inside. */
    flex-shrink: 0;
    max-height: var(--size-chat-emoji-max);
    overflow-y: auto;
}

.chat__emoji[hidden] { display: none; }

.chat__emoji-item {
    min-height: var(--size-emoji);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--text-lg);
    cursor: pointer;
}

.chat__emoji-item:hover { background: var(--color-chrome-border); }

.chat__note a { color: var(--color-accent); }
.chat__text { white-space: pre-wrap; }

/* ---- Notification bell: the list opens below the button ---- */
.bell__list {
    top: calc(100% + var(--space-2));
    bottom: auto;
    width: var(--size-bell-list);
    max-height: var(--size-bell-list-max);
    overflow-y: auto;
}

.bell__item { display: grid; gap: var(--space-1); text-decoration: none; }
.bell__item--unread { border-left: var(--border-width-strong) solid var(--color-accent); }
.bell__time { color: var(--color-chrome-muted); font-size: var(--text-xs); }
.bell__empty { padding: var(--space-3); color: var(--color-chrome-muted); font-size: var(--text-sm); }
.bell__empty[hidden] { display: none; }

/* ---- Category tile ---- */
.category-tile {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}

.category-tile:hover { border-color: var(--color-text); }
.category-tile__icon { width: var(--size-icon); height: var(--size-icon); }
.category-tile__name { font-weight: var(--weight-bold); }

/* ---- Search toolbar ---- */
.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.search-toolbar__sort { display: grid; gap: var(--space-1); min-width: var(--size-menu-min); }
.section__pagination { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ---- List of people with an action on the right (bans, subscriptions) ---- */
.ban-list { display: grid; list-style: none; padding: 0; margin: 0; }

.ban-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.ban-list__row:last-child { border-bottom: 0; }
.ban-list__who { display: grid; }

/* ---- Charts and shares (analytics) ---- */
.chart {
    position: relative;
    height: var(--size-chart);
}

.share-meter {
    display: block;
    width: 100%;
    height: var(--size-meter);
    margin-bottom: var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    overflow: hidden;
}
.share-meter::-webkit-meter-bar { height: var(--size-meter); border: 0; border-radius: var(--radius-full); background: var(--color-surface-sunken); }
.share-meter::-webkit-meter-optimum-value,
.share-meter::-webkit-meter-suboptimum-value,
.share-meter::-webkit-meter-even-less-good-value { background: var(--color-accent); border-radius: var(--radius-full); }
.share-meter::-moz-meter-bar { background: var(--color-accent); border-radius: var(--radius-full); }

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-card-min), 1fr));
    gap: var(--space-4);
}
.report-grid > .card { margin: 0; }

.rank-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rank;
}
.rank-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--color-border);
    counter-increment: rank;
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li > span:first-child::before {
    content: counter(rank) ".";
    display: inline-block;
    min-width: var(--space-6);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Channel pictures ---- */
.channel-banner {
    height: var(--size-banner-max);
    margin-bottom: var(--space-6);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-sunken);
}
.channel-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.image-setting {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: var(--border-width) solid var(--color-border);
}
.image-setting:first-of-type { border-top: 0; }

/* On a phone the picture, the text and the buttons go one under another: in three columns the text shrank to nothing
   and its words ran over the buttons. */
@media (max-width: 40rem) {
    .image-setting { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .image-setting__banner { width: 100%; }
}
.image-setting__text h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.image-setting__banner {
    width: var(--size-banner-preview);
    aspect-ratio: var(--ratio-banner);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}
.image-setting__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Administrator lists ---- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.toolbar .input { flex: 1; min-width: var(--size-card-min-tight); max-width: var(--size-search-max); }

a.stat--link { color: inherit; text-decoration: none; }
a.stat--link:hover { border-color: var(--color-border-control); }
a.stat--link:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* Sortable column heads: the link keeps the colour of the head; the arrow shows the active column. */
/* The sort link fills a touch target of at least 24 px (WCAG 2.2, 2.5.8) without changing the height of the row. */
.table th a { color: inherit; text-decoration: none; display: inline-block; padding-block: var(--space-1); margin-block: calc(-1 * var(--space-1)); }
.table th a:hover { text-decoration: underline; }
.table th[aria-sort="ascending"] a::after { content: " \2191"; }
.table th[aria-sort="descending"] a::after { content: " \2193"; }

/* ---- Premium: plans, benefits, checkout ---- */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-card-min), 1fr));
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.plan { position: relative; }
.plan input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.plan__body {
    display: grid;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    cursor: pointer;
}
.plan__body:hover { border-color: var(--color-border-control); }
.plan input:checked + .plan__body { border-color: var(--color-text); background: var(--color-accent-soft); }
.plan input:focus-visible + .plan__body { box-shadow: var(--focus-ring); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan__name { font-weight: var(--weight-bold); font-size: var(--text-lg); }
.plan__price { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.plan__per { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--color-text-muted); }

.benefits { display: grid; gap: var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.benefits li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.benefits .icon { color: var(--color-success); margin-top: var(--space-1); }

.checkout__row { display: flex; justify-content: space-between; gap: var(--space-4); }
.checkout__row--total { font-size: var(--text-xl); font-weight: var(--weight-bold); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }

.chat__emoji-item--premium { background: var(--color-accent-soft); border-radius: var(--radius-md); }

/* History of what the user opened */
.history-list { margin: 0; padding: 0; list-style: none; }
.history-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}
.history-list li:last-child { border-bottom: 0; }
.history-list__title { font-weight: var(--weight-semibold); }

/* ---- Prose: long text of the pages "Про сервіс", "Допомога", "Умови користування" ---- */
.prose { max-width: var(--measure-prose); line-height: var(--leading-normal); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); font-size: var(--text-2xl); }
.prose h3 { margin-top: var(--space-8); font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose strong { font-weight: var(--weight-semibold); }
.prose__note { color: var(--color-text-muted); font-size: var(--text-sm); }
/* The card around the text is as wide as the text, so no empty band is left on its right at 1920 px. */
.prose-card { max-width: calc(var(--measure-prose) + 2 * var(--space-6)); }