/**
 * MAX Catalog — Design System & Stylesheet
 */

:root {
  /* Color Palette */
  --bg-primary: #0a0e14;
  --bg-secondary: #121820;
  --bg-card: #18202c;
  --bg-card-hover: #1f2a3a;
  --bg-card-elevated: #243042;
  --bg-input: #10161f;
  
  --accent-cyan: #00d2ff;
  --accent-blue: #0077ff;
  --accent-blue-hover: #1a88ff;
  --accent-glow: rgba(0, 210, 255, 0.18);
  
  --text-primary: #f0f4f8;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(0, 210, 255, 0.4);
  
  --badge-verified: #00e5a3;
  --badge-bot: #00c3ff;
  --badge-channel: #6366f1;
  --star-gold: #ffb800;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', var(--font-body);

  /* Transitions & Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 9999px;
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 10px 30px -4px rgba(0, 119, 255, 0.2);

  /*
   * Dashboard palette.
   *
   * These lived in an inline <style> in dashboard.html, in a second :root that redefined
   * --accent-cyan, --accent-blue and --text-muted for that page only. A silent redefinition is
   * the worst kind of duplication: the same token name meant two different colours depending on
   * which page you were on, and changing the palette meant changing it twice, in two languages
   * of file. They are declared here, once, alongside the catalog's own.
   *
   * The dashboard's brighter cyan keeps its own name rather than overwriting the catalog's,
   * because both are real: #00d2ff is the catalog accent and #00e5ff is written literally into
   * dozens of the dashboard's inline styles. Unifying them is a design decision, not a cleanup,
   * so it is left to be made deliberately. The dashboard's --text-muted was not a disagreement
   * at all — it was #94a3b8, which is this file's --text-secondary under another name.
   *
   * Dropped on the way across: --bg-dark, --accent-gold, --accent-bronze, --accent-purple,
   * --accent-magenta and the dashboard's --accent-blue. Not one had a single var() reader.
   */
  --card-bg: rgba(13, 20, 36, 0.85);
  --card-border: rgba(255, 255, 255, 0.08);
  --accent-cyan-bright: #00e5ff;
  --text-main: #f8fafc;
}

/*
 * Keyboard focus.
 *
 * Four rules in this file set `outline: none` on inputs and selects and put nothing in its
 * place, so a keyboard user tabbing through the search field, the sort control or the submit
 * form had no way to tell where they were. :focus-visible only fires for keyboard focus, so
 * this restores the ring for them without drawing one around every mouse click.
 *
 * Declared before the rules that clear the outline and re-declared after them would be
 * fragile; instead this uses :focus-visible, which those rules do not target at all.
 */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-card-elevated);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  /* Both pages set viewport-fit=cover, which deliberately extends the page under the notch
     and the gesture bar. Without a matching inset the header sits beneath the status bar on a
     phone with a cutout — the cover was requested and never paid for. */
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  user-select: none;
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 0 12px var(--accent-glow);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.brand-tag {
  font-size: 0.72rem;
  color: var(--accent-cyan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Desktop Header Navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 4px 6px;
  border-radius: var(--radius-pill);
}

.header-nav-item {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.header-nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.header-nav-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 119, 255, 0.35), rgba(0, 210, 255, 0.35));
  border: 1px solid rgba(0, 210, 255, 0.4);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 860px) {
  .header-nav {
    display: none;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  /* The base for every button on this page, including the one on each catalog card. It was
     32 to 40 px tall depending on the modifier. */
  min-height: 44px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue) 0%, #0099ff 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 119, 255, 0.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-blue-hover) 0%, var(--accent-cyan) 100%);
  box-shadow: 0 6px 18px rgba(0, 210, 255, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-outline {
  background: transparent;
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 255, 0.3);
}
.btn-outline:hover {
  background: rgba(0, 210, 255, 0.08);
  border-color: var(--accent-cyan);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
}

/* Main Container */
.app-main {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 60px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Hero Banner Card */
.hero-banner-card {
  position: relative;
  background: radial-gradient(120% 120% at 80% 20%, #1a2738 0%, #111822 60%, #0d121a 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.hero-content {
  max-width: 600px;
  z-index: 2;
}

.hero-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  margin-bottom: 12px;
}

.hero-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 22px;
}

.hero-stats-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-pill {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

.stat-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
}

.stat-lbl {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hero-image-wrap {
  position: relative;
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* <picture> is a real box in the layout, so it has to pass the wrap's size through to the
   image inside it — otherwise the image's height: 100% has nothing to resolve against. */
.hero-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 35px rgba(0, 210, 255, 0.25);
  border: 1px solid rgba(0, 210, 255, 0.3);
  transition: transform var(--transition-smooth);
}

.hero-visual:hover {
  transform: scale(1.03);
}

/* Author Bot Verification Callout Banner */
.author-banner-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.08) 0%, rgba(0, 210, 255, 0.08) 100%);
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.author-banner-card:hover {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.14) 0%, rgba(0, 210, 255, 0.14) 100%);
  border-color: rgba(255, 184, 0, 0.6);
  transform: translateY(-2px);
}

.author-banner-icon {
  font-size: 1.6rem;
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.3);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-banner-text {
  flex: 1;
  min-width: 0;
}

.author-banner-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.author-banner-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.btn-author-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: rgba(255, 184, 0, 0.15);
  color: #ffc837;
  border: 1px solid rgba(255, 184, 0, 0.4);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.btn-author-action:hover {
  background: #ffc837;
  color: #0b0f17;
}

/*
 * VIP Bot-Verified Card Styling
 *
 * No `!important` here, and that is the whole point of this comment. It carried it on border,
 * box-shadow and background, and among !important declarations the more specific selector
 * wins — `.catalog-card.card-bot-verified` is (0,2,0) against the (0,1,0) of a
 * `.cosmetic-card-frame-*` rule. So a bought frame or background lost to the verified chrome
 * on every card that had it, which is every claimed channel: claiming one sets botVerified.
 * The decoration showed up in the detail modal, which has no such class, and nowhere in the
 * feed it was bought to be seen in.
 *
 * It never needed the flag: (0,2,0) already beats the plain `.catalog-card` below without it,
 * and the :hover rule that follows keeps the gold on hover by being more specific still.
 */
.catalog-card.card-bot-verified {
  border: 1px solid rgba(255, 184, 0, 0.5);
  box-shadow: 0 0 16px rgba(255, 184, 0, 0.15);
  background: linear-gradient(180deg, rgba(255, 184, 0, 0.04) 0%, var(--bg-card) 100%);
}

.catalog-card.card-bot-verified:hover {
  border-color: #ffc837;
  box-shadow: 0 0 24px rgba(255, 184, 0, 0.3);
}

.bot-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 184, 0, 0.15);
  border: 1px solid rgba(255, 184, 0, 0.4);
  color: #ffc837;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-top: 4px;
}

/* Author Verification Modal */
.verify-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.verify-perk-card {
  display: flex;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.verify-perk-card .perk-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.verify-perk-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.verify-perk-card p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.verify-steps-box {
  background: rgba(0, 210, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 14px;
}

.verify-steps-box h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 8px;
}

.verify-steps-box ol {
  padding-left: 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.verify-steps-box li strong {
  color: #fff;
}

/* Search & Filter Section */
.search-filter-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 44px 14px 50px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: all var(--transition-fast);
}

.search-box input:focus {
  border-color: var(--accent-cyan);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.15);
}

.clear-search-btn {
  position: absolute;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius-pill);
}
.clear-search-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* Segmented Type Switcher */
.type-segmented-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  width: fit-content;
}

.seg-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.seg-btn:hover {
  color: var(--text-primary);
}

.seg-btn.active {
  background: var(--bg-card-elevated);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Category Pills Bar with Nav Arrows */
.categories-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-nav-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.cat-nav-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 255, 0.4);
  transform: scale(1.06);
}

.cat-nav-btn:active {
  transform: scale(0.94);
}

.categories-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  padding-bottom: 6px;
  padding-top: 2px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.categories-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  transition: all var(--transition-fast);
}

.cat-pill:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.cat-pill.active {
  background: rgba(0, 210, 255, 0.12);
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 255, 0.4);
  font-weight: 600;
}

.cat-count {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}
.cat-pill.active .cat-count {
  background: rgba(0, 210, 255, 0.2);
  color: var(--accent-cyan);
}

/* Feed Section */
.catalog-feed-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.feed-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-heading {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

.feed-count-badge {
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.feed-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.custom-select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}
.custom-select:focus {
  border-color: var(--accent-cyan);
}

/* Catalog Cards Grid */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 350px));
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Individual Channel/Bot Card */
.catalog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-card);
  position: relative;
  cursor: pointer;
}

.catalog-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.6);
}

.card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.card-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.card-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

.type-indicator-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--bg-card);
}
.type-indicator-badge.channel {
  background: var(--badge-channel);
  color: #fff;
}
.type-indicator-badge.bot {
  background: var(--badge-bot);
  color: #051624;
}
.type-indicator-badge.chat {
  background: #10b981;
  color: #042f20;
}

.card-header-info {
  flex: 1;
  min-width: 0;
}

.card-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-title-link:hover .card-title {
  color: var(--accent-cyan);
}.card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verified-icon {
  flex-shrink: 0;
  color: var(--badge-verified);
}

.card-username-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.card-username {
  font-size: 0.8rem;
  color: var(--accent-cyan);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-handle-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  position: relative;
}

/*
 * This one keeps its size: it is a chip sitting inside a line of text, and a 44 px square
 * beside a handle would read as a second button. The press area grows instead — 44 px tall,
 * and outwards to the right only. Extending it to the left would lay it over the tail of the
 * channel link next to it, and the copy button would start swallowing taps meant for opening
 * the channel.
 */
.copy-handle-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(100% + 18px);
  height: 44px;
}
.copy-handle-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  color: var(--accent-cyan);
  border-color: rgba(0, 210, 255, 0.4);
}

/* Quick Access & QR Block */
.access-qr-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qr-image {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: #ffffff;
  padding: 4px;
}

.qr-hint {
  font-size: 0.68rem;
  color: var(--accent-cyan);
  font-weight: 600;
}

.qr-instructions h5 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.qr-instructions ol {
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* In-App Channel Posts Feed */
.channel-posts-feed {
  margin-bottom: 22px;
}

.posts-feed-header {
  margin-bottom: 12px;
}

.posts-feed-header h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #ffffff;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.post-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.post-text {
  font-size: 0.86rem;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 8px;
}

.post-reactions {
  display: flex;
  gap: 8px;
}

.reaction-pill {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
}

.card-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-badge {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 4px;
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrapping, so the controls below can be 44 px without being squeezed. At 375 px the meta
     and the actions together need 326 px of the 317 available once the buttons reach the size
     the project requires; the row moves to a second line rather than shrinking them back. */
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 14px;
  margin-top: auto;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.meta-item svg {
  color: var(--text-muted);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fav-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.fav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.fav-btn.active {
  color: #ff4757;
  border-color: rgba(255, 71, 87, 0.4);
  background: rgba(255, 71, 87, 0.1);
}

/*
 * Text for screen readers only. Kept out of the visual layout without `display: none`, which
 * would hide it from them too.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * The like control sits in the meta row rather than beside the open button. A like count is a
 * statistic — it belongs next to the subscriber count — and the actions row was already three
 * controls wide on a 375 px screen.
 */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.like-btn:hover:not(.active):not(:disabled) {
  background: rgba(255, 71, 87, 0.08);
  border-color: rgba(255, 71, 87, 0.3);
  color: #ff6b7a;
}

.like-btn.active {
  color: #ff4757;
  border-color: rgba(255, 71, 87, 0.4);
  background: rgba(255, 71, 87, 0.12);
  cursor: default;
}

.like-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.like-btn .like-count {
  font-variant-numeric: tabular-nums;
}

/* The same control inside the detail modal, where it stands beside the full-size buttons. */
.detail-actions .like-btn {
  font-size: 0.85rem;
  padding: 10px 14px;
}

.open-btn {
  font-size: 0.82rem;
  padding: 6px 12px;
}

/* Load More Pagination */
.load-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 28px 0 16px;
  width: 100%;
}

.load-more-btn {
  background: var(--bg-card);
  /* --border-color and --transition-normal were never defined anywhere: both declarations
     were dropped as invalid, so this button had no border and no transition at all. */
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 12px 32px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.load-more-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
  transform: translateY(-2px);
}

.load-more-btn:active {
  transform: translateY(0);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.empty-state h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 6px;
}

.empty-state p {
  color: var(--text-secondary);
  max-width: 420px;
  margin: 0 auto 20px;
  font-size: 0.9rem;
}

/* Modals */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Written into the shorthand rather than as padding-top/-bottom above it: the shorthand
     comes later in this rule and would reset them, which is exactly what happened — the
     computed padding stayed a flat 20px with the insets silently discarded.
     A full-screen overlay reaches both unsafe edges at once. */
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: fadeIn 0.2s ease-out;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-card-detail {
  max-width: 600px;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: var(--accent-cyan);
  margin-top: 2px;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.modal-close-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}

.input-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.form-group input, .form-group textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent-cyan);
}

.input-with-action {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.input-with-action input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.input-with-action button {
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .input-with-action {
    flex-direction: column;
    gap: 8px;
  }
  .input-with-action button {
    width: 100%;
  }
}

/* Scrape Preview Box */
.scrape-preview-card {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeIn 0.3s ease-in-out;
}

.preview-avatar-wrap img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
}

.preview-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.preview-info p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.preview-meta {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.badge-type {
  background: var(--accent-blue);
  color: #fff;
}
.badge-sub {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

/* Detail Modal Styles */
.detail-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.detail-avatar {
  width: clamp(56px, 12vw, 70px);
  height: clamp(56px, 12vw, 70px);
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.detail-title-block {
  min-width: 0;
  flex: 1;
}
.detail-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  word-break: break-word;
}
.detail-username {
  color: var(--accent-cyan);
  font-size: clamp(0.82rem, 2.5vw, 0.9rem);
  font-weight: 500;
}
.detail-desc {
  font-size: clamp(0.85rem, 2.4vw, 0.94rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.access-qr-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.qr-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.qr-image {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
}
.qr-hint {
  font-size: 0.65rem;
  color: var(--text-muted);
}
.qr-instructions {
  min-width: 0;
  flex: 1;
}
.qr-instructions h5 {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.direct-link-url {
  font-size: clamp(0.78rem, 2.2vw, 0.86rem);
  color: var(--accent-cyan);
  word-break: break-all;
  display: block;
  margin-bottom: 4px;
}
.direct-link-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.detail-actions {
  display: flex;
  gap: 10px;
  /* Wrap rather than squeeze. A third control — share — joined this row, and at 375px the
     three were being compressed onto one line at 124px each. Wrapping keeps every target
     legible and tappable on a phone, which is where this app is actually used. */
  flex-wrap: wrap;
}
.detail-actions .btn {
  /* Two per row at phone widths, one row on anything wider. 140px is the point at which the
     longest label here still fits without ellipsis. */
  flex: 1 1 140px;
  /* 44px is the minimum touch target this project sets for itself; these were 40. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-size: clamp(0.82rem, 2.4vw, 0.9rem);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  /* Above the home indicator, not under it. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--bg-card-elevated);
  border: 1px solid var(--accent-cyan);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  font-size: 0.88rem;
  font-weight: 500;
  animation: slideUp 0.25s ease-out;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .header-container {
    padding: 10px 14px;
  }
}

/*
 * The header did not fit a phone. Measured at 390px — the width of the MAX client's webview —
 * the brand took 133px, the actions 231px, and with the 20px gap and 28px of padding that is
 * 412px in a 390px viewport: the "Добавить" button ran 8px past the right edge and was cut in
 * half.
 *
 * The actions are what the header is for — signing in and adding a channel — so they keep
 * their size and the brand gives way instead. The tagline goes first because it is decorative,
 * then the wordmark, leaving the icon, which is the logo people actually recognise.
 */
@media (max-width: 560px) {
  .header-container {
    gap: 10px;
  }

  .header-brand {
    min-width: 0;
    flex-shrink: 1;
  }

  .brand-tag {
    display: none;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-name {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Never squeezed: a half-rendered primary action is worse than a missing wordmark. */
  .header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }
}

@media (max-width: 430px) {
  /* Icon only. Below this there is no room for both the name and the buttons, and the
     buttons win. */
  .brand-text {
    display: none;
  }

  .app-main {
    padding: 12px 14px 40px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-banner-card {
    padding: 20px 16px;
    border-radius: var(--radius-md);
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero-image-wrap {
    display: none;
  }

  .hero-content {
    max-width: 100%;
    width: 100%;
  }

  .hero-title {
    font-size: 1.45rem;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .hero-desc {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }

  .hero-stats-row {
    gap: 8px;
  }

  .stat-pill {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .stat-num {
    font-size: 0.95rem;
  }

  .author-banner-card {
    padding: 14px;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .btn-author-action {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .type-segmented-tabs {
    width: 100%;
    display: flex;
  }

  .seg-btn {
    flex: 1;
    padding: 7px 6px;
    font-size: 0.82rem;
    text-align: center;
  }

  .catalog-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .catalog-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
    margin: 0;
  }

  .modal-backdrop {
    padding: 12px 10px;
  }

  .modal-card {
    padding: 20px 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .verify-perk-card {
    padding: 12px 10px;
    gap: 10px;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 360px));
    justify-content: center;
    gap: 18px;
  }
}

@media (min-width: 1081px) {
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 350px));
    justify-content: center;
    gap: 20px;
  }
}

/* ==========================================================================
   Floating Scroll-To-Top Button
   ========================================================================== */
.btn-scroll-top {
  position: fixed;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  right: calc(26px + env(safe-area-inset-right, 0px));
  z-index: 990;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(0, 210, 255, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 210, 255, 0.2);
  color: #00d2ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.85);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
}

.btn-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.btn-scroll-top:hover {
  background: rgba(0, 210, 255, 0.16);
  border-color: #00d2ff;
  box-shadow: 0 8px 26px rgba(0, 210, 255, 0.4), 0 0 20px rgba(0, 210, 255, 0.4);
  transform: translateY(-3px) scale(1.06);
}

.btn-scroll-top:active {
  transform: translateY(1px) scale(0.96);
}

/* ==========================================================================
   Header User Profile Widget
   ========================================================================== */
.header-user-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44, to match the button beside it and the project's own tap-target requirement. */
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 14px 3px 4px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  box-sizing: border-box;
}

.header-user-widget:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(0, 210, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.15);
}

/*
 * The chevron that opens the account menu.
 *
 * Its own control, so the avatar beside it can go straight to the dashboard — which is what it
 * did for two months, and what people press it for. Small on purpose: the pill is 44 px tall
 * and a second 44 px square inside it would be wider than the name it sits next to, so the
 * press area is grown by a pseudo-element instead and the chevron itself stays a hint.
 */
.user-menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

/*
 * Grown mostly to the right, into the pill's own 14 px of padding, and only 4 px to the left.
 * Centring a 44 px box on a 20 px chevron reaches 12 px back across the coin balance, and a
 * press there would open the menu instead of the dashboard — stealing taps from the primary
 * action to feed the secondary one.
 */
.user-menu-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
  width: calc(100% + 18px);
  height: 44px;
}

.user-menu-toggle:hover {
  color: var(--accent-cyan);
}

.user-menu-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  color: var(--accent-cyan);
}

#openSubmitModalBtn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  box-sizing: border-box;
}

#headerLoginBtn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.user-avatar-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.user-widget-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-cyan);
}

.user-widget-level {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: linear-gradient(135deg, #00d2ff, #0070f3);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 6px;
  border: 1px solid #0b0f19;
  line-height: 1;
}

.user-widget-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.user-widget-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-widget-coins {
  font-size: 0.72rem;
  font-weight: 800;
  color: #00d2ff;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   Auth Modal & QR Code Styles
   ========================================================================== */
.auth-bot-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  border: 1px solid var(--border-subtle);
}

.auth-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auth-qr-img {
  width: 190px;
  height: 190px;
  border-radius: 12px;
  background: #ffffff !important;
  padding: 8px;
  border: 2.5px solid rgba(0, 210, 255, 0.6);
  box-shadow: 0 0 24px rgba(0, 210, 255, 0.35);
  display: block;
}

.auth-pulse-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d2ff;
  box-shadow: 0 0 8px #00d2ff;
  animation: pulseAnim 1.6s infinite ease-in-out;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.auth-divider {
  position: relative;
  text-align: center;
  margin: 16px 0 12px;
}

.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-subtle);
  z-index: 1;
}

.auth-divider span {
  position: relative;
  background: var(--bg-card);
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 2;
}

/* ==========================================================================
   Tabbed Numbered Pagination (50 / 100 channels per page)
   ========================================================================== */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 36px 0 20px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.pagination-info {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pagination-info strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.page-btn:hover:not(:disabled):not(.active) {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  color: var(--accent-cyan);
  transform: translateY(-1px);
}

.page-btn.active {
  background: linear-gradient(135deg, var(--accent-blue), #00aaff);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 150, 255, 0.45);
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.page-nav-btn {
  padding: 0 12px;
  font-size: 0.82rem;
}

.page-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  color: var(--text-muted);
  font-weight: 700;
}

.pagination-size-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.custom-select-sm {
  padding: 6px 28px 6px 12px !important;
  font-size: 0.84rem !important;
  height: 34px !important;
}

/* ==========================================================================
   Comprehensive Dark-Themed Footer
   ========================================================================== */
.site-footer {
  margin-top: 60px;
  background: #070a0f;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  position: relative;
  z-index: 10;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 50px 24px 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col-brand {
  padding-right: 15px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-brand-badge {
  display: inline-block;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  color: #000;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.footer-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.footer-stats-strip {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.f-stat {
  display: flex;
  flex-direction: column;
}

.f-num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.f-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.footer-requisites {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 12px;
}

.req-title {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}

.footer-requisites strong {
  color: var(--text-primary);
}

.footer-requisites code {
  color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
}

.footer-col-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links li a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.footer-links li a:hover {
  color: var(--accent-cyan);
  transform: translateX(3px);
}

.footer-analytics-badge {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--badge-verified);
  background: rgba(0, 229, 163, 0.06);
  border: 1px solid rgba(0, 229, 163, 0.2);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-disclaimer {
  font-size: 0.74rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* ==========================================================================
   Legal Documents & FAQ Modal
   ========================================================================== */
.modal-card-legal {
  max-width: 820px !important;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px !important;
}

.legal-tabs-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  scrollbar-width: none;
}

.legal-tabs-bar::-webkit-scrollbar {
  display: none;
}

.legal-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.legal-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.legal-tab-btn.active {
  background: linear-gradient(135deg, var(--accent-blue), #00aaff);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 119, 255, 0.35);
}

/* ==========================================================================
   Dedicated SEO & AI Knowledge Base (FAQ Section)
   ========================================================================== */
.faq-section {
  margin: 60px 0 20px;
  padding: 45px 30px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.faq-header-wrap {
  text-align: center;
  margin-bottom: 36px;
}

.faq-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.faq-main-heading {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.faq-sub-heading {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
}

.faq-accordion-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.faq-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.faq-card[open] {
  border-color: rgba(0, 210, 255, 0.4);
  background: var(--bg-card-elevated);
}

.faq-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.faq-card-header::-webkit-details-marker {
  display: none;
}

.faq-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
}

.faq-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--accent-cyan);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 14px;
}

.faq-card[open] .faq-toggle-icon {
  transform: rotate(45deg);
  background: rgba(0, 210, 255, 0.2);
}

.faq-card-body {
  padding: 0 22px 20px;
  font-size: 0.93rem;
  line-height: 1.65;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
  padding-top: 14px;
}

.faq-card-body code {
  background: rgba(0, 210, 255, 0.1);
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

.legal-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 6px 15px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-primary);
}

.legal-doc-body h4 {
  color: var(--accent-cyan);
  font-size: 1.05rem;
  margin: 20px 0 10px;
  font-weight: 700;
}

.legal-doc-body h4:first-child {
  margin-top: 0;
}

.legal-doc-body p {
  color: #cbd5e1;
  margin-bottom: 12px;
}

.legal-doc-body ul {
  padding-left: 22px;
  margin-bottom: 14px;
  color: #cbd5e1;
}

.legal-doc-body li {
  margin-bottom: 6px;
}

.legal-doc-body code {
  background: rgba(0, 210, 255, 0.1);
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* FAQ Accordion */
.faq-accordion-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  transition: var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--border-active);
}

.faq-question {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.faq-answer {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.legal-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  gap: 12px;
}

.legal-operator-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  /* The most costly one to get wrong: its buttons are the only way to dismiss it, and under
     the gesture bar they are unreachable. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
  max-width: 440px;
  background: rgba(18, 24, 32, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  padding: 16px 18px;
  z-index: 999;
  animation: slideUpFade 0.3s ease-out;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cookie-banner-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cookie-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.cookie-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.cookie-legal-link {
  color: var(--accent-cyan);
  text-decoration: underline;
  cursor: pointer;
}

.cookie-banner-actions {
  display: flex;
  justify-content: flex-end;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile Media Queries for Footer & Pagination */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .footer-col-brand {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .pagination-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .pagination-controls {
    justify-content: center;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .footer-col-brand {
    grid-column: span 1;
  }
  .cookie-banner {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}

/* ==========================================================================
   SuperAdmin Personal Dashboard & Testing Hub
   ========================================================================== */
.modal-card-dashboard {
  max-width: 820px !important;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 24px !important;
  background: #0d121c !important;
  border: 1px solid rgba(0, 210, 255, 0.3) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 210, 255, 0.15) !important;
}

.dashboard-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.dashboard-user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.dashboard-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.4);
}

.dashboard-admin-crown {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 1.25rem;
  filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.8));
  animation: floatAnim 2s ease-in-out infinite;
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dashboard-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.badge-superadmin {
  background: linear-gradient(135deg, #ffb300, #ff6b00);
  color: #000;
  font-weight: 800;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(255, 179, 0, 0.4);
}

.dashboard-handle {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}

.dashboard-coins-box {
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 12px;
  padding: 8px 18px;
  text-align: right;
  margin-right: 32px;
}

.d-coins-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.d-coins-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.dashboard-tabs-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  margin: 18px 0 14px;
  scrollbar-width: none;
}

.dashboard-tabs-bar::-webkit-scrollbar {
  display: none;
}

.dash-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.dash-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.dash-tab-btn.active {
  background: linear-gradient(135deg, var(--accent-blue), #00aaff);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 119, 255, 0.35);
}

.dash-admin-tab {
  color: #ffaa00 !important;
}

.dash-admin-tab.active {
  background: linear-gradient(135deg, #ff8800, #ff4400) !important;
  color: #ffffff !important;
}

.dash-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 8px 4px 16px;
}

.dash-tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Level Card */
.dash-level-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.dash-level-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dash-level-title {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.dash-level-badge {
  font-size: 0.76rem;
  background: rgba(0, 210, 255, 0.12);
  color: var(--accent-cyan);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
}

.dash-xp-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.dash-xp-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.dash-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d2ff, #0070f3);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Daily Reward Card */
.dash-daily-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(0, 119, 255, 0.12), rgba(0, 210, 255, 0.12));
  border: 1px solid rgba(0, 210, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.daily-reward-icon {
  font-size: 2.2rem;
}

.daily-reward-info h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #ffffff;
}

.daily-reward-info p {
  margin: 0;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.d-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.d-stat-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.d-stat-lbl {
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Test Stand */
.dash-test-box {
  background: rgba(255, 170, 0, 0.05);
  border: 1px dashed rgba(255, 170, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.dash-test-box h4 {
  color: #ffaa00;
  margin: 0 0 6px;
  font-size: 1rem;
}

.dash-test-box p {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin-bottom: 14px;
}

.dash-test-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Achievements */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.achievement-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.achievement-card.unlocked {
  border-color: rgba(0, 210, 255, 0.4);
  background: rgba(0, 210, 255, 0.04);
}

.achieve-icon {
  font-size: 2rem;
}

.achieve-info h5 {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: #ffffff;
}

.achieve-info p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Admin Card & Delete Tools */
.dash-admin-card {
  background: rgba(255, 60, 60, 0.06);
  border: 1px solid rgba(255, 60, 60, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
}

.dash-admin-card h4 {
  color: #ff5555;
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.dash-admin-card p {
  font-size: 0.86rem;
  color: #cbd5e1;
  margin-bottom: 14px;
}

.admin-delete-form {
  display: flex;
  gap: 10px;
}

.admin-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: #ffffff;
  padding: 10px 14px;
  font-size: 0.9rem;
  outline: none;
}

.admin-input:focus {
  border-color: #ff5555;
}

.btn-danger {
  background: linear-gradient(135deg, #ff3344, #cc0011);
  color: #ffffff;
  border: none;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #ff4455, #ee1122);
  box-shadow: 0 0 14px rgba(255, 50, 50, 0.45);
}

.btn-admin-delete-modal {
  background: rgba(255, 50, 50, 0.12);
  border: 1px solid rgba(255, 50, 50, 0.35);
  color: #ff5555;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

.btn-admin-delete-modal:hover {
  background: #ff3344;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 50, 50, 0.5);
}

.dash-system-stats {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sys-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.sys-stat-row strong {
  color: var(--text-primary);
}

/* ====================================================
   Gamification, Referrals, Multi-Tier Achievements & Store
   ==================================================== */

/* Referral Card */
.dash-referral-card {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(0, 136, 204, 0.04));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 14px;
  display: flex;
  gap: 14px;
}

.referral-icon, .ugc-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.referral-info h4, .ugc-info h4 {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 4px;
}

.referral-info p, .ugc-info p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 8px;
}

.referral-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.referral-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: #38bdf8;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-family: monospace;
}

/* UGC Card & Badge Timer */
.dash-ugc-card {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(147, 51, 234, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 14px;
  display: flex;
  gap: 14px;
}

.badge-timer {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Multi-Tier Achievements Grid */
.achievements-header-hint p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.multi-achieve-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition-fast);
}

.multi-achieve-card.tier-active {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.04), var(--bg-card));
}

.multi-achieve-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.multi-achieve-icon {
  font-size: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.multi-achieve-meta {
  flex: 1;
}

.multi-achieve-meta h5 {
  margin: 0 0 2px;
  font-size: 0.92rem;
  color: #fff;
}

.multi-achieve-meta p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.achieve-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.achieve-prog-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.achieve-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.tier-badges-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.tier-pill {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.tier-pill.unlocked {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  font-weight: 600;
}

/* Marketing Suite */
.marketing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.marketing-tool-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-card-icon {
  font-size: 1.8rem;
}

.marketing-tool-card h5 {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
}

.marketing-tool-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1;
}

.m-price-tag {
  font-size: 0.85rem;
  font-weight: 700;
  color: #38bdf8;
  margin: 6px 0;
}

/* Store & Dual Currency Switch */
.store-header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.store-header-box h4 {
  margin: 0 0 2px;
  font-size: 1rem;
  color: #fff;
}

.store-header-box p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.store-currency-switch {
  display: flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.store-curr-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.store-curr-btn.active {
  background: var(--accent-blue);
  color: #fff;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.store-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-preview-box {
  height: 90px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* 1. Avatar Previews */
.avatar-preview-cyberpunk img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 16px #00e5ff, 0 0 30px #0088cc;
  border: 2px solid #00e5ff;
}

.avatar-preview-goldflame img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 18px #ffd700, 0 0 32px #ff8800;
  border: 2px solid #ffd700;
}

.avatar-preview-rubycrystal img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 18px #ff1744, 0 0 32px #d50000;
  border: 2px solid #ff1744;
}

.avatar-preview-voidgalaxy img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 18px #b388ff, 0 0 35px #7c4dff;
  border: 2px solid #b388ff;
}

/* 2. Card Frame Previews */
.card-preview-gold {
  border: 2px solid #ffd700;
  box-shadow: inset 0 0 12px rgba(255, 215, 0, 0.3);
}

.card-preview-cyberborder {
  border: 2px solid #00f0ff;
  box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.35);
  border-radius: 4px;
}

.card-preview-emerald {
  border: 2px solid #00e676;
  box-shadow: inset 0 0 14px rgba(0, 230, 118, 0.35);
}

.card-preview-obsidian {
  border: 2px solid #b39ddb;
  background: radial-gradient(circle, #1a162b 0%, #0c0a14 100%);
  box-shadow: inset 0 0 16px rgba(179, 157, 219, 0.4);
}

/* 3. Card Background Previews */
.card-preview-aurora {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #6b11ff 100%);
  color: #fff;
  font-weight: 700;
}

.card-preview-cybergrid {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  border: 1px solid #00e5ff;
  color: #00e5ff;
  font-weight: 700;
}

.card-preview-synthwave {
  background: linear-gradient(180deg, #ff007f 0%, #7928ca 60%, #1e003a 100%);
  color: #fff;
  font-weight: 700;
}

.card-preview-deepspace {
  background: radial-gradient(circle at 50% 50%, #2e0854 0%, #080112 100%);
  border: 1px solid #7c4dff;
  color: #b388ff;
  font-weight: 700;
}

.store-card h5 {
  margin: 0;
  font-size: 0.95rem;
  color: #fff;
}

.store-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1;
}

.store-price-row {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

/* Guide Steps & FAQ */
.guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guide-step-card {
  display: flex;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 16px;
}

.g-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.g-step-content h5 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: #fff;
}

.g-step-content p, .g-step-content ul {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.g-step-content ul {
  padding-left: 18px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.faq-q {
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 6px;
}

.faq-a {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/*
 * Eight rules for catalog-feed cosmetics stood here, every one of them under `.channel-card`.
 * No element on any page in this project has that class — the catalog card is `.catalog-card`
 * — so none of them ever matched anything, and a bought frame or background was invisible in
 * the feed it was bought to be seen in. The card now wears the same `.cosmetic-card-frame-*`
 * and `.cosmetic-card-bg-*` classes the wardrobe and the shop preview draw, which are defined
 * once, further down, and cover all eight items rather than two.
 */

.author-trophies-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.trophy-badge-pill {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 215, 0, 0.12);
  color: #ffd700;
  font-weight: 600;
}

/*
 * The author's trophy shelf inside the channel modal.
 *
 * What `author_trophy_showcase` actually buys. The card carries a one-line hint; the shelf
 * itself opens when a visitor taps through, which is where there is room to show real ranks
 * rather than three pills that read the same on every channel.
 */
.author-showcase-block {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.07), rgba(255, 215, 0, 0.02));
  border: 1px solid rgba(255, 215, 0, 0.28);
}

.author-showcase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}

.author-showcase-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffd700;
}

.author-showcase-owner {
  font-size: 0.74rem;
  color: var(--text-muted, #94a3b8);
}

.author-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.author-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* The tier badge inside the showcase is smaller than the 58px one the dashboard shelf used —
   this grid is three columns inside a modal, not a full-width panel. */
.author-showcase-item .trophy-badge-icon {
  width: 46px;
  height: 46px;
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.author-showcase-item.is-complete {
  border-color: rgba(255, 215, 0, 0.45);
  box-shadow: inset 0 0 14px rgba(255, 215, 0, 0.08);
}

.author-showcase-icon { font-size: 1.25rem; line-height: 1.1; }

.author-showcase-rank {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.author-showcase-meta {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}

/* --- Comments under a channel card ------------------------------------------------------ */
/* Deliberately cooler than the trophy shelf above: the shelf is a bought decoration and wants
   to be noticed, the comments are the page's content and want to be read. */

.comments-block {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}

.comments-title { font-size: 0.88rem; font-weight: 800; color: #00e5ff; }
.comments-average { font-size: 0.78rem; color: #ffd700; letter-spacing: 0.05em; }
.comments-empty { font-size: 0.8rem; color: var(--text-muted, #94a3b8); padding: 6px 0; }

.comments-locked {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted, #94a3b8);
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.comment-form { margin-bottom: 14px; }

.comment-rating { display: flex; gap: 2px; margin-bottom: 8px; }

/* 44px of touch target, whatever the glyph measures. The catalogue's other controls were
   audited to this and these must not be the exception. */
.comment-star-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.15s ease, transform 0.15s ease;
}

.comment-star-btn.is-on { color: #ffd700; }
.comment-star-btn:hover { transform: scale(1.12); }

.comment-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
}

.comment-textarea:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.5);
}

.comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.comment-remaining { font-size: 0.72rem; color: var(--text-muted, #94a3b8); }
.comment-send-btn { min-height: 44px; padding: 0 18px; }

.comments-list { display: flex; flex-direction: column; gap: 10px; }

.comment-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-author { font-size: 0.8rem; font-weight: 700; color: #fff; }

.comment-level {
  font-size: 0.66rem;
  font-weight: 700;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.14);
  border-radius: 8px;
  padding: 1px 6px;
}

.comment-stars { font-size: 0.74rem; color: #ffd700; letter-spacing: 0.04em; }
.comment-date { font-size: 0.7rem; color: var(--text-muted, #94a3b8); margin-left: auto; }

.comment-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #cbd5e1;
  overflow-wrap: anywhere;
}

.comment-reply {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid rgba(0, 229, 255, 0.4);
  background: rgba(0, 229, 255, 0.05);
  border-radius: 0 8px 8px 0;
}

.comment-reply-head {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #00e5ff;
  margin-bottom: 4px;
}

/* A moderator's reply is not the channel speaking, and must not look like it. Amber rather
   than the channel's cyan, so the difference survives a glance. */
.comment-reply.is-moderator {
  border-left-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.06);
}

.comment-reply.is-moderator .comment-reply-head { color: #f59e0b; }

/* The owner's «Ответить» control. Shown only under a comment nobody has answered, and only to
   the channel's owner — without it the reader's one-per-channel slot never reopens. */
.comment-reply-form { margin-top: 8px; }

.comment-reply-open,
.comment-reply-cancel {
  min-height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.comment-reply-open:hover,
.comment-reply-cancel:hover { background: rgba(0, 229, 255, 0.16); }

.comment-reply-cancel {
  color: var(--text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.comment-reply-textarea { min-height: 54px; }

/* --- Trophy thumbnails on the catalogue card -------------------------------------------- */
/* What `author_trophy_showcase` buys in the feed. It used to buy one pill of fixed text that
   read the same on every channel that owned it; these are the ranks its owner has reached. */

.author-trophies-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
}

.trophy-thumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffd700;
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.32);
  border-radius: 8px;
  padding: 3px 7px;
  max-width: 100%;
}

.trophy-thumb.is-complete { border-color: rgba(255, 215, 0, 0.6); }
.trophy-thumb-icon { font-size: 0.85rem; line-height: 1; }

.trophy-thumb-rank {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.trophy-thumb-more {
  font-size: 0.66rem;
  color: var(--text-muted, #94a3b8);
  align-self: center;
}

/* --- Six preset backgrounds, ported from design-assets/card-cosmetics.css -------------- */
/* They ride the shared `[class*='cosmetic-card-bg-']` base above, which supplies the dark
   ground, the ::before layer and the z-index that keeps the card's own text on top. */

/* Isometric micro-prisms, fading out towards the bottom right. */
.cosmetic-card-bg-card_micro_prisms_bg::before {
  background-image:
    linear-gradient(30deg, rgba(56, 189, 248, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(56, 189, 248, 0.05) 87.5%, rgba(56, 189, 248, 0.05)),
    linear-gradient(150deg, rgba(56, 189, 248, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(56, 189, 248, 0.05) 87.5%, rgba(56, 189, 248, 0.05)),
    linear-gradient(30deg, rgba(56, 189, 248, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(56, 189, 248, 0.05) 87.5%, rgba(56, 189, 248, 0.05)),
    linear-gradient(150deg, rgba(56, 189, 248, 0.05) 12%, transparent 12.5%, transparent 87%, rgba(56, 189, 248, 0.05) 87.5%, rgba(56, 189, 248, 0.05)),
    radial-gradient(circle at 90% 10%, rgba(56, 189, 248, 0.15) 0%, transparent 60%);
  background-size: 40px 70px, 40px 70px, 40px 70px, 40px 70px, 100% 100%;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  mask-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
}

/* Holographic topography — depth contours. */
.cosmetic-card-bg-card_topo_contours_bg::before {
  background:
    repeating-radial-gradient(circle at 10% 20%, transparent 0, transparent 18px, rgba(139, 92, 246, 0.08) 19px, transparent 20px),
    radial-gradient(circle at 80% 90%, rgba(14, 165, 233, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, rgba(11, 17, 32, 0.4) 0%, rgba(11, 17, 32, 0.95) 100%);
  filter: contrast(110%);
}

/* Fibre-optic circuit traces. */
.cosmetic-card-bg-card_fiber_circuit_bg::before {
  background:
    linear-gradient(45deg, transparent 48%, rgba(16, 185, 129, 0.12) 49%, rgba(16, 185, 129, 0.25) 50%, rgba(16, 185, 129, 0.12) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(56, 189, 248, 0.08) 49%, rgba(56, 189, 248, 0.18) 50%, rgba(56, 189, 248, 0.08) 51%, transparent 52%),
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.2) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.2) 75%, transparent 100%);
}

/* Velvet smoke over a fine carbon mesh. */
.cosmetic-card-bg-card_velvet_carbon_bg::before {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(168, 85, 247, 0.12) 40%, rgba(30, 58, 138, 0.15) 80%, transparent 100%);
  background-size: 8px 8px, 100% 100%;
}

/* Imperial gold, with a dusting of light. */
.cosmetic-card-bg-card_aurum_gold_bg::before {
  background:
    radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.08) 40%, transparent 70%),
    radial-gradient(1px 1px at 25% 30%, rgba(253, 224, 71, 0.6) 0%, transparent 100%),
    radial-gradient(1.2px 1.2px at 70% 65%, rgba(251, 191, 36, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 80%, rgba(245, 158, 11, 0.45) 0%, transparent 100%),
    linear-gradient(145deg, rgba(245, 158, 11, 0.06) 0%, rgba(11, 17, 32, 0.85) 60%, rgba(11, 17, 32, 0.98) 100%);
  box-shadow: inset 0 0 40px rgba(245, 158, 11, 0.04);
}

/* Lunar platinum — brushed silver silk. */
.cosmetic-card-bg-card_lunar_silver_bg::before {
  background:
    radial-gradient(circle at 15% 15%, rgba(226, 232, 240, 0.15) 0%, rgba(148, 163, 184, 0.06) 45%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 2px, transparent 2px, transparent 6px),
    linear-gradient(180deg, rgba(203, 213, 225, 0.05) 0%, rgba(11, 17, 32, 0.8) 50%, rgba(11, 17, 32, 0.98) 100%);
  box-shadow: inset 0 0 35px rgba(226, 232, 240, 0.03);
}

/* Active Avatar Cosmetic Frames */
.cosmetic-frame-avatar_ruby_crystal,
img.cosmetic-frame-avatar_ruby_crystal {
  border: 3px solid #ff1744 !important;
  box-shadow: 0 0 18px #ff1744, 0 0 35px rgba(213, 0, 0, 0.6) !important;
  animation: rubyPulse 2.5s infinite alternate ease-in-out;
}

.cosmetic-frame-avatar_cyberpunk,
img.cosmetic-frame-avatar_cyberpunk {
  border: 3px solid #00e5ff !important;
  box-shadow: 0 0 18px #00e5ff, 0 0 35px rgba(0, 136, 204, 0.6) !important;
  animation: cyberPulse 2.5s infinite alternate ease-in-out;
}

.cosmetic-frame-avatar_gold_flame,
img.cosmetic-frame-avatar_gold_flame {
  border: 3px solid #ffd700 !important;
  box-shadow: 0 0 20px #ffd700, 0 0 35px rgba(255, 136, 0, 0.7) !important;
  animation: goldFlamePulse 2s infinite alternate ease-in-out;
}

.cosmetic-frame-avatar_void_galaxy,
img.cosmetic-frame-avatar_void_galaxy {
  border: 3px solid #b388ff !important;
  box-shadow: 0 0 20px #b388ff, 0 0 40px rgba(124, 77, 255, 0.7) !important;
  animation: galaxyPulse 3s infinite alternate ease-in-out;
}

@keyframes rubyPulse {
  0% { box-shadow: 0 0 14px #ff1744, 0 0 25px rgba(213, 0, 0, 0.4); }
  100% { box-shadow: 0 0 22px #ff1744, 0 0 40px rgba(255, 23, 68, 0.8); }
}

@keyframes cyberPulse {
  0% { box-shadow: 0 0 14px #00e5ff, 0 0 25px rgba(0, 136, 204, 0.4); }
  100% { box-shadow: 0 0 24px #00e5ff, 0 0 42px rgba(0, 229, 255, 0.8); }
}

@keyframes goldFlamePulse {
  0% { box-shadow: 0 0 15px #ffd700, 0 0 28px rgba(255, 136, 0, 0.5); }
  100% { box-shadow: 0 0 25px #ffd700, 0 0 45px rgba(255, 215, 0, 0.9); }
}

@keyframes galaxyPulse {
  0% { box-shadow: 0 0 14px #b388ff, 0 0 26px rgba(124, 77, 255, 0.4); }
  100% { box-shadow: 0 0 24px #b388ff, 0 0 45px rgba(179, 136, 255, 0.8); }
}

/* ==========================================================================
   CHANNEL CARD COSMETICS

   Card frames speak the same language as the avatar frames above: a coloured
   edge, a matching glow, and a slow pulse. Same four palettes, applied to a
   rectangle instead of a circle, so a person wearing the cyberpunk avatar frame
   and a channel wearing the cyberpunk card frame read as one set.

   Backgrounds are their own subjects rather than partners to a frame. Every one
   is CSS — no images. This runs inside a mobile webview, and four decorative
   backgrounds as files would cost more than the catalog they decorate.

   Readability first in all of them: the effect sits under a dark base, and the
   card's own text never competes with it.
   ========================================================================== */

/* --- Card frames ---------------------------------------------------------- */

/* The wardrobe's preview tile for the trophy showcase. It has no frame and no background of
   its own — what it buys is a block inside the channel modal — so the preview stands for the
   shelf rather than pretending to be an edge treatment. */
.cosmetic-card-trophy {
  border: 1px dashed rgba(255, 215, 0, 0.45) !important;
  box-shadow: inset 0 0 16px rgba(255, 215, 0, 0.08) !important;
}

/* Its own rule, which it briefly was not. Taking a bare alias off the line below left this
   selector heading a list whose remaining member was the platinum frost frame, so «Киберпанк»
   rendered platinum blue and lost its own pulse — shipped, and invisible to a test that only
   asked whether the class appeared in the file. */
.cosmetic-card-frame-card_cyber_border {
  border: 2px solid #00e5ff !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.55), inset 0 0 12px rgba(0, 229, 255, 0.12) !important;
  animation: cardCyberPulse 2.5s infinite alternate ease-in-out;
}/*
 * The four original frames keep their own palettes.
 *
 * The new preset pack was merged onto them for a moment, which left «Изумруд» rendering
 * lilac and «Обсидиан» rendering crimson — a shop where the name and the colour disagree
 * is a shop that mis-sells. The new palettes are four additional frames below, with ids and
 * names of their own, so a buyer gets what the label says either way.
 */
.cosmetic-card-frame-card_gold_frame {
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.5), inset 0 0 12px rgba(255, 136, 0, 0.14) !important;
  animation: cardGoldPulse 2s infinite alternate ease-in-out;
}

.cosmetic-card-frame-card_emerald_glow {
  border: 2px solid #10b981 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.5), inset 0 0 12px rgba(5, 150, 105, 0.16) !important;
  animation: cardEmeraldPulse 2.8s infinite alternate ease-in-out;
}

/* Obsidian is the expensive one, so it does not pulse — it holds a still, hard
   platinum edge. Restraint reads as premium where another glow would not. */
.cosmetic-card-frame-card_obsidian_royal {
  border: 2px solid #cbd5e1 !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 0 22px rgba(203, 213, 225, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  background-image: linear-gradient(135deg, rgba(203, 213, 225, 0.06) 0%, transparent 45%, rgba(203, 213, 225, 0.05) 100%);
}

/* --- The preset pack: four palettes, worn on a card or on an avatar ------------------- */

.cosmetic-card-frame-card_solar_amber {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45), inset 0 0 10px rgba(239, 68, 68, 0.15) !important;
  background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, transparent 50%, rgba(239, 68, 68, 0.05) 100%);
  animation: cardSolarPulse 2.5s infinite alternate ease-in-out;
}

.cosmetic-card-frame-card_electric_lilac {
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.45), inset 0 0 10px rgba(192, 132, 252, 0.15) !important;
  background-image: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, transparent 50%, rgba(56, 189, 248, 0.05) 100%);
  animation: cardLilacPulse 3s infinite alternate ease-in-out;
}

.cosmetic-card-frame-card_royal_crimson {
  border: 2px solid #e11d48 !important;
  box-shadow: 0 0 18px rgba(225, 29, 72, 0.48), inset 0 0 10px rgba(253, 164, 175, 0.16) !important;
  background-image: linear-gradient(135deg, rgba(225, 29, 72, 0.06) 0%, transparent 50%, rgba(190, 18, 60, 0.05) 100%);
  animation: cardCrimsonPulse 2.6s infinite alternate ease-in-out;
}

/* --- The same four palettes as avatar rings ------------------------------------------- */
/* An avatar is a 64px circle, so the glow is tightened and the border thickened to read at
   that size — the card versions above are tuned for a 300px rectangle. */@keyframes cardSolarPulse {
  0% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.35), inset 0 0 8px rgba(239, 68, 68, 0.1); }
  100% { box-shadow: 0 0 22px rgba(245, 158, 11, 0.68), inset 0 0 14px rgba(239, 68, 68, 0.22); }
}

@keyframes cardLilacPulse {
  0% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.35), inset 0 0 8px rgba(192, 132, 252, 0.1); }
  100% { box-shadow: 0 0 22px rgba(168, 85, 247, 0.68), inset 0 0 14px rgba(192, 132, 252, 0.22); }
}

@keyframes cardCrimsonPulse {
  0% { box-shadow: 0 0 12px rgba(225, 29, 72, 0.38), inset 0 0 8px rgba(253, 164, 175, 0.12); }
  100% { box-shadow: 0 0 24px rgba(225, 29, 72, 0.72), inset 0 0 14px rgba(253, 164, 175, 0.24); }
}

/* --- Card backgrounds ----------------------------------------------------- */

/* A shared base so every background starts from the same dark ground and the
   text on top keeps its contrast whatever is painted underneath. */
[class*='cosmetic-card-bg-'] {
  position: relative;
  background-color: #0b1120 !important;
  overflow: hidden;
  isolation: isolate;
}

[class*='cosmetic-card-bg-']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The card's own content sits above the decoration. */
[class*='cosmetic-card-bg-'] > * {
  position: relative;
  z-index: 1;
}

/* Aurora — bands of green and violet light drifting across the top. */
.cosmetic-card-bg-card_aurora_bg::before {
  background:
    linear-gradient(102deg, transparent 8%, rgba(16, 185, 129, 0.62) 22%, transparent 38%),
    linear-gradient(96deg, transparent 34%, rgba(139, 92, 246, 0.58) 52%, transparent 68%),
    linear-gradient(110deg, transparent 60%, rgba(56, 189, 248, 0.45) 76%, transparent 92%),
    linear-gradient(180deg, rgba(2, 6, 23, 0) 45%, rgba(2, 6, 23, 0.85) 100%);
  filter: blur(9px);
  background-size: 190% 100%, 190% 100%, 190% 100%, 100% 100%;
  animation: auroraDrift 16s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0% { background-position: 0% 0%, 100% 0%, 30% 0%, 0 0; }
  100% { background-position: 100% 0%, 0% 0%, 90% 0%, 0 0; }
}

/* Cyberspace — a grid receding towards a horizon, in Tron cyan. */
.cosmetic-card-bg-card_cyber_grid_bg::before {
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.5) 1px, transparent 1px),
    radial-gradient(70% 60% at 50% 8%, rgba(0, 229, 255, 0.3), transparent 72%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  /* Fades towards the bottom so the grid frames the card rather than filling it. */
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 8%, rgba(0, 0, 0, 0.35) 62%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 8%, rgba(0, 0, 0, 0.35) 62%, transparent 92%);
  animation: cyberGridScroll 7s linear infinite;
}

@keyframes cyberGridScroll {
  0% { background-position: 0 0, 0 0, 50% 0; }
  100% { background-position: 0 22px, 22px 0, 50% 0; }
}

/* Synthwave — a low sun over a neon horizon line. */
/* Sky above the horizon, ground below it, and the sun sitting on the line —
   the arrangement the genre is actually made of. The first attempt floated the
   sun in the middle of the card as an orange smear and left the lower half
   flat black, which read as a rendering fault rather than a sunset. */

/* The horizon line and the retro grid running away from it. */

/* Nebula — deep space with a dust cloud and a scatter of stars. The stars are a
   repeating radial gradient rather than markup, so the card stays one element. */
.cosmetic-card-bg-card_deep_space_bg::before {
  background:
    radial-gradient(1.4px 1.4px at 18% 24%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 14%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 62%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 76%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 88%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(120% 90% at 30% 40%, rgba(88, 28, 135, 0.55), transparent 65%),
    radial-gradient(100% 80% at 85% 75%, rgba(30, 64, 175, 0.45), transparent 68%);
  animation: nebulaTwinkle 6s ease-in-out infinite alternate;
}

@keyframes nebulaTwinkle {
  0% { opacity: 0.82; }
  100% { opacity: 1; }
}

/* Anyone who has asked not to be moved gets the decoration and none of the drift. */
@media (prefers-reduced-motion: reduce) {
  [class*='cosmetic-card-frame-'],
  [class*='cosmetic-card-bg-']::before {
    animation: none !important;
  }
}

/* ==========================================================================
   UNIVERSAL 3D BADGES & MOCKUP 3: AUTHOR TROPHY SHOWCASE
   ========================================================================== */
.badge-3d-bronze {
  background: radial-gradient(circle at 35% 35%, #f6ad55 0%, #dd6b20 50%, #7b341e 100%) !important;
  border: 2px solid #ed8936 !important;
  box-shadow: 0 4px 15px rgba(221, 107, 32, 0.4), inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.6) !important;
  color: #fff !important;
}

.badge-3d-silver {
  background: radial-gradient(circle at 35% 35%, #e0f2fe 0%, #38bdf8 50%, #0369a1 100%) !important;
  border: 2px solid #7dd3fc !important;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4), inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.5) !important;
  color: #fff !important;
}

.badge-3d-gold {
  background: radial-gradient(circle at 35% 35%, #fef08a 0%, #eab308 50%, #854d0e 100%) !important;
  border: 2px solid #fde047 !important;
  box-shadow: 0 4px 18px rgba(234, 179, 8, 0.5), inset 0 2px 4px rgba(255,255,255,0.7), inset 0 -2px 4px rgba(0,0,0,0.6) !important;
  color: #fff !important;
}

.badge-3d-diamond {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #67e8f9 40%, #0284c7 100%) !important;
  border: 2px solid #a5f3fc !important;
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.6), inset 0 2px 6px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.4) !important;
  color: #fff !important;
}

.badge-3d-emerald {
  background: radial-gradient(circle at 35% 35%, #86efac 0%, #10b981 50%, #064e3b 100%) !important;
  border: 2px solid #4ade80 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.5), inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.6) !important;
  color: #fff !important;
}

.badge-3d-crown {
  background: radial-gradient(circle at 35% 35%, #fbcfe8 0%, #d946ef 50%, #581c87 100%) !important;
  border: 2px solid #f472b6 !important;
  box-shadow: 0 4px 20px rgba(217, 70, 239, 0.6), inset 0 2px 6px rgba(255,255,255,0.8), inset 0 -2px 4px rgba(0,0,0,0.6) !important;
  color: #fff !important;
}

/* Mockup 3: Trophy Showcase */
.mockup-trophy-showcase-box {
  background: rgba(13, 20, 36, 0.9);
  border: 1px solid #00e5ff;
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.25), inset 0 0 15px rgba(0, 229, 255, 0.08);
  margin: 14px 0;
}

@media (max-width: 600px) {
  .mockup-trophy-showcase-box {
    grid-template-columns: 1fr;
  }
}

.trophy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.trophy-badge-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.trophy-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
}