/* MONKAGX — Soft Premium Edition (Notion / Apple inspired)
 * Calm, refined, generous spacing. No glitch, no cursor tricks.
 * Warm dark base · single accent · soft shadows · monka illustrations.
 */

:root {
  /* ── Warm dark surfaces ───────────────────────────── */
  --ds-bg:        #13141a;
  --ds-bg-2:      #181a21;
  --ds-elev-1:    #1d1f27;
  --ds-elev-2:    #232631;
  --ds-elev-3:    #2b2f3b;

  --ds-border:    rgba(255, 255, 255, 0.07);
  --ds-border-hi: rgba(255, 255, 255, 0.13);
  --ds-divider:   rgba(255, 255, 255, 0.05);

  /* Warm cream ink */
  --ds-ink-1: #f4f1ea;
  --ds-ink-2: #a8a59f;
  --ds-ink-3: #6a675f;
  --ds-ink-4: #38362f;

  /* Single accent — Kick lime, used sparingly */
  --ds-accent:        #53fc18;
  --ds-accent-text:   #b7ff8c;
  --ds-accent-soft:   rgba(83, 252, 24, 0.10);
  --ds-accent-deep:   #2a8a0c;

  /* Type */
  --ds-t-xs:    11px;
  --ds-t-sm:    13px;
  --ds-t-base:  15px;
  --ds-t-lg:    17px;
  --ds-t-xl:    20px;
  --ds-t-2xl:   28px;
  --ds-t-3xl:   40px;
  --ds-t-4xl:   56px;

  /* Spacing */
  --ds-s-1:   4px;
  --ds-s-2:   8px;
  --ds-s-3:  12px;
  --ds-s-4:  16px;
  --ds-s-5:  24px;
  --ds-s-6:  32px;
  --ds-s-7:  48px;
  --ds-s-8:  72px;
  --ds-s-9: 112px;

  /* Radius — Notion-soft */
  --ds-r-1:   6px;
  --ds-r-2:  10px;
  --ds-r-3:  16px;
  --ds-r-4:  24px;

  /* Motion */
  --ds-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ds-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-t-fast: 180ms;
  --ds-t-mid:  280ms;

  /* Shadows — soft, layered (Notion-style) */
  --ds-shadow-1: 0 1px 2px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
  --ds-shadow-2: 0 2px 6px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.05) inset;
  --ds-shadow-3: 0 12px 32px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── Body scope ──────────────────────────────────── */
body[data-ds="home"] {
  background: var(--ds-bg);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient: kill all spotlights/glitch. Just a soft warm gradient. */
body[data-ds="home"] .ds-ambient,
body[data-ds="home"] .ds-noise { display: none; }

/* ── Container ──────────────────────────────────── */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px) { .ds-container { padding-inline: 40px; } }

/* ── Eyebrow / labels ──────────────────────────── */
.ds-eyebrow {
  font-size: var(--ds-t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}

/* ── Live indicator (calm) ─────────────────────── */
.ds-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ds-ink-2);
}
.ds-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 6px rgba(83,252,24,0.6);
  animation: ds-pulse 2s ease-in-out infinite;
}
.ds-live--off { color: var(--ds-ink-3); }
.ds-live--off::before { background: var(--ds-ink-3); box-shadow: none; animation: none; }
@keyframes ds-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ── HERO — full-width text, no image ───────── */
.ds-hero {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s-7);
  padding-block: var(--ds-s-9) var(--ds-s-8);
}
.ds-hero--full { padding-block: clamp(64px, 11vw, 144px) var(--ds-s-7); }

.ds-hero__left { display: flex; flex-direction: column; gap: var(--ds-s-5); max-width: 1000px; }
.ds-hero__left--centered { margin-inline: auto; text-align: center; align-items: center; }

.ds-hero__title {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(40px, 6.5vw, 80px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ds-ink-1);
  margin: 0;
  text-wrap: balance;
}
.ds-hero__title--xl {
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variation-settings: "wdth" 95, "opsz" 144;
}
.ds-hero__title--xl > span { display: block; }

.ds-hero__title-em {
  color: var(--ds-accent);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "wdth" 88;
}

.ds-hero__sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ds-ink-2);
  max-width: 50ch;
  margin: 0;
}
.ds-hero__left--centered .ds-hero__sub { text-align: center; }

.ds-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--ds-s-3); justify-content: inherit; }
.ds-hero__left--centered .ds-hero__cta { justify-content: center; }

/* Per-line reveal animation */
.ds-reveal {
  display: inline-block;
  animation: ds-reveal-line 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.ds-reveal:nth-child(1) { animation-delay:  60ms; }
.ds-reveal:nth-child(2) { animation-delay: 180ms; }
.ds-reveal:nth-child(3) { animation-delay: 320ms; }
@keyframes ds-reveal-line {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* Animated green underline that draws in under accent text */
.ds-underline {
  position: relative;
  white-space: nowrap;
}
.ds-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -0.04em;
  height: 0.08em;
  background: var(--ds-accent);
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: ds-underline 900ms 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  box-shadow: 0 0 12px rgba(83,252,24,0.45);
}
@keyframes ds-underline { to { transform: scaleX(1); } }

/* ── HERO INTRO layout (left text + right streamer card) ─── */
.ds-hero--intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-s-7);
  padding-block: clamp(56px, 9vw, 112px) var(--ds-s-7);
  align-items: center;
}
@media (min-width: 980px) {
  .ds-hero--intro {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: var(--ds-s-8);
  }
}
.ds-hero__sub--lg {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
  max-width: 56ch;
  color: var(--ds-ink-2);
}
.ds-hero__sub--lg b { color: var(--ds-ink-1); font-weight: 600; }

/* Eyebrow accent */
.ds-eyebrow--accent {
  color: var(--ds-accent-text);
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* ── STREAMER CARD (hero right) ───────────────── */
.ds-streamer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: linear-gradient(180deg, var(--ds-elev-1) 0%, var(--ds-bg-2) 100%);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-4);
  overflow: hidden;
}
.ds-streamer::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(83,252,24,0.12), transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.ds-streamer__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ds-elev-2);
  border: 2px solid var(--ds-border-hi);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ds-streamer__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ds-streamer__live {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  background: var(--ds-accent);
  color: #06200a;
  border-radius: 999px;
  border: 2px solid var(--ds-elev-1);
  box-shadow: 0 0 12px rgba(83,252,24,0.6);
  z-index: 2;
}
.ds-streamer__live--off {
  background: var(--ds-elev-3);
  color: var(--ds-ink-3);
  box-shadow: none;
}
.ds-streamer__head { display: flex; flex-direction: column; gap: 4px; }
.ds-streamer__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ds-ink-1);
}
.ds-streamer__handle {
  font-size: 13px;
  color: var(--ds-ink-3);
  text-decoration: none;
  transition: color var(--ds-t-fast) var(--ds-ease);
}
.ds-streamer__handle:hover { color: var(--ds-accent-text); }

.ds-streamer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  overflow: hidden;
}
.ds-streamer__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: var(--ds-bg-2);
  text-align: center;
}
.ds-streamer__stat-v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink-1);
  letter-spacing: -0.02em;
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}
.ds-streamer__stat-l {
  font-size: 10px;
  color: var(--ds-ink-3);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.ds-streamer__channels { display: flex; gap: 8px; }
.ds-streamer__chan {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-1);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-2);
  text-decoration: none;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}
.ds-streamer__chan:hover { background: rgba(83,252,24,0.06); border-color: rgba(83,252,24,0.3); transform: translateY(-1px); }
.ds-streamer__chan-icon { display: inline-flex; color: var(--ds-accent); }
.ds-streamer__chan-icon svg { width: 16px; height: 16px; }

/* ── ACTIVITIES grid — что проводит стример ──────── */
.ds-act-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--ds-s-6);
}
.ds-act-h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ds-ink-1);
  margin: 0;
}

.ds-act-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px)  { .ds-act-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .ds-act-grid { grid-template-columns: repeat(3, 1fr); } }

.ds-act {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
  min-height: 200px;
  transition: background var(--ds-t-mid) var(--ds-ease),
              transform var(--ds-t-mid) var(--ds-ease),
              border-color var(--ds-t-mid) var(--ds-ease);
}
.ds-act:hover {
  background: var(--ds-elev-2);
  transform: translateY(-3px);
  border-color: var(--ds-border-hi);
}
.ds-act__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ds-act__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--ds-r-2);
  transition: transform var(--ds-t-mid) var(--ds-spring);
  flex-shrink: 0;
}
.ds-act__mark--brand img {
  width: 56px; height: 56px;
  display: block;
  border-radius: var(--ds-r-2);
}
.ds-act__mark--icon {
  background: rgba(83,252,24,0.08);
  border: 1px solid rgba(83,252,24,0.26);
  color: var(--ds-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 14px 32px rgba(83,252,24,0.06);
}
.ds-act__mark--icon svg { width: 32px; height: 32px; }
.ds-act__mark--icon svg:not([fill]):not([stroke]) { stroke: currentColor; fill: none; }
.ds-act:hover .ds-act__mark { transform: rotate(-6deg) scale(1.06); }

.ds-act__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border);
}
.ds-act__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0;
  line-height: 1.15;
}
.ds-act__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-ink-2);
  margin: 0;
  flex: 1;
}

/* ── Buttons ──────────────────────────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--ds-r-2);
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease),
              border-color var(--ds-t-fast) var(--ds-ease),
              transform var(--ds-t-fast) var(--ds-ease);
}
.ds-btn:active { transform: translateY(1px) scale(0.975); }
.ds-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.ds-btn--primary {
  background: var(--ds-accent);
  color: #0b1f06;
  font-weight: 600;
}
.ds-btn--primary:hover { background: #66ff2c; transform: translateY(-1px); }

/* Breathing glow — спокойная пульсация для главного CTA */
.ds-btn--breathe {
  position: relative;
  box-shadow: 0 0 0 0 rgba(83,252,24,0.50);
  animation: ds-breathe 2.6s ease-in-out infinite;
}
@keyframes ds-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83,252,24,0.40); }
  50%      { box-shadow: 0 0 0 12px rgba(83,252,24,0); }
}
.ds-btn--breathe:hover { animation-play-state: paused; }

.ds-btn--ghost {
  background: var(--ds-elev-1);
  color: var(--ds-ink-1);
  border-color: var(--ds-border-hi);
}
.ds-btn--ghost:hover { background: var(--ds-elev-2); border-color: var(--ds-ink-3); }

/* ── Trust strip — small honest line ─────────── */
.ds-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-s-5);
  padding-block: var(--ds-s-5);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
  font-size: 13px;
  color: var(--ds-ink-2);
}
.ds-trust__item { display: inline-flex; align-items: center; gap: 8px; }
.ds-trust__sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ds-ink-4);
  margin-inline: 4px;
}
.ds-trust__num {
  color: var(--ds-ink-1);
  font-weight: 600;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* ── Bare section (no header, just spacing) ─── */
.ds-section-bare { padding-block: var(--ds-s-4); }

/* ── INFO — главный блок «как это работает» ─── */
.ds-info {
  padding-block: var(--ds-s-8) var(--ds-s-7);
  border-top: 1px solid var(--ds-border);
  border-bottom: 1px solid var(--ds-border);
}
.ds-info__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--ds-ink-1);
  margin: 0 0 var(--ds-s-4);
  text-wrap: balance;
}
.ds-info__lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ds-ink-2);
  max-width: 60ch;
  margin: 0 0 var(--ds-s-7);
}

.ds-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
}
@media (min-width: 900px) {
  .ds-pillars { grid-template-columns: repeat(2, 1fr); }
}
.ds-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  background: var(--ds-elev-1);
  transition: background var(--ds-t-mid) var(--ds-ease);
  overflow: hidden;
}
.ds-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ds-accent) 50%, transparent 100%);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--ds-t-mid) var(--ds-ease), transform var(--ds-t-mid) var(--ds-ease);
}
.ds-pillar:hover { background: var(--ds-elev-2); }
.ds-pillar:hover::before { opacity: 0.6; transform: scaleX(1); }

.ds-pillar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ds-r-2);
  transition: transform var(--ds-t-mid) var(--ds-spring);
  flex-shrink: 0;
}
.ds-pillar__icon--icon {
  background: rgba(83,252,24,0.08);
  border: 1px solid rgba(83,252,24,0.26);
  color: var(--ds-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 14px 32px rgba(83,252,24,0.06);
}
.ds-pillar__icon--icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
}
.ds-pillar__icon--brand img {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: var(--ds-r-2);
}
.ds-pillar:hover .ds-pillar__icon { transform: rotate(-6deg) scale(1.06); }
.ds-pillar:hover .ds-pillar__icon--icon { background: rgba(83,252,24,0.14); border-color: rgba(83,252,24,0.40); }
.ds-pillar__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ds-ink-3);
  font-feature-settings: 'tnum' 1;
  transition: color var(--ds-t-mid) var(--ds-ease);
}
.ds-pillar:hover .ds-pillar__num { color: var(--ds-accent-text); }
.ds-pillar__body { flex: 1; min-width: 0; }
.ds-pillar__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0 0 10px;
}
.ds-pillar__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  margin: 0;
}
.ds-pillar__text b {
  color: var(--ds-ink-1);
  font-weight: 600;
}

/* 3 column layout for pillars now (since only 3) */
@media (min-width: 900px) {
  .ds-pillars { grid-template-columns: repeat(3, 1fr); }
}

.ds-info__note {
  margin-top: var(--ds-s-5);
  padding: 16px 20px;
  background: rgba(83,252,24,0.05);
  border: 1px solid rgba(83,252,24,0.18);
  border-radius: var(--ds-r-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-ink-2);
}
.ds-info__note b { color: var(--ds-accent-text); font-weight: 600; }

/* ── Section header ─────────────────────────── */
.ds-section { padding-block: var(--ds-s-8); }
.ds-h-section {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--ds-s-5);
  margin-bottom: var(--ds-s-6);
}
.ds-h-section__l { display: flex; flex-direction: column; gap: 8px; }
.ds-h-section__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ds-accent-text);
  text-transform: uppercase;
}
.ds-h-section__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ds-ink-1);
  margin: 0;
}
.ds-h-section__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ds-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-border-hi);
  padding-bottom: 1px;
  transition: color var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease);
}
.ds-h-section__action:hover {
  color: var(--ds-accent-text);
  border-bottom-color: var(--ds-accent);
}

/* ── Game cards bento — Notion-style soft ──────── */
.ds-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px)  { .ds-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ds-bento { grid-template-columns: repeat(4, 1fr); } }

.ds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 18px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  text-decoration: none;
  color: var(--ds-ink-1);
  overflow: hidden;
  min-height: 140px;
  transition: background var(--ds-t-mid) var(--ds-ease),
              transform var(--ds-t-mid) var(--ds-ease),
              border-color var(--ds-t-mid) var(--ds-ease);
}
.ds-card:hover {
  background: var(--ds-elev-2);
  transform: translateY(-2px);
  border-color: var(--ds-border-hi);
}
.ds-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ds-card__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ds-ink-1);
  line-height: 1;
}
.ds-card__sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ds-ink-2);
  margin: 0;
  flex: 1;
}
.ds-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ds-ink-3);
  text-transform: uppercase;
  margin-top: 4px;
}
.ds-card__arrow {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--ds-ink-3);
  transition: color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-mid) var(--ds-spring);
}
.ds-card:hover .ds-card__arrow { color: var(--ds-accent); transform: translate(3px, -3px); }

/* ── Stream block ─────────────────────────────── */
.ds-stream-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
  .ds-stream-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; }
}
.ds-stream {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  background: var(--ds-elev-1);
  overflow: hidden;
  box-shadow: var(--ds-shadow-2);
}
.ds-stream__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-stream__player {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}
.ds-stream__player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ds-stream__offline {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px; text-align: center;
  background: var(--ds-elev-1);
}
.ds-stream__offline-eyebrow {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-ink-3);
}
.ds-stream__offline-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600; letter-spacing: -0.02em; color: var(--ds-ink-1); margin: 0;
}
.ds-stream__offline-sub {
  font-size: 14px; color: var(--ds-ink-2);
  max-width: 360px; margin: 0; line-height: 1.55;
}

/* ── Numbers strip — реальная статистика ─── */
.ds-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
}
@media (min-width: 720px) {
  .ds-numbers { grid-template-columns: repeat(3, 1fr); }
}
.ds-num {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 28px;
  background: var(--ds-elev-1);
  transition: background var(--ds-t-mid) var(--ds-ease);
}
.ds-num:hover { background: var(--ds-elev-2); }
.ds-num__v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ds-ink-1);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}
.ds-num__l {
  font-size: 13px;
  color: var(--ds-ink-3);
  letter-spacing: 0;
}

.ds-aside {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  background: var(--ds-elev-1);
  overflow: hidden;
}
.ds-aside__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid var(--ds-border);
  text-decoration: none; color: var(--ds-ink-1);
  transition: background var(--ds-t-fast) var(--ds-ease);
}
.ds-aside__row:first-child { border-top: 0; }
.ds-aside__row:hover { background: var(--ds-elev-2); }
.ds-aside__name { font-weight: 500; font-size: 15px; }
.ds-aside__handle { font-size: 13px; color: var(--ds-ink-3); }

/* ── How it works (3 steps) ─────────────────────── */
.ds-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 800px) { .ds-steps { grid-template-columns: repeat(3, 1fr); } }
.ds-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
}
.ds-step__num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--ds-accent);
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum' 1;
}
.ds-step__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ds-ink-1);
}
.ds-step__sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-2);
  margin: 0;
}

/* ── Final CTA card ───────────────────────────── */
.ds-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: clamp(48px, 7vw, 96px) 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(83,252,24,0.10) 0%, transparent 60%),
    var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-4);
  text-align: center;
  overflow: hidden;
}
.ds-cta-card--glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(83,252,24,0.45) 25%,
    transparent 50%,
    rgba(83,252,24,0.20) 75%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ds-rotate-glow 8s linear infinite;
  pointer-events: none;
  opacity: 0.65;
}
@keyframes ds-rotate-glow { to { transform: rotate(360deg); } }
.ds-cta-card__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--ds-ink-1);
  max-width: 18ch;
  text-wrap: balance;
}
.ds-cta-card__sub {
  font-size: 15px;
  color: var(--ds-ink-2);
  max-width: 50ch;
  margin: 0;
  line-height: 1.55;
}

/* ── Stagger entry ─────────────────────────────── */
.ds-stagger > * { animation: ds-rise 600ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.ds-stagger > *:nth-child(1) { animation-delay:   0ms; }
.ds-stagger > *:nth-child(2) { animation-delay:  90ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 180ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 270ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 360ms; }
@keyframes ds-rise { from { opacity: 0; transform: translateY(12px); } }

/* ── Existing-header overrides (light, calm) ─────── */
body[data-ds="home"] .site-header {
  background: rgba(19, 20, 26, 0.78) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--ds-border) !important;
  box-shadow: none !important;
}
body[data-ds="home"] .site-header__nav { gap: 4px !important; }
body[data-ds="home"] .site-header__link {
  position: relative;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  color: var(--ds-ink-2) !important;
  padding: 8px 14px !important;
  border-radius: var(--ds-r-2) !important;
  background: transparent !important;
  border: 0 !important;
  transition: color 180ms var(--ds-ease), background 180ms var(--ds-ease) !important;
}
body[data-ds="home"] .site-header__link:hover {
  color: var(--ds-ink-1) !important;
  background: rgba(255,255,255,0.04) !important;
}
body[data-ds="home"] .site-header__link i { display: none !important; }
body[data-ds="home"] .site-header__link.nav-active,
body[data-ds="home"] .site-header__link.text-white {
  color: var(--ds-ink-1) !important;
  background: rgba(255,255,255,0.05) !important;
}
body[data-ds="home"] .site-header__login {
  background: var(--ds-accent) !important;
  color: #0b1f06 !important;
  border: 0 !important;
  border-radius: var(--ds-r-2) !important;
  padding: 9px 16px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 180ms var(--ds-ease), transform 180ms var(--ds-ease) !important;
}
body[data-ds="home"] .site-header__login:hover {
  background: #66ff2c !important;
  transform: translateY(-1px) !important;
}
body[data-ds="home"] .site-header__login i { display: none !important; }
body[data-ds="home"] .site-header__login span {
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
body[data-ds="home"] .topchip--balance {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ds-border-hi) !important;
}
body[data-ds="home"] .site-header__withdraw {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--ds-border-hi) !important;
  color: var(--ds-ink-1) !important;
  border-radius: var(--ds-r-2) !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
body[data-ds="home"] .site-header__withdraw i { display: none !important; }

/* ── FAQ accordion ──────────────────────────────────── */
.ds-faq { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.ds-faq__item {
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease);
}
.ds-faq__item:hover { border-color: var(--ds-border-hi); }
.ds-faq__item[open] {
  background: var(--ds-elev-2);
  border-color: var(--ds-border-hi);
}
.ds-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Inter Tight', sans-serif;
  user-select: none;
}
.ds-faq__summary::-webkit-details-marker { display: none; }
.ds-faq__summary::marker { content: ''; }
.ds-faq__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 22px;
}
.ds-faq__item[open] .ds-faq__num { color: var(--ds-accent-text); }
.ds-faq__q {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-ink-1);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.ds-faq__chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--ds-t-fast) var(--ds-ease);
}
.ds-faq__chevron::before,
.ds-faq__chevron::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: var(--ds-ink-2);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease);
}
.ds-faq__chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.ds-faq__item[open] .ds-faq__chevron::before { background: var(--ds-accent); }
.ds-faq__item[open] .ds-faq__chevron::after  { transform: translate(-50%, -50%) rotate(0); background: var(--ds-accent); }
.ds-faq__answer {
  padding: 0 22px 20px 60px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-2);
  letter-spacing: -0.005em;
}
@media (max-width: 600px) {
  .ds-faq__summary { padding: 14px 16px; gap: 12px; }
  .ds-faq__q { font-size: 14px; }
  .ds-faq__answer { padding: 0 16px 16px 50px; font-size: 13px; }
}

/* ── PAGE HEAD (универсальный заголовок страницы) ─── */
.ds-page-head {
  padding-block: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 24px);
}
.ds-page-head__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ds-ink-1);
  margin: 0;
}
.ds-page-head__title + .ds-page-head__sub { margin-top: 10px; }
.ds-page-head__sub {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.55;
  color: var(--ds-ink-2);
  max-width: 60ch;
  margin: 0;
}

/* ── GAME-CARD overlay (на ds-card в /games и /home) ─── */
.ds-game-card { min-height: 200px; }
.ds-game-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-r-2);
  background: rgba(83,252,24,0.08);
  border: 1px solid rgba(83,252,24,0.26);
  color: var(--ds-accent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 14px 32px rgba(83,252,24,0.06);
  transition: transform var(--ds-t-mid) var(--ds-spring);
}
.ds-game-card__icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; }
.ds-game-card__icon .mkg-icon--game { width: 36px; height: 36px; }
.ds-game-card:hover .ds-game-card__icon { transform: rotate(-6deg) scale(1.06); }
.ds-game-card__new {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ds-accent);
  color: #06200a;
}
.ds-game-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ds-border);
}
.ds-game-card__state {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffb627;
  text-transform: uppercase;
}
.ds-card--locked { opacity: 0.55; cursor: not-allowed; }
.ds-card--locked:hover { transform: none; }

/* ── PROJECTS grid (партнёрские казино) ─── */
.ds-projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px)  { .ds-projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ds-projects-grid { grid-template-columns: repeat(3, 1fr); } }

.ds-project {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  transition: border-color var(--ds-t-mid) var(--ds-ease), transform var(--ds-t-mid) var(--ds-ease);
}
.ds-project:hover { border-color: var(--ds-border-hi); transform: translateY(-2px); }
.ds-project__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ds-project__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-r-2);
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ds-project__logo img { width: 32px; height: 32px; object-fit: contain; }
.ds-project__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-border);
}
.ds-project__badge--new {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  border-color: rgba(83,252,24,0.25);
}
.ds-project__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0;
  line-height: 1.1;
}
.ds-project__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-ink-2);
  margin: 0;
  flex: 1;
}
.ds-project__promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
}
.ds-project__promo-l { display: flex; flex-direction: column; gap: 2px; }
.ds-project__code {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ds-ink-1);
}
.ds-project__copy {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: var(--ds-r-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border-hi);
  color: var(--ds-ink-2);
  cursor: pointer;
  transition: color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease);
}
.ds-project__copy:hover { color: var(--ds-accent-text); background: rgba(83,252,24,0.06); }
.ds-project__cta { width: 100%; }

/* ── EMPTY state ─────────────────────────────── */
.ds-empty {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--ds-border-hi);
  border-radius: var(--ds-r-3);
  color: var(--ds-ink-3);
  font-size: 14px;
  background: var(--ds-bg-2);
}

/* ── QUICK ACTIONS (profile shortcuts) ────────── */
.ds-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 600px)  { .ds-quick { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ds-quick { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ds-quick { grid-template-columns: repeat(6, 1fr); } }

.ds-quick__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  text-align: left;
  cursor: pointer;
  font-family: 'Inter Tight', sans-serif;
  color: var(--ds-ink-1);
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}
.ds-quick__btn:hover {
  background: var(--ds-elev-2);
  border-color: rgba(83,252,24,0.30);
  transform: translateY(-2px);
}
.ds-quick__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ds-r-2);
  background: rgba(83,252,24,0.08);
  border: 1px solid rgba(83,252,24,0.20);
  color: var(--ds-accent);
  margin-bottom: 2px;
  transition: transform var(--ds-t-mid) var(--ds-spring);
}
.ds-quick__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.ds-quick__btn:hover .ds-quick__ic { transform: rotate(-6deg) scale(1.06); }
.ds-quick__l { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.ds-quick__h { font-size: 11px; color: var(--ds-ink-3); letter-spacing: 0; }

/* ── BALANCE CARDS (для /bonuses /profile /finance) ─── */
.ds-balance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .ds-balance-grid { grid-template-columns: repeat(2, 1fr); } }

.ds-balance {
  position: relative;
  padding: 28px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
}
.ds-balance--accent {
  background: linear-gradient(180deg, rgba(83,252,24,0.06) 0%, var(--ds-elev-1) 100%);
  border-color: rgba(83,252,24,0.20);
}
.ds-balance__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
}
.ds-balance__value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ds-ink-1);
  margin-top: 8px;
  font-feature-settings: 'tnum' 1;
}
.ds-balance--accent .ds-balance__value { color: var(--ds-accent-text); }
.ds-balance__hint {
  font-size: 12px;
  color: var(--ds-ink-3);
  margin-top: 4px;
}

/* ── FORM (для /settings /bonuses promo /referral) ─── */
.ds-form-card {
  padding: 24px 28px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
}
.ds-form-card__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0 0 8px;
}
.ds-form-card__hint {
  font-size: 13px;
  color: var(--ds-ink-2);
  margin: 0 0 18px;
}
.ds-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  outline: 0;
  transition: border-color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease);
}
.ds-input:focus { border-color: var(--ds-accent); background: var(--ds-bg-2); }
.ds-input::placeholder { color: var(--ds-ink-3); }

.ds-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ds-row > .ds-input { flex: 1; min-width: 200px; }

/* ── Bonus lot (для /bonuses) ─── */
.ds-lot {
  padding: 18px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-lot__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ds-lot__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink-1);
  margin: 0;
}
.ds-lot__meta {
  font-size: 12px;
  color: var(--ds-ink-3);
  margin-top: 2px;
}
.ds-lot__cancel {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ds-r-2);
  background: rgba(255,85,102,0.10);
  border: 1px solid rgba(255,85,102,0.22);
  color: #ff8794;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease);
}
.ds-lot__cancel:hover { background: rgba(255,85,102,0.18); }
.ds-lot__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ds-lot__stat { text-align: center; padding: 8px 4px; border-radius: var(--ds-r-1); }
.ds-lot__stat-l { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-lot__stat-v { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; color: var(--ds-ink-1); margin-top: 4px; font-feature-settings: 'tnum' 1; }
.ds-lot__bar {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.ds-lot__bar-fill {
  height: 100%;
  background: var(--ds-accent);
  border-radius: 999px;
  transition: width 600ms var(--ds-ease);
}

/* ── RAFFLES page ─────────────────────────────── */
.ds-raffle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1000px) { .ds-raffle-grid { grid-template-columns: repeat(2, 1fr); } }

.ds-raffle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  transition: border-color var(--ds-t-mid) var(--ds-ease);
}
.ds-raffle:hover { border-color: var(--ds-border-hi); }
.ds-raffle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ds-raffle__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ds-ink-1);
  line-height: 1.15;
  margin: 0;
}
.ds-raffle__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ds-ink-2);
  margin: 8px 0 0;
}
.ds-raffle__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.ds-raffle__badge--active {
  background: var(--ds-accent-soft);
  color: var(--ds-accent-text);
  border-color: rgba(83,252,24,0.3);
}
.ds-raffle__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  overflow: hidden;
}
.ds-raffle__stat {
  padding: 14px 16px;
  background: var(--ds-bg-2);
  display: flex;
  flex-direction: column;
}
.ds-raffle__stat-v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink-1);
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.1;
  font-feature-settings: 'tnum' 1;
}
.ds-raffle__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ds-ink-2);
  padding: 10px 12px;
  background: rgba(255,182,39,0.06);
  border: 1px solid rgba(255,182,39,0.15);
  border-radius: var(--ds-r-2);
}
.ds-raffle__hint b { color: var(--ds-ink-1); font-weight: 600; }
.ds-raffle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--ds-border);
  margin-top: 4px;
  padding-top: 14px;
}
.ds-raffle__hint-text { font-size: 13px; color: var(--ds-ink-2); }

.ds-raffle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border-hi);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ds-ink-1);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease);
}
.ds-raffle-chip:hover { background: rgba(83,252,24,0.06); border-color: rgba(83,252,24,0.3); }
.ds-raffle-chip--static { cursor: default; }
.ds-raffle-chip--static:hover { background: rgba(255,255,255,0.04); border-color: var(--ds-border-hi); }
.ds-raffle-chip img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }

/* Finished raffle row */
.ds-raffle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
  flex-wrap: wrap;
}
.ds-raffle-row:hover { background: var(--ds-elev-2); border-color: var(--ds-border-hi); transform: translateY(-1px); }
.ds-raffle-row__l { min-width: 0; flex: 1 1 220px; }
.ds-raffle-row__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0;
  line-height: 1.2;
}
.ds-raffle-row__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ds-ink-3);
  margin-top: 4px;
}
.ds-raffle-row__r {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ds-ink-2);
}
.ds-raffle-row__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ds-ink-3);
}

/* Winners list (used in cards + modals) */
.ds-winner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
}
.ds-winner--paid {
  background: rgba(83,252,24,0.05);
  border-color: rgba(83,252,24,0.2);
}
.ds-winner__name { font-size: 13px; font-weight: 600; color: var(--ds-ink-1); }
.ds-winner__status { font-size: 11px; color: var(--ds-ink-3); margin-top: 3px; letter-spacing: 0.04em; }
.ds-winner--paid .ds-winner__status { color: var(--ds-accent-text); }
.ds-winner__prize {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-accent-text);
  letter-spacing: -0.02em;
}

/* ── SHOP page ─────────────────────────────────── */
.ds-shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px)  { .ds-shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ds-shop-grid { grid-template-columns: repeat(4, 1fr); } }

.ds-shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 22px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  transition: border-color var(--ds-t-mid) var(--ds-ease), transform var(--ds-t-mid) var(--ds-ease);
}
.ds-shop-item:hover { border-color: var(--ds-border-hi); transform: translateY(-2px); }
.ds-shop-item--special {
  background: linear-gradient(180deg, rgba(83,252,24,0.06) 0%, var(--ds-elev-1) 100%);
  border-color: rgba(83,252,24,0.18);
}
.ds-shop-item--stream {
  background: linear-gradient(180deg, rgba(255,182,39,0.06) 0%, var(--ds-elev-1) 100%);
  border-color: rgba(255,182,39,0.18);
}
.ds-shop-item__badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-border);
}
.ds-shop-item--special .ds-shop-item__badge { background: var(--ds-accent-soft); color: var(--ds-accent-text); border-color: rgba(83,252,24,0.25); }
.ds-shop-item--stream .ds-shop-item__badge { background: rgba(255,182,39,0.10); color: #ffd07a; border-color: rgba(255,182,39,0.25); }

.ds-shop-item__icon {
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-3);
  background: rgba(83,252,24,0.08);
  border: 1px solid rgba(83,252,24,0.26);
  color: var(--ds-accent);
  margin-bottom: 14px;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 14px 32px rgba(83,252,24,0.06);
  transition: transform var(--ds-t-mid) var(--ds-spring);
}
.ds-shop-item__icon svg { width: 40px; height: 40px; stroke: currentColor; fill: none; }
.ds-shop-item__icon i { color: var(--ds-accent); }
.ds-shop-item:hover .ds-shop-item__icon { transform: rotate(-6deg) scale(1.06); }
.ds-shop-item--stream .ds-shop-item__icon { background: rgba(255,182,39,0.10); border-color: rgba(255,182,39,0.25); color: #ffd07a; }
.ds-shop-item--stream .ds-shop-item__icon i { color: #ffd07a; }

.ds-shop-item__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 0 0 8px;
}
.ds-shop-item__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ds-ink-2);
  margin: 0;
}
.ds-shop-item__desc-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.ds-shop-item__more {
  background: none;
  border: 0;
  color: var(--ds-accent-text);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
}

.ds-shop-item__buy {
  width: 100%;
  height: 42px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--ds-r-2);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ds-border-hi);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease);
}
.ds-shop-item__buy:hover { background: var(--ds-accent); border-color: var(--ds-accent); color: #06200a; }
.ds-shop-item--special .ds-shop-item__buy { background: var(--ds-accent); color: #06200a; border-color: var(--ds-accent); }
.ds-shop-item--stream .ds-shop-item__buy { background: #ffb627; color: #2a1a00; border-color: #ffb627; }
.ds-shop-item--stream .ds-shop-item__buy:hover { background: #ffd07a; border-color: #ffd07a; }
/* Medal icon inside the buy button — bright green to match the
   header chip on the dark default state, dark on green hover/variants
   so it stays readable against the accent background. */
.ds-shop-item__buy-icon {
  width: 14px;
  height: 14px;
  color: var(--ds-accent);
  transition: color var(--ds-t-fast) var(--ds-ease);
}
.ds-shop-item__buy:hover .ds-shop-item__buy-icon,
.ds-shop-item--special .ds-shop-item__buy-icon { color: #06200a; }
.ds-shop-item--stream .ds-shop-item__buy-icon { color: #2a1a00; }

.ds-shop-item__admin {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.ds-shop-item__icon-btn {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-1);
  color: var(--ds-ink-2);
  cursor: pointer;
  transition: color var(--ds-t-fast) var(--ds-ease);
}
.ds-shop-item__icon-btn:hover { color: var(--ds-ink-1); }
.ds-shop-item__icon-btn--danger:hover { color: #ff8794; }

.ds-coming-soon-page {
  padding-top: 72px;
}

.ds-coming-soon {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 74% 12%, rgba(83,252,24,0.10), transparent 32%),
    linear-gradient(180deg, rgba(17,22,29,0.92), rgba(8,11,16,0.95));
  box-shadow: 0 24px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.045);
}

.ds-coming-soon::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.035), transparent 18%, transparent 82%, rgba(255,255,255,0.025));
}

.ds-coming-soon__head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 22px 22px 0;
}

.ds-coming-soon__eyebrow,
.ds-coming-soon__veil span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(83,252,24,0.22);
  border-radius: 999px;
  background: rgba(83,252,24,0.08);
  color: var(--ds-accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ds-coming-soon__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 34px;
  filter: blur(5px);
  opacity: .46;
  transform: scale(.985);
  user-select: none;
  pointer-events: none;
}

.ds-coming-soon__grid--cases,
.ds-coming-soon__grid--shop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-coming-soon__card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 18%, rgba(83,252,24,0.08), transparent 34%),
    rgba(9,13,18,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.ds-coming-soon__media {
  min-height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 0;
}

.ds-coming-soon__media img {
  width: min(230px, 88%);
  height: 132px;
  object-fit: contain;
}

.ds-coming-soon__icon {
  width: 74px;
  height: 74px;
  margin: 36px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(83,252,24,0.26);
  border-radius: 18px;
  background: rgba(83,252,24,0.08);
  color: var(--ds-accent);
}

.ds-coming-soon__icon svg {
  width: 38px;
  height: 38px;
}

.ds-coming-soon__meta {
  display: grid;
  gap: 9px;
  padding: 0 18px 18px;
}

.ds-coming-soon__meta strong {
  color: var(--ds-ink-1);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.ds-coming-soon__meta span {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(83,252,24,0.22);
  border-radius: 999px;
  color: var(--ds-accent-text);
  background: rgba(83,252,24,0.07);
  font-size: 11px;
  font-weight: 900;
}

.ds-coming-soon__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,10,14,0.30);
  backdrop-filter: blur(2px);
}

.ds-coming-soon__veil span {
  min-height: 50px;
  padding: 0 28px;
  border-radius: 16px;
  font-size: 20px;
  letter-spacing: .06em;
  box-shadow: 0 20px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 980px) {
  .ds-coming-soon__grid--cases,
  .ds-coming-soon__grid--shop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ds-coming-soon-page {
    padding-top: 32px;
  }

  .ds-coming-soon {
    min-height: 460px;
    border-radius: 18px;
  }

  .ds-coming-soon__grid {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .ds-coming-soon__card {
    min-height: 178px;
  }
}

/* ── Modal (общий) ─────────────────────────────── */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: ds-fade-in 200ms var(--ds-ease);
}
@keyframes ds-fade-in { from { opacity: 0 } to { opacity: 1 } }
.ds-modal {
  position: relative;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-4);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: ds-modal-in 280ms var(--ds-spring);
}
@keyframes ds-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ds-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
  z-index: 2;
}
.ds-modal__close:hover { background: rgba(255,255,255,0.08); color: var(--ds-ink-1); }
.ds-modal__head {
  padding: 20px 56px 16px 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  border-bottom: 1px solid var(--ds-border);
}
.ds-modal__body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

/* ── LEGAL pages (/terms, /privacy, /cookies) ─── */
.ds-legal {
  max-width: 720px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-ink-2);
}
.ds-legal h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin: 32px 0 12px;
}
.ds-legal p { margin: 0 0 14px; }
.ds-legal ul, .ds-legal ol { padding-left: 24px; margin: 0 0 14px; }
.ds-legal li { margin-bottom: 6px; }
.ds-legal a { color: var(--ds-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════
 * ADMIN shell
 * ══════════════════════════════════════════════════════ */

.ds-admin {
  min-height: 100vh;
  background: var(--ds-bg);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', system-ui, sans-serif;
  display: grid;
  grid-template-columns: 240px 1fr;
}
@media (max-width: 900px) { .ds-admin { grid-template-columns: 1fr; } }

/* Sidebar */
.ds-admin__side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  background: var(--ds-bg-2);
  border-right: 1px solid var(--ds-border);
  overflow-y: auto;
}
@media (max-width: 900px) { .ds-admin__side { position: relative; height: auto; } }
.ds-admin__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 22px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-admin__brand-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--ds-accent);
  box-shadow: 0 0 12px rgba(83,252,24,0.35);
}
.ds-admin__brand-text { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.ds-admin__brand-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ds-ink-3); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 3px; }

.ds-admin__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.ds-admin__nav-section {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  padding: 14px 8px 6px;
}
.ds-admin__nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--ds-r-2);
  background: transparent; border: 0;
  color: var(--ds-ink-2);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none; text-align: left;
  cursor: pointer; width: 100%;
  transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
}
.ds-admin__nav-link:hover { background: rgba(255,255,255,0.04); color: var(--ds-ink-1); }
.ds-admin__nav-link--active { background: rgba(83,252,24,0.08); color: var(--ds-accent-text); }
.ds-admin__nav-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; }
.ds-admin__nav-badge {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ds-accent); color: #06200a;
}
.ds-admin__user {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 12px 6px;
  border-top: 1px solid var(--ds-border);
}
.ds-admin__user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #53fc18, #b9ff84);
  color: #06200a;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px; font-weight: 700;
}
.ds-admin__user-name { font-size: 13px; font-weight: 600; }
.ds-admin__user-role { font-size: 11px; color: var(--ds-ink-3); font-family: 'IBM Plex Mono', monospace; }

/* Main area */
.ds-admin__main { display: flex; flex-direction: column; min-width: 0; }

/* Topbar with global search */
.ds-admin__top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px;
  background: rgba(19, 20, 26, 0.85);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--ds-border);
}
.ds-admin__search { flex: 1; max-width: 600px; position: relative; }
.ds-admin__search-input {
  width: 100%; height: 40px;
  padding: 0 70px 0 40px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; outline: 0;
  transition: border-color var(--ds-t-fast) var(--ds-ease);
}
.ds-admin__search-input:focus { border-color: var(--ds-accent); }
.ds-admin__search-input::placeholder { color: var(--ds-ink-3); }
.ds-admin__search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ds-ink-3); pointer-events: none;
}
.ds-admin__search-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.ds-admin__search-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-3);
  pointer-events: none;
}
.ds-admin__search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-3);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  max-height: 70vh; overflow-y: auto;
  display: none; z-index: 50;
}
.ds-admin__search-results--open { display: block; }
.ds-admin__search-group { padding: 8px 0; border-bottom: 1px solid var(--ds-border); }
.ds-admin__search-group:last-child { border-bottom: 0; }
.ds-admin__search-group-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ds-ink-3);
  padding: 6px 18px 8px;
}
.ds-admin__search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px;
  cursor: pointer; text-decoration: none;
  color: var(--ds-ink-1);
  border: 0; background: transparent;
  width: 100%; text-align: left;
  font-family: 'Inter Tight', sans-serif;
  transition: background var(--ds-t-fast) var(--ds-ease);
}
.ds-admin__search-item:hover { background: rgba(83,252,24,0.06); }
.ds-admin__search-item-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-admin__search-item-name { font-size: 14px; font-weight: 500; }
.ds-admin__search-item-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ds-ink-3); }
.ds-admin__search-item-r { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ds-ink-2); flex-shrink: 0; }
.ds-admin__search-empty { padding: 32px 18px; text-align: center; font-size: 13px; color: var(--ds-ink-3); }

.ds-admin__top-actions { display: flex; align-items: center; gap: 8px; }
.ds-admin__top-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-r-2);
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  color: var(--ds-ink-2);
  cursor: pointer; position: relative;
  transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
}
.ds-admin__top-btn:hover { background: var(--ds-elev-2); color: var(--ds-ink-1); }
.ds-admin__top-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.ds-admin__top-btn-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 8px var(--ds-accent);
}

/* Content area */
.ds-admin__content {
  padding: 28px;
  max-width: 1400px; margin-inline: auto;
  width: 100%;
}
@media (min-width: 1280px) { .ds-admin__content { padding: 36px 40px; } }

/* ── ADMIN: full-width override — drop site #app constraints ──
   The site shell (#app) is centered with max-width:1280px which makes
   the admin look like a "card in a card". When admin is active, expand
   to the full viewport width so the sidebar can hug the left edge and
   the main column gets all the space it can. */
body.admin-crm-wide #app {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
body.admin-crm-wide .ds-admin__content {
  max-width: none;
  padding: 22px 28px;
}
@media (min-width: 1280px) {
  body.admin-crm-wide .ds-admin__content { padding: 28px 40px; }
}
@media (min-width: 1600px) {
  body.admin-crm-wide .ds-admin__content { padding: 32px 56px; }
}
/* Hide site-footer copy block while in admin (sidebar is its own footer) */
body.admin-crm-wide .site-footer { display: none !important; }
/* Mobile bottom nav would overlap sidebar — hide on admin */
body.admin-crm-wide .mobile-bottom-nav { display: none !important; }
/* Site header (MONKAGX | Главная Проекты Игры …) — admin has its own
   sidebar + topbar, the public chrome would be visual noise + steal width. */
body.admin-crm-wide .site-header,
body.admin-crm-wide #site-header,
body.admin-crm-wide .ds-ambient,
body.admin-crm-wide .ds-noise { display: none !important; }
/* site-main has 60px top padding for the fixed public header — no header
   on admin, so the sidebar would have a 60px gap above it. Strip the offset. */
body.admin-crm-wide .site-main,
body.admin-crm-wide .site-main__scroll { padding-top: 0 !important; }
.ds-admin__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.ds-admin__head-l { display: flex; flex-direction: column; gap: 6px; }
.ds-admin__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700; letter-spacing: -0.025em;
  line-height: 1; margin: 0;
}
.ds-admin__sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; color: var(--ds-ink-3);
  letter-spacing: 0.04em; margin: 0;
}

/* KPI cards (3 wide) */
.ds-kpi-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-bottom: 28px;
}
@media (min-width: 720px) { .ds-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
.ds-kpi {
  position: relative; padding: 22px 24px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--ds-t-mid) var(--ds-ease);
}
.ds-kpi:hover { border-color: var(--ds-border-hi); }
.ds-kpi--queue { background: linear-gradient(180deg, rgba(255,182,39,0.05) 0%, var(--ds-elev-1) 70%); }
.ds-kpi--today { background: linear-gradient(180deg, rgba(83,252,24,0.05) 0%, var(--ds-elev-1) 70%); }
.ds-kpi--alerts { background: linear-gradient(180deg, rgba(255,85,102,0.05) 0%, var(--ds-elev-1) 70%); }
.ds-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-kpi__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ds-ink-3);
}
.ds-kpi__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-r-2);
  background: rgba(255,255,255,0.04);
  color: var(--ds-ink-2);
}
.ds-kpi__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.ds-kpi--queue .ds-kpi__icon { background: rgba(255,182,39,0.10); color: #ffd07a; }
.ds-kpi--today .ds-kpi__icon { background: rgba(83,252,24,0.10); color: var(--ds-accent-text); }
.ds-kpi--alerts .ds-kpi__icon { background: rgba(255,85,102,0.10); color: #ff8794; }
.ds-kpi__rows { display: flex; flex-direction: column; gap: 4px; }
.ds-kpi__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ds-divider);
  cursor: pointer;
  transition: color var(--ds-t-fast) var(--ds-ease);
}
.ds-kpi__row:last-child { border-bottom: 0; }
.ds-kpi__row:hover .ds-kpi__row-v { color: var(--ds-accent-text); }
.ds-kpi__row-l { font-size: 13px; color: var(--ds-ink-2); }
.ds-kpi__row-v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--ds-ink-1);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
  transition: color var(--ds-t-fast) var(--ds-ease);
}

/* Live feed + quick actions split */
.ds-admin__split {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-bottom: 28px;
}
@media (min-width: 1024px) { .ds-admin__split { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

.ds-feed {
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
}
.ds-feed__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-feed__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-ink-1); margin: 0;
}
.ds-feed__list { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.ds-feed__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ds-divider);
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease);
}
.ds-feed__item:hover { background: rgba(83,252,24,0.04); }
.ds-feed__item:last-child { border-bottom: 0; }
.ds-feed__item-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-r-1);
  background: rgba(255,255,255,0.04);
  color: var(--ds-ink-2);
  margin-top: 2px;
}
.ds-feed__item-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.ds-feed__item--big_win .ds-feed__item-icon { background: rgba(83,252,24,0.12); color: var(--ds-accent); }
.ds-feed__item--withdraw_pending .ds-feed__item-icon { background: rgba(255,182,39,0.12); color: #ffd07a; }
.ds-feed__item--withdraw_approved .ds-feed__item-icon { background: rgba(83,252,24,0.12); color: var(--ds-accent-text); }
.ds-feed__item--withdraw_rejected .ds-feed__item-icon { background: rgba(255,85,102,0.12); color: #ff8794; }
.ds-feed__item-body { flex: 1; min-width: 0; }
.ds-feed__item-title { font-size: 13.5px; font-weight: 500; color: var(--ds-ink-1); }
.ds-feed__item-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ds-ink-3); margin-top: 2px; letter-spacing: 0.02em; }
.ds-feed__item-time { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ds-ink-3); flex-shrink: 0; margin-top: 4px; }

.ds-quick-actions {
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  padding: 18px 20px;
}
.ds-quick-actions__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-ink-1); margin: 0 0 14px;
}
.ds-quick-actions__list { display: flex; flex-direction: column; gap: 8px; }
.ds-quick-actions__btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  text-align: left; text-decoration: none;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}
.ds-quick-actions__btn:hover {
  background: var(--ds-elev-2);
  border-color: rgba(83,252,24,0.3);
  transform: translateX(2px);
}
.ds-quick-actions__btn-ic {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-r-1);
  background: rgba(83,252,24,0.08);
  color: var(--ds-accent);
}
.ds-quick-actions__btn-ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* Section grid */
.ds-admin__sections {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 700px) { .ds-admin__sections { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ds-admin__sections { grid-template-columns: repeat(3, 1fr); } }
.ds-admin__section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 22px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  text-decoration: none; color: var(--ds-ink-1);
  cursor: pointer;
  transition: background var(--ds-t-mid) var(--ds-ease), border-color var(--ds-t-mid) var(--ds-ease), transform var(--ds-t-mid) var(--ds-ease);
}
.ds-admin__section:hover {
  background: var(--ds-elev-2);
  border-color: rgba(83,252,24,0.3);
  transform: translateY(-2px);
}
.ds-admin__section-ic {
  width: 36px; height: 36px;
  border-radius: var(--ds-r-2);
  background: rgba(83,252,24,0.08);
  color: var(--ds-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-admin__section-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.ds-admin__section-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.ds-admin__section-desc { font-size: 13px; color: var(--ds-ink-3); }

/* ── ADMIN TOOLBAR (filter tabs + search) ────── */
.ds-admin__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ds-tabs {
  display: inline-flex;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  padding: 4px;
  gap: 2px;
}
.ds-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ds-r-1);
  background: transparent;
  border: 0;
  color: var(--ds-ink-3);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), color var(--ds-t-fast) var(--ds-ease);
}
.ds-tabs__btn:hover { color: var(--ds-ink-1); }
.ds-tabs__btn--active {
  background: var(--ds-bg-2);
  color: var(--ds-ink-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ds-tabs__count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--ds-ink-2);
}
.ds-tabs__btn--active .ds-tabs__count { background: var(--ds-accent); color: #06200a; }

.ds-admin__search-inline {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  position: relative;
}
.ds-admin__search-inline input {
  width: 100%; height: 38px;
  padding: 0 14px 0 40px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-1);
  font-size: 13px; outline: 0;
}
.ds-admin__search-inline input:focus { border-color: var(--ds-accent); }
.ds-admin__search-inline svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--ds-ink-3); fill: none;
  pointer-events: none;
}

/* ── DATA TABLE ──────────────────────────────── */
.ds-table-wrap {
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  overflow: hidden;
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter Tight', sans-serif;
}
.ds-table thead th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  text-align: left;
  padding: 12px 16px;
  background: var(--ds-bg-2);
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ds-table thead th.ds-table__th-num { text-align: right; }
.ds-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-divider);
  font-size: 13px;
  color: var(--ds-ink-1);
  vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr {
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease);
}
.ds-table tbody tr:hover { background: rgba(83,252,24,0.04); }
.ds-table tbody tr.ds-table__row--selected { background: rgba(83,252,24,0.07); }
.ds-table__cell-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-feature-settings: 'tnum' 1;
}
.ds-table__cell-num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.ds-table__cell-muted { color: var(--ds-ink-3); }

/* Pill tags inside table */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--ds-ink-2);
  border: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ds-pill--ok { background: rgba(83,252,24,0.10); color: var(--ds-accent-text); border-color: rgba(83,252,24,0.25); }
.ds-pill--warn { background: rgba(255,182,39,0.10); color: #ffd07a; border-color: rgba(255,182,39,0.25); }
.ds-pill--danger { background: rgba(255,85,102,0.10); color: #ff8794; border-color: rgba(255,85,102,0.25); }
.ds-pill--info { background: rgba(83,252,24,0.06); color: var(--ds-accent-text); border-color: rgba(83,252,24,0.18); }
.ds-pill--admin { background: rgba(83,252,24,0.18); color: #06200a; border-color: var(--ds-accent); font-weight: 700; }
.ds-pill--mod { background: rgba(83,252,24,0.10); color: var(--ds-accent-text); border-color: rgba(83,252,24,0.25); }

/* Avatar in table */
.ds-table__user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ds-table__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #53fc18, #b9ff84);
  color: #06200a;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.ds-table__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ds-table__user-name { font-weight: 500; color: var(--ds-ink-1); }
.ds-table__user-id { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ds-ink-3); margin-top: 2px; }

/* Checkbox — applies to .ds-check AND any plain checkbox inside admin tables,
   so a forgotten class never falls back to a stretched native widget. */
input[type="checkbox"].ds-check,
.ds-table input[type="checkbox"],
.ds-bulk-bar input[type="checkbox"] {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; max-width: 18px !important;
  min-height: 18px !important; max-height: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 5px !important;
  border: 1.5px solid var(--ds-border-hi) !important;
  background: var(--ds-bg-2) !important;
  cursor: pointer !important;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease);
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
}
input[type="checkbox"].ds-check:hover,
.ds-table input[type="checkbox"]:hover { border-color: var(--ds-ink-3) !important; }

input[type="checkbox"].ds-check:checked,
.ds-table input[type="checkbox"]:checked,
.ds-bulk-bar input[type="checkbox"]:checked {
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
}
input[type="checkbox"].ds-check:checked::after,
.ds-table input[type="checkbox"]:checked::after,
.ds-bulk-bar input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2306200a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
input[type="checkbox"].ds-check:focus-visible,
.ds-table input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(83,252,24,.35) !important;
  outline-offset: 1px !important;
}

/* Bulk actions bar (sticky bottom) */
.ds-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--ds-elev-2);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-3);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  transition: transform var(--ds-t-mid) var(--ds-spring), opacity var(--ds-t-mid) var(--ds-ease);
  opacity: 0;
}
.ds-bulk-bar--open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.ds-bulk-bar__count {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  color: var(--ds-ink-1);
  padding-right: 14px;
  border-right: 1px solid var(--ds-border);
  font-weight: 500;
}
.ds-bulk-bar__count b {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--ds-accent-text);
  font-weight: 700;
  margin-right: 4px;
}
.ds-bulk-bar__actions { display: flex; gap: 8px; }
.ds-bulk-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--ds-r-2);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}
.ds-bulk-bar__btn--ok { background: var(--ds-accent); color: #06200a; }
.ds-bulk-bar__btn--ok:hover { background: #66ff2c; transform: translateY(-1px); }
.ds-bulk-bar__btn--danger { background: rgba(255,85,102,0.12); color: #ff8794; border-color: rgba(255,85,102,0.3); }
.ds-bulk-bar__btn--danger:hover { background: rgba(255,85,102,0.20); }
.ds-bulk-bar__btn--ghost { background: transparent; color: var(--ds-ink-2); border-color: var(--ds-border-hi); }
.ds-bulk-bar__btn--ghost:hover { background: rgba(255,255,255,0.04); color: var(--ds-ink-1); }
.ds-bulk-bar__btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* ── SLIDE-OVER (right panel for user details) ── */
.ds-slideover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(4, 5, 8, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-t-mid) var(--ds-ease);
}
.ds-slideover-backdrop--open { opacity: 1; pointer-events: auto; }

.ds-slideover {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 760px;
  z-index: 90;
  background: var(--ds-bg-2);
  border-left: 1px solid var(--ds-border-hi);
  box-shadow: -24px 0 48px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform var(--ds-t-slow) var(--ds-spring);
  display: flex;
  flex-direction: column;
  font-family: 'Inter Tight', sans-serif;
  color: var(--ds-ink-1);
}
@media (min-width: 1400px) { .ds-slideover { max-width: 860px; } }
.ds-slideover--open { transform: translateX(0); }
.ds-slideover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  flex-shrink: 0;
}
.ds-slideover__title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.ds-slideover__close {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-slideover__close:hover { background: rgba(255,255,255,0.08); color: var(--ds-ink-1); }
.ds-slideover__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* User profile card inside slide-over */
.ds-so-user {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
}
.ds-so-user__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #53fc18, #b9ff84);
  color: #06200a;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}
.ds-so-user__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ds-so-user__l { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ds-so-user__name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ds-ink-1);
}
.ds-so-user__id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ds-ink-3);
}
.ds-so-user__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Quick stats row in slide-over */
.ds-so-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ds-border);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-2);
  overflow: hidden;
}
.ds-so-stats__item {
  padding: 12px 14px;
  background: var(--ds-elev-1);
}
.ds-so-stats__l { font-size: 11px; color: var(--ds-ink-3); letter-spacing: 0.08em; text-transform: uppercase; font-family: 'IBM Plex Mono', monospace; }
.ds-so-stats__v {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-ink-1);
  margin-top: 4px;
  font-feature-settings: 'tnum' 1;
}

/* Action group (inline ops) */
.ds-so-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
  padding: 14px 16px;
}
.ds-so-actions__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  margin: 0 0 4px;
}
.ds-so-actions__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-so-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--ds-r-2);
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border-hi);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ds-t-fast) var(--ds-ease), border-color var(--ds-t-fast) var(--ds-ease);
}
.ds-so-btn:hover { background: var(--ds-elev-2); border-color: var(--ds-ink-3); }
.ds-so-btn--ok { background: rgba(83,252,24,0.10); color: var(--ds-accent-text); border-color: rgba(83,252,24,0.30); }
.ds-so-btn--ok:hover { background: rgba(83,252,24,0.18); }
.ds-so-btn--danger { background: rgba(255,85,102,0.08); color: #ff8794; border-color: rgba(255,85,102,0.25); }
.ds-so-btn--danger:hover { background: rgba(255,85,102,0.16); }
.ds-so-btn--warn { background: rgba(255,182,39,0.08); color: #ffd07a; border-color: rgba(255,182,39,0.25); }
.ds-so-btn--warn:hover { background: rgba(255,182,39,0.16); }
.ds-so-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* Inline form for slide-over (issue bonus, etc) */
.ds-so-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-3);
}
.ds-so-form__title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  margin: 0;
}
.ds-so-form__row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ds-so-form__row > input,
.ds-so-form__row > select {
  flex: 1;
  min-width: 100px;
  height: 36px;
  padding: 0 12px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-border-hi);
  border-radius: var(--ds-r-2);
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  outline: 0;
}
.ds-so-form__row > input:focus,
.ds-so-form__row > select:focus { border-color: var(--ds-accent); }

/* ── SLIDE-OVER tabs ── */
.ds-so-tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ds-divider);
  background: var(--ds-bg-2);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-so-tabs::-webkit-scrollbar { display: none; }
.ds-so-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-ink-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.ds-so-tab:hover { color: var(--ds-ink-1); }
.ds-so-tab--active { color: var(--ds-accent-text); border-bottom-color: var(--ds-accent); }
.ds-so-tab__count {
  background: var(--ds-elev-1);
  color: var(--ds-ink-3);
  padding: 1px 7px;
  border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
}
.ds-so-tab--active .ds-so-tab__count { background: var(--ds-accent); color: #06200a; }

/* ── SLIDE-OVER sticky action bar (бан/мут/баланс всегда сверху) ── */
.ds-so-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-2) 80%, transparent 100%);
  padding: 14px 18px 12px;
  margin: 0 -18px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── SLIDE-OVER inline data list ── */
.ds-so-kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ds-so-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-so-kv__row:last-child { border-bottom: 0; }
.ds-so-kv__l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ds-ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-so-kv__v {
  text-align: right;
  color: var(--ds-ink-1);
  font-size: 13px;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 70%;
}
.ds-so-kv__v--mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.ds-so-kv__v--accent { color: var(--ds-accent-text); font-weight: 600; }
.ds-so-kv__v--danger { color: #ff8794; }

/* ── SLIDE-OVER scrollable list (txns/audit/logins) ── */
.ds-so-list {
  background: var(--ds-elev-1);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ds-so-list__row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-divider);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  font-size: 12.5px;
  transition: background .12s ease;
}
.ds-so-list__row:last-child { border-bottom: 0; }
.ds-so-list__row:hover { background: var(--ds-elev-2); }
.ds-so-list__l { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ds-so-list__title { color: var(--ds-ink-1); font-weight: 500; }
.ds-so-list__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--ds-ink-3);
  letter-spacing: .04em;
}
.ds-so-list__v {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Section header inside slide-over */
.ds-so-section-h {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  letter-spacing: .14em;
  font-weight: 600;
  margin: 4px 0 10px;
  padding-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-stagger > *,
  .ds-live::before,
  .ds-card,
  .ds-card__arrow,
  .ds-game-card__icon,
  .ds-project { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
 * MODAL OVERRIDES — глобально перекрашиваем все старые модалки
 * (#withdraw-modal, #deposit-modal, #confirm-modal, #input-modal,
 *  #buy-modal, #withdraw-settings-modal, #shop-edit-modal,
 *  #ref-confirm-modal, #audit-modal, #badge-picker-modal, и др.)
 * ════════════════════════════════════════════════════════════════ */

/* NOTE: This block was originally written to "modernize" old Tailwind-utility
   modals (Tailwind classes: .fixed .inset-0 .bg-black …) on the fly. The
   selectors used to match by `[id$="-modal"]` alone, which over-reached and
   hijacked any new custom-built modal whose id happened to end with -modal
   (proof-modal, cr-winner-modal, music-track-modal, …) — painting their
   backdrops grey via !important.
   Fix: ALL selectors here now require BOTH the id suffix AND the Tailwind
   utility classes (.fixed.inset-0). New modals that don't use those
   utilities are completely untouched. */

/* Backdrop layer (the outer .fixed inset-0) */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0,
.rules-gate {
  background: rgba(8, 11, 18, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: ds-modal-backdrop .2s ease-out forwards;
}
@keyframes ds-modal-backdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Inner card — Tailwind classes used: bg-[#1c1c1e], rounded-3xl, p-6, border */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 > div:first-child:not([id$="-backdrop"]),
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 .relative,
.rules-card {
  background: linear-gradient(180deg, var(--ds-elev-2) 0%, var(--ds-elev-1) 100%) !important;
  border: 1px solid var(--ds-border-hi) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
  animation: ds-modal-pop .35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ds-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Headings inside any modal */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 h3,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 h4,
.rules-card__title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ds-ink-1) !important;
}

/* Inputs — old: bg-black/50, border-white/10. New: ds tokens */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input[type="text"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input[type="number"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input[type="email"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input[type="password"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 textarea,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 select {
  background: var(--ds-bg-1) !important;
  border: 1px solid var(--ds-border-hi) !important;
  border-radius: 10px !important;
  color: var(--ds-ink-1) !important;
  font-family: 'Inter Tight', sans-serif !important;
  transition: border-color .15s ease !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input:focus,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 textarea:focus,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 select:focus {
  border-color: var(--ds-accent) !important;
  outline: none !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 input::placeholder,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 textarea::placeholder {
  color: var(--ds-ink-3) !important;
}

/* Primary action (mostly bg-blue-600 in old code) — already overridden by
   the global blue→green map earlier; here we just round + spacing-tune. */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-blue"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-green-500"]:not([class*="bg-green-500/"]) {
  background: var(--ds-accent) !important;
  color: #06200a !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 0 !important;
  transition: background .15s ease, transform .1s ease !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-blue"]:hover,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-green-500"]:not([class*="bg-green-500/"]):hover {
  background: #66ff2c !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-blue"]:active,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-green-500"]:not([class*="bg-green-500/"]):active {
  transform: translateY(1px) !important;
}

/* Secondary / cancel (bg-white/5) */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-white/5"],
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-white/10"] {
  background: var(--ds-elev-2) !important;
  color: var(--ds-ink-2) !important;
  border: 1px solid var(--ds-border-hi) !important;
  border-radius: 10px !important;
  transition: background .15s ease !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-white/5"]:hover,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-white/10"]:hover {
  background: var(--ds-bg-1) !important;
  color: var(--ds-ink-1) !important;
}

/* Destructive action (bg-red-500/X) */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-red-500"]:not([class*="bg-red-500/"]) {
  background: rgba(255, 85, 102, 0.15) !important;
  color: #ff8794 !important;
  border: 1px solid rgba(255, 85, 102, 0.30) !important;
  border-radius: 10px !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button[class*="bg-red-500"]:not([class*="bg-red-500/"]):hover {
  background: rgba(255, 85, 102, 0.25) !important;
}

/* Close button (top-right ×) */
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button.absolute.top-4.right-4,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button.absolute.top-3.right-3 {
  background: var(--ds-elev-2) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-3) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease !important;
}
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button.absolute.top-4.right-4:hover,
[id$="-modal"]:not(#withdraw-modal).fixed.inset-0 button.absolute.top-3.right-3:hover {
  background: var(--ds-bg-1) !important;
  color: var(--ds-ink-1) !important;
}

/* Scrollbars inside modals */
[id$="-modal"] *::-webkit-scrollbar { width: 6px; height: 6px; }
[id$="-modal"] *::-webkit-scrollbar-thumb { background: var(--ds-border-hi); border-radius: 3px; }
[id$="-modal"] *::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════════════════════════════
 * MINIGAMES — minimalist mode
 * Hide confetti / fireworks / win-popups / sparkles inside game UIs.
 * Keeps the betting interface clean and focused.
 * ════════════════════════════════════════════════════════════════ */

/* common particle/effect layers across games */
.confetti, .confetti-canvas,
[class*="confetti"]:not(.cr-confetti):not(.cr-modal__msg),
[class*="firework"],
[class*="sparkle"],
.win-celebrate, .win-particles, .win-overlay,
[id$="-celebration"], [id$="-confetti"], [id$="-fireworks"] {
  display: none !important;
}

/* per-game game-over banners + confetti + particles + bursts + flashes */
.mines-gameover, .mines-conf, .mines-flash,
.dice-conf,
.limbo-conf, .limbo-engine-burst, .limbo-trail-particle,
.jp-conf, .jp-fanfare, .jp-fireworks,
.bjConf,
.bac-confetti, .bac-celebration,
.rl-confetti,
.pl-confetti, .pl-conf, .pl-burst {
  display: none !important;
}

/* win-popup modals inside games (not the global modals which we themed) */
[id*="win-popup"]:not(#withdraw-settings-modal):not(#withdraw-modal),
.game-win-modal, .game-win-popup,
.bj-win-banner, .pl-win-banner, .li-win-banner, .di-win-banner, .ml-win-banner, .ru-win-banner {
  display: none !important;
}

/* big "+1234" floating profit numbers */
.win-bubble, .float-win, [class*="profit-burst"], [class*="win-burst"] {
  display: none !important;
}

/* win/lose aura backgrounds (radial green/red glow on board) */
.mines-board-wrap.win-aura .mines-board-bg,
.mines-board-wrap.lose-aura .mines-board-bg,
[class*="win-aura"]::before,
[class*="lose-aura"]::before {
  background: transparent !important;
}

/* board shake on lose */
.shake, .mines-board-wrap.shake,
[class*="-shake"] { animation: none !important; }

/* mult/win count "bump" animations (visual noise on every cell open) */
#mines-mult.bump,
[id*="-mult"][class*="bump"],
.bump, [class*="-bump"] { animation: none !important; }

/* cashout button shine sweeps — disable visual noise but DON'T hide the button */
.mines-btn-primary::before,
.mines-btn-cashout::before,
[class$="-btn"]::before {
  animation: none !important;
  display: none !important;
}
/* pulsing — kill animation only, keep the button visible/clickable */
.mines-btn-cashout.pulse-ready,
[class*="pulse-ready"] { animation: none !important; }

/* ── GAME BOARDS / PANELS: единый вид во всех играх (как Plinko) ── */

/* All boards — flat dark background, same border, same radius */
#bj-board, #bac-board, #bac-table, #limbo-stage, #dice-stage,
.dice-stage, .limbo-stage, .mines-board-wrap,
.game-board, .limbo-board, .dice-board-wrap,
#jackpot-reel-shell,
[id$="-board"]:not(.ds-board),
[id$="-table"], [id$="-stage"],
[class*="-board-wrap"], [class*="-table-wrap"], [class*="-stage-wrap"] {
  background: #0e1219 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25) !important;
}

/* All bet panels — slightly lighter than the board */
.game-bet-panel,
#bac-panel {
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28) !important;
}

/* secondary cosmic overlays inside boards */
#bac-table > div[style*="radial-gradient"],
#bj-board > div[style*="radial-gradient"] { background: none !important; background-image: none !important; }
#bac-vignette, #bj-vignette { box-shadow: none !important; }

/* hide stage flash overlays */
#bj-flash, #bac-flash, #jp-fx-flash, #jp-fx-rays,
.dice-flash, .limbo-flash, .mines-flash,
[id$="-flash"] { display: none !important; }

/* hide watermark texts on game tables */
#bac-payout-line { display: none !important; }
#bj-board > div[style*="BLACKJACK PAYS"],
#bj-board div[style*="rgba(255,255,255,0.04)"],
#bj-board div[style*="rgba(255,255,255,0.05)"] { display: none !important; }

/* dice stage radial overlays */
[id^="dice-stage"] > [class*="dice-bg"],
[id^="limbo-stage"] > [class*="limbo-bg"] { background: none !important; }

/* baccarat winner-side glow (radial-gradient ::before) */
.bac-area.winner-side::before { background: none !important; box-shadow: none !important; }

/* blackjack dealer indicator line — visual noise */
#bj-dealer-indicator { display: none !important; }

/* jackpot reel winner glow throb */
.jackpot-reel__tile.is-winner::before { display: none !important; }

/* shine animation on bet buttons (extra visual noise) */
.game-play-btn::after,
#bac-play-btn::after,
#dice-play-btn::after,
#limbo-play-btn::after,
#pl-play-btn::after,
#mines-start-btn::after,
.dice-play-btn::after,
.limbo-play-btn::after { animation: none !important; display: none !important; }

/* RULES-GATE compatibility (used by QR modal etc.) */
.rules-card {
  padding: 28px !important;
  max-width: 460px !important;
}
.rules-card__icon {
  background: linear-gradient(135deg, var(--ds-accent), #22c55e) !important;
  color: #06200a !important;
  font-size: 28px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
  box-shadow: 0 0 0 4px rgba(83,252,24,0.15) !important;
}
.rules-card__title {
  font-size: 22px !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}
.rules-card__text {
  color: var(--ds-ink-2) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* ===== Admin command center refresh ===== */
body.admin-crm-wide {
  --ds-bg: #07080b;
  --ds-bg-2: #0c0e12;
  --ds-elev-1: #11141a;
  --ds-elev-2: #151a21;
  --ds-elev-3: #1a2028;
  --ds-border: rgba(255,255,255,.075);
  --ds-border-hi: rgba(255,255,255,.14);
  --ds-divider: rgba(255,255,255,.055);
  --ds-ink-1: #f6f4ed;
  --ds-ink-2: #b4b0a8;
  --ds-ink-3: #77736b;
  --ds-accent: #53fc18;
  --ds-accent-text: #b8ff8d;
}

body.admin-crm-wide .ds-admin,
body.admin-crm-wide .ds-admin * {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

body.admin-crm-wide .ds-admin {
  grid-template-columns: 268px minmax(0, 1fr);
  background: var(--ds-bg);
  color: var(--ds-ink-1);
}

body.admin-crm-wide .ds-admin__side {
  padding: 16px 12px;
  background: rgba(9, 10, 14, .96);
  border-right: 1px solid var(--ds-border);
}

body.admin-crm-wide .ds-admin__brand {
  min-height: 54px;
  padding: 6px 8px 14px;
  gap: 10px;
}

body.admin-crm-wide .ds-admin__brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #53fc18;
  box-shadow: 0 0 0 1px rgba(83,252,24,.4), 0 0 26px rgba(83,252,24,.22);
}

body.admin-crm-wide .ds-admin__brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.admin-crm-wide .ds-admin__brand-text {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

body.admin-crm-wide .ds-admin__brand-sub {
  font-size: 10px;
  color: var(--ds-ink-3);
  text-transform: uppercase;
}

body.admin-crm-wide .ds-admin__nav {
  gap: 4px;
  margin-top: 10px;
}

body.admin-crm-wide .ds-admin__nav-section {
  padding: 14px 9px 5px;
  font-size: 10px;
  color: #686d76;
}

body.admin-crm-wide .ds-admin__nav-link {
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: #a7acb8;
}

body.admin-crm-wide .ds-admin__nav-link i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

body.admin-crm-wide .ds-admin__nav-link:hover {
  background: rgba(255,255,255,.055);
  color: #fff;
}

body.admin-crm-wide .ds-admin__nav-link--active {
  background: rgba(83,252,24,.12);
  color: var(--ds-accent-text);
  box-shadow: inset 0 0 0 1px rgba(83,252,24,.14);
}

body.admin-crm-wide .ds-admin__nav-badge {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
}

body.admin-crm-wide .ds-admin__user {
  margin-top: 14px;
  padding: 14px 10px 4px;
}

body.admin-crm-wide .ds-admin__user-avatar {
  border-radius: 8px;
}

body.admin-crm-wide .ds-admin__top {
  min-height: 62px;
  padding: 12px 24px;
  gap: 14px;
  background: rgba(7, 8, 11, .88);
  border-bottom: 1px solid var(--ds-border);
}

body.admin-crm-wide .ds-admin__top-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}

body.admin-crm-wide .ds-admin__top-meta span {
  font-size: 11px;
  color: var(--ds-ink-3);
}

body.admin-crm-wide .ds-admin__top-meta strong {
  font-size: 13px;
  color: var(--ds-accent-text);
}

body.admin-crm-wide .ds-admin__search {
  max-width: 840px;
}

body.admin-crm-wide .ds-admin__search-icon i {
  font-size: 18px;
  line-height: 1;
}

body.admin-crm-wide .ds-admin__search-input,
body.admin-crm-wide .ds-admin__search-inline input {
  height: 42px;
  border-radius: 8px;
  background: #0d1015;
}

body.admin-crm-wide .ds-admin__top-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

body.admin-crm-wide .ds-admin__top-btn i {
  font-size: 18px;
  line-height: 1;
}

body.admin-crm-wide .ds-admin__content {
  padding: 24px;
}

@media (min-width: 1280px) {
  body.admin-crm-wide .ds-admin__content { padding: 28px 36px; }
}

@media (min-width: 1600px) {
  body.admin-crm-wide .ds-admin__content { padding: 32px 48px; }
}

.ds-admin-overview {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(360px, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.ds-admin-overview__copy,
.ds-admin-overview__meta {
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #101319;
}

.ds-admin-overview__copy {
  padding: 18px;
  display: flex;
  align-items: center;
}

.ds-admin-overview__title {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  font-weight: 800;
  color: #fffdf6;
}

.ds-admin-overview__text {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--ds-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.ds-admin-overview__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.ds-admin-overview__metric {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid var(--ds-divider);
  border-bottom: 1px solid var(--ds-divider);
}

.ds-admin-overview__metric:nth-child(2n) { border-right: 0; }
.ds-admin-overview__metric:nth-last-child(-n+2) { border-bottom: 0; }

.ds-admin-overview__metric span {
  display: block;
  margin-bottom: 8px;
  color: var(--ds-ink-3);
  font-size: 11px;
  text-transform: uppercase;
}

.ds-admin-overview__metric strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 18px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body.admin-crm-wide .ds-kpi-grid {
  gap: 12px;
  margin-bottom: 18px;
}

body.admin-crm-wide .ds-kpi,
body.admin-crm-wide .ds-feed,
body.admin-crm-wide .ds-quick-actions,
body.admin-crm-wide .ds-table-wrap,
body.admin-crm-wide .ds-tabs {
  border-radius: 8px;
  background: #101319;
  box-shadow: none;
}

body.admin-crm-wide .ds-kpi {
  padding: 18px;
}

body.admin-crm-wide .ds-kpi--queue,
body.admin-crm-wide .ds-kpi--today,
body.admin-crm-wide .ds-kpi--alerts {
  background: #101319;
}

body.admin-crm-wide .ds-kpi__icon,
body.admin-crm-wide .ds-quick-actions__btn-ic,
body.admin-crm-wide .ds-feed__item-icon {
  border-radius: 8px;
}

body.admin-crm-wide .ds-kpi__icon i,
body.admin-crm-wide .ds-feed__item-icon i,
body.admin-crm-wide .ds-quick-actions__btn-ic i,
.ds-module-card__icon i {
  font-size: 17px;
  line-height: 1;
}

body.admin-crm-wide .ds-kpi__row {
  cursor: default;
}

.ds-admin-board {
  margin: 0 0 24px;
}

.ds-admin-board__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ds-admin-board__head h2,
.ds-module-group__head h2 {
  margin: 4px 0 0;
  color: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 750;
}

.ds-admin-board__note {
  color: var(--ds-ink-3);
  font-size: 12px;
}

.ds-module-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.ds-module-group {
  min-width: 0;
}

.ds-module-group__head {
  margin-bottom: 8px;
}

.ds-module-group__head h2 {
  font-size: 15px;
}

.ds-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 1280px) {
  .ds-module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ds-module-card {
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #101319;
  color: var(--ds-ink-1);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ds-t-fast) var(--ds-ease), background var(--ds-t-fast) var(--ds-ease), transform var(--ds-t-fast) var(--ds-ease);
}

.ds-module-card:hover {
  border-color: rgba(83,252,24,.32);
  background: #131820;
  transform: translateY(-1px);
}

.ds-module-card:focus-visible {
  outline: 2px solid rgba(83,252,24,.5);
  outline-offset: 2px;
}

.ds-module-card--planned {
  cursor: not-allowed;
  opacity: .72;
}

.ds-module-card--planned:hover {
  border-color: var(--ds-border);
  background: #101319;
  transform: none;
}

.ds-module-card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(83,252,24,.09);
  color: var(--ds-accent);
}

.ds-module-card__icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
}

.ds-module-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ds-module-card__top {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ds-module-card__title {
  min-width: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ds-module-card__status {
  flex: 0 0 auto;
  max-width: 86px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  color: #0b1108;
  background: var(--ds-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-module-card__status--hot {
  background: #f8c66a;
  color: #171008;
}

.ds-module-card__status--muted {
  background: rgba(255,255,255,.08);
  color: var(--ds-ink-3);
}

body.admin-crm-wide .ds-admin__split {
  gap: 14px;
}

body.admin-crm-wide .ds-quick-actions {
  padding: 16px;
}

body.admin-crm-wide .ds-quick-actions__btn {
  min-height: 44px;
  border-radius: 8px;
  background: #0d1015;
}

body.admin-crm-wide .ds-quick-actions__btn:hover {
  transform: none;
}

.ds-admin-status {
  min-width: 0;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: #101319;
  overflow: hidden;
}

.ds-admin-status__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-admin-status__head h3 {
  margin: 0;
  color: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 750;
}

.ds-admin-status__rows {
  display: grid;
}

.ds-admin-status__row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ds-divider);
}

.ds-admin-status__row:last-child {
  border-bottom: 0;
}

.ds-admin-status__row span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ds-ink-2);
  font-size: 13px;
}

.ds-admin-status__row i {
  width: 18px;
  flex: 0 0 18px;
  color: var(--ds-accent);
  font-size: 18px;
}

.ds-admin-status__row strong {
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.admin-music-shell .amus-wrap {
  max-width: none;
  margin: 0;
}

.admin-music-shell .amus-card {
  border-radius: 8px !important;
  background: #101319 !important;
  border-color: var(--ds-border) !important;
}

/* Strict admin palette: one surface system, one accent, no rainbow statuses. */
body.admin-crm-wide .ds-admin [class*="text-emerald"],
body.admin-crm-wide .ds-admin [class*="text-red"],
body.admin-crm-wide .ds-admin [class*="text-blue"],
body.admin-crm-wide .ds-admin [class*="text-purple"],
body.admin-crm-wide .ds-admin [class*="text-cyan"],
body.admin-crm-wide .ds-admin [class*="text-sky"],
body.admin-crm-wide .ds-admin [class*="text-orange"],
body.admin-crm-wide .ds-admin [class*="text-amber"],
body.admin-crm-wide .ds-admin [class*="text-yellow"],
body.admin-crm-wide .ds-admin [class*="text-ios-accent"] {
  color: var(--ds-ink-2) !important;
}

body.admin-crm-wide .ds-admin [class*="bg-emerald"],
body.admin-crm-wide .ds-admin [class*="bg-red"],
body.admin-crm-wide .ds-admin [class*="bg-blue"],
body.admin-crm-wide .ds-admin [class*="bg-purple"],
body.admin-crm-wide .ds-admin [class*="bg-cyan"],
body.admin-crm-wide .ds-admin [class*="bg-sky"],
body.admin-crm-wide .ds-admin [class*="bg-orange"],
body.admin-crm-wide .ds-admin [class*="bg-amber"],
body.admin-crm-wide .ds-admin [class*="bg-yellow"] {
  background: rgba(255,255,255,.045) !important;
}

body.admin-crm-wide .ds-admin [class*="border-emerald"],
body.admin-crm-wide .ds-admin [class*="border-red"],
body.admin-crm-wide .ds-admin [class*="border-blue"],
body.admin-crm-wide .ds-admin [class*="border-purple"],
body.admin-crm-wide .ds-admin [class*="border-cyan"],
body.admin-crm-wide .ds-admin [class*="border-sky"],
body.admin-crm-wide .ds-admin [class*="border-orange"],
body.admin-crm-wide .ds-admin [class*="border-amber"],
body.admin-crm-wide .ds-admin [class*="border-yellow"] {
  border-color: var(--ds-border) !important;
}

body.admin-crm-wide .ds-admin .ds-pill,
body.admin-crm-wide .ds-admin .admin-chip,
body.admin-crm-wide .ds-admin [class*="admin-chip"] {
  border-radius: 999px !important;
  border: 1px solid var(--ds-border) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--ds-ink-2) !important;
}

body.admin-crm-wide .ds-admin .ds-pill--ok,
body.admin-crm-wide .ds-admin .admin-chip--green,
body.admin-crm-wide .ds-admin .ds-module-card__status--live,
body.admin-crm-wide .ds-admin .ds-tabs__btn--active .ds-tabs__count {
  border-color: rgba(83,252,24,.24) !important;
  background: rgba(83,252,24,.10) !important;
  color: var(--ds-accent-text) !important;
}

body.admin-crm-wide .ds-admin .ds-pill--danger,
body.admin-crm-wide .ds-admin .ds-pill--warn,
body.admin-crm-wide .ds-admin .ds-pill--info,
body.admin-crm-wide .ds-admin .ds-module-card__status--hot {
  border-color: var(--ds-border) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--ds-ink-1) !important;
}

body.admin-crm-wide .ds-admin .ds-bulk-bar__btn,
body.admin-crm-wide .ds-admin .btn-secondary,
body.admin-crm-wide .ds-admin button[class*="bg-white"],
body.admin-crm-wide .ds-admin button[class*="bg-black"],
body.admin-crm-wide .ds-admin button[class*="bg-red"],
body.admin-crm-wide .ds-admin button[class*="bg-blue"],
body.admin-crm-wide .ds-admin button[class*="bg-purple"],
body.admin-crm-wide .ds-admin button[class*="bg-cyan"],
body.admin-crm-wide .ds-admin button[class*="bg-orange"],
body.admin-crm-wide .ds-admin button[class*="bg-amber"] {
  border-radius: 8px !important;
  border-color: var(--ds-border) !important;
  background: #0d1015 !important;
  color: var(--ds-ink-1) !important;
  box-shadow: none !important;
}

body.admin-crm-wide .ds-admin .ds-bulk-bar__btn--ok,
body.admin-crm-wide .ds-admin .btn-primary {
  border-color: rgba(83,252,24,.28) !important;
  background: rgba(83,252,24,.12) !important;
  color: var(--ds-accent-text) !important;
}

body.admin-crm-wide .ds-admin .ds-bulk-bar__btn--danger {
  border-color: var(--ds-border) !important;
  background: #0d1015 !important;
  color: var(--ds-ink-1) !important;
}

body.admin-crm-wide .ds-admin input,
body.admin-crm-wide .ds-admin textarea,
body.admin-crm-wide .ds-admin select {
  border-radius: 8px !important;
  border-color: var(--ds-border) !important;
  background: #0b0e13 !important;
  color: var(--ds-ink-1) !important;
  box-shadow: none !important;
}

body.admin-crm-wide .ds-admin input:focus,
body.admin-crm-wide .ds-admin textarea:focus,
body.admin-crm-wide .ds-admin select:focus {
  border-color: rgba(83,252,24,.32) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(83,252,24,.08) !important;
}

/* Admin modals can be created by several old modules with inline styles. */
body.admin-crm-wide [id*="modal"],
body.admin-crm-wide [class*="modal"] {
  --admin-modal-surface: #101319;
  --admin-modal-field: #0b0e13;
}

body.admin-crm-wide [id*="modal"].fixed,
body.admin-crm-wide [id*="modal"][style*="position:fixed"],
body.admin-crm-wide [class*="modal-backdrop"],
body.admin-crm-wide .rules-gate {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(12px) !important;
}

body.admin-crm-wide [id*="modal"].fixed > div:first-child,
body.admin-crm-wide [id*="modal"][style*="position:fixed"] > div:first-child,
body.admin-crm-wide .admin-modal-panel,
body.admin-crm-wide .ds-modal,
body.admin-crm-wide .rules-card,
body.admin-crm-wide .ref-image-preview__panel {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--admin-modal-surface, #101319) !important;
  color: var(--ds-ink-1) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
}

body.admin-crm-wide [id*="modal"] h1,
body.admin-crm-wide [id*="modal"] h2,
body.admin-crm-wide [id*="modal"] h3,
body.admin-crm-wide [id*="modal"] h4,
body.admin-crm-wide [class*="modal"] h1,
body.admin-crm-wide [class*="modal"] h2,
body.admin-crm-wide [class*="modal"] h3,
body.admin-crm-wide [class*="modal"] h4 {
  color: var(--ds-ink-1) !important;
  letter-spacing: 0 !important;
}

body.admin-crm-wide [id*="modal"] input,
body.admin-crm-wide [id*="modal"] textarea,
body.admin-crm-wide [id*="modal"] select,
body.admin-crm-wide [class*="modal"] input,
body.admin-crm-wide [class*="modal"] textarea,
body.admin-crm-wide [class*="modal"] select {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--admin-modal-field, #0b0e13) !important;
  color: var(--ds-ink-1) !important;
  box-shadow: none !important;
}

body.admin-crm-wide [id*="modal"] button,
body.admin-crm-wide [class*="modal"] button {
  border-radius: 8px !important;
  border-color: var(--ds-border) !important;
  box-shadow: none !important;
}

body.admin-crm-wide [id*="modal"] button[class*="bg-blue"],
body.admin-crm-wide [id*="modal"] button[class*="bg-green"],
body.admin-crm-wide [id*="modal"] button[class*="bg-red"],
body.admin-crm-wide [id*="modal"] button[class*="bg-purple"],
body.admin-crm-wide [id*="modal"] button[class*="bg-emerald"],
body.admin-crm-wide [class*="modal"] button[class*="bg-blue"],
body.admin-crm-wide [class*="modal"] button[class*="bg-green"],
body.admin-crm-wide [class*="modal"] button[class*="bg-red"],
body.admin-crm-wide [class*="modal"] button[class*="bg-purple"],
body.admin-crm-wide [class*="modal"] button[class*="bg-emerald"] {
  background: rgba(83,252,24,.12) !important;
  border-color: rgba(83,252,24,.28) !important;
  color: var(--ds-accent-text) !important;
}

body.admin-crm-wide [id*="modal"] [class*="text-emerald"],
body.admin-crm-wide [id*="modal"] [class*="text-red"],
body.admin-crm-wide [id*="modal"] [class*="text-blue"],
body.admin-crm-wide [id*="modal"] [class*="text-purple"],
body.admin-crm-wide [id*="modal"] [class*="text-cyan"],
body.admin-crm-wide [id*="modal"] [class*="text-sky"],
body.admin-crm-wide [id*="modal"] [class*="text-orange"],
body.admin-crm-wide [id*="modal"] [class*="text-amber"],
body.admin-crm-wide [class*="modal"] [class*="text-emerald"],
body.admin-crm-wide [class*="modal"] [class*="text-red"],
body.admin-crm-wide [class*="modal"] [class*="text-blue"],
body.admin-crm-wide [class*="modal"] [class*="text-purple"],
body.admin-crm-wide [class*="modal"] [class*="text-cyan"],
body.admin-crm-wide [class*="modal"] [class*="text-sky"],
body.admin-crm-wide [class*="modal"] [class*="text-orange"],
body.admin-crm-wide [class*="modal"] [class*="text-amber"] {
  color: var(--ds-ink-2) !important;
}

body.admin-crm-wide [id*="modal"] [class*="bg-emerald"],
body.admin-crm-wide [id*="modal"] [class*="bg-red"],
body.admin-crm-wide [id*="modal"] [class*="bg-blue"],
body.admin-crm-wide [id*="modal"] [class*="bg-purple"],
body.admin-crm-wide [id*="modal"] [class*="bg-cyan"],
body.admin-crm-wide [id*="modal"] [class*="bg-sky"],
body.admin-crm-wide [id*="modal"] [class*="bg-orange"],
body.admin-crm-wide [id*="modal"] [class*="bg-amber"],
body.admin-crm-wide [class*="modal"] [class*="bg-emerald"],
body.admin-crm-wide [class*="modal"] [class*="bg-red"],
body.admin-crm-wide [class*="modal"] [class*="bg-blue"],
body.admin-crm-wide [class*="modal"] [class*="bg-purple"],
body.admin-crm-wide [class*="modal"] [class*="bg-cyan"],
body.admin-crm-wide [class*="modal"] [class*="bg-sky"],
body.admin-crm-wide [class*="modal"] [class*="bg-orange"],
body.admin-crm-wide [class*="modal"] [class*="bg-amber"] {
  background: rgba(255,255,255,.045) !important;
}

body.admin-crm-wide [id*="modal"] [class*="border-emerald"],
body.admin-crm-wide [id*="modal"] [class*="border-red"],
body.admin-crm-wide [id*="modal"] [class*="border-blue"],
body.admin-crm-wide [id*="modal"] [class*="border-purple"],
body.admin-crm-wide [id*="modal"] [class*="border-cyan"],
body.admin-crm-wide [id*="modal"] [class*="border-sky"],
body.admin-crm-wide [id*="modal"] [class*="border-orange"],
body.admin-crm-wide [id*="modal"] [class*="border-amber"],
body.admin-crm-wide [class*="modal"] [class*="border-emerald"],
body.admin-crm-wide [class*="modal"] [class*="border-red"],
body.admin-crm-wide [class*="modal"] [class*="border-blue"],
body.admin-crm-wide [class*="modal"] [class*="border-purple"],
body.admin-crm-wide [class*="modal"] [class*="border-cyan"],
body.admin-crm-wide [class*="modal"] [class*="border-sky"],
body.admin-crm-wide [class*="modal"] [class*="border-orange"],
body.admin-crm-wide [class*="modal"] [class*="border-amber"] {
  border-color: var(--ds-border) !important;
}

body.admin-crm-wide .rules-card__icon,
body.admin-crm-wide [id*="modal"] [style*="background:linear-gradient"],
body.admin-crm-wide [class*="modal"] [style*="background:linear-gradient"] {
  background: rgba(83,252,24,.10) !important;
  color: var(--ds-accent-text) !important;
  box-shadow: none !important;
}

body.admin-crm-wide .ds-admin button[style*="rgba(91,140,255"],
body.admin-crm-wide [id*="modal"] button[style*="rgba(91,140,255"],
body.admin-crm-wide [class*="modal"] button[style*="rgba(91,140,255"] {
  background: #0d1015 !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-ink-1) !important;
}

@media (max-width: 1100px) {
  .ds-admin-overview {
    grid-template-columns: 1fr;
  }
}

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

  body.admin-crm-wide .ds-admin__side {
    position: sticky;
    top: 0;
    z-index: 70;
    height: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--ds-border);
  }

  body.admin-crm-wide .ds-admin__brand {
    padding: 4px 4px 10px;
    min-height: 42px;
  }

  body.admin-crm-wide .ds-admin__nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.admin-crm-wide .ds-admin__nav::-webkit-scrollbar {
    display: none;
  }

  body.admin-crm-wide .ds-admin__nav-section,
  body.admin-crm-wide .ds-admin__user,
  body.admin-crm-wide .ds-admin__top-meta {
    display: none;
  }

  body.admin-crm-wide .ds-admin__nav-link {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.admin-crm-wide .ds-admin__top {
    position: relative;
    padding: 10px;
  }

  body.admin-crm-wide .ds-admin__search {
    max-width: none;
  }

  body.admin-crm-wide .ds-admin__content {
    padding: 14px;
  }

  .ds-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ds-admin-overview__copy {
    padding: 18px;
  }

  .ds-admin-overview__meta {
    grid-template-columns: 1fr;
  }

  .ds-admin-overview__metric,
  .ds-admin-overview__metric:nth-child(2n),
  .ds-admin-overview__metric:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--ds-divider);
  }

  .ds-admin-overview__metric:last-child {
    border-bottom: 0;
  }

  .ds-admin-board__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* ===== Unified public shell cleanup ===== */
.mkg-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  background: transparent;
  vertical-align: -0.18em;
}

.mkg-icon use {
  pointer-events: none;
}

.mkg-icon--solid {
  fill: currentColor;
  stroke: none;
}

.mkg-icon--admin {
  width: 18px;
  height: 18px;
}

.mkg-icon--spin {
  animation: mkg-icon-spin .9s linear infinite;
}

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

.mkg-icon--nav,
.mkg-icon--mobile {
  width: 20px;
  height: 20px;
}

body[data-ds="home"],
body:not(.admin-crm-wide):not(.is-404) {
  --ds-bg: #07080b;
  --ds-bg-1: #0b0d11;
  --ds-bg-2: #0e1117;
  --ds-elev-1: #101319;
  --ds-elev-2: #141820;
  --ds-elev-3: #171d25;
  --ds-border: rgba(255,255,255,.075);
  --ds-border-hi: rgba(255,255,255,.12);
  --ds-divider: rgba(255,255,255,.06);
  --ds-ink-1: #f5f3ee;
  --ds-ink-2: rgba(245,243,238,.72);
  --ds-ink-3: rgba(245,243,238,.52);
  --ds-ink-4: rgba(245,243,238,.34);
  --ds-accent: #53fc18;
  --ds-accent-soft: rgba(83,252,24,.12);
  --ds-accent-text: #b8ff8d;
  background: var(--ds-bg) !important;
  color: var(--ds-ink-1);
}

body:not(.admin-crm-wide):not(.is-404) .site-main,
body[data-ds="home"] .site-main {
  background: var(--ds-bg) !important;
  min-height: 100dvh;
}

body:not(.admin-crm-wide):not(.is-404) #app,
body[data-ds="home"] #app {
  color: var(--ds-ink-1);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
}

body:not(.admin-crm-wide):not(.is-404) .site-header,
body[data-ds="home"] .site-header {
  height: 58px !important;
  background: rgba(9, 11, 15, .92) !important;
  border-bottom: 1px solid var(--ds-divider) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

.site-header .route-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: rgba(83,252,24,.04);
  transition: opacity .16s ease;
}

.site-header .route-progress span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--route-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(83,252,24,.18), rgba(83,252,24,.96) 58%, rgba(190,255,170,.98));
  box-shadow: 0 0 16px rgba(83,252,24,.36);
  will-change: transform;
  transition: transform var(--route-progress-duration, 420ms) cubic-bezier(.16,1,.3,1);
}

.site-header .route-progress span::after {
  content: "";
  position: absolute;
  top: 0;
  right: -80px;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: route-progress-glint .9s linear infinite;
}

body.route-progress-active .site-header .route-progress {
  opacity: 1;
}

body.route-progress-done .site-header .route-progress {
  opacity: 0;
  transition-delay: .22s;
}

@keyframes route-progress-glint {
  from { transform: translateX(-120px); }
  to { transform: translateX(160px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .route-progress,
  .site-header .route-progress span {
    transition: none;
  }

  .site-header .route-progress span::after {
    animation: none;
    display: none;
  }
}

body:not(.admin-crm-wide):not(.is-404) .site-header__inner,
body[data-ds="home"] .site-header__inner {
  max-width: 1420px !important;
  padding: 0 24px !important;
  gap: 14px !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__logo-text,
body[data-ds="home"] .site-header__logo-text {
  color: var(--ds-ink-1) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__nav,
body[data-ds="home"] .site-header__nav {
  gap: 6px !important;
  margin: 0 10px !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link,
body[data-ds="home"] .site-header__link {
  height: 36px !important;
  padding: 0 13px !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ds-ink-3) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link i,
body[data-ds="home"] .site-header__link i,
body:not(.admin-crm-wide):not(.is-404) #more-nav-btn > i,
body[data-ds="home"] #more-nav-btn > i,
body:not(.admin-crm-wide):not(.is-404) .site-header__link .mkg-icon,
body[data-ds="home"] .site-header__link .mkg-icon,
body:not(.admin-crm-wide):not(.is-404) #more-nav-btn > .mkg-icon,
body[data-ds="home"] #more-nav-btn > .mkg-icon {
  display: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link span,
body[data-ds="home"] .site-header__link span,
body:not(.admin-crm-wide):not(.is-404) #more-nav-btn span,
body[data-ds="home"] #more-nav-btn span {
  display: inline !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link:hover,
body[data-ds="home"] .site-header__link:hover {
  color: var(--ds-ink-1) !important;
  background: rgba(255,255,255,.045) !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link.nav-active,
body:not(.admin-crm-wide):not(.is-404) .site-header__link.text-white,
body[data-ds="home"] .site-header__link.nav-active,
body[data-ds="home"] .site-header__link.text-white {
  color: var(--ds-ink-1) !important;
  background: rgba(255,255,255,.07) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__link--admin,
body[data-ds="home"] .site-header__link--admin {
  color: var(--ds-ink-3) !important;
}

body:not(.admin-crm-wide):not(.is-404) #more-nav-dd,
body[data-ds="home"] #more-nav-dd {
  width: 196px !important;
  padding: 6px !important;
  background: var(--ds-elev-1) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.48) !important;
}

body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .more-dd-item,
body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .dropdown-item,
body[data-ds="home"] #more-nav-dd .more-dd-item,
body[data-ds="home"] #more-nav-dd .dropdown-item {
  min-height: 36px !important;
  padding: 0 10px !important;
  gap: 0 !important;
  border-radius: 7px !important;
  color: var(--ds-ink-2) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .more-dd-item i,
body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .dropdown-item i,
body[data-ds="home"] #more-nav-dd .more-dd-item i,
body[data-ds="home"] #more-nav-dd .dropdown-item i,
body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .more-dd-item .mkg-icon,
body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .dropdown-item .mkg-icon,
body[data-ds="home"] #more-nav-dd .more-dd-item .mkg-icon,
body[data-ds="home"] #more-nav-dd .dropdown-item .mkg-icon {
  display: none !important;
}

body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .more-dd-item:hover,
body:not(.admin-crm-wide):not(.is-404) #more-nav-dd .dropdown-item:hover,
body[data-ds="home"] #more-nav-dd .more-dd-item:hover,
body[data-ds="home"] #more-nav-dd .dropdown-item:hover {
  background: rgba(255,255,255,.055) !important;
  color: var(--ds-ink-1) !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right,
body[data-ds="home"] .site-header__right {
  gap: 8px !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right .topchip,
body[data-ds="home"] .site-header__right .topchip,
body:not(.admin-crm-wide):not(.is-404) .site-header__right .icon-btn,
body[data-ds="home"] .site-header__right .icon-btn {
  height: 36px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-1) !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right .topchip:hover,
body[data-ds="home"] .site-header__right .topchip:hover,
body:not(.admin-crm-wide):not(.is-404) .site-header__right .icon-btn:hover,
body[data-ds="home"] .site-header__right .icon-btn:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--ds-border-hi) !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right .site-header__withdraw,
body[data-ds="home"] .site-header__right .site-header__withdraw {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(83,252,24,.28) !important;
  color: var(--ds-accent) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right .site-header__withdraw i,
body[data-ds="home"] .site-header__right .site-header__withdraw i,
body:not(.admin-crm-wide):not(.is-404) .site-header__right .site-header__withdraw .mkg-icon,
body[data-ds="home"] .site-header__right .site-header__withdraw .mkg-icon,
body:not(.admin-crm-wide):not(.is-404) .site-header__login .mkg-icon,
body[data-ds="home"] .site-header__login .mkg-icon {
  display: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .site-header__right .site-header__withdraw:hover,
body[data-ds="home"] .site-header__right .site-header__withdraw:hover {
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  color: #061a07 !important;
}

body:not(.admin-crm-wide):not(.is-404) .mobile-bottom-nav,
body[data-ds="home"] .mobile-bottom-nav {
  background: rgba(9,11,15,.94) !important;
  border-top: 1px solid var(--ds-divider) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

body:not(.admin-crm-wide):not(.is-404) .mobile-bottom-nav button,
body[data-ds="home"] .mobile-bottom-nav button {
  border-radius: 8px !important;
  color: var(--ds-ink-3) !important;
  letter-spacing: 0 !important;
}

body:not(.admin-crm-wide):not(.is-404) .mobile-bottom-nav button.mob-nav-active,
body:not(.admin-crm-wide):not(.is-404) .mobile-bottom-nav button.text-ios-accent,
body[data-ds="home"] .mobile-bottom-nav button.mob-nav-active,
body[data-ds="home"] .mobile-bottom-nav button.text-ios-accent {
  background: rgba(255,255,255,.06) !important;
  color: var(--ds-ink-1) !important;
}

body:not(.admin-crm-wide):not(.is-404) .card-glass,
body:not(.admin-crm-wide):not(.is-404) .glass,
body:not(.admin-crm-wide):not(.is-404) .dropdown-panel,
body:not(.admin-crm-wide):not(.is-404) .table-shell,
body:not(.admin-crm-wide):not(.is-404) .feature-card,
body:not(.admin-crm-wide):not(.is-404) .game-card-minimal,
body:not(.admin-crm-wide):not(.is-404) .project-card-minimal,
body:not(.admin-crm-wide):not(.is-404) .home-stream-card,
body:not(.admin-crm-wide):not(.is-404) .ds-card,
body:not(.admin-crm-wide):not(.is-404) .ds-project,
body:not(.admin-crm-wide):not(.is-404) .ds-raffle,
body:not(.admin-crm-wide):not(.is-404) .ds-form-card,
body:not(.admin-crm-wide):not(.is-404) .ds-cta-card,
body:not(.admin-crm-wide):not(.is-404) .ds-empty,
body[data-ds="home"] .card-glass,
body[data-ds="home"] .glass,
body[data-ds="home"] .dropdown-panel,
body[data-ds="home"] .table-shell,
body[data-ds="home"] .feature-card,
body[data-ds="home"] .game-card-minimal,
body[data-ds="home"] .project-card-minimal,
body[data-ds="home"] .home-stream-card,
body[data-ds="home"] .ds-card,
body[data-ds="home"] .ds-project,
body[data-ds="home"] .ds-raffle,
body[data-ds="home"] .ds-form-card,
body[data-ds="home"] .ds-cta-card,
body[data-ds="home"] .ds-empty {
  border-radius: 8px !important;
  border-color: var(--ds-border) !important;
  background: var(--ds-elev-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-card:hover,
body:not(.admin-crm-wide):not(.is-404) .ds-project:hover,
body:not(.admin-crm-wide):not(.is-404) .ds-raffle:hover,
body[data-ds="home"] .ds-card:hover,
body[data-ds="home"] .ds-project:hover,
body[data-ds="home"] .ds-raffle:hover {
  transform: translateY(-1px) !important;
  border-color: var(--ds-border-hi) !important;
  background: var(--ds-elev-2) !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-card__arrow,
body[data-ds="home"] .ds-card__arrow {
  color: var(--ds-ink-3) !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-game-card__new,
body[data-ds="home"] .ds-game-card__new,
body:not(.admin-crm-wide):not(.is-404) .ds-card__tag,
body[data-ds="home"] .ds-card__tag,
body:not(.admin-crm-wide):not(.is-404) .ds-raffle__badge,
body[data-ds="home"] .ds-raffle__badge,
body:not(.admin-crm-wide):not(.is-404) .ds-raffle-chip,
body[data-ds="home"] .ds-raffle-chip {
  border-radius: 8px !important;
  background: rgba(255,255,255,.045) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-btn,
body:not(.admin-crm-wide):not(.is-404) .btn-primary,
body:not(.admin-crm-wide):not(.is-404) .btn-secondary,
body[data-ds="home"] .ds-btn,
body[data-ds="home"] .btn-primary,
body[data-ds="home"] .btn-secondary {
  border-radius: 8px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-btn--primary,
body:not(.admin-crm-wide):not(.is-404) .btn-primary,
body[data-ds="home"] .ds-btn--primary,
body[data-ds="home"] .btn-primary {
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  color: #061a07 !important;
}

body:not(.admin-crm-wide):not(.is-404) .ds-btn--ghost,
body:not(.admin-crm-wide):not(.is-404) .btn-secondary,
body[data-ds="home"] .ds-btn--ghost,
body[data-ds="home"] .btn-secondary {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-1) !important;
}

.app-skeleton {
  --skel-border: rgba(255,255,255,.055);
  --skel-bg: rgba(255,255,255,.028);
  --skel-bg-strong: rgba(255,255,255,.048);
  --skel-glow: rgba(255,255,255,.032);
  --skel-sweep: rgba(0,0,0,.24);
  width: min(1280px, calc(100vw - 32px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 56px 0 92px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  animation: app-skeleton-in 180ms ease forwards;
  contain: layout paint;
}

body.admin-crm-wide .app-skeleton {
  width: 100%;
  max-width: none;
  padding: 22px;
}

.app-skeleton__head,
.app-skeleton__hero-copy,
.app-skeleton__admin-side,
.app-skeleton__admin-panel,
.app-skeleton__music-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-skeleton__shape,
.app-skeleton__line,
.app-skeleton__card,
.app-skeleton__panel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--skel-border);
  background:
    linear-gradient(135deg, var(--skel-bg-strong), var(--skel-bg));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.app-skeleton__shape::after,
.app-skeleton__line::after,
.app-skeleton__card::after,
.app-skeleton__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-140%);
  background:
    linear-gradient(90deg, transparent 0%, var(--skel-sweep) 46%, rgba(255,255,255,.038) 50%, var(--skel-sweep) 54%, transparent 100%);
  animation: app-skeleton-shimmer 1.55s cubic-bezier(.45,0,.25,1) infinite;
  will-change: transform;
}

.app-skeleton__line--hero { width: min(520px, 68vw); height: 76px; }
.app-skeleton__line--accent { width: min(430px, 58vw); height: 52px; }
.app-skeleton__line--title { width: min(340px, 56vw); height: 34px; }
.app-skeleton__line--page-title { width: min(290px, 58vw); height: 48px; }
.app-skeleton__line--section { width: 150px; height: 24px; }
.app-skeleton__line--body { width: min(500px, 70vw); height: 62px; }
.app-skeleton__line--text { width: min(260px, 58vw); height: 14px; opacity: .72; }
.app-skeleton__line--short { width: 64%; height: 20px; }
.app-skeleton__line--mini { width: 46%; height: 12px; opacity: .72; }
.app-skeleton__button { width: 150px; height: 44px; }
.app-skeleton__button--ghost { opacity: .62; }
.app-skeleton__pill { width: 54px; height: 28px; border-radius: 999px; margin-left: auto; }
.app-skeleton__icon { width: 42px; height: 42px; flex: 0 0 auto; }
.app-skeleton__icon--large { width: 58px; height: 58px; margin: 0 auto; }
.app-skeleton__panel { min-height: 260px; }

.app-skeleton__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.app-skeleton__feature-grid,
.app-skeleton__catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.app-skeleton__card {
  min-height: 170px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  background:
    radial-gradient(circle at 28% 20%, var(--skel-glow), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.018));
}

.app-skeleton__hero,
.app-skeleton__case-hero {
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  align-items: center;
  gap: 34px;
  padding: 56px;
  border-radius: 18px;
  border: 1px solid var(--skel-border);
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.032), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.014));
}

.app-skeleton__hero-media {
  min-height: 310px;
  border-radius: 18px;
}

.app-skeleton--project .app-skeleton__feature-grid,
.app-skeleton--home .app-skeleton__feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-skeleton__toolbar {
  min-height: 92px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid var(--skel-border);
  background: rgba(255,255,255,.025);
}

.app-skeleton--games,
.app-skeleton--shop,
.app-skeleton--raffles,
.app-skeleton--tasks {
  width: min(1120px, calc(100vw - 32px));
  padding-top: 58px;
}

.app-skeleton--games .app-skeleton__head,
.app-skeleton--raffles .app-skeleton__head {
  min-height: 52px;
  justify-content: flex-end;
}

.app-skeleton__section-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.app-skeleton__catalog--games {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.app-skeleton__game-card {
  min-height: 200px;
}

.app-skeleton__catalog--tasks,
.app-skeleton__catalog--raffles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-skeleton__task-card {
  min-height: 230px;
}

.app-skeleton__raffle-card {
  min-height: 220px;
}

.app-skeleton__toolbar--tasks {
  min-height: 124px;
}

.app-skeleton__row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-skeleton__row-item {
  min-height: 58px;
  border-radius: 8px;
}

.tasks-skeleton-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tasks-skeleton-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--skel-border, rgba(255,255,255,.075));
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.028), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}

.tasks-skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-140%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.24), rgba(255,255,255,.038), rgba(0,0,0,.24), transparent);
  animation: app-skeleton-shimmer 1.55s cubic-bezier(.45,0,.25,1) infinite;
}

.app-skeleton__catalog--cases .app-skeleton__card,
.app-skeleton__case-card {
  min-height: 250px;
}

.app-skeleton__case-hero {
  min-height: 300px;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1fr);
}

.app-skeleton__case-art {
  height: 190px;
  width: min(320px, 100%);
  justify-self: center;
}

.app-skeleton__reel {
  min-height: 170px;
  border-radius: 12px;
}

.app-skeleton__music-card,
.app-skeleton__queue {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--skel-border);
  background: rgba(255,255,255,.025);
}

.app-skeleton__player {
  min-height: 290px;
}

.app-skeleton__queue {
  min-height: 118px;
}

.app-skeleton__admin-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
}

.app-skeleton__admin-side,
.app-skeleton__admin-panel {
  min-height: 520px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--skel-border);
  background: rgba(255,255,255,.025);
}

.app-skeleton__table {
  min-height: 420px;
}

.app-skeleton__game-board {
  width: min(840px, 100%);
  min-height: min(620px, 64vh);
  margin: 0 auto;
  border-radius: 14px;
}

.app-skeleton__chat-grid {
  width: min(1180px, 100%);
  min-height: min(660px, calc(100vh - 190px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.05fr 1fr;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--skel-border);
  background: rgba(17,23,31,.86);
}

.app-skeleton__pane {
  min-height: 100%;
  padding: 22px;
  border-right: 1px solid var(--skel-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app-skeleton__pane:last-child {
  border-right: 0;
}

.app-skeleton__pane-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-skeleton__empty {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#rules-gate {
  display: none !important;
}

@keyframes app-skeleton-shimmer {
  100% { transform: translateX(140%); }
}

@keyframes app-skeleton-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#app.app-route-ready > * {
  animation: app-route-content-in 260ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes app-route-content-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

body:not(.admin-crm-wide) .ds-empty,
body:not(.admin-crm-wide) .cr-empty,
body:not(.admin-crm-wide) .adm-subs__loading,
body:not(.admin-crm-wide) .adm-subs__empty,
body:not(.admin-crm-wide) .tasks-loading,
body:not(.admin-crm-wide) .atk-slot-results__loading,
body:not(.admin-crm-wide) .atk-slot-results__empty {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--ds-ink-3) !important;
  box-shadow: none !important;
}

.ds-empty--error {
  border-color: rgba(255,85,102,.28) !important;
  background: rgba(255,85,102,.055) !important;
  color: #ff9aa6 !important;
}

body:not(.admin-crm-wide) .ds-modal-backdrop,
body:not(.admin-crm-wide) [id$="-modal"].fixed.inset-0,
body:not(.admin-crm-wide) .rules-gate,
body:not(.admin-crm-wide) .proof-modal,
body:not(.admin-crm-wide) .cr-modal,
body:not(.admin-crm-wide) .cr-pay-modal,
body:not(.admin-crm-wide) .cr-boost-modal,
body:not(.admin-crm-wide) .ref-image-modal {
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body:not(.admin-crm-wide) .proof-modal__backdrop,
body:not(.admin-crm-wide) .cr-modal__backdrop,
body:not(.admin-crm-wide) .cr-pay-modal__backdrop,
body:not(.admin-crm-wide) .cr-boost-modal__backdrop,
body:not(.admin-crm-wide) .ref-image-modal__backdrop,
body:not(.admin-crm-wide) .rules-backdrop {
  background: transparent !important;
}

body:not(.admin-crm-wide) .ds-modal,
body:not(.admin-crm-wide) [id$="-modal"].fixed.inset-0 > div:first-child:not([id$="-backdrop"]),
body:not(.admin-crm-wide) .rules-card,
body:not(.admin-crm-wide) .proof-modal__card,
body:not(.admin-crm-wide) .cr-modal__card,
body:not(.admin-crm-wide) .cr-pay-modal__card,
body:not(.admin-crm-wide) .cr-boost-modal__card,
body:not(.admin-crm-wide) .ref-image-modal__dialog,
body:not(.admin-crm-wide) #wm-panel {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-elev-1) !important;
  color: var(--ds-ink-1) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
}

body:not(.admin-crm-wide) .ds-modal input,
body:not(.admin-crm-wide) .ds-modal textarea,
body:not(.admin-crm-wide) .ds-modal select,
body:not(.admin-crm-wide) .rules-card input,
body:not(.admin-crm-wide) .rules-card textarea,
body:not(.admin-crm-wide) .rules-card select,
body:not(.admin-crm-wide) .proof-modal__input,
body:not(.admin-crm-wide) .cr-pay-modal input,
body:not(.admin-crm-wide) .cr-boost-modal input {
  border-radius: 8px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-bg-1) !important;
  color: var(--ds-ink-1) !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide) .proof-modal__slot,
body:not(.admin-crm-wide) .proof-modal__dropzone,
body:not(.admin-crm-wide) .cr-modal__msg,
body:not(.admin-crm-wide) .cr-modal__post-msg,
body:not(.admin-crm-wide) .cr-pay-modal__warn,
body:not(.admin-crm-wide) .cr-boost-modal__hint {
  border-radius: 8px !important;
  border-color: var(--ds-border) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide) .proof-modal__submit,
body:not(.admin-crm-wide) .cr-pay-modal__send,
body:not(.admin-crm-wide) .cr-boost-modal__save {
  border-radius: 8px !important;
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  color: #061a07 !important;
  box-shadow: none !important;
}

body:not(.admin-crm-wide) .proof-modal__close,
body:not(.admin-crm-wide) .proof-modal__cancel,
body:not(.admin-crm-wide) .cr-modal__close,
body:not(.admin-crm-wide) .cr-pay-modal__close,
body:not(.admin-crm-wide) .cr-pay-modal__cancel,
body:not(.admin-crm-wide) .cr-boost-modal__close,
body:not(.admin-crm-wide) .cr-boost-modal__cancel,
body:not(.admin-crm-wide) .ds-modal__close {
  border-radius: 8px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-ink-2) !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  body:not(.admin-crm-wide):not(.is-404) .site-header__link,
  body[data-ds="home"] .site-header__link {
    padding: 0 10px !important;
  }

  .app-skeleton__hero,
  .app-skeleton__case-hero {
    grid-template-columns: 1fr;
  }

  .app-skeleton__chat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-skeleton__pane:nth-child(2) {
    border-right: 0;
  }

  .app-skeleton__pane:nth-child(-n + 2) {
    border-bottom: 1px solid var(--skel-border);
  }
}

@media (max-width: 768px) {
  body:not(.admin-crm-wide):not(.is-404) .site-header,
  body[data-ds="home"] .site-header {
    height: 52px !important;
  }

  body:not(.admin-crm-wide):not(.is-404) .site-header__inner,
  body[data-ds="home"] .site-header__inner {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  body:not(.admin-crm-wide):not(.is-404) .site-main,
  body[data-ds="home"] .site-main {
    padding-top: 52px !important;
  }

  .app-skeleton {
    width: calc(100vw - 24px);
    padding-top: 18px;
    padding-bottom: 92px;
  }

  .app-skeleton__hero,
  .app-skeleton__case-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 22px;
  }

  .app-skeleton__hero-media {
    min-height: 220px;
  }

  .app-skeleton__feature-grid,
  .app-skeleton__catalog,
  .app-skeleton__catalog--games,
  .app-skeleton__catalog--tasks,
  .app-skeleton__catalog--raffles,
  .tasks-skeleton-grid,
  .app-skeleton__admin-grid,
  .app-skeleton__chat-grid {
    grid-template-columns: 1fr;
  }

  .app-skeleton__pane {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--skel-border);
  }

  .app-skeleton__pane:last-child {
    border-bottom: 0;
  }

  .app-skeleton__admin-side,
  .app-skeleton__admin-panel {
    min-height: 260px;
  }
}

body.music-popup-mode {
  background: #06090e !important;
  overflow: hidden !important;
}

body.music-popup-mode .site-header,
body.music-popup-mode .mobile-bottom-nav,
body.music-popup-mode #chat-fab,
body.music-popup-mode #chat-panel,
body.music-popup-mode footer,
body.music-popup-mode .ds-ambient,
body.music-popup-mode .ds-noise {
  display: none !important;
}

body.music-popup-mode .site-main {
  min-height: 100dvh !important;
  padding-top: 0 !important;
}

body.music-popup-mode .site-main__scroll {
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.music-popup-mode #app {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════
   PREMIUM MICRO-ANIMATIONS & INTERACTIVE MOTION SYSTEM
   ══════════════════════════════════════════════════════ */

/* 1. Spring-like active tactile press feedback for all primary buttons */
.ds-btn:active, 
.btn-primary:active, 
.btn-secondary:active, 
.ds-admin__top-btn:active,
.mobile-bottom-nav button:active,
.ds-module-card:active {
  transform: scale(0.965) translateY(0.5px) !important;
  transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. Decoupled smooth transition for hover state scaling/elevating cards */
.ds-act, 
.raffle-card, 
.shop-card, 
.ds-module-card, 
.glass-card, 
.game-card, 
.ds-streamer,
.ds-pillar {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.28s ease, 
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Elegant float elevation on hover with high-contrast soft gold-emerald mesh shadows */
.ds-act:hover, 
.raffle-card:hover, 
.shop-card:hover, 
.ds-module-card:hover, 
.glass-card:hover, 
.game-card:hover,
.ds-pillar:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(83, 252, 24, 0.24) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 
              0 0 24px rgba(83, 252, 24, 0.04) !important;
}

/* Elegant custom hover for streamer card specifically */
.ds-streamer:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Hypnotic slow-pulsing animation for online/active badges (Smooth Pulse) */
.ds-live:not(.ds-live--off), 
.ds-streamer__live:not(.ds-streamer__live--off),
.status-badge.status-active {
  animation: mkg-premium-live-pulse 1.6s ease-in-out infinite alternate-reverse !important;
}

@keyframes mkg-premium-live-pulse {
  0% {
    opacity: 0.68;
    transform: scale(0.97);
    filter: brightness(0.9) drop-shadow(0 0 2px rgba(83, 252, 24, 0.1));
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(83, 252, 24, 0.3));
  }
}

/* 4. Spring focus & bounce transitions for inputs, checkbox toggles, and select dropdowns */
input[type="checkbox"], 
input[type="radio"], 
input[type="text"], 
input[type="number"], 
select, 
textarea {
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

input[type="text"]:focus, 
input[type="number"]:focus, 
select:focus, 
textarea:focus {
  border-color: rgba(83, 252, 24, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(83, 252, 24, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.01) !important;
}

/* 5. Minimalist, premium hardware-accelerated scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.12) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 99px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
  transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(83, 252, 24, 0.32) !important;
}