/* Controls, surfaces, registries, member space and moderation UI. */
html[data-theme] {
button, input, select, textarea { font: inherit; }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ui-shadow-focus);
}

/* Dedicated administration portal */
.admin-page-heading .page-symbol { color: var(--ui-fire); }
.admin-portal { width: min(100%, 78rem); margin: 1rem auto 0; }
.admin-auth-card {
  position: relative;
  overflow: hidden;
  min-height: 28rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  background:
    radial-gradient(circle at 92% 5%, rgba(255, 101, 59, 0.12), transparent 28rem),
    color-mix(in srgb, var(--ui-surface) 90%, transparent);
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(24px) saturate(130%);
}
.admin-auth-card::before {
  position: absolute;
  inset: 0 auto auto 8%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-fire), transparent);
  content: "";
}
.admin-login-stage {
  display: grid;
  width: min(100%, 34rem);
  margin: clamp(1.5rem, 5vw, 4rem) auto;
  gap: 1rem;
}
.admin-login-copy { display: grid; gap: 0.45rem; margin-bottom: 0.5rem; text-align: center; }
.admin-login-copy h2 { margin: 0; color: var(--ui-text-strong); font-size: clamp(1.6rem, 4vw, 2.25rem); }
.admin-login-copy p:last-child { margin: 0; color: var(--ui-text-muted); line-height: 1.65; }
.admin-login-stage > label { display: grid; gap: 0.5rem; }
.admin-login-stage > label > span { color: var(--ui-text-muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.admin-login-stage input { width: 100%; }
.admin-security-hint { color: var(--ui-text-faint); line-height: 1.55; text-align: center; }
.admin-code-copy { margin-top: -0.25rem; }
.admin-dashboard { display: grid; gap: 1rem; }
.admin-dashboard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 46%, transparent);
}
.admin-dashboard-head h2, .admin-dashboard-head p { margin: 0; }
.admin-dashboard-head > div:nth-child(2) > p:last-child { color: var(--ui-text-muted); font-size: 0.75rem; }
.admin-identity-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(255, 126, 70, 0.4);
  border-radius: 1rem;
  color: #fff;
  background: var(--ui-gradient-brand);
  box-shadow: 0 10px 28px rgba(255, 77, 27, 0.2);
  font-weight: 900;
}
.admin-security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.admin-security-grid article {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-surface-strong) 82%, transparent);
}
.admin-security-grid span, .admin-security-grid small { color: var(--ui-text-faint); font-size: 0.65rem; }
.admin-security-grid strong { overflow: hidden; color: var(--ui-text-strong); font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1rem; }
.admin-panel-block {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-surface) 80%, transparent);
}
.admin-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-block-head h3, .admin-block-head p { margin: 0; }
.admin-block-head > span { color: var(--ui-text-muted); font-size: 0.72rem; }
.admin-count, .admin-block-head > span > strong {
  display: inline-grid;
  min-width: 2rem;
  min-height: 2rem;
  place-items: center;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-fire);
  background: var(--ui-fire-soft);
}
.admin-block-note { margin: 0.65rem 0 1rem; color: var(--ui-text-faint); font-size: 0.7rem; line-height: 1.55; }
.admin-tiktok-list, .admin-sessions-list, .admin-team-list { display: grid; gap: 0.65rem; }
.admin-tiktok-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-0) 48%, transparent);
}
.admin-tiktok-list img, .admin-tiktok-list article > span {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 0.75rem;
  object-fit: cover;
  background: var(--ui-fire-soft);
}
.admin-tiktok-list div { display: grid; min-width: 0; gap: 0.15rem; }
.admin-tiktok-list small { color: var(--ui-text-muted); }
.admin-tiktok-list em { color: var(--ui-success); font-size: 0.65rem; font-style: normal; font-weight: 750; }
.admin-empty { margin: 0; padding: 1rem; color: var(--ui-text-faint); text-align: center; }
.admin-session-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-0) 48%, transparent);
}
.admin-session-card.current { border-color: color-mix(in srgb, var(--ui-success) 45%, var(--ui-border)); }
.admin-session-card.revoked { opacity: 0.55; }
.admin-session-card > div { display: grid; min-width: 0; gap: 0.2rem; }
.admin-session-card small, .admin-session-card p { overflow: hidden; margin: 0; color: var(--ui-text-faint); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-session-card .auth-secondary { grid-column: 1 / -1; justify-self: start; }
.admin-session-status { color: var(--ui-success); font-size: 0.64rem; font-weight: 800; }
.admin-session-card.revoked .admin-session-status { color: var(--ui-text-faint); }
.admin-team-block { margin-top: 0; }
.admin-team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-registry-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-bg-0) 50%, transparent);
}
.admin-registry-card header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.admin-registry-card header div { display: grid; min-width: 0; gap: 0.2rem; }
.admin-registry-card header small { overflow: hidden; color: var(--ui-text-faint); text-overflow: ellipsis; white-space: nowrap; }
.admin-registry-card header > span { padding: 0.35rem 0.55rem; border-radius: var(--ui-radius-pill); color: var(--ui-fire); background: var(--ui-fire-soft); font-size: 0.62rem; font-weight: 800; }
.admin-registry-links { margin: 0; color: var(--ui-text-muted); font-size: 0.68rem; }
.admin-registry-card .permission-control { padding: 0.65rem; }
.admin-registry-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.25rem; }
.admin-moderators-block { margin-bottom: 1rem; }
.admin-moderator-form {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.85rem;
}
.admin-moderator-form label { display: grid; gap: 0.35rem; min-width: 0; }
.admin-moderators-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.admin-moderator-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-bg-0) 50%, transparent);
}
.admin-moderator-card header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.admin-moderator-avatar { width: 3rem; height: 3rem; border-radius: 0.8rem; object-fit: cover; background: var(--ui-fire-soft); }
.admin-moderator-card header div { min-width: 0; display: grid; gap: 0.2rem; }
.admin-moderator-card header strong,
.admin-moderator-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-moderator-card header > span { padding: 0.35rem 0.55rem; border-radius: var(--ui-radius-pill); color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 10%, transparent); font-size: 0.62rem; font-weight: 800; }
.admin-moderator-bio { display: -webkit-box; min-height: 2.6rem; margin: 0; overflow: hidden; color: var(--ui-text-muted); font-size: 0.68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.admin-moderator-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.admin-moderator-stats span { min-width: 0; display: grid; gap: 0.15rem; padding: 0.5rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-surface) 55%, transparent); }
.admin-moderator-stats small { color: var(--ui-text-faint); font-size: 0.54rem; font-weight: 850; text-transform: uppercase; }
.admin-moderator-stats strong { overflow: hidden; color: var(--ui-text-strong); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-moderator-meta { color: var(--ui-text-faint); font-size: 0.62rem; }
.admin-moderator-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }

@media (max-width: 920px) {
  .admin-dashboard-grid, .admin-team-list, .admin-moderators-list { grid-template-columns: 1fr; }
  .admin-moderator-form { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .admin-auth-card { padding: 0.75rem; border-radius: var(--ui-radius-lg); }
  .admin-dashboard-head { grid-template-columns: auto minmax(0, 1fr); }
  .admin-dashboard-head > .auth-verified, .admin-dashboard-head > .auth-secondary { justify-self: start; }
  .admin-dashboard-head > .auth-secondary { grid-column: 1 / -1; }
  .admin-security-grid { grid-template-columns: 1fr; }
  .admin-block-head { align-items: flex-start; flex-direction: column; }
}
button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  filter: saturate(0.5);
  transform: none;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--ui-cyan);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3, h4, strong { color: var(--ui-text-strong); }
p, small { color: var(--ui-text-muted); }

/* Buttons and links */
.primary-link, .secondary-link, .auth-primary, .auth-secondary, .auth-back,
.refresh-small, .icon-button, .pagination button, .deban-close-button, .tiktok-button,
.top-levels-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.7rem;
  padding: 0.62rem 0.95rem;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.045);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
}

.primary-link::after, .secondary-link::after, .auth-primary::after, .auth-secondary::after,
.refresh-small::after, .pagination button::after, .tiktok-button::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, 0.14) 48%, transparent 82%);
  transform: translateX(-70%);
  content: "";
}

.primary-link:hover, .secondary-link:hover, .auth-primary:hover, .auth-secondary:hover,
.refresh-small:hover, .icon-button:hover, .pagination button:hover, .tiktok-button:hover,
.top-levels-link:hover {
  border-color: rgba(255, 132, 83, 0.4);
  color: var(--ui-text-strong);
  background: var(--ui-surface-hover);
  box-shadow: var(--ui-shadow-sm), var(--ui-shadow-fire);
  filter: none;
  transform: translateY(-2px);
}

.primary-link:hover::after, .secondary-link:hover::after, .auth-primary:hover::after,
.auth-secondary:hover::after, .refresh-small:hover::after, .tiktok-button:hover::after {
  opacity: 1;
  transform: translateX(70%);
}

.primary-link:active, .secondary-link:active, .auth-primary:active, .auth-secondary:active,
.refresh-small:active, .icon-button:active, .pagination button:active, .tiktok-button:active {
  transform: translateY(0) scale(0.98);
}

.primary-link, .auth-primary, .tiktok-button {
  border-color: rgba(255, 152, 79, 0.5);
  color: #fff;
  background: var(--ui-gradient-brand);
  box-shadow: 0 12px 28px rgba(229, 71, 39, 0.22), inset 0 1px rgba(255, 255, 255, 0.22);
}

.auth-primary { justify-content: space-between; }
.auth-primary b { color: rgba(255, 255, 255, 0.9); font-size: 1rem; }
.auth-back { min-height: 2rem; padding: 0.35rem 0; border: 0; color: var(--ui-text-muted); background: transparent; box-shadow: none; }
.danger, .auth-secondary.danger, .deban-close-button {
  border-color: color-mix(in srgb, var(--ui-danger) 38%, transparent);
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}
.icon-button { width: 2.65rem; min-width: 2.65rem; padding: 0; border-radius: 0.8rem; }
.top-levels-link { min-height: 2rem; padding: 0.4rem 0.65rem; color: var(--ui-cyan); background: var(--ui-cyan-soft); }

.ui-ripple {
  position: absolute;
  z-index: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(0);
}

/* Form controls */
label { color: var(--ui-text-muted); font-size: 0.68rem; font-weight: 670; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  outline: none;
  color: var(--ui-text-strong);
  background: color-mix(in srgb, var(--ui-bg-0) 64%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
  caret-color: var(--ui-fire-bright);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select { padding-right: 2.2rem; color-scheme: inherit; }
input::placeholder, textarea::placeholder { color: var(--ui-text-faint); opacity: 0.84; }
input:hover, select:hover, textarea:hover { border-color: var(--ui-border-strong); }
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--ui-cyan) 58%, transparent);
  background: color-mix(in srgb, var(--ui-bg-0) 82%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--ui-danger) 68%, transparent);
  box-shadow: 0 0 0 3px var(--ui-danger-soft);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-fire); }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  color: var(--ui-text);
  background: var(--ui-surface-2);
  cursor: pointer;
}

/* Shared premium surfaces */
.stats article, .live-moderators-panel, .top-levels-panel, .top-donors-panel, .recent-panel,
.filters, .registry, .level-toolbar, .user-toolbar,
.deban-panel, .deban-appeals-panel, .account-layout, .auth-card, .member-panel,
.tiktok-link-card, .protected-accounts-card, .cosmetic-current-card, .cosmetic-section,
.profile-community, .profile-history section, .team-admin-summary {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  background: var(--ui-gradient-panel);
  box-shadow: var(--ui-shadow-sm), inset 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px) saturate(125%);
}

.stats article::before, .live-moderators-panel::before, .top-levels-panel::before,
.top-donors-panel::before, .recent-panel::before, .filters::before, .registry::before,
.deban-panel::before, .deban-appeals-panel::before, .account-layout::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, rgba(255, 125, 70, 0.5), rgba(82, 229, 247, 0.28), transparent);
  content: "";
}

.stats article:hover, .top-levels-panel:hover, .top-donors-panel:hover, .recent-panel:hover,
.deban-panel:hover, .level-card:hover, .user-card:hover {
  border-color: var(--ui-border-strong);
  box-shadow: var(--ui-shadow-md), var(--ui-shadow-fire), inset 0 1px rgba(255, 255, 255, 0.055);
  transform: translateY(-2px);
}

.section-head, .registry-head, .live-moderators-head, .member-panel-title,
.protected-accounts-head, .cosmetic-section-head {
  position: relative;
  z-index: 1;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ui-border);
}

.section-head h2, .registry-head h2, .live-moderators-head h2, .member-panel-title h3 {
  color: var(--ui-text-strong);
  letter-spacing: -0.025em;
}

/* Dashboard */
.stats article { min-height: 8.4rem; padding: 1.25rem; }
.stats span, .stats small { color: var(--ui-text-muted); }
.stats span { font-size: 0.58rem; letter-spacing: 0.08em; }
.stats strong {
  margin: 0.65rem 0 0.2rem;
  color: var(--ui-text-strong);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.045em;
}
.stats article:nth-child(1) strong { color: var(--ui-cyan); }
.stats article:nth-child(2) strong { color: var(--ui-danger); }
.stats article:nth-child(3) strong { color: var(--ui-warning); }
.stats article:nth-child(4) strong { color: var(--ui-success); }

.live-moderators-panel, .top-levels-panel, .top-donors-panel, .recent-panel { padding: 1.25rem; }
.live-moderators-count {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  background: rgba(255, 255, 255, 0.03);
}
.live-moderators-count strong { color: var(--ui-fire-bright); }

.home-moderator-card, .home-level-card, .recent-item {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.027);
}
.home-moderator-card:hover, .home-level-card:hover, .recent-item:hover:hover {
  border-color: var(--ui-border-strong);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}
.home-moderator-avatar, .home-level-avatar {
  border-color: rgba(255, 128, 74, 0.28);
  background: var(--ui-fire-soft);
  box-shadow: 0 0 20px rgba(255, 101, 59, 0.1);
}

/* Sanction registry */
.filters {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(8rem, 0.7fr));
  gap: 0.7rem;
  padding: 1rem;
}
.filters label, .level-toolbar label, .user-toolbar label { display: grid; gap: 0.4rem; }
.filters label > span, .level-toolbar label > span, .user-toolbar label > span {
  color: var(--ui-text-faint);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.registry { margin-top: 1rem; padding: 1.1rem; }
.registry-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.registry-head > span {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-cyan);
  background: var(--ui-cyan-soft);
  font-size: 0.6rem;
  font-weight: 760;
}
.actions-list { border-color: var(--ui-border); }
.action-row {
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  background: transparent;
}
.action-row:hover { background: rgba(255, 255, 255, 0.025); }
.identity {
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text);
  background: transparent;
}
.identity:hover { background: rgba(255, 255, 255, 0.035); }
.avatar { border: 1px solid var(--ui-border-strong); background: var(--ui-surface-2); }
.reason { color: var(--ui-text-muted); }
.action-badge, .status-badge {
  border-radius: var(--ui-radius-pill);
  font-weight: 780;
}
.action-badge.ban, .status-badge.failed { color: var(--ui-danger); background: var(--ui-danger-soft); }
.action-badge.mute { color: var(--ui-warning); background: var(--ui-warning-soft); }
.action-badge.unban, .action-badge.unmute, .status-badge.success { color: var(--ui-success); background: var(--ui-success-soft); }
.duration, .action-row time { color: var(--ui-text-muted); }
.pagination { gap: 0.6rem; }
.pagination span {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.65rem;
}
.empty-state, .deban-empty, .history-empty {
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.018);
}

/* Deban workflow */
.deban-panel, .deban-appeals-panel { padding: 1.35rem; }
.deban-search-form { gap: 0.65rem; }
.deban-banned-list, .deban-appeals-list { gap: 0.7rem; }
.deban-banned-card, .deban-appeal-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}
.deban-banned-card:hover, .deban-appeal-card:hover {
  border-color: var(--ui-border-strong);
  background: rgba(255, 255, 255, 0.045);
}
.deban-appeal-card.status-pending {
  border-color: color-mix(in srgb, var(--ui-cyan) 36%, transparent);
  box-shadow: inset 3px 0 var(--ui-cyan);
}
.deban-appeal-card.status-accepted {
  border-color: color-mix(in srgb, var(--ui-success) 36%, transparent);
  box-shadow: inset 3px 0 var(--ui-success);
}
.deban-appeal-card.status-rejected {
  border-color: color-mix(in srgb, var(--ui-danger) 36%, transparent);
  box-shadow: inset 3px 0 var(--ui-danger);
}
.deban-appeal-card.status-closed {
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-bg-0) 58%, transparent);
  filter: saturate(0.76);
}
.deban-appeal-head { color: var(--ui-text); }
.deban-appeal-head:focus-visible { border-radius: var(--ui-radius-sm); outline: none; box-shadow: var(--ui-shadow-focus); }
.deban-status {
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 34%, transparent);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-cyan);
  background: var(--ui-cyan-soft);
}
.deban-appeal-chevron { color: var(--ui-text-muted); }
.deban-ban-reason { color: var(--ui-text-muted); }
.deban-reason { color: var(--ui-text); }
.deban-code-box {
  border-color: color-mix(in srgb, var(--ui-fire) 48%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-fire-soft);
  box-shadow: inset 0 0 30px rgba(255, 101, 59, 0.04);
}
.deban-code-box small, .deban-code-box strong { color: var(--ui-fire-bright); }
.deban-selected-account img, .deban-banned-card img, .deban-appeal-head img {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface-2);
}
.deban-moderator-reply {
  border-color: color-mix(in srgb, var(--ui-success) 28%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--ui-success-soft);
}
.deban-moderator-reply strong { color: var(--ui-success); }
.deban-moderator-reply p { color: var(--ui-text); }
.deban-closed-notice {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.024);
}
.deban-attachments a { border-color: var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-bg-0); }

/* Levels and users */
.level-toolbar, .user-toolbar { padding: 1rem; }
.level-card, .user-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  background: var(--ui-gradient-panel);
  box-shadow: var(--ui-shadow-sm), inset 0 1px rgba(255, 255, 255, 0.035);
}
.level-card:hover, .user-card:hover { background: var(--ui-gradient-panel); }
.level-rank, .profile-rank {
  border-color: color-mix(in srgb, var(--ui-warning) 40%, transparent);
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
}
.level-avatar-frame, .user-avatar-frame { box-shadow: 0 0 22px rgba(255, 101, 59, 0.12); }
.level-xp i, .profile-xp-block i { background: rgba(139, 154, 190, 0.14); }
.level-xp b, .profile-xp-block b { background: var(--ui-gradient-tech); }
.user-stats, .user-meta { border-color: var(--ui-border); background: rgba(255, 255, 255, 0.022); }
.user-stats strong { color: var(--ui-text-strong); }
.user-total strong, .level-toolbar strong { color: var(--ui-fire-bright); }

/* Account and member dashboard */
.account-layout { border-radius: var(--ui-radius-xl); }
.account-intro {
  border-color: var(--ui-border);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 101, 59, 0.17), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(82, 229, 247, 0.08), transparent 30%),
    var(--ui-bg-1);
}
.account-intro h1 { color: var(--ui-text-strong); letter-spacing: -0.055em; }
.account-intro h1 span { color: transparent; background: var(--ui-gradient-brand); background-clip: text; -webkit-background-clip: text; }
.account-orbit { border-color: rgba(255, 116, 64, 0.18); }
.account-orbit-core { background: var(--ui-gradient-brand); box-shadow: 0 0 45px rgba(255, 101, 59, 0.26); }
.account-benefits li { border-color: var(--ui-border); background: rgba(255, 255, 255, 0.025); }
.account-benefits i { color: var(--ui-fire-bright); background: var(--ui-fire-soft); }
.auth-card { border-radius: 0; background: color-mix(in srgb, var(--ui-surface-0) 84%, transparent); }
.auth-stage, .auth-member { color: var(--ui-text); }
.auth-stage-head h2, .auth-member-head h2 { color: var(--ui-text-strong); }
.auth-mail-icon {
  border-color: rgba(255, 132, 74, 0.32);
  color: var(--ui-fire-bright);
  background: var(--ui-fire-soft);
  box-shadow: var(--ui-shadow-fire);
}
.auth-code-label input { color: var(--ui-fire-bright); }
.auth-message {
  border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}
.auth-message.success { border-color: color-mix(in srgb, var(--ui-success) 30%, transparent); color: var(--ui-success); background: var(--ui-success-soft); }
.auth-loading i { border-color: var(--ui-fire-soft); border-top-color: var(--ui-fire); }
.auth-member-head { border-color: var(--ui-border); }
.auth-avatar-editor::before { border-color: rgba(255, 123, 68, 0.5); box-shadow: 0 0 22px rgba(255, 101, 59, 0.15); }
.auth-avatar-editor > span, .auth-avatar-editor > img:not(.auth-avatar-frame-image) {
  border-color: var(--ui-bg-1);
  color: #fff;
  background: var(--ui-gradient-brand);
}
.auth-avatar-editor > label { border-color: var(--ui-bg-1); color: #fff; background: var(--ui-fire); }
.auth-verified {
  border-color: color-mix(in srgb, var(--ui-success) 30%, transparent);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-success);
  background: var(--ui-success-soft);
}
.auth-verified.admin { border-color: color-mix(in srgb, var(--ui-cyan) 30%, transparent); color: var(--ui-cyan); background: var(--ui-cyan-soft); }
.auth-verified.superadmin { border-color: color-mix(in srgb, var(--ui-fire) 36%, transparent); color: var(--ui-fire-bright); background: var(--ui-fire-soft); }

.member-dashboard { gap: 1rem; }
.member-sidebar {
  padding: 0.5rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 52%, transparent);
}
.member-sidebar button {
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-muted);
  background: transparent;
}
.member-sidebar button:hover { color: var(--ui-text); background: rgba(255, 255, 255, 0.035); }
.member-sidebar button.active {
  border-color: rgba(255, 126, 71, 0.24);
  color: var(--ui-text-strong);
  background: var(--ui-fire-soft);
  box-shadow: inset 2px 0 var(--ui-fire);
}
.member-sidebar button > span { color: var(--ui-fire-bright); }
.member-sidebar button small { color: var(--ui-text-faint); }
.member-panel { padding: 1.25rem; }
.member-recorder-alerts-form { display: grid; gap: 0.9rem; }
.member-recorder-alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.02); }
.member-recorder-alerts-head > div { display: grid; gap: 0.2rem; }
.member-recorder-alerts-head strong { color: var(--ui-text-strong); font-size: 0.82rem; }
.member-recorder-alerts-head span { color: var(--ui-text-muted); font-size: 0.65rem; }
.member-recorder-alerts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.member-recorder-alert-card { min-width: 0; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-surface) 72%, transparent); cursor: pointer; transition: transform var(--ui-duration) var(--ui-spring), border-color var(--ui-duration) var(--ui-ease), background var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease); }
.member-recorder-alert-card:hover { transform: translateY(-2px); border-color: var(--ui-border-strong); }
.member-recorder-alert-card.selected { border-color: color-mix(in srgb, var(--ui-success) 32%, var(--ui-border)); background: linear-gradient(120deg, color-mix(in srgb, var(--ui-success) 7%, transparent), rgba(255, 255, 255, 0.02)); }
.member-recorder-alert-card.live { box-shadow: inset 3px 0 #ff3e82; }
.member-recorder-alert-card > img { width: 3.2rem; height: 3.2rem; border: 2px solid var(--ui-border-strong); border-radius: 1rem; object-fit: cover; background: var(--ui-bg-1); }
.member-recorder-alert-card.live > img { border-color: #ff638f; box-shadow: 0 0 20px rgba(255, 62, 130, 0.16); }
.member-recorder-alert-card > span:nth-child(2) { min-width: 0; display: grid; gap: 0.18rem; }
.member-recorder-alert-card > span:nth-child(2) strong,
.member-recorder-alert-card > span:nth-child(2) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-recorder-alert-card > span:nth-child(2) strong { color: var(--ui-text-strong); font-size: 0.78rem; }
.member-recorder-alert-card > span:nth-child(2) small { color: var(--ui-cyan); font-size: 0.58rem; }
.member-recorder-alert-card > span:nth-child(2) p { margin: 0.18rem 0 0; display: -webkit-box; overflow: hidden; color: var(--ui-text-muted); font-size: 0.62rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.member-recorder-alert-toggle { position: relative; display: grid; justify-items: center; gap: 0.28rem; }
.member-recorder-alert-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.member-recorder-alert-toggle i { position: relative; width: 2.65rem; height: 1.42rem; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-bg-0); transition: background var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease); }
.member-recorder-alert-toggle i::after { position: absolute; top: 0.19rem; left: 0.2rem; width: 0.92rem; height: 0.92rem; border-radius: 50%; content: ""; background: var(--ui-text-faint); transition: transform var(--ui-duration) var(--ui-spring), background var(--ui-duration) var(--ui-ease); }
.member-recorder-alert-toggle input:checked + i { border-color: color-mix(in srgb, var(--ui-success) 55%, transparent); background: color-mix(in srgb, var(--ui-success) 24%, var(--ui-bg-0)); }
.member-recorder-alert-toggle input:checked + i::after { background: var(--ui-success); transform: translateX(1.18rem); box-shadow: 0 0 10px color-mix(in srgb, var(--ui-success) 50%, transparent); }
.member-recorder-alert-toggle input:focus-visible + i { outline: 2px solid var(--ui-cyan); outline-offset: 3px; }
.member-recorder-alert-toggle b { color: var(--ui-text-faint); font-size: 0.52rem; }
.member-recorder-alert-card.selected .member-recorder-alert-toggle b { color: var(--ui-success); }
.member-recorder-alerts-form > footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.member-recorder-alerts-form > footer .auth-message { margin: 0 auto 0 0; }
.member-recorder-alerts-empty { grid-column: 1 / -1; margin: 0; padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: var(--ui-radius-md); color: var(--ui-text-muted); text-align: center; }
.auth-member-grid article, .member-security-grid article {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(255, 255, 255, 0.026);
}
.auth-profile-form {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.tiktok-link-card, .protected-accounts-card, .cosmetic-current-card, .cosmetic-section { padding: 1.1rem; }
.tiktok-link-head, .protected-accounts-head, .cosmetic-section-head { border-color: var(--ui-border); }
.tiktok-mark {
  border-color: rgba(82, 229, 247, 0.28);
  color: var(--ui-cyan);
  background: var(--ui-cyan-soft);
  box-shadow: 0 0 20px rgba(82, 229, 247, 0.08);
}
.tiktok-link-badge, .protected-accounts-head > span, .cosmetic-section-head > span {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.025);
}
.tiktok-proof-code, .protected-proof-instructions code {
  border-color: rgba(255, 126, 71, 0.32);
  border-radius: var(--ui-radius-md);
  color: var(--ui-fire-bright);
  background: var(--ui-fire-soft);
}
.tiktok-linked, .protected-account-card, .cosmetic-option-card, .team-admin-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(255, 255, 255, 0.026);
}
.tiktok-linked:hover, .protected-account-card:hover, .cosmetic-option-card:hover, .team-admin-card:hover {
  border-color: var(--ui-border-strong);
  background: rgba(255, 255, 255, 0.045);
}
.cosmetic-option-card.active, .cosmetic-option-card.is-active {
  border-color: rgba(255, 126, 71, 0.42);
  background: var(--ui-fire-soft);
  box-shadow: var(--ui-shadow-fire);
}
.team-admin-summary strong { color: var(--ui-fire-bright); }
.team-admin-card-head { border-color: var(--ui-border); }

/* Profile modal and admin permissions */
.modal { z-index: 500; }
.modal-backdrop { background: rgba(2, 3, 8, 0.76); backdrop-filter: blur(9px) saturate(70%); }
.profile-modal-card {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-xl);
  color: var(--ui-text);
  background:
    radial-gradient(circle at 88% 0, rgba(255, 101, 59, 0.13), transparent 28%),
    color-mix(in srgb, var(--ui-surface-solid) 97%, transparent);
  box-shadow: var(--ui-shadow-lg), var(--ui-shadow-fire);
  backdrop-filter: blur(26px) saturate(135%);
}
.modal-close {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 0.8rem;
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.035);
}
.modal-close:hover { border-color: color-mix(in srgb, var(--ui-danger) 35%, transparent); color: var(--ui-danger); background: var(--ui-danger-soft); }
.profile-modal-head { border-color: var(--ui-border); }
.profile-modal-avatar { border-color: var(--ui-bg-1); background: var(--ui-surface-2); }
.profile-stats article, .profile-community-stats article, .profile-history section {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: rgba(255, 255, 255, 0.027);
}
.profile-stats span, .profile-community-stats span { color: var(--ui-text-muted); }
.profile-community {
  background: linear-gradient(135deg, var(--ui-cyan-soft), rgba(255, 255, 255, 0.02));
}
.profile-claim-badge {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-cyan);
  background: var(--ui-cyan-soft);
}
.history-item { border-color: var(--ui-border); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-bg-0) 56%, transparent); }

/* Feedback and loaders */
.ui-boot-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1rem;
  color: var(--ui-text);
  background:
    radial-gradient(circle at 42% 38%, rgba(32, 217, 255, 0.16), transparent 28%),
    radial-gradient(circle at 62% 54%, rgba(157, 78, 221, 0.13), transparent 34%),
    var(--ui-bg-0);
}
.ui-boot-loader-mark {
  position: relative;
  display: grid;
  width: 5.2rem;
  height: 5.2rem;
  place-items: center;
  border: 1px solid rgba(32, 217, 255, 0.34);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(32, 217, 255, 0.11), rgba(157, 78, 221, 0.13));
  box-shadow: 0 20px 55px rgba(32, 217, 255, 0.16), inset 0 1px rgba(255, 255, 255, 0.12);
}
.ui-boot-loader-mark::before {
  position: absolute;
  inset: -0.6rem;
  border: 1px solid rgba(157, 78, 221, 0.34);
  border-top-color: transparent;
  border-radius: 1.9rem;
  content: "";
}
.ui-boot-loader-mark img { width: 4.4rem; height: 4.4rem; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(32, 217, 255, 0.3)); }
.ui-boot-loader-copy { display: grid; gap: 0.2rem; text-align: center; }
.ui-boot-loader-copy strong { font-size: 0.92rem; letter-spacing: 0.06em; }
.ui-boot-loader-copy span { color: var(--ui-text-faint); font-size: 0.64rem; }
.ui-boot-loader-track { width: 11rem; height: 3px; overflow: hidden; border-radius: var(--ui-radius-pill); background: rgba(255, 255, 255, 0.07); }
.ui-boot-loader-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #20d9ff, #9d4edd, #ff2f9f); box-shadow: 0 0 14px rgba(32, 217, 255, 0.5); }
.ui-boot-loader.is-leaving { visibility: hidden; opacity: 0; }

.ui-skeleton, [data-ui-skeleton] {
  position: relative;
  overflow: hidden;
  border-radius: 0.45rem;
  color: transparent;
  background: rgba(147, 164, 203, 0.09);
  user-select: none;
}
.ui-skeleton::after, [data-ui-skeleton]::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
  transform: translateX(-100%);
  content: "";
}
.is-loading, [aria-busy="true"] { cursor: progress; }
button.is-loading, button[aria-busy="true"] { color: transparent; pointer-events: none; }
button.is-loading::before, button[aria-busy="true"]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
}

[data-ui-tooltip] { position: relative; }
[data-ui-tooltip]::before {
  position: absolute;
  z-index: 1000;
  right: 0;
  bottom: calc(100% + 0.55rem);
  max-width: 14rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--ui-border-strong);
  border-radius: 0.5rem;
  color: var(--ui-text-strong);
  background: color-mix(in srgb, var(--ui-surface-solid) 97%, transparent);
  box-shadow: var(--ui-shadow-sm);
  font-size: 0.58rem;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.25rem) scale(0.96);
  content: attr(data-ui-tooltip);
}
[data-ui-tooltip]:hover::before, [data-ui-tooltip]:focus-visible::before { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 920px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field { grid-column: 1 / -1; }
  .profile-community-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .stats article, .live-moderators-panel, .top-levels-panel, .top-donors-panel,
  .recent-panel, .deban-panel, .deban-appeals-panel { border-radius: var(--ui-radius-md); }
  .section-head, .registry-head, .live-moderators-head, .member-panel-title { align-items: flex-start; flex-direction: column; }
  .action-row { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); margin-top: 0.65rem; }
}

@media (max-width: 500px) {
  .filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
  .deban-search-form, .deban-banned-card, .deban-appeal-head, .deban-reply-form > div { grid-template-columns: 1fr; }
  .profile-community-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-modal-card { border-radius: var(--ui-radius-lg); }
}
}

/* Administration console: lateral navigation and category panels */
.admin-console {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}
.admin-sidebar {
  position: sticky;
  top: 6.5rem;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 70%, transparent);
  box-shadow: var(--ui-shadow-sm);
}
.admin-sidebar-title { display: grid; gap: 0.2rem; padding: 1rem; border-bottom: 1px solid var(--ui-border); }
.admin-sidebar-title small { color: var(--ui-fire); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.1em; }
.admin-sidebar-title strong { color: var(--ui-text-strong); }
.admin-sidebar nav { display: grid; gap: 0.3rem; padding: 0.55rem; }
.admin-sidebar button {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-text-muted);
  background: transparent;
  text-align: left;
}
.admin-sidebar button > svg {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.55rem;
  border-radius: 0.75rem;
  color: var(--ui-text-faint);
  background: rgba(255, 255, 255, 0.035);
}
.admin-sidebar button > span { display: grid; min-width: 0; gap: 0.14rem; }
.admin-sidebar button strong { color: inherit; font-size: 0.74rem; }
.admin-sidebar button small { overflow: hidden; color: var(--ui-text-faint); font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar button:hover { border-color: var(--ui-border); color: var(--ui-text-strong); background: rgba(255, 255, 255, 0.035); transform: translateX(0.15rem); }
.admin-sidebar button.active {
  border-color: rgba(255, 116, 64, 0.3);
  color: #fff;
  background: linear-gradient(110deg, rgba(255, 111, 51, 0.2), rgba(255, 51, 95, 0.08));
  box-shadow: inset 3px 0 var(--ui-fire);
}
.admin-sidebar button.active > svg { color: #fff; background: var(--ui-gradient-brand); box-shadow: 0 8px 20px rgba(255, 73, 29, 0.2); }
.admin-workspace { min-width: 0; }
.admin-category { display: grid; min-width: 0; gap: 1rem; animation: ui-fade-up 240ms ease both; }
.admin-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-surface) 78%, transparent);
}
.admin-category-head > div { display: grid; gap: 0.25rem; }
.admin-category-head h3, .admin-category-head p { margin: 0; }
.admin-category-head > div > p:last-child { color: var(--ui-text-faint); font-size: 0.7rem; line-height: 1.5; }
.admin-overview-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.admin-overview-stats article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: color-mix(in srgb, var(--ui-bg-0) 50%, transparent);
}
.admin-overview-stats article > span { display: grid; width: 2.9rem; height: 2.9rem; place-items: center; border-radius: 0.9rem; color: #fff; background: var(--ui-gradient-brand); }
.admin-overview-stats svg { width: 1.35rem; height: 1.35rem; }
.admin-overview-stats article > div { display: grid; gap: 0.1rem; }
.admin-overview-stats small { color: var(--ui-text-faint); font-size: 0.62rem; font-weight: 750; text-transform: uppercase; }
.admin-overview-stats strong { color: var(--ui-text-strong); font-size: 1.35rem; }
.admin-overview-stats p { margin: 0; color: var(--ui-text-muted); font-size: 0.65rem; }
.admin-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.65rem; }
.admin-toolbar label { display: grid; gap: 0.4rem; }
.admin-toolbar label span, .admin-edit-grid label span, .admin-ban-editor label span, .admin-level-editor label > span {
  color: var(--ui-text-faint);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-toolbar input { min-height: 2.8rem; }
.admin-management-list { display: grid; gap: 0.8rem; }
.admin-management-card {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-surface) 76%, transparent);
  box-shadow: var(--ui-shadow-sm);
}
.admin-management-card:hover { border-color: var(--ui-border-strong); }
.admin-management-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.admin-management-card > header > div { display: grid; min-width: 0; gap: 0.15rem; }
.admin-management-card > header small { overflow: hidden; color: var(--ui-text-faint); text-overflow: ellipsis; white-space: nowrap; }
.admin-management-card > header em { padding: 0.35rem 0.55rem; border-radius: var(--ui-radius-pill); color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 12%, transparent); font-size: 0.62rem; font-style: normal; font-weight: 800; }
.admin-card-avatar { position: relative; display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 0.9rem; color: #fff; background: var(--ui-gradient-brand); font-weight: 900; }
.admin-card-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.admin-card-avatar > i { position: absolute; right: -0.15rem; bottom: -0.15rem; width: 0.72rem; height: 0.72rem; border: 2px solid var(--ui-bg-0); border-radius: 50%; background: var(--ui-text-faint); }
.admin-card-avatar > i.online { background: var(--ui-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-success) 15%, transparent); }
.admin-card-meta, .admin-level-values, .admin-ban-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.admin-card-meta > span, .admin-level-values > span, .admin-ban-details > span { min-width: 0; padding: 0.6rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-text-muted); background: rgba(0, 0, 0, 0.1); font-size: 0.64rem; }
.admin-level-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-level-values span, .admin-ban-details span { display: grid; gap: 0.2rem; }
.admin-level-values small, .admin-ban-details small { color: var(--ui-text-faint); font-size: 0.56rem; text-transform: uppercase; }
.admin-level-values strong, .admin-ban-details strong { overflow: hidden; color: var(--ui-text-strong); text-overflow: ellipsis; white-space: nowrap; }
.admin-account-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--ui-text-faint); font-size: 0.65rem; }
.admin-account-chips span { padding: 0.38rem 0.55rem; border: 1px solid color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-border)); border-radius: var(--ui-radius-pill); color: var(--ui-cyan); background: color-mix(in srgb, var(--ui-cyan) 8%, transparent); }
.admin-account-chips span.protected { border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-border)); color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 8%, transparent); }
.admin-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.admin-edit-grid label, .admin-ban-editor label, .admin-level-editor label:not(:first-child) { display: grid; gap: 0.35rem; }
.admin-edit-wide { grid-column: 1 / -1; }
.admin-file-control input { min-height: 2.7rem; padding: 0.55rem; }
.admin-suspension-row { display: grid; grid-template-columns: auto minmax(11rem, 0.6fr) minmax(12rem, 1fr); align-items: center; gap: 0.6rem; padding: 0.7rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.admin-suspension-row > label { display: flex; align-items: center; gap: 0.45rem; color: var(--ui-danger); font-size: 0.7rem; font-weight: 750; }
.admin-user-card.suspended { border-color: color-mix(in srgb, var(--ui-danger) 40%, var(--ui-border)); }
.admin-user-card.suspended > header em { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 12%, transparent); }
.admin-card-actions, .admin-ban-editor, .admin-level-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; }
.admin-card-actions { justify-content: flex-end; }
.admin-ban-context { display: grid; gap: 0.25rem; padding: 0.7rem; border-left: 3px solid var(--ui-fire); background: var(--ui-fire-soft); }
.admin-ban-context p { margin: 0; color: var(--ui-text-strong); font-size: 0.72rem; }
.admin-ban-context small { color: var(--ui-text-muted); line-height: 1.5; }
.admin-ban-editor > label { flex: 1 1 13rem; }
.admin-level-editor > label:first-child { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-warning); font-size: 0.68rem; font-weight: 750; }
.admin-level-editor > label:not(:first-child) { flex: 1 1 8rem; }
.admin-level-card.xp-suspended { border-color: color-mix(in srgb, var(--ui-warning) 38%, var(--ui-border)); }
.admin-audit { border-top: 1px solid var(--ui-border); padding-top: 0.7rem; }
.admin-audit summary { color: var(--ui-text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 750; }
.admin-audit summary span { display: inline-grid; min-width: 1.35rem; height: 1.35rem; margin-left: 0.3rem; place-items: center; border-radius: 50%; color: var(--ui-fire); background: var(--ui-fire-soft); }
.admin-audit > div { display: grid; gap: 0.35rem; margin-top: 0.6rem; color: var(--ui-text-faint); font-size: 0.64rem; }
.admin-audit article { padding: 0.55rem; border: 1px solid var(--ui-border); border-radius: 0.55rem; }
.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 0.65rem; }
.admin-pagination button { min-height: 2.45rem; padding: 0 0.8rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-text-muted); background: var(--ui-surface); }
.admin-pagination span { color: var(--ui-text-faint); font-size: 0.68rem; }
.admin-shop-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(8rem, 0.7fr) auto;
  align-items: end;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-surface) 76%, transparent);
}
.admin-shop-builder label { display: grid; gap: 0.38rem; }
.admin-shop-builder label span, .admin-shop-card label span {
  color: var(--ui-text-faint);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-shop-builder select,
.admin-shop-builder input,
.admin-shop-card input { min-height: 2.85rem; height: 2.85rem; box-sizing: border-box; }
.admin-shop-builder .auth-primary { min-height: 2.85rem; justify-content: center; }
.admin-shop-list { display: grid; gap: 0.75rem; }
.admin-shop-card {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.2fr) minmax(10rem, 1fr) minmax(7rem, 0.65fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 58%, transparent);
}
.admin-shop-card.disabled { opacity: 0.62; }
.admin-shop-card-mark {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 1rem;
  color: #2c1700;
  background: linear-gradient(145deg, #ffe180, #ff7541);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ui-fire) 20%, transparent);
}
.admin-shop-card-mark strong { margin-bottom: -0.65rem; font-size: 0.7rem; font-weight: 950; }
.admin-shop-card-mark span { font-size: 0.82rem; font-weight: 950; }
.admin-shop-card-copy { display: grid; min-width: 0; gap: 0.15rem; }
.admin-shop-card-copy strong { overflow: hidden; color: var(--ui-text-strong); text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-card-copy small { color: var(--ui-text-faint); font-size: 0.65rem; }
.admin-shop-card label:not(.admin-control-switch) { display: grid; gap: 0.35rem; min-width: 0; }
.admin-shop-card .admin-control-switch {
  min-height: 3.1rem;
  padding: 0.58rem 0.68rem;
}
.admin-shop-card .auth-primary { min-height: 2.85rem; justify-content: center; }
.admin-wallet-panel { display: grid; gap: 0.9rem; }
.admin-wallet-list { display: grid; gap: 0.75rem; }
.admin-wallet-card {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 58%, transparent);
}
.admin-wallet-card > header {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.admin-wallet-card > header > img { width: 3.25rem; height: 3.25rem; border: 2px solid var(--ui-border-strong); border-radius: 50%; object-fit: cover; }
.admin-wallet-card > header > div { display: grid; min-width: 0; gap: 0.15rem; }
.admin-wallet-card > header > div strong { overflow: hidden; color: var(--ui-text-strong); text-overflow: ellipsis; white-space: nowrap; }
.admin-wallet-card > header > div small { overflow: hidden; color: var(--ui-text-faint); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-wallet-card > header > span { display: grid; justify-items: end; gap: 0.15rem; }
.admin-wallet-card > header > span small,
.admin-wallet-totals small { color: var(--ui-text-faint); font-size: 0.58rem; font-weight: 850; text-transform: uppercase; }
.admin-wallet-card > header > span strong { color: var(--ui-cyan); font-size: 1.05rem; }
.admin-wallet-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.admin-wallet-totals span { display: grid; gap: 0.2rem; padding: 0.6rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.admin-wallet-totals strong { color: var(--ui-text); font-size: 0.78rem; }
.admin-wallet-adjust-form { display: grid; grid-template-columns: minmax(7rem, 0.4fr) minmax(13rem, 1fr) auto; align-items: end; gap: 0.65rem; }
.admin-wallet-adjust-form label { display: grid; min-width: 0; gap: 0.35rem; }
.admin-wallet-adjust-form label span { color: var(--ui-text-faint); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }
.admin-wallet-adjust-form input { min-height: 2.75rem; height: 2.75rem; box-sizing: border-box; }
.admin-wallet-adjust-form > div { display: flex; gap: 0.45rem; }
.admin-wallet-adjust-form button { min-height: 2.75rem; justify-content: center; }
.admin-wallet-history-toggle { width: fit-content; }
.admin-wallet-history { display: grid; gap: 0.65rem; padding-top: 0.75rem; border-top: 1px solid var(--ui-border); }
.admin-wallet-history-list { display: grid; gap: 0.45rem; }
.admin-wallet-transaction { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.admin-wallet-transaction > strong { color: var(--ui-success); font-size: 0.78rem; }
.admin-wallet-transaction.debit > strong { color: var(--ui-danger); }
.admin-wallet-transaction > div { display: grid; min-width: 0; gap: 0.15rem; }
.admin-wallet-transaction b { color: var(--ui-text-strong); font-size: 0.72rem; }
.admin-wallet-transaction span { color: var(--ui-text-muted); font-size: 0.67rem; }
.admin-wallet-transaction small { color: var(--ui-text-faint); font-size: 0.6rem; }
.admin-wallet-history-pagination { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.admin-wallet-history-pagination span { color: var(--ui-text-faint); font-size: 0.64rem; text-align: center; }
.admin-web-frame-panel { display: grid; gap: 1rem; }
.admin-web-frame-builder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.7rem;
}
.admin-web-frame-builder label,
.admin-web-frame-fields label { display: grid; min-width: 0; gap: 0.35rem; }
.admin-web-frame-builder label span,
.admin-web-frame-fields label span {
  color: var(--ui-text-faint);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-web-frame-builder input,
.admin-web-frame-fields input { min-height: 2.75rem; height: 2.75rem; box-sizing: border-box; }
.admin-web-frame-builder .admin-edit-wide { grid-column: span 2; }
.admin-web-frame-builder .auth-primary { min-height: 2.75rem; justify-content: center; }
.admin-web-frame-list { display: grid; gap: 0.75rem; }
.admin-web-frame-card {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(12rem, 0.36fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: color-mix(in srgb, var(--ui-bg-0) 58%, transparent);
}
.admin-web-frame-card.disabled { opacity: 0.6; }
.admin-web-frame-card.top-rank-exclusive {
  border-color: color-mix(in srgb, #ffd45c 55%, var(--ui-border));
  box-shadow: inset 3px 0 #ffd45c;
}
.admin-web-frame-card.top-rank-exclusive .admin-web-frame-origin { color: #ffd45c; }
.admin-web-frame-preview {
  width: 5.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 32%, var(--ui-border));
  border-radius: var(--ui-radius-md);
  background: #050810;
}
.admin-web-frame-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-web-frame-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.admin-web-frame-fields .admin-edit-wide { grid-column: span 3; }
.admin-web-frame-image-field small {
  color: var(--ui-text-faint);
  font-size: 0.58rem;
  line-height: 1.35;
}
.admin-web-frame-actions { display: grid; align-content: center; gap: 0.65rem; }
.admin-web-frame-actions .auth-primary { justify-content: center; }
.admin-web-frame-actions .admin-control-switch {
  min-height: 3.65rem;
  padding: 0.65rem 0.72rem;
}
.admin-web-frame-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-web-frame-buttons button { flex: 1 1 8rem; justify-content: center; }
.admin-web-frame-buttons .danger {
  border-color: color-mix(in srgb, var(--ui-danger) 34%, var(--ui-border));
  color: var(--ui-danger);
  background: var(--ui-danger-soft);
}
.admin-web-frame-buttons .danger:hover {
  border-color: color-mix(in srgb, var(--ui-danger) 56%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-surface-solid));
}
.admin-web-frame-origin { color: var(--ui-cyan); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.shop-item.web-exclusive { border-color: color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-border)); }
.shop-item.web-exclusive .shop-item-copy > span { color: var(--ui-cyan); }

@media (max-width: 1040px) {
  .admin-console { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .admin-sidebar button { grid-template-columns: 2.1rem minmax(0, 1fr); }
  .admin-sidebar button > svg { width: 2.1rem; height: 2.1rem; }
  .admin-card-meta, .admin-level-values, .admin-ban-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shop-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shop-builder .auth-primary { grid-column: 1 / -1; }
  .admin-shop-card { grid-template-columns: 3.8rem minmax(0, 1fr) minmax(8rem, 0.7fr); }
  .admin-shop-card label, .admin-shop-card .auth-primary { grid-column: 2 / -1; }
  .admin-web-frame-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-web-frame-card { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .admin-web-frame-actions { grid-column: 2; }
  .admin-wallet-adjust-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-wallet-adjust-form > div { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .admin-console { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; overflow-x: auto; }
  .admin-sidebar-title { display: none; }
  .admin-sidebar nav { display: flex; width: max-content; min-width: 100%; }
  .admin-sidebar button { grid-template-columns: auto auto; width: auto; min-width: 9.5rem; }
  .admin-sidebar button small { display: none; }
  .admin-sidebar button:hover { transform: translateY(-0.1rem); }
  .admin-sidebar button.active { box-shadow: inset 0 -3px var(--ui-fire); }
  .admin-overview-stats { grid-template-columns: 1fr; }
  .admin-shop-card { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .admin-shop-card label, .admin-shop-card .auth-primary { grid-column: 1 / -1; }
  .admin-web-frame-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-web-frame-fields .admin-edit-wide { grid-column: span 2; }
}

@media (max-width: 620px) {
  .admin-category-head { align-items: flex-start; flex-direction: column; }
  .admin-toolbar { grid-template-columns: 1fr; }
  .admin-management-card > header { grid-template-columns: auto minmax(0, 1fr); }
  .admin-management-card > header em { grid-column: 1 / -1; justify-self: start; }
  .admin-card-meta, .admin-level-values, .admin-ban-details, .admin-edit-grid { grid-template-columns: 1fr; }
  .admin-shop-builder { grid-template-columns: 1fr; }
  .admin-web-frame-builder { grid-template-columns: 1fr; }
  .admin-web-frame-builder .admin-edit-wide { grid-column: auto; }
  .admin-web-frame-card { grid-template-columns: 1fr; }
  .admin-web-frame-preview { justify-self: center; }
  .admin-web-frame-fields { grid-template-columns: 1fr; }
  .admin-web-frame-fields .admin-edit-wide, .admin-web-frame-actions { grid-column: auto; }
  .admin-wallet-card > header { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .admin-wallet-card > header > img { width: 2.8rem; height: 2.8rem; }
  .admin-wallet-card > header > span { grid-column: 1 / -1; justify-items: start; }
  .admin-wallet-adjust-form { grid-template-columns: 1fr; }
  .admin-wallet-adjust-form > div { grid-column: auto; }
  .admin-wallet-adjust-form > div button { flex: 1; }
  .admin-wallet-transaction { grid-template-columns: 1fr; }
  .admin-wallet-history-pagination { align-items: stretch; flex-direction: column; }
  .admin-edit-wide { grid-column: auto; }
  .admin-suspension-row { grid-template-columns: 1fr; }
  .admin-card-actions, .admin-ban-editor, .admin-level-editor { align-items: stretch; flex-direction: column; }
  .admin-card-actions > *, .admin-ban-editor > *, .admin-level-editor > * { width: 100%; flex-basis: auto; }
}

/* Administration alignment pass */
.view[data-view="admin"] > .admin-portal { width: auto; max-width: none; margin: 1rem 0 0; }
.admin-auth-card { width: 100%; min-height: 0; padding: clamp(1rem, 1.8vw, 1.5rem); }
.admin-dashboard, .admin-console, .admin-workspace, .admin-category { width: 100%; }
.admin-dashboard-head, .admin-category-head, .admin-panel-block, .admin-management-card, .admin-toolbar { box-sizing: border-box; }
.admin-dashboard-head { min-height: 6rem; padding: 1rem 1.1rem; }
.admin-console { grid-template-columns: clamp(14rem, 18vw, 16rem) minmax(0, 1fr); gap: 1rem; }
.admin-sidebar, .admin-workspace { align-self: stretch; }
.admin-category-head { min-height: 6.6rem; padding: 1rem; }
.admin-toolbar { grid-template-columns: minmax(0, 1fr) 8.5rem; }
.admin-toolbar .auth-primary { width: 100%; min-width: 0; }
.admin-toolbar input,
.admin-edit-grid input,
.admin-suspension-row input,
.admin-ban-editor input,
.admin-level-editor input,
.admin-role-select select { min-height: 2.85rem; height: 2.85rem; box-sizing: border-box; }
.admin-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.admin-edit-wide, .admin-file-control { grid-column: 1 / -1; }
.admin-file-control input { width: 100%; }
.admin-suspension-row { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr); min-height: 4.5rem; }
.admin-suspension-row > label { min-height: 2.85rem; padding-inline: 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.admin-card-actions { display: grid; grid-template-columns: repeat(2, minmax(10rem, 13rem)); justify-content: end; width: 100%; }
.admin-card-actions > button { width: 100%; min-height: 46px; height: 46px; box-sizing: border-box; justify-content: center; }
.admin-permission-button { display: inline-flex; align-items: center; gap: 0.45rem; }
.admin-permission-button svg { width: 1rem; height: 1rem; }

/* Recorder: compact summary + independently animated details. */
.admin-recorder-list { gap: 0.85rem; }
.admin-recorder-card {
  position: relative;
  gap: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--ui-border) 86%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-fire) 8%, transparent), transparent 32%),
    color-mix(in srgb, var(--ui-surface) 88%, var(--ui-bg-0));
  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease), transform var(--ui-duration) var(--ui-spring);
}
.admin-recorder-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--ui-text-faint);
  transition: width var(--ui-duration) var(--ui-ease), background var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
}
.admin-recorder-card:hover { transform: translateY(-2px); }
.admin-recorder-card.recording { border-color: color-mix(in srgb, var(--ui-success) 42%, var(--ui-border)); box-shadow: 0 18px 52px rgba(38, 232, 167, 0.08); }
.admin-recorder-card.recording::before { width: 4px; background: var(--ui-success); box-shadow: 0 0 22px color-mix(in srgb, var(--ui-success) 52%, transparent); }
.admin-recorder-card.live:not(.recording)::before { background: #ff3e82; box-shadow: 0 0 18px rgba(255, 62, 130, 0.42); }
.admin-recorder-card.error::before { background: var(--ui-danger); }
.admin-recorder-card.disabled { opacity: 0.88; border-style: dashed; }
.admin-recorder-card.is-new { animation: admin-recorder-card-in 480ms var(--ui-spring) both; animation-delay: calc(var(--recorder-order, 0) * 45ms); }

.admin-management-card > .admin-recorder-summary {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  min-height: 5rem;
  padding: 1rem 1rem 0.75rem 1.15rem;
  cursor: pointer;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.018), transparent 56%);
}
.admin-recorder-summary-copy { min-width: 0; display: grid; align-content: center; gap: 0.18rem; }
.admin-recorder-summary-copy > strong { overflow: hidden; color: var(--ui-text-strong); font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-recorder-summary-copy > small { overflow: hidden; color: var(--ui-text-faint); font-size: 0.67rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-recorder-summary-state { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; }
.admin-recorder-card.offline .admin-recorder-summary-state em { color: var(--ui-text-muted); background: color-mix(in srgb, var(--ui-text-muted) 10%, transparent); }
.admin-recorder-card.error .admin-recorder-summary-state em { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 12%, transparent); }
.admin-recorder-toggle {
  min-height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  background: color-mix(in srgb, var(--ui-surface-solid) 78%, transparent);
  font-size: 0.64rem;
  font-weight: 850;
}
.admin-recorder-toggle:hover { color: var(--ui-text-strong); border-color: var(--ui-border-strong); background: color-mix(in srgb, var(--ui-cyan) 8%, var(--ui-surface-solid)); }
.admin-recorder-toggle i { width: 0.52rem; height: 0.52rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 320ms var(--ui-spring); }
.admin-recorder-card.expanded .admin-recorder-toggle i { transform: translateY(0.12rem) rotate(225deg); }

.admin-recorder-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0 1rem 1rem 1.15rem;
}
.admin-recorder-quick > span { min-width: 0; display: grid; gap: 0.22rem; padding: 0.62rem 0.72rem; border: 1px solid var(--ui-border); border-radius: 0.72rem; background: rgba(0, 0, 0, 0.12); }
.admin-recorder-quick small { color: var(--ui-text-faint); font-size: 0.53rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }
.admin-recorder-quick strong { overflow: hidden; color: var(--ui-text-strong); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-recorder-card.live [data-quick="live"] strong { color: #ff7ca9; }
.admin-recorder-card.recording [data-quick="recording"] strong { color: var(--ui-success); }

.admin-recorder-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; border-top: 1px solid transparent; transition: grid-template-rows 380ms var(--ui-spring), opacity 240ms var(--ui-ease), border-color 240ms var(--ui-ease); }
.admin-recorder-card.expanded .admin-recorder-collapse { grid-template-rows: 1fr; opacity: 1; border-color: var(--ui-border); }
.admin-recorder-collapse-inner { min-height: 0; overflow: hidden; }
.admin-recorder-content-grid { display: grid; grid-template-columns: minmax(17rem, 0.82fr) minmax(0, 1.45fr); gap: 0.75rem; padding: 1rem; background: color-mix(in srgb, var(--ui-bg-0) 30%, transparent); }
.admin-recorder-info-section { min-width: 0; display: grid; align-content: start; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: color-mix(in srgb, var(--ui-surface-solid) 72%, transparent); }
.admin-recorder-info-section > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--ui-border); }
.admin-recorder-info-section > header > div { display: grid; gap: 0.15rem; }
.admin-recorder-info-section h4 { margin: 0; color: var(--ui-text-strong); font-size: 0.84rem; }
.admin-recorder-info-section header small { color: var(--ui-cyan); font-size: 0.52rem; font-weight: 900; letter-spacing: 0.08em; }
.admin-recorder-info-section header a { color: var(--ui-cyan); font-size: 0.59rem; font-weight: 850; }
.admin-recorder-health { padding: 0.35rem 0.55rem; border-radius: var(--ui-radius-pill); color: var(--ui-text-muted); background: rgba(255, 255, 255, 0.04); font-size: 0.57rem; font-weight: 850; white-space: nowrap; }
.admin-recorder-card.recording .admin-recorder-health { color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 10%, transparent); }
.admin-recorder-card.error .admin-recorder-health { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 10%, transparent); }
.admin-recorder-card .admin-recorder-bio { min-height: 3.5rem; margin: 0; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); color: var(--ui-text-muted); background: rgba(0, 0, 0, 0.1); font-size: 0.68rem; line-height: 1.55; }
.admin-recorder-card .admin-recorder-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.admin-recorder-card .admin-recorder-profile-stats > span,
.admin-recorder-card .admin-recorder-details > span { min-width: 0; display: grid; gap: 0.2rem; padding: 0.62rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: rgba(0, 0, 0, 0.1); }
.admin-recorder-card .admin-recorder-profile-stats small,
.admin-recorder-card .admin-recorder-details small { color: var(--ui-text-faint); font-size: 0.53rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }
.admin-recorder-card .admin-recorder-profile-stats strong,
.admin-recorder-card .admin-recorder-details strong { overflow: hidden; color: var(--ui-text-strong); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-recorder-card .admin-recorder-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.admin-recorder-card .admin-recorder-details > span.danger { border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border)); background: color-mix(in srgb, var(--ui-danger) 7%, transparent); }
.admin-recorder-card .admin-recorder-details > span.danger strong { color: var(--ui-danger); }
.admin-recorder-card .admin-card-actions { padding: 0 1rem 1rem; }

@keyframes admin-recorder-card-in {
  from { opacity: 0; transform: translate3d(0, 0.7rem, 0) scale(0.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.admin-permission-modal { z-index: 1200; }
.admin-permission-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(calc(100% - 2rem), 42rem);
  max-height: min(88vh, 52rem);
  margin: auto;
  overflow: auto;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-xl);
  background: color-mix(in srgb, var(--ui-surface-solid) 96%, transparent);
  box-shadow: var(--ui-shadow-lg);
  backdrop-filter: blur(28px) saturate(135%);
}
.admin-permission-dialog > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(120deg, var(--ui-fire-soft), transparent 58%);
}
.admin-permission-dialog > header > div { display: grid; gap: 0.2rem; }
.admin-permission-dialog h2, .admin-permission-dialog p { margin: 0; }
.admin-permission-dialog header p:last-child { color: var(--ui-text-muted); font-size: 0.7rem; }
.admin-permission-icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: 1rem; color: #fff; background: var(--ui-gradient-brand); box-shadow: 0 10px 28px rgba(255, 77, 27, 0.2); }
.admin-permission-icon svg { width: 1.5rem; height: 1.5rem; }
.admin-permission-dialog form { display: grid; gap: 0.9rem; padding: 1.25rem; }
.admin-role-select { display: grid; gap: 0.4rem; }
.admin-role-select > span { color: var(--ui-text-faint); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.admin-permission-notice { display: grid; gap: 0.2rem; padding: 0.75rem; border: 1px solid color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-border)); border-radius: var(--ui-radius-sm); background: var(--ui-cyan-soft); }
.admin-permission-notice strong { color: var(--ui-cyan); font-size: 0.7rem; }
.admin-permission-notice span { color: var(--ui-text-muted); font-size: 0.66rem; line-height: 1.5; }
.admin-permission-notice code { color: var(--ui-text-strong); }
.admin-permission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.admin-permission-list .permission-control { min-height: 4.6rem; margin: 0; }
.admin-permission-list.disabled { opacity: 0.48; }
.admin-permission-dialog form > footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; padding-top: 0.2rem; }
.admin-permission-dialog form > footer > button { width: 100%; min-height: 2.85rem; justify-content: center; }

@media (max-width: 1180px) {
  .admin-console { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .admin-suspension-row { grid-template-columns: 1fr 1fr; }
  .admin-suspension-row > input:last-child { grid-column: 1 / -1; }
  .admin-recorder-content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .admin-console { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; overflow-x: auto; }
  .admin-sidebar-title { display: none; }
  .admin-sidebar nav { display: flex; width: max-content; min-width: 100%; }
  .admin-sidebar button { grid-template-columns: auto auto; width: auto; min-width: 9.75rem; }
  .admin-sidebar button small { display: none; }
  .admin-sidebar button.active { box-shadow: inset 0 -3px var(--ui-fire); }
  .admin-recorder-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-recorder-card .admin-recorder-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-recorder-alerts-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .admin-auth-card { padding: 0.65rem; }
  .admin-dashboard-head { grid-template-columns: auto minmax(0, 1fr); }
  .admin-dashboard-head > .auth-verified { grid-column: 1 / 2; justify-self: start; }
  .admin-dashboard-head > .auth-secondary { grid-column: 2 / 3; width: 100%; justify-content: center; }
  .admin-toolbar, .admin-edit-grid, .admin-suspension-row, .admin-card-actions { grid-template-columns: 1fr; }
  .admin-edit-wide, .admin-file-control, .admin-suspension-row > input:last-child { grid-column: auto; }
  .admin-card-actions > button { max-width: none; }
  .admin-permission-list { grid-template-columns: 1fr; }
  .admin-management-card > .admin-recorder-summary { grid-template-columns: auto minmax(0, 1fr); }
  .admin-recorder-summary-state { grid-column: 1 / -1; justify-content: space-between; }
  .admin-recorder-summary-state .admin-recorder-toggle { flex: 1; }
  .admin-recorder-quick, .admin-recorder-card .admin-recorder-details { grid-template-columns: 1fr; }
  .admin-recorder-content-grid { padding: 0.75rem; }
  .member-recorder-alerts-head, .member-recorder-alerts-form > footer { align-items: stretch; flex-direction: column; }
  .member-recorder-alert-card { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .member-recorder-alert-card > img { width: 2.8rem; height: 2.8rem; }
  .member-recorder-alert-toggle { grid-column: 1 / -1; grid-template-columns: auto auto; align-items: center; justify-content: end; }
}

@media (max-width: 460px) {
  .admin-dashboard-head { grid-template-columns: 1fr; text-align: center; }
  .admin-identity-mark, .admin-dashboard-head > .auth-verified, .admin-dashboard-head > .auth-secondary { grid-column: 1; justify-self: stretch; }
  .admin-identity-mark { justify-self: center; }
  .admin-permission-dialog { width: calc(100% - 0.8rem); border-radius: var(--ui-radius-lg); }
  .admin-permission-dialog > header, .admin-permission-dialog form { padding: 0.9rem; }
  .admin-permission-dialog form > footer { grid-template-columns: 1fr; }
}

.admin-email-config,
.admin-email-send,
.admin-email-log-block {
  gap: 0.9rem;
}
.admin-email-global-grid,
.admin-email-send-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.admin-email-global-grid label,
.admin-email-send-grid label,
.admin-email-event-row label {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}
.admin-email-global-grid label:first-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-surface-solid) 70%, transparent);
}
.admin-email-global-grid label:first-child input {
  width: auto;
  min-height: 0;
  accent-color: var(--ui-fire);
}
.admin-email-global-grid span,
.admin-email-send-grid span,
.admin-email-event-row label span {
  color: var(--ui-text-faint);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-email-global-grid input,
.admin-email-send-grid input,
.admin-email-send-grid select,
.admin-email-send-grid textarea,
.admin-email-event-row input,
.admin-email-event-row select {
  width: 100%;
  min-height: 2.85rem;
  box-sizing: border-box;
}
.admin-email-send-grid textarea {
  min-height: 9rem;
  resize: vertical;
}
.admin-email-events {
  display: grid;
  gap: 0.65rem;
}
.admin-email-event-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.15fr) minmax(5rem, 0.36fr) minmax(10rem, 0.72fr) minmax(12rem, 0.9fr);
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-0) 32%, transparent);
}
.admin-email-event-copy {
  min-width: 0;
  display: grid;
  align-self: center;
  gap: 0.18rem;
}
.admin-email-event-copy strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-email-event-copy small {
  color: var(--ui-text-muted);
  font-size: 0.63rem;
  line-height: 1.45;
}
.admin-email-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem !important;
  min-height: 2.85rem;
  padding: 0.65rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-surface-solid) 64%, transparent);
}
.admin-email-toggle input {
  width: auto;
  min-height: 0;
  accent-color: var(--ui-fire);
}
.admin-email-subject {
  grid-column: 1 / -1;
}
.admin-email-log {
  display: grid;
  gap: 0.5rem;
}
.admin-email-log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-surface-solid) 66%, transparent);
}
.admin-email-log-row div {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}
.admin-email-log-row strong,
.admin-email-log-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-email-log-row strong {
  color: var(--ui-text-strong);
  font-size: 0.72rem;
}
.admin-email-log-row small {
  color: var(--ui-text-faint);
  font-size: 0.6rem;
}
.admin-email-log-row > span {
  padding: 0.35rem 0.55rem;
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.58rem;
  font-weight: 850;
}
.admin-email-log-row.sent > span {
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 10%, transparent);
}
.admin-email-log-row.failed > span {
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
}
.admin-email-log-row.skipped > span {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
}
.admin-notifications-config {
  gap: 0.9rem;
}
.admin-notifications-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}
.admin-notifications-grid label:not(.admin-control-switch),
.admin-notifications-file {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}
.admin-notifications-grid label:not(.admin-control-switch) {
  min-height: 4.75rem;
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-0) 30%, transparent);
}
.admin-notifications-grid label > span,
.admin-notifications-file span {
  color: var(--ui-text-faint);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-notifications-grid label small,
.admin-notifications-sound-current small {
  color: var(--ui-text-muted);
  font-size: 0.62rem;
  line-height: 1.45;
}
.admin-notifications-grid input[type="range"] {
  width: 100%;
  min-height: 2.2rem;
  accent-color: var(--ui-fire);
}
.admin-notifications-grid input[type="number"],
.admin-notifications-file input {
  width: 100%;
  box-sizing: border-box;
}
.admin-notifications-sound {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 0.92fr);
  gap: 0.75rem;
  align-items: stretch;
  padding: 0.85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-surface-solid) 58%, transparent);
}
.admin-notifications-sound-current {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.4rem;
}
.admin-notifications-sound-current strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-notifications-sound-current audio {
  width: 100%;
  max-width: 32rem;
  margin-top: 0.25rem;
}
.admin-notifications-sound-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  gap: 0.5rem;
  align-items: end;
}
.admin-notifications-sound-actions .auth-secondary {
  min-height: 2.85rem;
  white-space: nowrap;
}
.admin-notifications-sound-actions .auth-secondary.danger {
  color: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger) 32%, transparent);
  background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
}
.admin-privacy-form {
  gap: 0.9rem;
}
.admin-privacy-list {
  display: grid;
  gap: 0.65rem;
}
.admin-privacy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.45fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--ui-bg-0) 32%, transparent);
}
.admin-privacy-row > div {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}
.admin-privacy-row strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-privacy-row small {
  color: var(--ui-text-muted);
  font-size: 0.64rem;
  line-height: 1.45;
}
.admin-privacy-row label {
  display: grid;
  gap: 0.35rem;
}
.admin-privacy-row label span {
  color: var(--ui-text-faint);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-privacy-row select {
  width: 100%;
  min-height: 2.85rem;
  box-sizing: border-box;
}

@media (max-width: 1080px) {
  .admin-notifications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-notifications-sound {
    grid-template-columns: 1fr;
  }
  .admin-email-event-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-email-event-copy,
  .admin-email-subject {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .admin-email-global-grid,
  .admin-email-send-grid,
  .admin-email-event-row,
  .admin-email-log-row,
  .admin-notifications-grid,
  .admin-notifications-sound-actions,
  .admin-privacy-row {
    grid-template-columns: 1fr;
  }
}

/* Admin configuration polish */
.view[data-view="admin"] > .admin-portal {
  max-width: 96rem;
}

.view[data-view="admin"] .admin-auth-card {
  border-color: color-mix(in srgb, var(--ui-border-strong) 78%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface) 86%, transparent), color-mix(in srgb, var(--ui-bg-0) 74%, transparent)),
    var(--ui-bg-0);
}

.admin-dashboard {
  gap: 1.1rem;
}

.admin-dashboard-head,
.admin-category-head,
.admin-panel-block,
.admin-management-card,
.admin-toolbar,
.admin-shop-builder {
  border-radius: 1rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 1rem 2.6rem rgba(0, 0, 0, 0.16);
}

.admin-dashboard-head {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 5.25rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ui-surface-solid) 82%, transparent), color-mix(in srgb, var(--ui-bg-0) 48%, transparent));
}

.admin-console {
  grid-template-columns: clamp(15.25rem, 18vw, 17.75rem) minmax(0, 1fr);
  gap: 1.15rem;
}

.admin-sidebar {
  top: 5.75rem;
  padding: 0.55rem;
  border-color: color-mix(in srgb, var(--ui-border-strong) 68%, transparent);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-solid) 80%, transparent), color-mix(in srgb, var(--ui-bg-0) 62%, transparent)),
    var(--ui-bg-0);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 1.25rem 3rem rgba(0, 0, 0, 0.18);
}

.admin-sidebar-title {
  gap: 0.16rem;
  padding: 0.7rem 0.65rem 0.85rem;
  border-bottom: 0;
}

.admin-sidebar-title small {
  color: var(--ui-cyan);
  font-size: 0.62rem;
  font-weight: 880;
  letter-spacing: 0;
}

.admin-sidebar-title strong {
  font-size: 0.98rem;
}

.admin-sidebar nav {
  gap: 0.28rem;
  padding: 0;
}

.admin-sidebar button {
  position: relative;
  min-height: 3.35rem;
  padding: 0.54rem 0.58rem;
  border-radius: 0.78rem;
  letter-spacing: 0;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.admin-sidebar button::before {
  position: absolute;
  inset: 0.55rem auto 0.55rem -0.56rem;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
  transition: background 180ms ease, box-shadow 180ms ease;
}

.admin-sidebar button > svg {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
  border-radius: 0.72rem;
  color: var(--ui-text-muted);
  background: color-mix(in srgb, var(--ui-surface-solid) 66%, transparent);
}

.admin-sidebar button strong {
  font-size: 0.75rem;
  line-height: 1.1;
}

.admin-sidebar button small {
  font-size: 0.6rem;
  line-height: 1.25;
}

.admin-sidebar button:hover {
  border-color: color-mix(in srgb, var(--ui-cyan) 25%, var(--ui-border));
  color: var(--ui-text-strong);
  background: color-mix(in srgb, var(--ui-cyan) 6%, transparent);
  transform: translateX(0.1rem);
}

.admin-sidebar button.active {
  border-color: color-mix(in srgb, var(--ui-cyan) 38%, var(--ui-border));
  color: var(--ui-text-strong);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ui-cyan) 13%, transparent), color-mix(in srgb, var(--ui-fire) 7%, transparent)),
    color-mix(in srgb, var(--ui-surface-solid) 82%, transparent);
  box-shadow: none;
}

.admin-sidebar button.active::before {
  background: var(--ui-cyan);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ui-cyan) 58%, transparent);
}

.admin-sidebar button.active > svg {
  color: #061019;
  border-color: transparent;
  background: linear-gradient(145deg, var(--ui-cyan), #7defff);
  box-shadow: 0 0.55rem 1.2rem color-mix(in srgb, var(--ui-cyan) 16%, transparent);
}

.admin-category {
  gap: 1rem;
}

.admin-category-head {
  min-height: 5.8rem;
  align-items: center;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--ui-cyan) 7%, transparent), transparent 55%),
    color-mix(in srgb, var(--ui-surface) 82%, transparent);
}

.admin-category-head .eyebrow,
.admin-block-head .eyebrow {
  letter-spacing: 0;
}

.admin-panel-block {
  display: grid;
  gap: 0.9rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface) 82%, transparent), color-mix(in srgb, var(--ui-bg-0) 38%, transparent));
}

.admin-block-head {
  padding-bottom: 0.1rem;
}

.admin-count,
.admin-block-head > span > strong {
  border-color: color-mix(in srgb, var(--ui-cyan) 28%, var(--ui-border));
  color: var(--ui-cyan);
  background: color-mix(in srgb, var(--ui-cyan) 8%, transparent);
}

.admin-profile-service-grid,
.admin-email-global-grid,
.admin-email-send-grid,
.admin-recorder-config,
.admin-recorder-target-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  align-items: end;
}

.admin-recorder-config .admin-edit-wide,
.admin-web-frame-builder .admin-edit-wide,
.admin-email-subject,
.admin-email-send-grid .admin-edit-wide {
  grid-column: 1 / -1;
}

.admin-category input:not([type="checkbox"]),
.admin-category select,
.admin-category textarea {
  border: 1px solid color-mix(in srgb, var(--ui-border-strong) 68%, transparent);
  border-radius: 0.75rem;
  color: var(--ui-text-strong);
  background: color-mix(in srgb, var(--ui-bg-0) 78%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.admin-category input:not([type="checkbox"]):focus,
.admin-category select:focus,
.admin-category textarea:focus {
  border-color: color-mix(in srgb, var(--ui-cyan) 52%, var(--ui-border));
  box-shadow: var(--ui-shadow-focus);
}

.admin-control-switch,
.admin-email-global-grid label.admin-control-switch,
.admin-email-event-row label.admin-control-switch,
.admin-profile-service-grid label.admin-control-switch,
.admin-recorder-config label.admin-control-switch,
.admin-recorder-target-form label.admin-control-switch,
.permission-control.admin-control-switch {
  position: relative;
  min-height: 4.35rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.8rem;
  align-items: center;
  gap: 0.8rem !important;
  padding: 0.78rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ui-border-strong) 62%, transparent);
  border-radius: 0.82rem;
  color: var(--ui-text-muted);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    color-mix(in srgb, var(--ui-surface-solid) 66%, transparent);
  cursor: pointer;
  letter-spacing: 0;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.admin-control-switch > span,
.permission-control.admin-control-switch > span {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.admin-control-switch strong,
.permission-control.admin-control-switch strong {
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.74rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.admin-control-switch small,
.permission-control.admin-control-switch small {
  color: var(--ui-text-faint);
  font-size: 0.63rem;
  line-height: 1.35;
}

.admin-control-switch input[type="checkbox"],
.permission-control.admin-control-switch input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.admin-control-switch > i,
.permission-control.admin-control-switch > i {
  position: relative;
  justify-self: end;
  width: 2.65rem;
  height: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--ui-text-faint) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-bg-0) 86%, transparent);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.32);
}

.admin-control-switch > i::after,
.permission-control.admin-control-switch > i::after {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--ui-text-faint);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  content: "";
  transition: transform 190ms ease, background 190ms ease;
}

.admin-control-switch:hover,
.permission-control.admin-control-switch:hover {
  border-color: color-mix(in srgb, var(--ui-cyan) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-cyan) 5%, var(--ui-surface-solid));
  transform: translateY(-1px);
}

.admin-control-switch:has(input:focus-visible),
.permission-control.admin-control-switch:has(input:focus-visible) {
  box-shadow: var(--ui-shadow-focus);
}

.admin-control-switch:has(input:checked),
.permission-control.admin-control-switch:has(input:checked) {
  border-color: color-mix(in srgb, var(--ui-cyan) 42%, var(--ui-border));
  color: var(--ui-text-strong);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ui-cyan) 12%, transparent), color-mix(in srgb, var(--ui-fire) 7%, transparent)),
    color-mix(in srgb, var(--ui-surface-solid) 72%, transparent);
}

.admin-control-switch input:checked + i,
.permission-control.admin-control-switch input:checked + i {
  border-color: color-mix(in srgb, var(--ui-cyan) 60%, transparent);
  background: linear-gradient(90deg, var(--ui-cyan), #7defff);
}

.admin-control-switch input:checked + i::after,
.permission-control.admin-control-switch input:checked + i::after {
  background: #061019;
  transform: translateX(1.18rem);
}

.admin-control-switch:has(input:disabled),
.permission-control.admin-control-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.admin-email-toggle {
  justify-content: initial;
}

.admin-email-event-row {
  grid-template-columns: minmax(14rem, 1.1fr) minmax(9rem, 0.58fr) minmax(11rem, 0.72fr) minmax(12rem, 0.85fr);
  border-radius: 0.9rem;
}

.admin-email-event-row .admin-email-toggle {
  min-height: 3.5rem;
}

.admin-privacy-row {
  border-radius: 0.9rem;
}

.maintenance-page {
  width: min(48rem, 100%);
  min-height: min(34rem, calc(100vh - 10rem));
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.2rem;
  margin: 1rem auto 0;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 28%, var(--ui-border));
  border-radius: 1.25rem;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--ui-cyan) 10%, transparent), transparent 56%),
    color-mix(in srgb, var(--ui-surface) 88%, transparent);
  box-shadow: var(--ui-shadow-lg), inset 0 1px rgba(255, 255, 255, 0.045);
}

.maintenance-mark {
  width: 4.6rem;
  height: 4.6rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 50%, transparent);
  border-radius: 1.2rem;
  color: #061019;
  background: linear-gradient(145deg, var(--ui-cyan), #7defff);
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--ui-cyan) 18%, transparent);
  font-weight: 950;
}

.maintenance-page h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.02;
}

.maintenance-page p:last-child {
  max-width: 48rem;
  margin: 0.85rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.maintenance-page > small {
  color: var(--ui-text-faint);
  line-height: 1.5;
}

.admin-maintenance-form {
  gap: 1rem;
}

.admin-maintenance-grid,
.admin-maintenance-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.65rem;
  align-items: end;
}

.admin-maintenance-grid textarea,
.admin-maintenance-access textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.admin-maintenance-access {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--ui-bg-0) 36%, transparent);
}

.admin-maintenance-allowed-list {
  display: grid;
  gap: 0.55rem;
}

.admin-maintenance-allowed-list article {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.78rem;
  background: color-mix(in srgb, var(--ui-surface-solid) 62%, transparent);
}

.admin-maintenance-allowed-list img,
.admin-maintenance-allowed-list article > span:first-child {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.78rem;
  object-fit: cover;
  color: #061019;
  background: linear-gradient(145deg, var(--ui-cyan), #7defff);
  font-size: 0.75rem;
  font-weight: 950;
}

.admin-maintenance-allowed-list article > span:last-child {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.admin-maintenance-allowed-list strong,
.admin-maintenance-allowed-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-count.danger {
  border-color: color-mix(in srgb, var(--ui-danger) 42%, var(--ui-border));
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 10%, transparent);
}

.admin-permission-list .permission-control.admin-control-switch {
  min-height: 5rem;
}

@media (max-width: 1180px) {
  .admin-console {
    grid-template-columns: 14.5rem minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .admin-console {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    overflow: visible;
  }

  .admin-sidebar-title {
    display: grid;
  }

  .admin-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    min-width: 0;
  }

  .admin-sidebar button {
    width: 100%;
    min-width: 0;
    grid-template-columns: 2.15rem minmax(0, 1fr);
  }

  .admin-sidebar button small {
    display: block;
  }

  .admin-sidebar button.active {
    box-shadow: none;
  }

  .admin-sidebar button::before {
    left: -0.56rem;
  }
}

@media (max-width: 620px) {
  .admin-dashboard-head {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .admin-identity-mark,
  .admin-dashboard-head > .auth-verified,
  .admin-dashboard-head > .auth-secondary {
    justify-self: start;
  }

  .admin-sidebar nav,
  .admin-profile-service-grid,
  .admin-email-global-grid,
  .admin-email-send-grid,
  .admin-maintenance-grid,
  .admin-maintenance-switches,
  .admin-recorder-config,
  .admin-recorder-target-form,
  .admin-email-event-row,
  .admin-privacy-row {
    grid-template-columns: 1fr;
  }

  .admin-control-switch,
  .admin-email-global-grid label.admin-control-switch,
  .admin-email-event-row label.admin-control-switch,
  .admin-profile-service-grid label.admin-control-switch,
  .admin-recorder-config label.admin-control-switch,
  .admin-recorder-target-form label.admin-control-switch,
  .permission-control.admin-control-switch {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Public replay catalog */
.replays-page-heading {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 101, 59, 0.2), transparent 30%),
    radial-gradient(circle at 15% 0, rgba(82, 229, 247, 0.08), transparent 28%),
    var(--ui-gradient-panel);
}
.replays-symbol {
  border-color: color-mix(in srgb, var(--ui-fire) 42%, var(--ui-border));
  color: var(--ui-fire-bright);
  background: var(--ui-fire-soft);
  box-shadow: 0 0 3rem rgba(255, 101, 59, 0.16);
}
.replays-retention-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 28%, var(--ui-border));
  border-radius: var(--ui-radius-lg);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--ui-warning-soft) 70%, transparent), transparent 62%),
    color-mix(in srgb, var(--ui-surface-0) 92%, transparent);
  box-shadow: var(--ui-shadow-sm), inset 0 1px rgba(255, 255, 255, 0.04);
}
.replays-retention-icon {
  position: relative;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border));
  border-radius: 1rem;
  background: var(--ui-warning-soft);
}
.replays-retention-icon::before,
.replays-retention-icon::after {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ui-warning);
  border-radius: 50%;
  content: "";
}
.replays-retention-icon::after {
  width: 0.42rem;
  height: 0.42rem;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  transform: translate(0.16rem, -0.14rem) rotate(-45deg);
}
.replays-retention-notice strong { color: var(--ui-text-strong); font-size: 0.86rem; }
.replays-retention-notice p { margin: 0.22rem 0 0; color: var(--ui-text-muted); font-size: 0.68rem; line-height: 1.5; }
.replays-retention-notice em {
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 28%, transparent);
  border-radius: 999px;
  color: var(--ui-warning);
  background: var(--ui-warning-soft);
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.05em;
}
.replays-catalog {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-xl);
  background: color-mix(in srgb, var(--ui-surface-0) 90%, transparent);
  box-shadow: var(--ui-shadow-md);
  backdrop-filter: blur(22px);
}
.replays-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid var(--ui-border);
}
.replays-catalog-head h2, .replays-catalog-head p { margin: 0; }
.replays-catalog-head h2 { color: var(--ui-text-strong); font-size: 1.15rem; }
.replays-catalog-head > div:last-child { display: flex; align-items: center; gap: 0.65rem; }
.replays-catalog-head > div:last-child > span {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-text-muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.62rem;
}
.replays-catalog-head b { color: var(--ui-fire-bright); }
.replays-list { display: grid; gap: 1rem; padding: 1rem; }
.replay-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 85% 0, rgba(255, 101, 59, 0.08), transparent 28%),
    color-mix(in srgb, var(--ui-bg-0) 64%, var(--ui-surface-1));
  box-shadow: 0 1.3rem 3.5rem rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.035);
  transition: border-color var(--ui-duration) var(--ui-ease), transform var(--ui-duration) var(--ui-spring), opacity var(--ui-duration) var(--ui-ease);
}
.replay-card:hover { border-color: color-mix(in srgb, var(--ui-fire) 28%, var(--ui-border)); transform: translateY(-2px); }
.replay-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ui-fire-bright), var(--ui-cyan), transparent);
  content: "";
}
.replay-card.expired { opacity: 0.45; pointer-events: none; }
.replay-profile {
  display: grid;
  grid-template-columns: auto minmax(13rem, 1fr) minmax(18rem, auto);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-1) 48%, transparent);
}
.replay-profile-avatar {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  border: 2px solid rgba(255, 119, 66, 0.42);
  border-radius: 1.2rem;
  box-shadow: 0 0.75rem 1.8rem rgba(255, 77, 27, 0.18);
}
.replay-profile-identity { display: grid; min-width: 0; gap: 0.22rem; }
.replay-profile-identity > div { display: flex; align-items: center; gap: 0.4rem; }
.replay-profile-identity strong { overflow: hidden; color: var(--ui-text-strong); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.replay-profile-identity i {
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border-radius: 50%;
  color: #061017;
  background: var(--ui-cyan);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 950;
}
.replay-profile-identity a { width: fit-content; color: var(--ui-cyan); font-size: 0.66rem; }
.replay-profile-identity p {
  display: -webkit-box;
  max-width: 42rem;
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 0.65rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.replay-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(4rem, 1fr)); gap: 0.42rem; }
.replay-profile-stats > span {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}
.replay-profile-stats strong { color: var(--ui-text-strong); font-size: 0.72rem; }
.replay-profile-stats small { color: var(--ui-text-faint); font-size: 0.5rem; text-transform: uppercase; }
.replay-body {
  display: grid;
  grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.15rem;
}
.replay-media {
  position: relative;
  justify-self: center;
  width: min(100%, 22rem);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 101, 59, 0.14), transparent 38%),
    #03050b;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.38);
}
.replay-media video { width: 100%; height: 100%; display: block; object-fit: contain; background: #020308; }
.replay-duration {
  position: absolute;
  z-index: 4;
  top: 0.72rem;
  right: 0.72rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.55rem;
  color: #fff;
  background: rgba(3, 6, 13, 0.78);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  font-size: 0.66rem;
  font-weight: 850;
}
.replay-play {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  padding: 1rem;
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.72));
  text-align: center;
}
.replay-play > i {
  display: grid;
  width: 4.4rem;
  height: 3.1rem;
  place-items: center;
  border: 0;
  border-radius: 0.78rem;
  background: #ff0033;
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.36);
  font-size: 1.25rem;
  font-style: normal;
  transform: translateX(0.1rem);
}
.replay-play > span { display: grid; gap: 0.2rem; }
.replay-play strong { font-size: 0.82rem; }
.replay-play small { color: rgba(255, 255, 255, 0.68); font-size: 0.6rem; }
.replay-play:hover > i { transform: translateX(0.1rem) scale(1.08); }
.replay-play.loading > i { animation: ui-logo-breathe 1s ease-in-out infinite; }
.replay-play.locked {
  cursor: pointer;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.84));
}
.replay-play.locked > i {
  width: 3.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.replay-play.locked:hover > i { transform: none; }
.replay-controls {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto auto minmax(3.6rem, 5rem) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.38rem;
  padding: 0.25rem 0.62rem 0.58rem;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62) 34%, rgba(0, 0, 0, 0.92));
  box-shadow: none;
  backdrop-filter: none;
}
.replay-controls[hidden] { display: none; }
.replay-control-button {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  grid-row: 2;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  transition: transform var(--ui-duration) var(--ui-spring), opacity var(--ui-duration) var(--ui-ease);
}
.replay-control-button:hover {
  background: transparent;
  opacity: 0.84;
  transform: scale(1.08);
}
.replay-control-button.is-primary {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.replay-controls > .replay-control-button:nth-of-type(1) { grid-column: 1; }
.replay-controls > .replay-control-button:nth-of-type(2) { grid-column: 2; }
.replay-controls > .replay-control-button:nth-of-type(3) { grid-column: 5; justify-self: end; }
.replay-control-symbol {
  position: relative;
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  color: currentColor;
}
.replay-control-symbol.is-play {
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-top: 0.34rem solid transparent;
  border-bottom: 0.34rem solid transparent;
  border-left: 0.56rem solid currentColor;
}
.replay-control-symbol.is-pause::before,
.replay-control-symbol.is-pause::after {
  position: absolute;
  top: 0.17rem;
  bottom: 0.17rem;
  width: 0.24rem;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.replay-control-symbol.is-pause::before { left: 0.22rem; }
.replay-control-symbol.is-pause::after { right: 0.22rem; }
.replay-control-symbol.is-volume::before,
.replay-control-symbol.is-muted::before {
  position: absolute;
  top: 0.34rem;
  left: 0.12rem;
  width: 0.3rem;
  height: 0.34rem;
  border-radius: 0.08rem;
  background: currentColor;
  content: "";
}
.replay-control-symbol.is-volume::after,
.replay-control-symbol.is-muted::after {
  position: absolute;
  top: 0.24rem;
  left: 0.36rem;
  width: 0.42rem;
  height: 0.54rem;
  border: 0.16rem solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
  content: "";
}
.replay-control-symbol.is-muted {
  transform: rotate(-8deg);
}
.replay-control-symbol.is-muted::after {
  top: 0.11rem;
  left: 0.48rem;
  width: 0.16rem;
  height: 0.86rem;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}
.replay-control-symbol.is-fullscreen {
  border: 0.16rem solid currentColor;
  border-radius: 0.14rem;
}
.replay-control-symbol.is-fullscreen::before {
  position: absolute;
  inset: 0.2rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.55);
  border-radius: 0.08rem;
  content: "";
}
.replay-timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}
.replay-timeline span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.56rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.replay-timeline input,
.replay-volume {
  width: 100%;
  height: 0.25rem;
  margin: 0;
  border-radius: 999px;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.replay-timeline input {
  background: linear-gradient(90deg, #ff0033 var(--progress, 0%), rgba(255, 255, 255, 0.34) var(--progress, 0%));
}
.replay-volume {
  grid-column: 3;
  grid-row: 2;
  background: linear-gradient(90deg, #fff var(--volume, 100%), rgba(255, 255, 255, 0.3) var(--volume, 100%));
}
.replay-timeline input::-webkit-slider-thumb,
.replay-volume::-webkit-slider-thumb {
  width: 0.78rem;
  height: 0.78rem;
  border: 0;
  border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.45);
  appearance: none;
}
.replay-timeline input::-moz-range-thumb,
.replay-volume::-moz-range-thumb {
  width: 0.78rem;
  height: 0.78rem;
  border: 0;
  border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.45);
}
.replay-media.has-custom-controls video { cursor: pointer; }
.replay-player-status {
  position: absolute;
  z-index: 5;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgba(255, 97, 119, 0.28);
  border-radius: 0.65rem;
  color: #ffd7de;
  background: rgba(45, 8, 17, 0.88);
  font-size: 0.62rem;
}
.replay-details { display: grid; align-content: center; gap: 0.75rem; padding: 1rem; }
.replay-details h3 { max-width: 38rem; margin: 0; color: var(--ui-text-strong); font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.05; }
.replay-details > p:not(.eyebrow) { max-width: 36rem; margin: 0; color: var(--ui-text-muted); font-size: 0.77rem; line-height: 1.65; }
.replay-source-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 10rem)); gap: 0.55rem; margin-top: 0.35rem; }
.replay-source-meta > span { display: grid; gap: 0.18rem; padding: 0.7rem; border: 1px solid var(--ui-border); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.025); }
.replay-source-meta small { color: var(--ui-text-faint); font-size: 0.5rem; font-weight: 800; }
.replay-source-meta strong { color: var(--ui-text-strong); font-size: 0.7rem; }
.replay-footer {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(18rem, 1.3fr);
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem 1rem;
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-bg-0) 38%, transparent);
}
.replay-footer > div:first-child, .replay-availability > span:first-child { display: grid; gap: 0.2rem; }
.replay-footer small { color: var(--ui-text-faint); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.045em; }
.replay-footer strong { color: var(--ui-text-strong); font-size: 0.7rem; }
.replay-availability { display: grid; grid-template-columns: auto minmax(8rem, 1fr); align-items: center; gap: 0.8rem; }
.replay-availability strong { color: var(--ui-warning); }
.replay-availability-progress { height: 0.42rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.055); }
.replay-availability-progress i {
  display: block;
  width: var(--availability, 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ui-danger), var(--ui-warning), var(--ui-success));
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--ui-warning) 45%, transparent);
  transition: width 1s linear;
}
.replays-empty { display: grid; min-height: 14rem; place-content: center; gap: 0.4rem; padding: 2rem; color: var(--ui-text-muted); text-align: center; }
.replays-empty strong { color: var(--ui-text-strong); font-size: 1.05rem; }
.replays-empty p { margin: 0; font-size: 0.72rem; }

@media (max-width: 980px) {
  .replay-profile { grid-template-columns: auto minmax(0, 1fr); }
  .replay-profile-stats { grid-column: 1 / -1; }
  .replay-body { grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 720px) {
  .replays-retention-notice { grid-template-columns: auto minmax(0, 1fr); }
  .replays-retention-notice em { grid-column: 1 / -1; justify-self: start; }
  .replays-catalog-head { align-items: flex-start; flex-direction: column; }
  .replay-profile { grid-template-columns: auto minmax(0, 1fr); padding: 0.85rem; }
  .replay-profile-avatar { width: 3.5rem; height: 3.5rem; }
  .replay-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replay-body { grid-template-columns: 1fr; padding: 0.8rem; }
  .replay-media { width: min(100%, 20rem); }
  .replay-details { padding: 0.8rem 0.25rem; }
  .replay-footer { grid-template-columns: 1fr; }
  .replay-availability { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .replays-list { padding: 0.55rem; }
  .replays-retention-notice { padding: 0.8rem; }
  .replays-retention-icon { width: 2.6rem; height: 2.6rem; }
  .replay-profile-stats { gap: 0.3rem; }
  .replay-source-meta { grid-template-columns: 1fr 1fr; }
  .replay-footer { padding: 0.8rem; }
}

.replays-list {
  grid-template-columns: repeat(var(--replay-columns, 3), minmax(0, 1fr));
  align-items: start;
  gap: 0.85rem;
  padding: 0.85rem;
}
.replay-card {
  border-radius: 0.95rem;
  box-shadow: 0 0.95rem 2rem rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.035);
}
.replay-profile {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.72rem;
}
.replay-profile-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
}
.replay-profile-identity strong { font-size: 0.82rem; }
.replay-profile-identity a { font-size: 0.6rem; }
.replay-profile-identity p {
  max-width: none;
  font-size: 0.6rem;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}
.replay-profile-stats { display: none; }
.replay-body {
  grid-template-columns: 1fr;
  gap: 0.65rem;
  padding: 0.72rem;
}
.replay-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
}
.replay-play { gap: 0.48rem; padding: 0.75rem; }
.replay-play > i {
  width: 3.5rem;
  height: 2.45rem;
  font-size: 1rem;
}
.replay-play strong { font-size: 0.72rem; }
.replay-play small { font-size: 0.54rem; }
.replay-duration {
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.28rem 0.42rem;
  border-radius: 0.46rem;
  font-size: 0.58rem;
}
.replay-controls {
  right: 0;
  bottom: 0;
  left: 0;
  gap: 0.26rem;
  padding: 0.18rem 0.44rem 0.42rem;
  border-radius: 0;
}
.replay-control-button {
  width: 1.75rem;
  height: 1.75rem;
}
.replay-timeline { gap: 0.32rem; }
.replay-timeline span { font-size: 0.5rem; }
.replay-timeline input,
.replay-volume { height: 0.22rem; }
.replay-timeline input::-webkit-slider-thumb,
.replay-volume::-webkit-slider-thumb {
  width: 0.64rem;
  height: 0.64rem;
}
.replay-timeline input::-moz-range-thumb,
.replay-volume::-moz-range-thumb {
  width: 0.64rem;
  height: 0.64rem;
}
.replay-details {
  align-content: start;
  gap: 0.5rem;
  padding: 0;
}
.replay-details h3 {
  display: -webkit-box;
  max-width: none;
  margin: 0;
  overflow: hidden;
  color: var(--ui-text-strong);
  font-size: 0.98rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.replay-source-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0;
}
.replay-source-meta > span {
  min-width: 0;
  padding: 0.52rem;
  border-radius: 0.58rem;
}
.replay-source-meta strong { font-size: 0.62rem; }
.replay-footer {
  grid-template-columns: 1fr;
  gap: 0.55rem;
  padding: 0.72rem;
}
.replay-availability {
  grid-template-columns: 1fr;
  gap: 0.42rem;
}
.replay-player-status {
  right: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  padding: 0.52rem;
}

@media (max-width: 1180px) {
  .replays-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .replays-list { grid-template-columns: 1fr; }
  .replay-media { aspect-ratio: 16 / 9; }
  .replay-controls { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .replay-controls > .replay-control-button:nth-of-type(3) { grid-column: 4; }
  .replay-volume { display: none; }
}

/* YouTube-style replay player */
.replay-media {
  aspect-ratio: 16 / 9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.62rem !important;
  background: #000 !important;
  box-shadow: none !important;
}
.replay-media video {
  background: #000 !important;
  object-fit: contain;
}
.replay-media.has-custom-controls::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.86) 100%);
  content: "";
}
.replay-media.is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.replay-duration {
  z-index: 7;
  border-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 0.44rem !important;
  background: rgba(0, 0, 0, 0.72) !important;
  box-shadow: none !important;
}
.replay-controls {
  z-index: 8 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0.72rem 2.4rem;
  gap: 0.08rem;
  padding: 0 0.78rem 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  backdrop-filter: none !important;
}
.replay-controls[hidden] { display: none; }
.replay-timeline {
  display: flex !important;
  min-width: 0;
  height: 0.72rem;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  padding: 0;
}
.replay-timeline input,
.replay-volume {
  display: block;
  height: 0.18rem !important;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.replay-timeline input {
  width: 100%;
  background: linear-gradient(90deg, #ff0000 var(--progress, 0%), rgba(255, 255, 255, 0.25) var(--progress, 0%));
  transition: height 140ms ease, filter 140ms ease;
}
.replay-timeline:hover input,
.replay-timeline input:focus-visible {
  height: 0.28rem !important;
  filter: brightness(1.12);
}
.replay-controls-row {
  display: flex;
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.replay-control-group {
  display: flex;
  min-width: 0;
  align-items: center;
}
.replay-control-group.is-left {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.replay-control-group.is-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 0.16rem;
}
.replay-control-button {
  display: grid;
  width: 2.2rem !important;
  height: 2.2rem !important;
  flex: 0 0 2.2rem;
  place-items: center;
  grid-column: auto !important;
  grid-row: auto !important;
  border: 0 !important;
  border-radius: 0.25rem !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.98;
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
}
.replay-control-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
  transform: scale(1.04);
}
.replay-control-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -2px;
}
.replay-volume {
  width: 0;
  flex: 0 0 auto;
  margin: 0;
  background: linear-gradient(90deg, #fff var(--volume, 100%), rgba(255, 255, 255, 0.32) var(--volume, 100%)) !important;
  opacity: 0;
  pointer-events: none;
  transition: width 170ms ease, margin 170ms ease, opacity 170ms ease;
}
.replay-control-group.is-left:hover .replay-volume,
.replay-control-group.is-left:focus-within .replay-volume {
  width: 4.6rem;
  margin: 0 0.34rem 0 0.1rem;
  opacity: 1;
  pointer-events: auto;
}
.replay-timecode {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 0 0.45rem 0 0.16rem;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.66rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.replay-control-symbol {
  position: relative;
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  color: currentColor;
}
.replay-control-symbol.is-play {
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-top-width: 0.4rem;
  border-bottom-width: 0.4rem;
  border-left-width: 0.66rem;
}
.replay-control-symbol.is-pause::before,
.replay-control-symbol.is-pause::after {
  top: 0.11rem;
  bottom: 0.11rem;
  width: 0.24rem;
  border-radius: 999px;
}
.replay-control-symbol.is-pause::before { left: 0.26rem; }
.replay-control-symbol.is-pause::after { right: 0.26rem; }
.replay-control-symbol.is-settings {
  border: 0.15rem solid currentColor;
  border-radius: 50%;
}
.replay-control-symbol.is-settings::before {
  position: absolute;
  inset: 0.28rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.replay-control-symbol.is-pip {
  border: 0.14rem solid currentColor;
  border-radius: 0.16rem;
}
.replay-control-symbol.is-pip::after {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  width: 0.38rem;
  height: 0.26rem;
  border-radius: 0.04rem;
  background: currentColor;
  content: "";
}
.replay-control-symbol.is-fullscreen {
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(currentColor, currentColor) left top / 0.48rem 0.14rem no-repeat,
    linear-gradient(currentColor, currentColor) left top / 0.14rem 0.48rem no-repeat,
    linear-gradient(currentColor, currentColor) right top / 0.48rem 0.14rem no-repeat,
    linear-gradient(currentColor, currentColor) right top / 0.14rem 0.48rem no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 0.48rem 0.14rem no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 0.14rem 0.48rem no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 0.48rem 0.14rem no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 0.14rem 0.48rem no-repeat;
}
.replay-control-symbol.is-fullscreen::before { display: none !important; }
.replay-timeline input::-webkit-slider-runnable-track,
.replay-volume::-webkit-slider-runnable-track {
  height: inherit;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.replay-timeline input::-moz-range-track,
.replay-volume::-moz-range-track {
  height: inherit;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.replay-timeline input::-webkit-slider-thumb,
.replay-volume::-webkit-slider-thumb {
  width: 0.74rem;
  height: 0.74rem;
  margin-top: calc((0.18rem - 0.74rem) / 2);
  border: 0;
  border-radius: 50%;
  background: #ff0000;
  box-shadow: 0 0 0.45rem rgba(0, 0, 0, 0.48);
  opacity: 0;
  transition: opacity 140ms ease;
  appearance: none;
}
.replay-volume::-webkit-slider-thumb { background: #fff; }
.replay-timeline:hover input::-webkit-slider-thumb,
.replay-timeline input:focus-visible::-webkit-slider-thumb,
.replay-volume:hover::-webkit-slider-thumb,
.replay-volume:focus-visible::-webkit-slider-thumb {
  opacity: 1;
}
.replay-timeline input::-moz-range-thumb,
.replay-volume::-moz-range-thumb {
  width: 0.74rem;
  height: 0.74rem;
  border: 0;
  border-radius: 50%;
  background: #ff0000;
  box-shadow: 0 0 0.45rem rgba(0, 0, 0, 0.48);
  opacity: 0;
}
.replay-volume::-moz-range-thumb { background: #fff; }
.replay-timeline:hover input::-moz-range-thumb,
.replay-timeline input:focus-visible::-moz-range-thumb,
.replay-volume:hover::-moz-range-thumb,
.replay-volume:focus-visible::-moz-range-thumb {
  opacity: 1;
}
.replay-settings-menu {
  position: absolute;
  right: 0.75rem;
  bottom: 3.2rem;
  z-index: 9;
  display: grid;
  min-width: 8.6rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem;
  background: rgba(20, 20, 20, 0.96);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(16px);
}
.replay-settings-menu[hidden] { display: none; }
.replay-settings-menu strong {
  padding: 0.7rem 0.82rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.68rem;
}
.replay-speed-option {
  display: flex;
  justify-content: space-between;
  padding: 0.62rem 0.82rem;
  border: 0;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  font-size: 0.66rem;
  font-weight: 700;
  text-align: left;
}
.replay-speed-option:hover,
.replay-speed-option.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.replay-speed-option.active::after {
  content: "\2713";
}
.replay-play {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.66)) !important;
}
.replay-play > i {
  width: 4.2rem !important;
  height: 2.95rem !important;
  border-radius: 0.72rem !important;
  background: #ff0000 !important;
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.42) !important;
}
.replay-play:hover > i {
  background: #e90000 !important;
  transform: translateX(0.1rem) scale(1.06);
}
@media (max-width: 720px) {
  .replay-controls {
    grid-template-rows: 0.66rem 2.25rem;
    padding: 0 0.55rem 0.46rem !important;
  }
  .replay-control-button {
    width: 2rem !important;
    height: 2rem !important;
    flex-basis: 2rem;
  }
  .replay-control-group.is-left:hover .replay-volume,
  .replay-control-group.is-left:focus-within .replay-volume {
    width: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .replay-timecode {
    padding-right: 0.2rem;
    font-size: 0.56rem;
  }
  .replay-control-group.is-right { gap: 0; }
}

/* Neon surface treatment */
:where(
  .hero,
  .stats article,
  .home-panel,
  .page-heading,
  .auth-card,
  .admin-auth-card,
  .admin-dashboard-head,
  .admin-category-head,
  .admin-panel-block,
  .admin-management-card,
  .admin-toolbar,
  .admin-sidebar,
  .shop-card,
  .shop-panel,
  .level-card,
  .user-card,
  .replays-card,
  .replay-card,
  .deban-card,
  .deban-appeal-card,
  .recruitment-card,
  .recruitment-apply-panel,
  .recruitment-list-panel,
  .member-panel,
  .cosmetic-preview-card
) {
  border-color: color-mix(in srgb, var(--ui-cyan) 18%, var(--ui-border));
  box-shadow:
    var(--ui-neon-mixed),
    0 1.1rem 3rem rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.04);
}

:where(
  .stats article,
  .home-panel,
  .shop-card,
  .level-card,
  .user-card,
  .replay-card,
  .deban-card,
  .recruitment-card,
  .admin-management-card
):hover {
  border-color: color-mix(in srgb, var(--ui-fire-bright) 32%, var(--ui-cyan) 18%);
  box-shadow:
    var(--ui-neon-fire),
    0 1.3rem 3.2rem rgba(0, 0, 0, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.055);
}

/* Replay catalog — compact cards based on the supplied mock-up. */
.replays-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  padding: 1rem;
}
.replay-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 18%, rgba(113, 133, 170, 0.28));
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 50% -15%, rgba(255, 98, 45, 0.08), transparent 35%),
    linear-gradient(145deg, rgba(15, 21, 36, 0.98), rgba(7, 12, 24, 0.98));
}
.replay-card.is-recording {
  border-color: rgba(255, 94, 46, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 105, 46, 0.08), 0 1.15rem 3rem rgba(0, 0, 0, 0.3);
}
.replay-card.is-processing {
  border-color: rgba(38, 190, 255, 0.52);
  box-shadow: 0 0 0 1px rgba(38, 190, 255, 0.08), 0 1.15rem 3rem rgba(0, 0, 0, 0.3);
}
.replay-card.is-discounted {
  border-color: rgba(255, 167, 45, 0.68);
  box-shadow: 0 0 0 1px rgba(255, 119, 36, 0.12), 0 1.15rem 3rem rgba(0, 0, 0, 0.3);
}
.replays-promotion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(255, 154, 45, 0.55);
  border-radius: 0.9rem;
  background: linear-gradient(100deg, rgba(255, 111, 42, 0.2), rgba(255, 51, 91, 0.14));
  box-shadow: 0 0 1.5rem rgba(255, 96, 35, 0.12);
}
.replays-promotion[hidden] { display: none !important; }
.replays-promotion strong { color: #ffb04d; font-size: 0.78rem; letter-spacing: 0.08em; }
.replays-promotion span { color: #fff4e8; font-size: 0.76rem; font-weight: 800; }
.replay-profile {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  min-height: 6.1rem;
  padding: 0.85rem 1rem 0.65rem;
  border: 0;
  background: transparent;
}
.replay-profile-avatar-shell {
  width: 4.25rem;
  height: 4.25rem;
}
.replay-profile-avatar {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 113, 55, 0.42);
  border-radius: 50%;
  object-fit: cover;
}
.replay-profile-identity { gap: 0.18rem; }
.replay-profile-identity strong {
  font-size: 0.88rem;
  line-height: 1.15;
}
.replay-profile-identity a {
  color: #ff813b;
  font-size: 0.66rem;
  font-weight: 850;
}
.replay-profile-identity p {
  margin-top: 0.18rem;
  color: #9aa7bd;
  font-size: 0.66rem;
  line-height: 1.4;
  -webkit-line-clamp: 1;
}
.replay-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 0.7rem;
}
.replay-media {
  width: 100%;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 120, 59, 0.32) !important;
  border-radius: 0.9rem 0.9rem 0 0 !important;
  background: #02040a !important;
  box-shadow: 0 0.85rem 2.2rem rgba(0, 0, 0, 0.28) !important;
}
.replay-media video {
  object-fit: cover;
  background: #02040a !important;
}
.replay-media.is-playing video { object-fit: contain; }
.replay-play {
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(2, 5, 12, 0.38));
}
.replay-play > i {
  display: grid;
  width: 4.15rem;
  height: 4.15rem;
  place-items: center;
  border: 2px solid #ff6d32;
  border-radius: 50%;
  color: #fff;
  background: rgba(5, 9, 18, 0.68);
  box-shadow: 0 0 1.1rem rgba(255, 88, 34, 0.42), inset 0 0 0.8rem rgba(255, 255, 255, 0.05);
  font-size: 1.25rem;
  text-shadow: 0 0 0.75rem #ff8c45;
}
.replay-play:hover > i { transform: translateX(0.1rem) scale(1.07); }
.replay-duration {
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.42rem 0.54rem;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0.48rem !important;
  background: rgba(3, 5, 11, 0.86) !important;
  font-size: 0.69rem;
  font-variant-numeric: tabular-nums;
}
.replay-duration.is-live {
  border-color: rgba(255, 79, 47, 0.62) !important;
  color: #fff0e9;
}
.replay-duration.is-live::before {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #ff442c;
  box-shadow: 0 0 0.55rem #ff442c;
  content: "";
  animation: replay-recording-pulse 1.25s ease-in-out infinite;
}
.replay-discount-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 8;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(255, 193, 79, 0.65);
  border-radius: 0.48rem;
  color: #fff8e7;
  background: linear-gradient(110deg, #ff852e, #ef315d);
  box-shadow: 0 0 1rem rgba(255, 77, 52, 0.36);
  font-size: 0.68rem;
  font-weight: 950;
}
.replay-discount-badge[hidden] { display: none !important; }
.replay-details {
  display: block;
  padding: 0;
}
.replay-source-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  margin: 0;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(119, 140, 178, 0.22);
  border-top: 0;
  border-radius: 0 0 0.8rem 0.8rem;
  background: linear-gradient(135deg, rgba(18, 26, 43, 0.96), rgba(9, 15, 28, 0.96));
}
.replay-source-meta > small {
  color: #6e7d99;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.replay-source-meta > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.replay-source-meta strong,
.replay-source-meta b {
  color: #f4f7ff;
  font-size: 0.75rem;
  font-weight: 850;
}
.replay-source-meta b { text-align: right; }
.replay-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
  padding: 0.8rem 0.95rem 0.95rem;
  border: 0;
  background: transparent;
}
.replay-date {
  display: grid;
  gap: 0.24rem;
  padding: 0 0.3rem;
}
.replay-footer small {
  color: #687895;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.055em;
}
.replay-footer strong {
  color: #f6f8ff;
  font-size: 0.7rem;
}
.replay-availability {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
  min-height: 4.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 106, 38, 0.82);
  border-radius: 0.8rem;
  background: linear-gradient(135deg, rgba(37, 23, 18, 0.48), rgba(8, 13, 24, 0.82));
  box-shadow: inset 0 0 1.2rem rgba(255, 95, 28, 0.04);
}
.replay-availability-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.65rem;
  color: #ffa12f;
  background: rgba(255, 124, 28, 0.1);
  box-shadow: 0 0 1rem rgba(255, 89, 26, 0.1);
  font-size: 1rem;
  font-style: normal;
}
.replay-availability > span:first-of-type {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.replay-availability strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(0.74rem, 1vw, 0.98rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.replay-availability em {
  color: #ff8b3c;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
}
.replay-availability-progress {
  height: 0.22rem;
  grid-column: 1 / -1;
  margin: 0.05rem 0.1rem 0;
  background: rgba(255, 255, 255, 0.06);
}
.replay-availability.is-recording {
  border-color: rgba(255, 72, 38, 0.92);
}
.replay-availability.is-recording .replay-availability-icon {
  color: #ff4a2e;
  animation: replay-recording-pulse 1.25s ease-in-out infinite;
}
.replay-availability.is-recording .replay-availability-progress i {
  width: 42%;
  background: linear-gradient(90deg, transparent, #ff4b2e, #ffb02e, transparent);
  animation: replay-recording-progress 1.8s linear infinite;
}
.replay-access-button {
  display: flex;
  width: 100%;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, #ff9538 0%, #ff4c2c 48%, #ef2845 100%);
  box-shadow: 0 0.8rem 1.8rem rgba(255, 56, 40, 0.18), inset 0 1px rgba(255, 255, 255, 0.22);
  font-size: 0.74rem;
  font-weight: 900;
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}
.replay-access-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.replay-access-button:disabled { cursor: wait; opacity: 0.6; }
.replay-access-button > span {
  font-size: 1rem;
  line-height: 1;
}

@keyframes replay-recording-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.84); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes replay-recording-progress {
  from { transform: translateX(-130%); }
  to { transform: translateX(300%); }
}
@media (max-width: 1180px) {
  .replays-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .replays-list { grid-template-columns: 1fr; padding: 0.65rem; }
  .replay-profile { min-height: 5.4rem; }
  .replay-profile-avatar-shell { width: 3.7rem; height: 3.7rem; }
}

/* Replay paywall and responsive DaisyUI/Tailwind player. */
.replay-card.is-unlocked {
  border-color: color-mix(in srgb, var(--ui-cyan) 36%, rgba(113, 133, 170, 0.34));
}
.replay-media-backdrop {
  position: absolute;
  z-index: 0;
  inset: -1rem;
  background-position: center;
  background-size: cover;
  filter: blur(18px) saturate(1.18);
  opacity: 0.48;
  transform: scale(1.12);
}
.replay-media-backdrop::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 3, 8, 0.78), rgba(1, 3, 8, 0.24) 50%, rgba(1, 3, 8, 0.78));
  content: "";
}
.replay-media video,
.replay-media.is-playing video {
  position: relative;
  z-index: 1;
  object-fit: contain;
  background: transparent !important;
}
.replay-media.is-playing .replay-duration:not(.is-live) {
  opacity: 0;
}
.replay-play {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}
.replay-play > i {
  width: 4.3rem !important;
  height: 3rem !important;
  border: 0 !important;
  border-radius: 0.72rem !important;
  background: #ff0033 !important;
}
.replay-play > i svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: currentColor;
}
.replay-play.locked > i {
  width: 3.25rem !important;
  height: 3.25rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  background: rgba(4, 8, 17, 0.82) !important;
  backdrop-filter: blur(10px);
}
.replay-play.locked > i svg { width: 1.25rem; height: 1.25rem; }
.replay-controls {
  position: absolute;
  z-index: 8 !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.replay-controls[hidden] { display: none !important; }
.replay-controls-dock {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: 0.75rem 2.35rem;
  gap: 0.06rem;
  padding: 1.8rem 0.62rem 0.42rem;
  pointer-events: auto;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 44%, rgba(0, 0, 0, 0.94));
  opacity: 1;
  transition: opacity 180ms ease;
}
.replay-media.is-playing:not(:hover) .replay-controls-dock {
  opacity: 0;
}
.replay-center-toggle {
  position: absolute !important;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-height: 3.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(4, 7, 13, 0.78) !important;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.38) !important;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
}
.replay-center-toggle:hover { background: #ff0033 !important; }
.replay-center-toggle[hidden] { display: none !important; }
.replay-control-button {
  width: 2.15rem !important;
  height: 2.15rem !important;
  min-height: 2.15rem !important;
  flex: 0 0 2.15rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}
.replay-control-button:hover { background: rgba(255, 255, 255, 0.12) !important; }
.replay-control-icon,
.replay-control-icon svg {
  display: block;
  width: 1.18rem;
  height: 1.18rem;
}
.replay-control-icon svg { fill: currentColor; }
.replay-timeline {
  grid-row: 1;
  height: 0.75rem;
}
.replay-timeline-input,
.replay-volume {
  --range-thumb: #ff0033;
  height: 0.2rem !important;
  min-height: 0 !important;
  border: 0;
  border-radius: 999px;
  appearance: none;
}
.replay-timeline-input {
  width: 100%;
  background: linear-gradient(90deg, #ff0033 var(--progress, 0%), rgba(255, 255, 255, 0.3) var(--progress, 0%)) !important;
}
.replay-controls-row {
  grid-row: 2;
  min-height: 2.15rem;
}
.replay-control-group { gap: 0.02rem; }
.replay-control-group.is-right { gap: 0.04rem; }
.replay-volume {
  background: linear-gradient(90deg, #fff var(--volume, 100%), rgba(255, 255, 255, 0.32) var(--volume, 100%)) !important;
}
.replay-timecode {
  max-width: 9.5rem;
  overflow: hidden;
  padding-right: 0.18rem;
  font-size: 0.62rem;
  text-overflow: ellipsis;
}
.replay-settings-menu {
  right: 0.55rem;
  bottom: 2.8rem;
  min-width: 8rem;
  padding: 0.22rem;
  pointer-events: auto;
}
.replay-speed-option {
  width: 100%;
  min-height: 2rem !important;
  justify-content: space-between !important;
  border-radius: 0.35rem !important;
}
.replay-source-meta {
  border-radius: 0 !important;
}
.replay-pricing {
  display: grid;
  gap: 0.32rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(119, 140, 178, 0.22);
  border-top: 0;
  border-radius: 0 0 0.8rem 0.8rem;
  background: linear-gradient(135deg, rgba(18, 26, 43, 0.98), rgba(9, 15, 28, 0.98));
}
.replay-pricing > small {
  color: #6e7d99;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.055em;
}
.replay-pricing > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.replay-pricing strong {
  color: #aeb9cd;
  font-size: 0.66rem;
}
.replay-pricing b {
  color: #ff8a38;
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}
.replay-pricing del { margin-right: 0.2rem; color: #7e899e; font-weight: 700; }

@media (max-width: 620px) {
  .replays-promotion { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}
.replay-pricing.is-unlocked b { color: #45e6c0; }
.replay-pricing.is-unlocked b::before { content: "\2713  "; }
.replay-pricing.is-refunded b { color: #ffb454; text-decoration: line-through; opacity: 0.78; }
.replay-pricing.is-refunded b::after { content: " · remboursé"; text-decoration: none; }
.replay-pricing.is-pending b { color: #ffb13b; font-size: 0.65rem; }
.replay-card.is-unlocked .replay-access-button {
  background: linear-gradient(100deg, #0cae9a, #078e9b 52%, #146bb8 100%);
  box-shadow: 0 0.8rem 1.8rem rgba(11, 179, 166, 0.16), inset 0 1px rgba(255, 255, 255, 0.2);
}
.replay-card.is-recording .replay-access-button {
  color: #adb7c9;
  background: rgba(75, 87, 108, 0.22);
  box-shadow: inset 0 0 0 1px rgba(124, 139, 166, 0.18);
}
.replay-card.is-processing .replay-access-button {
  color: #b9c9dc;
  background: linear-gradient(100deg, rgba(34, 90, 126, 0.4), rgba(29, 65, 105, 0.38));
  box-shadow: inset 0 0 0 1px rgba(82, 193, 255, 0.22);
}
.replay-card.is-processing .replay-play > i {
  border-color: #36bdf1;
  box-shadow: 0 0 1.1rem rgba(38, 190, 255, 0.3), inset 0 0 0.8rem rgba(255, 255, 255, 0.05);
}
.replay-availability.is-processing {
  border-color: rgba(45, 185, 245, 0.72);
  background: linear-gradient(135deg, rgba(17, 44, 64, 0.6), rgba(8, 13, 24, 0.86));
}
.replay-availability.is-processing .replay-availability-icon {
  color: #52c9ff;
  background: rgba(44, 175, 235, 0.12);
  animation: replay-processing-spin 2.8s linear infinite;
}
.replay-availability.is-processing .replay-availability-progress i {
  width: var(--processing-progress, 35%);
  background: linear-gradient(90deg, #1587ca, #4edcff);
}
.replay-processing-panel {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.68rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(67, 185, 237, 0.26);
  border-radius: 0.85rem;
  background: linear-gradient(145deg, rgba(13, 39, 59, 0.84), rgba(8, 16, 29, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.replay-processing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.replay-processing-head > span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}
.replay-processing-head small,
.replay-processing-live {
  color: #6d91aa;
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.replay-processing-head strong {
  overflow: hidden;
  color: #e8f7ff;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.replay-processing-head b {
  flex: 0 0 auto;
  color: #55d5ff;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.replay-processing-progress {
  width: 100%;
  height: 0.48rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  color: #42c9fa;
  background: rgba(255, 255, 255, 0.065);
}
.replay-processing-progress::-webkit-progress-bar { background: rgba(255, 255, 255, 0.065); }
.replay-processing-progress::-webkit-progress-value { background: linear-gradient(90deg, #117ebc, #56dbff); }
.replay-processing-progress::-moz-progress-bar { background: linear-gradient(90deg, #117ebc, #56dbff); }
.replay-processing-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.replay-processing-steps li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
  color: #66758d;
  font-size: 0.58rem;
  font-weight: 760;
}
.replay-processing-steps i {
  width: 0.9rem;
  flex: 0 0 0.9rem;
  color: currentColor;
  font-style: normal;
  text-align: center;
}
.replay-processing-steps .is-complete { color: #53dbbe; }
.replay-processing-steps .is-current { color: #55d5ff; }
.replay-processing-steps .is-current i { animation: replay-recording-pulse 1.25s ease-in-out infinite; }
.replay-processing-live::before {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #50d4ff;
  box-shadow: 0 0 0.5rem rgba(80, 212, 255, 0.75);
  content: "";
  animation: replay-recording-pulse 1.25s ease-in-out infinite;
}
@keyframes replay-processing-spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .replay-processing-steps { grid-template-columns: 1fr; }
}
.replay-token-mark {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  font-size: 0.62rem !important;
}
.replay-purchase-modal {
  color: #f5f7ff;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(7px);
}
.replay-purchase-modal::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(7px); }
.replay-purchase-box {
  width: min(92vw, 28rem);
  border: 1px solid rgba(255, 113, 47, 0.34);
  border-radius: 1rem;
  color: #f5f7ff;
  background: linear-gradient(145deg, #111a2c, #080d18);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.55), 0 0 2rem rgba(255, 93, 39, 0.08);
}
.replay-purchase-box h3 { margin: 0; font-size: 1rem; }
.replay-purchase-box > p { margin: 0.7rem 0 0; color: #aab6ca; font-size: 0.75rem; line-height: 1.55; }
.replay-purchase-box > small { display: block; margin-top: 0.75rem; color: #ff9a4c; font-weight: 800; }
.replay-purchase-error { color: #ff7b70 !important; }
.replay-purchase-actions { gap: 0.55rem; }
.replay-purchase-confirm {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(100deg, #ff9538, #ff4c2c 55%, #ef2845) !important;
}

@media (max-width: 520px) {
  .replay-controls-dock { padding-right: 0.38rem; padding-left: 0.38rem; }
  .replay-control-button { width: 1.95rem !important; height: 1.95rem !important; min-height: 1.95rem !important; flex-basis: 1.95rem; }
  .replay-control-icon,
  .replay-control-icon svg { width: 1.02rem; height: 1.02rem; }
  .replay-volume { display: none !important; }
  .replay-timecode { max-width: 6.7rem; padding-left: 0.08rem; font-size: 0.52rem; }
  .replay-control-group.is-right .is-pip-toggle { display: none !important; }
  .replay-center-toggle { width: 2.85rem !important; height: 2.85rem !important; min-height: 2.85rem !important; }
  .replay-pricing > span { align-items: flex-end; }
  .replay-pricing strong { max-width: 62%; }
}

/* Aperçu moderne : court fragment FFmpeg encodé comme image WebP animée, donc sans piste audio. */
.replay-hover-preview {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #02040a;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity 160ms ease, transform 220ms ease;
}
.replay-media.is-previewing:not(.is-playing) .replay-hover-preview {
  opacity: 1;
  transform: scale(1);
}
.replay-preview-badge {
  position: absolute;
  z-index: 6;
  top: 0.65rem;
  left: 0.65rem;
  display: none;
  height: 1.45rem;
  padding-inline: 0.48rem;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  background: rgba(2, 5, 12, 0.72);
  box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.34);
  font-size: 0.48rem;
  letter-spacing: 0.05em;
  backdrop-filter: blur(10px);
}
.replay-media.is-previewing:not(.is-playing) .replay-preview-badge { display: inline-flex; }
.replay-media.is-playing .replay-hover-preview,
.replay-media.is-playing .replay-preview-badge { display: none !important; }

@media (hover: none), (prefers-reduced-motion: reduce) {
  .replay-hover-preview,
  .replay-preview-badge { display: none !important; }
}

/* Lecteur de rediffusion sécurisé : barre unique, volume vertical et statistiques DaisyUI. */
.replay-profile {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.replay-audience-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}
.replay-audience-stat {
  height: 1.8rem;
  gap: 0.28rem;
  padding-inline: 0.48rem;
  border-color: rgba(104, 222, 242, 0.2);
  color: #dce8fa;
  background: rgba(7, 14, 27, 0.72);
}
.replay-audience-stat i,
.replay-audience-stat svg {
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  fill: currentColor;
}
.replay-audience-stat strong { font-size: 0.65rem; }
.replay-audience-stat small {
  color: #8292ac;
  font-size: 0.48rem;
  text-transform: uppercase;
}
.replay-controls-dock {
  display: block;
  padding: 1.8rem 0.5rem 0.34rem;
}
.replay-controls-row {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}
.replay-control-group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.replay-timeline {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2rem;
  min-width: 3rem;
}
.replay-volume-shell {
  position: relative;
  display: flex;
  align-items: center;
}
.replay-volume-popover {
  position: absolute;
  z-index: 12;
  bottom: calc(100% + 0.15rem);
  left: 50%;
  display: grid;
  width: 2.2rem;
  height: 6.2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.7rem;
  background: rgba(3, 6, 12, 0.94);
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 140ms ease, transform 140ms ease;
  backdrop-filter: blur(12px);
}
.replay-volume-shell:hover .replay-volume-popover,
.replay-volume-shell:focus-within .replay-volume-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.replay-volume-popover .replay-volume {
  display: block !important;
  width: 0.28rem !important;
  height: 4.8rem !important;
  min-height: 4.8rem !important;
  margin: 0;
  background: linear-gradient(0deg, #fff var(--volume, 100%), rgba(255, 255, 255, 0.3) var(--volume, 100%)) !important;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
}
.replay-purchase-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(72, 213, 236, 0.2);
  border-radius: 0.72rem;
  background: rgba(7, 19, 32, 0.68);
}
.replay-purchase-window strong {
  color: #5fe1f1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.replay-purchase-window.is-closed {
  border-color: rgba(145, 157, 177, 0.16);
  opacity: 0.68;
}
.replay-purchase-window.is-closed strong { color: #8c98ab; }
.replay-card.purchase-closed:not(.is-unlocked) .replay-access-button {
  color: #8f9bae;
  background: rgba(70, 82, 103, 0.24);
  box-shadow: inset 0 0 0 1px rgba(130, 145, 169, 0.15);
}

@media (max-width: 720px) {
  .replay-profile { grid-template-columns: auto minmax(0, 1fr); }
  .replay-audience-stats { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 520px) {
  .replay-controls-row { grid-template-columns: auto minmax(2.5rem, 1fr) auto; gap: 0.12rem; }
  .replay-timecode { display: none; }
  .replay-volume-popover .replay-volume { display: block !important; }
  .replay-audience-stat small { display: none; }
}

/* ADMIN EMAIL CENTER V1 */
.admin-email-compose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 22px;
  align-items: start;
}
.admin-email-compose-fields,
.admin-email-preview-panel {
  min-width: 0;
}
.admin-email-member-picker {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(78, 154, 215, .24);
  border-radius: 16px;
  background: rgba(3, 13, 27, .48);
}
.admin-email-member-picker > label {
  display: grid;
  gap: 8px;
}
.admin-email-member-picker > label > span,
.admin-email-selected-head strong {
  color: #dbeaff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-email-member-picker input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  color: #eff7ff;
  border: 1px solid rgba(85, 167, 225, .28);
  border-radius: 11px;
  background: rgba(2, 10, 22, .82);
}
.admin-email-member-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: 312px;
  margin-top: 13px;
  overflow: auto;
  scrollbar-width: thin;
}
.admin-email-member-option {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  color: #eff7ff;
  text-align: left;
  border: 1px solid rgba(72, 138, 192, .22);
  border-radius: 12px;
  background: rgba(8, 24, 43, .78);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.admin-email-member-option:hover,
.admin-email-member-option.selected {
  transform: translateY(-1px);
  border-color: rgba(37, 216, 244, .62);
  background: rgba(10, 52, 72, .82);
}
.admin-email-member-option img,
.admin-email-member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: #06101d;
  font-weight: 950;
  background: linear-gradient(135deg, #25d8f4, #ff9b2f);
}
.admin-email-member-option > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.admin-email-member-option strong,
.admin-email-member-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-email-member-option small {
  color: #8ea5bd;
  font-size: 10px;
}
.admin-email-member-option b {
  color: #25d8f4;
  font-size: 10px;
}
.admin-email-selected-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 18px 0 9px;
}
.admin-email-selected-head .auth-secondary {
  min-height: 34px;
  padding: 0 11px;
}
.admin-email-selected-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  color: #7f96ad;
  font-size: 12px;
}
.admin-email-preview-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
}
.admin-email-quota-card {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid rgba(255, 170, 44, .34);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(74, 39, 5, .58), rgba(8, 28, 50, .82));
}
.admin-email-quota-card > span,
.admin-email-quota-card small {
  color: #a8bad0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.admin-email-quota-card > strong {
  color: #ffc253;
  font-size: 27px;
}
.admin-email-preview-head,
.admin-email-campaign-head,
.admin-email-campaign-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-email-preview-head h4 {
  margin: 2px 0 0;
  color: #f4f8ff;
}
.admin-email-preview-frame {
  width: 100%;
  min-height: 520px;
  border: 1px solid rgba(56, 139, 202, .28);
  border-radius: 16px;
  background: #fff;
}
.admin-email-preview-recipients {
  display: grid;
  gap: 5px;
  color: #25d8f4;
  font-size: 12px;
  font-weight: 850;
}
.admin-email-preview-recipients small {
  color: #8399b0;
  font-weight: 600;
  line-height: 1.55;
}
.admin-email-send-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.admin-email-send-footer p {
  margin: 0;
  color: #879cb1;
  font-size: 12px;
  line-height: 1.55;
}
.admin-email-campaign-list {
  display: grid;
  gap: 11px;
}
.admin-email-campaign-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(67, 135, 190, .24);
  border-radius: 14px;
  background: rgba(6, 20, 37, .76);
}
.admin-email-campaign-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.admin-email-campaign-head strong,
.admin-email-campaign-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-email-campaign-head strong { color: #f4f8ff; }
.admin-email-campaign-head small,
.admin-email-campaign-stats { color: #8ca2b9; font-size: 11px; }
.admin-email-campaign-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #25d8f4;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid rgba(37, 216, 244, .35);
  border-radius: 999px;
  background: rgba(37, 216, 244, .08);
}
.admin-email-campaign-card.completed .admin-email-campaign-head > span { color: #55e5a8; border-color: rgba(85, 229, 168, .38); }
.admin-email-campaign-card.cancelled .admin-email-campaign-head > span,
.admin-email-campaign-card.failed .admin-email-campaign-head > span { color: #ff748d; border-color: rgba(255, 116, 141, .38); }
.admin-email-campaign-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.admin-email-campaign-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #25d8f4, #6c7cff, #ff9b2f);
  box-shadow: 0 0 18px rgba(37, 216, 244, .35);
  transition: width .25s ease;
}
.admin-email-campaign-stats .auth-secondary {
  min-height: 34px;
  padding: 0 12px;
}
.admin-email-send-grid code {
  color: #25d8f4;
}
@media (max-width: 1180px) {
  .admin-email-compose-layout { grid-template-columns: 1fr; }
  .admin-email-preview-panel { position: static; }
  .admin-email-preview-frame { min-height: 440px; }
}
@media (max-width: 720px) {
  .admin-email-member-results,
  .admin-email-selected-members { grid-template-columns: 1fr; }
  .admin-email-preview-frame { min-height: 380px; }
  .admin-email-send-footer,
  .admin-email-campaign-head,
  .admin-email-campaign-stats { align-items: stretch; flex-direction: column; }
  .admin-email-send-footer .auth-primary,
  .admin-email-campaign-stats .auth-secondary { width: 100%; }
}