/* ===================== Base ===================== */
:root{
  --bg-0:#f6f7fb;
  --bg-grad-a:#eef0ff;
  --bg-grad-b:#fafaff;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#ececf7;
  --card:#ffffff;
  --shadow-1:0 10px 30px rgba(20,20,60,.10);
  --shadow-2:0 16px 40px rgba(20,20,60,.16);
  --r-xs:10px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* ===================== Survey background ===================== */
.survey-bg{
  min-height:100vh;
  display:flex;                 /* центрируем карточку */
  align-items:center;
  justify-content:center;
  padding:6vh 16px;
  background:#f6f7ff;
  position:relative;
}
.survey-bg:before{
  content:"";
  position:fixed; inset:0;      /* фиксируем к окну */
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--bg-grad-a), transparent 60%),
    radial-gradient(800px 500px at -10% 20%, var(--bg-grad-b), transparent 55%);
  pointer-events:none;
}
.survey-bg:after{
  /* мягкая сетка */
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(transparent 31px, rgba(99,102,241,.08) 32px),
    linear-gradient(90deg, transparent 31px, rgba(99,102,241,.08) 32px);
  background-size:32px 32px;
  mask-image: radial-gradient(1000px 600px at 50% 12%, rgba(0,0,0,.7), transparent 80%);
  pointer-events:none;
}

/* ===================== Admin background ===================== */
.admin-bg{ background:var(--bg-0); }

/* ===================== Containers / Common ===================== */
.container{ max-width:1040px; margin:0 auto; padding:24px 20px; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ font-weight:700; color:var(--text); text-decoration:none; }

.note{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:10px 12px; margin:10px 0;
  box-shadow:var(--shadow-1);
}

/* ===================== Survey card ===================== */
.container-card{
  width:min(720px, 92vw);
  margin:0;                         /* центр даёт flex-контейнер body */
  background:var(--card);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-2);
  padding:28px 28px 26px;
}
.container-card h1{
  margin:8px 0 6px;
  font-size:clamp(20px, 2.3vw, 28px);
  line-height:1.2;
  text-align:center;
}

.container-card h3{
  margin:14px 0 6px;
  font-size:clamp(16px, 2.3vw, 20px);
  line-height:1.2;
  text-align:center;
}
.lead-muted{ color:var(--muted); text-align:center; }

.container-card .text-center img{
  display:block; margin:0 auto 8px; max-height:80px;
}

/* ===================== Emoji row ===================== */
.rate-row{
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin:18px auto 6px; max-width:560px;
}
.emoji-pill{
  background:rgba(99,102,241,.08);
  border:2px solid rgba(99,102,241,.15);
  width:78px; height:74px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 18px rgba(99,102,241,.10) inset;
  user-select:none; cursor:pointer;
}
.emoji-pill:hover{ transform:translateY(-2px); background:rgba(99,102,241,.12); }
.emoji-pill:active{ transform:translateY(0); }


/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:12px;
  border:1px solid #dfe1f6; background:#eef1ff; color:#2d2f7a;
  text-decoration:none; cursor:pointer;
  transition:box-shadow .12s ease, transform .06s ease, background .12s ease;
}
.btn:hover{ box-shadow:0 6px 16px rgba(20,20,60,.12); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:#ffbcbc; border-color:#e6e8f8; }
.btn.primary{
  border:none; color:#fff;
  background:linear-gradient(180deg,#6a6ff5,#4f57f0 60%,#4047d9);
  box-shadow:0 8px 18px rgba(79,70,229,.30), inset 0 1px 0 rgba(255,255,255,.35);
}

/* крупная CTA в опросе */
.survey-bg .container-card .btn{
  height:52px; padding:0 22px; border-radius:14px; font-weight:600;
}

/* ===================== Cards / Tables (admin) ===================== */
.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px; margin:12px 0;
}
.table .thead,.table .trow{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:12px; padding:12px 10px; align-items:center;
}
.table .thead{ font-weight:700; background:#f3f5ff; border-radius:12px; }
.table .trow{ border-bottom:1px solid var(--line); }

/* ===================== Forms ===================== */
input[ty]()
/* --- ЖЁСТКОЕ ЦЕНТРИРОВАНИЕ КАРТОЧКИ ОПРОСА --- */
body.survey-bg{
  min-height:100vh;
  margin:0;
  background:#f6f7ff;
}

/* карточка всегда ровно по центру вьюпорта */
body.survey-bg .container-card{
  position: fixed;              /* отталкиваемся от окна, а не от контейнеров */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;         /* гасим любые внешние отступы */
  width: min(720px, 92vw);
  z-index: 1;
}

/* фоновые слои фиксируем к окну, чтобы не "уезжали" */
body.survey-bg:before,
body.survey-bg:after{
  position: fixed;
}

/* логотип и ряд смайликов — центр в любом случае */
body.survey-bg .text-center,
body.survey-bg .rate-row{
  display:flex;
  align-items:center;
  justify-content:center;
}
body.survey-bg .text-center img{
  display:block;
  margin:0 auto 8px;
}

/* На маленьких высотах и очень узких экранах — отключаем fixed,
   чтобы карточка могла прокручиваться и не обрезалась */
@media (max-height: 700px), (max-width: 380px){
  body.survey-bg .container-card{
    position: static;
    transform: none;
    margin: 6vh auto !important;
    width: min(720px, 96vw);
  }
}
.center-block{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}