[hidden] {
  display: none !important;
}

/* ─── Экран блокировки вне Telegram ─── */
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 99999; /* Поверх абсолютно всего */
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.lock-card {
  background: linear-gradient(180deg, rgba(16, 28, 51, 0.95), rgba(5, 9, 18, 0.95));
  border: 1px solid rgba(79, 174, 255, 0.25);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 20px 56px rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
}

.lock-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: lock-pulse 2s infinite ease-in-out;
}

.lock-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  color: #f4f8ff;
}

.lock-card p {
  margin: 0 0 14px;
  font-size: 14px;
  color: #a6b5ce;
  line-height: 1.45;
}

.lock-card .lock-sub {
  margin: 0;
  font-size: 12px;
  color: #159cff;
}

@keyframes lock-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

:root {
  color-scheme: dark;
  --bg: #000000;
  --card: rgba(10, 17, 31, .82);
  --card2: rgba(17, 27, 48, .94);
  --line: rgba(79, 174, 255, .25);
  --text: #f4f8ff;
  --muted: #a6b5ce;
  --blue: #159cff;
  --blue2: #56d7ff;
  --red: #ff3158;
  --green: #25e29b;
  --gold: #ffd36c;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  background: #000000;
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars i {
  position: absolute;
  width: 2px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.92), transparent);
  animation: fall linear infinite;
}
.stars i:nth-child(1){left:9%;animation-duration:4.2s;animation-delay:-1s}
.stars i:nth-child(2){left:28%;animation-duration:5.6s;animation-delay:-3s}
.stars i:nth-child(3){left:52%;animation-duration:4.8s;animation-delay:-2s}
.stars i:nth-child(4){left:75%;animation-duration:6.4s;animation-delay:-4s}
.stars i:nth-child(5){left:91%;animation-duration:5.2s;animation-delay:-.5s}
@keyframes fall { from { transform: translate3d(0,-12vh,0) rotate(18deg); } to { transform: translate3d(-34px,112vh,0) rotate(18deg); } }

.app {
  width: min(100vw, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px 96px;
}
.admin-app { padding-bottom: 28px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo, .avatar, .icon {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1ec4ff, #084bd6);
  color: white;
  box-shadow: 0 14px 30px rgba(21, 156, 255, .3);
}
.logo { width: 44px; height: 44px; border-radius: 14px; }
.brand h1 { margin: 0; font-size: 18px; line-height: 1; letter-spacing: 0; }
.brand p, .muted { color: var(--muted); }
.brand p { margin: 5px 0 0; font-size: 12px; }

.balance {
  min-width: 96px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(5, 10, 18, .72);
  text-align: right;
}
.balance b { display: block; color: var(--gold); font-size: 18px; }
.balance span { display: block; color: var(--muted); font-size: 11px; }
.admin-top-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(21,156,255,.16);
  color: white;
  font-weight: 850;
}
.admin-top-button[hidden] { display: none; }

.panel, .task, .reward, .stat, .admin-block {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 28, 51, .86), rgba(5, 9, 18, .86));
  box-shadow: 0 20px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.panel { border-radius: var(--radius); padding: 16px; }
.view { display: none; animation: rise .28s ease both; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 4px 10px; }
.section-title h2 { margin: 0; font-size: 16px; letter-spacing: 0; }
.section-title span { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ── Roulette panel ── */
.roulette-panel { position: relative; overflow: hidden; }
.roulette-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.roulette-header h2 { margin: 0; font-size: 17px; }
.spin-status { font-size: 12px; color: var(--blue2); font-weight: 700; }

/* ── Wheel ── */
.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(82vw, 320px);
  aspect-ratio: 1;
  margin: 0 auto 18px;
  filter: drop-shadow(0 20px 48px rgba(21,156,255,.28));
}
.wheel-pointer {
  position: absolute;
  top: -4px;
  z-index: 20; /* Было 10, ставим 20, чтобы быть выше маски */
  font-size: 22px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 12px rgba(86,215,255,.9), 0 2px 8px rgba(0,0,0,.7);
  animation: pointer-pulse 2s ease-in-out infinite;
}
@keyframes pointer-pulse {
  0%,100% { text-shadow: 0 0 12px rgba(86,215,255,.9), 0 2px 8px rgba(0,0,0,.7); }
  50%      { text-shadow: 0 0 22px rgba(86,215,255,1), 0 0 40px rgba(86,215,255,.6), 0 2px 8px rgba(0,0,0,.7); }
}
.wheel-rotor {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  /* ─── ЖЕСТКАЯ ГРАФИЧЕСКАЯ МАСКА ─── */
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);

  transform-origin: 50% 50%;
  transition: transform 7s cubic-bezier(.05, .8, .06, 1);
}
.wheel-rotor.spinning { transform: rotate(var(--spin-rotation, 1440deg)); }

/* Coloured segments via conic-gradient */
.wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  /* 1. Делаем плотную одноцветную обводку под цвет фона панели */
  border: 8px solid #101c33;

  /* 2. Прижимаем градиенты строго внутрь (padding-box), чтобы они не лезли под рамку */
  background:
    repeating-conic-gradient(from -30deg,
      rgba(255,255,255,.10) 0deg 1deg,
      transparent 1deg 60deg) padding-box,
    conic-gradient(from -30deg,
      #1a6fff  0deg  60deg,
      #9b30ff  60deg 120deg,
      #ff3a6e  120deg 180deg,
      #ff9b00  180deg 240deg,
      #00c98a  240deg 300deg,
      #00baff  300deg 360deg) padding-box;

  /* 3. Оставляем только тени для сохранения объема */
  box-shadow:
    0 0 0 3px rgba(255,255,255,.08),
    inset 0 0 60px rgba(0,0,0,.45);

  /* Хак для принудительного сглаживания текстур на GPU */
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Dividers between sectors */
.wheel::after {
  content: '';
  position: absolute;
  inset: 1px; /* Сжимаем на 1px внутрь, чтобы убрать цветные артефакты на краях */
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -30deg,
    rgba(255,255,255,.35) 0deg 0.7deg,
    transparent 0.7deg 60deg
  );
}

#slots { position: absolute; inset: 0; border-radius: 50%; }
.slot {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 80px; height: 58px;
  margin: -29px 0 0 -40px;
  color: white; text-align: center;
  background: transparent; border: 0; box-shadow: none;
}
.slot-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 80px; height: 58px;
  transition: transform 7s cubic-bezier(.05,.8,.06,1);
}
.slot img {
  width: 32px; height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
.slot small {
  display: block; width: 78px;
  color: #fff; font-size: 8px; line-height: 1.1; font-weight: 900;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.slot:nth-of-type(1){ transform: translate(0, -106px) rotate(0deg); }
.slot:nth-of-type(2){ transform: translate(92px, -53px) rotate(60deg); }
.slot:nth-of-type(3){ transform: translate(92px,  53px) rotate(120deg); }
.slot:nth-of-type(4){ transform: translate(0,  106px) rotate(180deg); }
.slot:nth-of-type(5){ transform: translate(-92px,  53px) rotate(240deg); }
.slot:nth-of-type(6){ transform: translate(-92px, -53px) rotate(300deg); }

/* Centre hub */
.center {
  position: absolute; left: 50%; top: 50%;
  z-index: 20;
  display: grid; place-items: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #b8e4ff 30%, #2178ff 65%, #0932b0 100%);
  box-shadow: 0 0 0 5px rgba(255,255,255,.15), 0 8px 24px rgba(21,156,255,.5);
  color: #06285b;
  transform: translate(-50%, -50%);
}
/* outer ring glow */
.wheel-glow {
  position: absolute;
  inset: -3px; /* Слегка выходит за границы колеса */
  z-index: 5;  /* Кладём ПОВЕРХ вращающегося .wheel-rotor */
  border-radius: 50%;
  /* Рисуем жирную темную рамку в цвет фона панели, которая перекроет стыки */
  border: 4px solid #101c33;
  /* Возвращаем ваше красивое внешнее свечение через shadow */
  box-shadow:
    0 0 40px 8px rgba(86,215,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.15); /* Внутренний тонкий блик для красоты */
  pointer-events: none;
}

.spin-btn { margin-top: 0; }

/* ── Prize overlay ── */
.prize-overlay {
  position: fixed; /* Меняем с absolute на fixed, чтобы окно не зависело от прокрутки страницы */
  inset: 0;        /* Растягиваем на весь экран */
  z-index: 1000;   /* Поднимаем выше основного контента и навигации */
  background: rgba(4, 8, 18, 0.95); /* Плотный темный фон в стиле вашего приложения */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Выравниваем плашку по верхнему краю, а не по центру */
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* На случай очень маленьких экранов */
}
.prize-overlay[hidden] { display: none; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.prize-overlay-inner {
  position: relative;
  background: linear-gradient(180deg, rgba(16, 28, 51, 0.98), rgba(8, 14, 28, 0.98));
  border: 1px solid rgba(79, 174, 255, 0.2);
  border-radius: 24px;
  padding: 32px 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  margin-top: 50px; /* Аккуратный отступ сверху, чтобы плашка не прилипала к статус-бару */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  animation: slideDownFromTop 0.3s ease-out; /* Плавное и красивое появление сверху */
}
@keyframes pop-in {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.prize-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px; }
.prize-big-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 16px;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.prize-overlay-inner h2 {
  margin: 0; font-size: 20px; text-align: center;
  background: linear-gradient(135deg, #fff 30%, #56d7ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.prize-sub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 24px;
}
/* Красивая анимация вылета плашки сверху */
@keyframes slideDownFromTop {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Confetti pieces */
.cp {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: cp-fall 1.4s ease-in forwards;
}
@keyframes cp-fall {
  0%   { transform: translate(var(--sx), var(--sy)) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) rotate(720deg); opacity: 0; }
}

/* ── Countdown ── */
.countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; padding-top: 4px; }
.countdown-ring { position: relative; width: 130px; height: 130px; }
.countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.ring-fg {
  fill: none;
  stroke: var(--blue2);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .9s linear;
}
.countdown-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.countdown-inner b    { font-size: 19px; color: var(--blue2); font-variant-numeric: tabular-nums; }
.countdown-inner span { font-size: 9px; color: var(--muted); margin-top: 2px; }
.countdown-hint { max-width: 260px; margin: 0; }

.primary, .danger, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 18px;
  color: white;
  font-weight: 850;
  transition: transform .16s ease, filter .16s ease;
}
.primary { background: linear-gradient(135deg, #39d1ff, #1768ff 54%, #1232d4); box-shadow: 0 14px 30px rgba(23, 104, 255, .34); }
.danger { background: linear-gradient(135deg, #ff4a69, #be1f42); box-shadow: 0 14px 30px rgba(255, 49, 88, .28); }
.ghost { background: rgba(255,255,255,.08); border: 1px solid var(--line); }
button:active, .task:active, .reward:active { transform: scale(.985); filter: brightness(1.06); }
button[disabled] { cursor: default; background: linear-gradient(135deg, #26344f, #152033); color: #95a5c0; box-shadow: none; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.42; text-align: center; }
.result { display: none; margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px solid rgba(46,229,157,.3); background: rgba(46,229,157,.12); }
.result.show { display: block; }
.result b { display: block; color: #e8fff5; margin-bottom: 5px; }
.result p { margin: 0; color: #c3f8df; font-size: 13px; line-height: 1.35; }

.list { display: grid; gap: 10px; }
.task, .reward { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 12px; border-radius: 18px; transition: border-color .16s ease, background .16s ease; }
.task:hover, .reward:hover { border-color: rgba(86,215,255,.55); background: rgba(17,31,54,.9); }
.icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(21,156,255,.14); box-shadow: none; color: var(--blue2); }
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.item-head h3 { margin: 1px 0 5px; font-size: 14px; line-height: 1.18; }
.item p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.chip { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: rgba(21,156,255,.14); color: #c4ebff; font-size: 11px; font-weight: 850; }
.progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress i { display: block; width: var(--value, 30%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--green)); }
.mini-action { min-height: 44px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.08); color: white; font-weight: 800; }
.empty { padding: 24px 16px; text-align: center; color: var(--muted); line-height: 1.44; }

.user { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.avatar { width: 58px; height: 58px; border-radius: 20px; font-size: 24px; font-weight: 950; }
.avatar.has-photo {
  background-size: cover;
  background-position: center;
  color: transparent;
}
.user h2 { margin: 0 0 5px; font-size: 18px; }
.user p { margin: 0; color: var(--muted); font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.stat { padding: 12px; border-radius: 18px; }
.stat b { display: block; font-size: 20px; }
.stat span { color: var(--muted); font-size: 11px; }

.nav {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  width: min(calc(100vw - 28px), 402px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(5, 10, 19, .88);
  box-shadow: 0 20px 56px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.tab { display: grid; place-items: center; gap: 4px; min-height: 58px; border-radius: 18px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.tab.active { background: linear-gradient(135deg, rgba(21,156,255,.28), rgba(86,215,255,.12)); color: white; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 30;
  width: min(calc(100vw - 28px), 402px);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(86,215,255,.3);
  background: rgba(6,13,24,.96);
  box-shadow: 0 20px 56px rgba(0,0,0,.45);
  color: white;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.admin-grid { display: grid; gap: 12px; }
.admin-block { border-radius: 20px; padding: 14px; }
.admin-block h2 { margin: 0 0 12px; font-size: 17px; }
.form { display: grid; gap: 9px; }
.form input, .form select, .form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  color: white;
  padding: 0 12px;
  outline: none;
}
.form textarea { min-height: 92px; padding-top: 12px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-list { display: grid; gap: 8px; margin-top: 12px; }
.admin-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.06); }
.admin-item p { margin: 0; font-size: 13px; }
.admin-item small { color: var(--muted); }
.admin-item button { width: auto; min-height: 38px; padding: 8px 10px; border-radius: 12px; }

@media (max-width: 350px) {
  .app { padding-inline: 10px; }
  .panel { padding: 14px; }
  .slot {
    width: 70px;
    height: 52px;
    margin: -26px 0 0 -35px;
  }
  .slot-content { width: 70px; height: 52px; }
  .slot img { width: 28px; height: 28px; }
  .slot small { width: 68px; font-size: 7.5px; }
  .slot:nth-of-type(1){ transform: translate(0, -92px) rotate(0deg); }
  .slot:nth-of-type(2){ transform: translate(80px, -46px) rotate(60deg); }
  .slot:nth-of-type(3){ transform: translate(80px,  46px) rotate(120deg); }
  .slot:nth-of-type(4){ transform: translate(0,  92px) rotate(180deg); }
  .slot:nth-of-type(5){ transform: translate(-80px,  46px) rotate(240deg); }
  .slot:nth-of-type(6){ transform: translate(-80px, -46px) rotate(300deg); }
}

/* ═══════════════ ADDITIONS ═══════════════ */

/* More falling stars */
.stars i:nth-child(6){left:38%;animation-duration:5.0s;animation-delay:-2.5s}
.stars i:nth-child(7){left:62%;animation-duration:4.5s;animation-delay:-1.5s}
.stars i:nth-child(8){left:84%;animation-duration:6.0s;animation-delay:-3.5s}

/* Icon wrap (image-based) */
.icon-wrap {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30,196,255,.22), rgba(8,75,214,.22));
  border: 1px solid rgba(86,215,255,.18);
  flex-shrink: 0;
}
.icon-wrap img { width: 28px; height: 28px; object-fit: contain; }

/* Chips by category */
.chip-stars   { background: rgba(255,211,108,.15); color: #ffd36c; }
.chip-premium { background: rgba(21,156,255,.15);  color: #56d7ff; }
.chip-gift    { background: rgba(37,226,155,.15);  color: #25e29b; }
.chip-profile { background: rgba(21,156,255,.15);  color: #56d7ff; }

/* Countdown ring */
.countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14px; }
.countdown-ring { position: relative; width: 140px; height: 140px; }
.countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.ring-fg {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.countdown-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.countdown-inner b  { font-size: 20px; color: var(--blue2); font-variant-numeric: tabular-nums; }
.countdown-inner span { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* Spin loading animation */
@keyframes spin-rotate { to { transform: rotate(360deg); } }
.spin-anim { animation: spin-rotate .7s linear infinite; }

/* Result prize */
.result-prize { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; }
.result-img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(86,215,255,.35)); }

/* Full width button */
.full-btn { width: 100%; }

/* Top rank button */
.top-rank-btn {
  margin-left: auto;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255,211,108,.14);
  color: #ffd36c;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,211,108,.25);
  white-space: nowrap;
}
.top-rank-btn:active { transform: scale(.97); }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 14px 20px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: 100%; max-width: 430px;
  padding: 22px 18px 18px;
  border-radius: 26px 26px 22px 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12,22,42,.98), rgba(4,8,18,.98));
  box-shadow: 0 -20px 60px rgba(0,0,0,.5);
  animation: rise .22s ease both;
}
.modal-body { color: var(--text); }
.modal-rank { text-align: center; }
.modal-rank .rank-trophy { font-size: 56px; }
.modal-rank h2 { margin: 10px 0 8px; font-size: 20px; }
.modal-rank p  { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* Withdraw panel */
.withdraw-panel { background: rgba(255,49,88,.06); border-color: rgba(255,49,88,.2); }
.withdraw-hint b { color: var(--text); }

/* Toast types */
.toast-success { border-color: rgba(37,226,155,.4); }
.toast-error   { border-color: rgba(255,49,88,.4); }

/* Task URL */
.task-url { font-size: 11px !important; color: var(--blue2) !important; word-break: break-all; }

/* Confetti */
.confetti-piece {
  position: fixed;
  top: -10px;
  z-index: 999;
  pointer-events: none;
  animation: confetti-fall ease-in both;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) scale(.5); opacity: 0; }
}

/* SVG ring gradient def */
body::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
}

#withdrawHint {
  text-align: left;
  margin-top: 0;
  margin-bottom: 20px; /* Создает комфортное расстояние до инпута */
}