:root{
  --bg0:#0e0d13;        /* фон */
  --bg1:#14121d;        /* карточки */
  --ink:#e9e7f3;
  --muted:#a7a4b8;
  --brand:#8b5cf6;
  --brand2:#ffd166;
  --ring:rgba(139,92,246,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg0);
  -webkit-font-smoothing:antialiased;
}

/* Фоновая подсветка */
.bg{
  position:fixed; inset:-20%;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(800px 400px at 90% 30%, rgba(255,209,102,.18), transparent 55%);
  pointer-events:none;
  filter:blur(20px);
}

/* Контейнер */
.container{ max-width:1100px; margin:0 auto; padding:24px env(safe-area-inset-right) 48px env(safe-area-inset-left) }

/* Хедер/герой */
.hero{ position:relative; padding:calc(28px + env(safe-area-inset-top)) 0 16px }
.hero__content{ display:flex; align-items:center; gap:18px }
.hero__logo{ width:96px; height:96px; filter:drop-shadow(0 12px 28px rgba(139,92,246,.35)); transform:translateZ(0) }
.hero__text h1{ font-size:clamp(30px,5vw,56px); margin:0 }
.subtitle{ margin:4px 0 0; color:var(--muted) }
.hero__actions{ display:flex; justify-content:center; width:100% }

/* Кнопки */
.btn{
  background:linear-gradient(135deg,var(--brand),#6d28d9);
  color:#fff; border:none; border-radius:14px;
  padding:12px 18px; font-weight:800; cursor:pointer;
  transition:.2s transform,.2s box-shadow;
  box-shadow:0 12px 26px rgba(109,40,217,.35);
}
.btn:active{ transform:translateY(1px) }
.btn:focus{ outline:3px solid var(--ring); outline-offset:2px }

/* Карточки */
.card{
  background:rgba(255,255,255,.04);
  backdrop-filter:saturate(140%) blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.25);
  padding:20px; margin:16px 0;
}
.card h2{ margin:0 0 14px; font-size:22px }
.card--glass{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)) }
.card--emph{
  display:flex; justify-content:center; align-items:center; min-height:120px;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(255,209,102,.12));
}
.center{ text-align:center; font-weight:800; font-size:20px }

/* Галерея */
.gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px }
@media (max-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:600px){ .gallery{ grid-template-columns:repeat(2,1fr) } }

.gallery__item{
  display:block; padding:0; border:0; background:#000;
  border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  cursor:pointer; transform:translateZ(0);
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.gallery__item:focus{ outline:3px solid var(--ring); outline-offset:2px }
.gallery__item img{
  display:block; width:100%; height:190px; object-fit:cover; transition:transform .45s ease;
}
.gallery__item:hover img{ transform:scale(1.06) }
@media (max-width:600px){ .gallery__item img{ height:160px } }

/* Поздравления */
.greet-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.greet-item{ padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.03) }
.greet-head{ display:flex; justify-content:flex-start; gap:8px; align-items:baseline }
.greet-time{ margin-left:auto; color:var(--muted); font-size:12px }
.greet-msg{
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 18px;     
  line-height: 1.6;
}
.greet-empty{ color:var(--muted) }
.greet-sign{
  margin-top:8px; color:var(--muted); font-size:12px; font-style:italic; text-align:right;
}

/* Анимация свистка */
.whistle{ animation:wh .9s cubic-bezier(.36,.07,.19,.97) both }
@keyframes wh{
  10%,90%{ transform:translate3d(-1px,0,0) rotate(-3deg) }
  20%,80%{ transform:translate3d(2px,0,0) rotate(3deg) }
  30%,50%,70%{ transform:translate3d(-3px,0,0) rotate(-4deg) }
  40%,60%{ transform:translate3d(3px,0,0) rotate(4deg) }
}

/* Конфетти */
.confetti{ position:relative; height:4px; background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:999px }

/* Футер */
.footer{ padding:28px 0 48px; color:var(--muted) }

/* Блокировка прокрутки при модалке */
body.no-scroll{ overflow:hidden }

/* Лайтбокс */
.lightbox{
  position:fixed; inset:0; display:none; z-index:1000;
  align-items:center; justify-content:center; padding:24px;
  overscroll-behavior:contain; touch-action:none;
}
.lightbox--open{ display:flex }
.lightbox__backdrop{
  position:absolute; inset:0; background:rgba(14,13,19,.85);
  backdrop-filter:blur(2px);
}
.lightbox__body{
  position:relative; z-index:1; margin:0; max-width:96vw; max-height:90vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__img{
  max-width:min(96vw,1100px); max-height:90vh; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.45); background:#000;
}
.lightbox__close{
  position:absolute; top:-12px; right:-12px; width:42px; height:42px;
  border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12); color:#fff; font-size:28px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* Предпочтение: меньше движения */
@media (prefers-reduced-motion: reduce){
  .btn, .gallery__item img{ transition:none }
  .whistle{ animation:none }
}