/* Диапазоны символов — как у Google Fonts. ₽ лежит в latin-ext. */
@font-face{
   font-family: "Golos Text";
   src: url("/static/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2");
   font-weight: 400 900;
   font-display: swap;
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
   font-family: "Golos Text";
   src: url("/static/fonts/golos-text-latin-wght-normal.woff2") format("woff2");
   font-weight: 400 900;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
   font-family: "Golos Text";
   src: url("/static/fonts/golos-text-latin-ext-wght-normal.woff2") format("woff2");
   font-weight: 400 900;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
   font-family: "Unbounded";
   src: url("/static/fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2");
   font-weight: 200 900;
   font-display: swap;
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
   font-family: "Unbounded";
   src: url("/static/fonts/unbounded-latin-wght-normal.woff2") format("woff2");
   font-weight: 200 900;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
   font-family: "Unbounded";
   src: url("/static/fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2");
   font-weight: 200 900;
   font-display: swap;
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
   font-family: "JetBrains Mono";
   src: url("/static/fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2");
   font-weight: 100 800;
   font-display: swap;
   unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
   font-family: "JetBrains Mono";
   src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
   font-weight: 100 800;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
   --navy: #0A1A30;
   --bg: #F3F5F9;
   --white: #FFFFFF;
   --ink: #0A1A30;
   --text: #4D5866;
   --muted: #5A6472;
   --line: #DDE2EA;
   --line-soft: #E3E7EE;
   --blue: #2459A6;
   --blue-soft: #E6EEF9;
   --sky: #B9C7DA;
   --sky-2: #9FB3CC;
   --gold: #F7D774;
   --gold-ink: #2A1E05;
   --gold-soft: #FBF6E8;
   --gold-line: #E2C97E;
   --gold-brown: #6B5320;
   --red: #7A1A12;
   --red-soft: #FDECEC;
   --red-line: #F3C3C3;
   --green: #1F6B40;
   --green-soft: #E6F2EA;

   --gold-grad: linear-gradient(110deg, #A8741C 0%, #E9B949 14%, #FFF1BE 28%, #F7D774 40%, #C38A22 55%, #F2CE6B 70%, #FFF3C4 84%, #B8862B 100%);
   --gold-text: linear-gradient(110deg, #C9952F 0%, #F7D774 20%, #FFF6D6 35%, #E9B949 50%, #B8862B 65%, #F7D774 82%, #FFF3C4 100%);
   --display: "Unbounded", "Golos Text", system-ui, sans-serif;
   --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
   --control: 4.8rem; /* высота кнопок и полей: удобно попасть пальцем */
   --gutter: max(1.6rem, env(safe-area-inset-left));
}

*, *::before, *::after{
   box-sizing: border-box;
}

html{
   font-size: 62.5%; /* 1rem = 10px */
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body{
   margin: 0;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 1.6rem;
   line-height: 1.5;
   overflow-wrap: break-word;
   color: var(--ink);
   background: var(--bg);
}

main{
   flex: 1 0 auto;
   min-width: 0;
   overflow-x: clip; /* анимации на старте не должны расширять страницу на телефоне */
}

p, button, input, select, textarea, optgroup{
   font: inherit;
}

p{
   margin: 0;
}

h1, h2, h3{
   margin: 0;
   line-height: 1.12;
}

h1, h2{
   font-family: var(--display);
   font-weight: 800;
   letter-spacing: -0.02em;
   text-wrap: balance;
}

h1{ font-size: clamp(2.8rem, 2.4rem + 1.2vw, 3.2rem); }
h2{ font-size: clamp(2rem, 1.8rem + 0.6vw, 2.4rem); }
h3{ font-size: 1.8rem; font-weight: 700; }

a{
   color: var(--blue);
   text-underline-offset: 0.2em;
}

@media (hover: hover){
   a:hover{ color: var(--ink); }
}

ul, ol{
   margin: 0;
   padding: 0;
   list-style: none;
}

img, svg{
   display: block;
}

.icon{
   width: 2rem;
   height: 2rem;
   flex: none;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

:focus-visible{
   outline: 2px solid var(--blue);
   outline-offset: 2px;
}

.mono{ font-family: var(--mono); font-weight: 700; }
.muted{ color: var(--muted); }
.small{ font-size: 1.4rem; }
.tiny{ font-size: 1.3rem; }
.email{ overflow-wrap: anywhere; }
.eyebrow{
   font-size: 1.4rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--blue);
}

/* ЗОЛОТО И СТЕКЛО */
@keyframes goldshift{ 0%{ background-position: 0% 50%; } 100%{ background-position: 200% 50%; } }
@keyframes glow{
   0%, 100%{ box-shadow: 0 0 0 0 rgba(247, 215, 116, 0), 0 10px 30px rgba(233, 185, 73, 0.35); }
   50%{ box-shadow: 0 0 0 8px rgba(247, 215, 116, 0.12), 0 14px 44px rgba(233, 185, 73, 0.55); }
}
@keyframes floatA{
   0%, 100%{ transform: perspective(900px) rotateY(-14deg) rotateX(8deg) rotate(-6deg) translateY(0); }
   50%{ transform: perspective(900px) rotateY(-6deg) rotateX(4deg) rotate(-4deg) translateY(-18px); }
}
@keyframes floatB{ 0%, 100%{ transform: rotate(8deg) translateY(0); } 50%{ transform: rotate(11deg) translateY(12px); } }
@keyframes orb{ 0%, 100%{ transform: translate(0, 0) scale(1); } 50%{ transform: translate(40px, -30px) scale(1.15); } }
@keyframes fall{
   0%{ transform: translateY(-60px) rotate(0deg); opacity: 0; }
   8%{ opacity: 1; }
   100%{ transform: translateY(860px) rotate(620deg); opacity: 0.85; }
}
@keyframes rise{
   from{ opacity: 0; transform: translateY(28px); filter: blur(6px); }
   to{ opacity: 1; transform: none; filter: none; }
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes blink{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.25; } }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@keyframes stamp{
   0%{ transform: scale(2.6) rotate(-24deg); opacity: 0; }
   55%{ transform: scale(0.92) rotate(-11deg); opacity: 1; }
   75%{ transform: scale(1.04) rotate(-12deg); }
   100%{ transform: scale(1) rotate(-12deg); opacity: 1; }
}
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes sheetIn{ from{ opacity: 0; transform: translateY(40px) scale(0.97); } to{ opacity: 1; transform: none; } }
@keyframes step{ from{ opacity: 0; transform: translateX(24px); } to{ opacity: 1; transform: none; } }

.gold{
   background-image: var(--gold-grad);
   background-size: 200% 100%;
   color: var(--gold-ink);
   animation: goldshift 7s linear infinite;
}

.gold-text{
   background-image: var(--gold-text);
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: goldshift 6s linear infinite;
}

.gold-line{
   border: 1px solid transparent;
   background: linear-gradient(#0F2440, #0F2440) padding-box, linear-gradient(120deg, #8A5F16, #F7D774, #FFF3C4, #C38A22, #F7D774) border-box;
}

.glass{
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
}

.glow{
   animation: glow 2.8s ease-in-out infinite, goldshift 7s linear infinite;
}

.rise{ animation: rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise-2{ animation: rise 1s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise-3{ animation: rise 1s 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@media (hover: hover){
   .lift{
      transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
   }
   .lift:hover{
      transform: translateY(-6px);
      box-shadow: 0 24px 50px rgba(10, 26, 48, 0.14);
   }
}

/* КНОПКИ */
button, .btn{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   min-height: var(--control);
   padding: 0.6rem 2rem;
   border: 1.5px solid #CDD4DF;
   border-radius: 1.4rem;
   background: var(--white);
   color: var(--ink);
   font-weight: 600;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button.primary, .btn.primary{
   border: 0;
   padding: 0.6rem 2.4rem;
   background-image: var(--gold-grad);
   background-size: 200% 100%;
   color: var(--gold-ink);
   font-weight: 700;
   animation: goldshift 7s linear infinite;
}

button.dark, .btn.dark{
   border: 0;
   background: var(--navy);
   color: var(--white);
}

.btn.glass, button.glass{
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.06);
   color: var(--white);
}

.btn.big, button.big{
   min-height: 5.6rem;
   border-radius: 1.6rem;
   font-size: 1.7rem;
}

button.small, .btn.small{
   font-size: 1.4rem;
}

@media (hover: hover){
   button:hover, .btn:hover{
      transform: translateY(-2px);
      filter: brightness(1.05);
      color: var(--ink);
   }
   button.primary:hover, .btn.primary:hover{ color: var(--gold-ink); }
   button.dark:hover, .btn.dark:hover, .btn.glass:hover, button.glass:hover{ color: var(--white); }
}

button:active, .btn:active{
   transform: scale(0.98);
}

/* Пока htmx ждёт ответ, повторно отправить нельзя. */
.htmx-request button[type="submit"], button.htmx-request{
   opacity: 0.6;
   pointer-events: none;
}

.actions{
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

/* ПОЛЯ */
.field{
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   font-size: 1.4rem;
   font-weight: 600;
}

.hint{
   font-weight: 400;
   color: var(--muted);
}

input:not([type="checkbox"], [type="radio"]), select{
   width: 100%;
   min-width: 0;
   min-height: 5rem;
   padding: 0.8rem 1.4rem;
   border: 1.5px solid var(--line);
   border-radius: 1.2rem;
   background: var(--white);
   color: var(--ink);
   font-size: 1.6rem; /* меньше 16px iOS приближает страницу при фокусе */
   font-weight: 400;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="date"]{
   appearance: none;
   -webkit-appearance: none;
}

input::placeholder{
   color: #7A8492;
}

input:not([type="checkbox"], [type="radio"]):focus, select:focus{
   outline: none;
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(36, 89, 166, 0.15);
}

input.mono{
   font-family: var(--mono);
   font-weight: 500;
}

.check{
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   font-size: 1.4rem;
   line-height: 1.45;
   color: var(--text);
   cursor: pointer;
}

.check input{
   flex: none;
   width: 2rem;
   height: 2rem;
   margin: 0.1rem 0 0;
   accent-color: #C38A22;
}

.checks{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   padding: 1.6rem;
   border: 1px solid var(--line-soft);
   border-radius: 1.6rem;
   background: var(--white);
}

/* Код из письма: настоящее поле прозрачно и лежит поверх шести клеток. */
.code-wrap{
   position: relative;
}

.code-boxes{
   display: none;
}

.js .code-boxes{
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 0.8rem;
   pointer-events: none;
}

.code-boxes span{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 6.2rem;
   border: 2px solid var(--line);
   border-radius: 1.4rem;
   background: var(--white);
   font-family: var(--mono);
   font-size: 2.6rem;
   font-weight: 700;
}

.code-boxes span.filled{ border-color: #C9D2DF; }
.code-boxes span.active{
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(36, 89, 166, 0.15);
}

input.code{
   font-family: var(--mono);
   font-size: 2.6rem;
   font-weight: 700;
   letter-spacing: 0.3em;
   text-align: center;
}

.js input.code{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   font-size: 1.6rem;
   cursor: text;
}

/* СТАТУСЫ */
.error{
   color: var(--red);
   font-size: 1.4rem;
}

.ok{
   color: var(--green);
   font-size: 1.4rem;
}

.field + .error, .check + .error{
   margin-top: -0.6rem;
}

.notice{
   padding: 1.2rem 1.4rem;
   border-radius: 1.2rem;
   overflow-wrap: anywhere; /* в сообщении может быть длинная почта */
}

.notice.ok{ background: var(--green-soft); font-weight: 500; }
.notice.error{ background: var(--red-soft); }

.badge{
   display: inline-flex;
   align-self: flex-start;
   align-items: center;
   padding: 0.3rem 1rem;
   border-radius: 99rem;
   background: #EDF0F5;
   color: var(--text);
   font-size: 1.2rem;
   font-weight: 600;
}

.badge.ok{ background: var(--green-soft); color: var(--green); }
.badge.prize{
   border-radius: 0.8rem;
   background: var(--gold-grad);
   background-size: 200% 100%;
   color: var(--gold-ink);
   font-weight: 700;
}

.spinner{
   width: 3.2rem;
   height: 3.2rem;
   border: 3px solid var(--line);
   border-top-color: #C38A22;
   border-radius: 50%;
   animation: spin 0.9s linear infinite;
}

.toast{
   position: fixed;
   left: 50%;
   bottom: max(2rem, env(safe-area-inset-bottom));
   z-index: 70;
   width: min(44rem, 100% - 3.2rem);
   padding: 1.4rem 1.6rem;
   border-radius: 1.4rem;
   background: var(--navy);
   color: var(--white);
   font-size: 1.5rem;
   transform: translateX(-50%);
   box-shadow: 0 16px 40px rgba(10, 26, 48, 0.35);
}

.toast[hidden]{
   display: none;
}

/* КАРТОЧКА */
.card{
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   min-width: 0;
   padding: clamp(2rem, 1.6rem + 1vw, 2.6rem);
   border-radius: 2.4rem;
   background: var(--white);
}

.card > form, form.stack{
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
}

.narrow{
   width: min(48rem, 100% - 3.2rem);
   margin: clamp(2.4rem, 2rem + 3vw, 5.6rem) auto;
}

/* ШАПКА */
.header{
   position: relative;
   z-index: 20;
   background: var(--navy);
   color: var(--white);
}

/* На страницах с тёмным первым экраном шапка лежит поверх него. */
body:has(.hero) .header{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background: none;
}

body:has(.auth) .header{
   display: none;
}

.header-row{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   max-width: 124rem;
   margin-inline: auto;
   padding: 1.2rem var(--gutter);
}

.logo{
   display: flex;
   align-items: center;
   gap: 1rem;
   min-height: var(--control);
   color: var(--white);
   font-family: var(--display);
   font-size: 1.5rem;
   font-weight: 700;
   text-decoration: none;
}

@media (hover: hover){
   .logo:hover{ color: var(--white); }
}

.logo img{
   width: 3.8rem;
   height: 3.8rem;
   padding: 0.3rem;
   border-radius: 1rem;
   background: var(--white);
}

.org-tag{
   display: none;
   padding: 0.4rem 1rem;
   border-radius: 0.8rem;
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.06em;
}

.logo-side{
   display: flex;
   align-items: center;
   gap: 1.2rem;
   min-width: 0;
}

.header-actions{
   display: flex;
   align-items: center;
   gap: 0.8rem;
}

.nav{
   display: none;
}

.nav.open{
   position: absolute;
   top: calc(100% + 0.4rem);
   left: 1.2rem;
   right: 1.2rem;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   padding: 0.8rem;
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 1.8rem;
   background: rgba(15, 36, 64, 0.98);
   box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

.nav a{
   padding: 1.2rem 1.4rem;
   border-radius: 1.2rem;
   color: #D6E0EE;
   font-size: 1.7rem;
   font-weight: 600;
   text-decoration: none;
}

@media (hover: hover){
   .nav a:hover{ color: var(--white); background: rgba(255, 255, 255, 0.08); }
}

.nav-cta{
   min-height: 4.4rem;
   padding: 0.6rem 1.8rem;
   border: 0;
   border-radius: 99rem;
   font-size: 1.5rem;
}

.nav-out{
   min-height: 4.4rem;
   padding: 0.6rem 1.8rem;
   border: 0;
   border-radius: 99rem;
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
   font-size: 1.5rem;
   font-weight: 500;
}

@media (hover: hover){
   .nav-out:hover{ color: var(--white); }
}

.nav-toggle{
   width: 4.4rem;
   min-height: 4.4rem;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 1.2rem;
   background: rgba(255, 255, 255, 0.08);
   color: var(--white);
}

@media (hover: hover){
   .nav-toggle:hover{ color: var(--white); }
}

/* ПЕРВЫЙ ЭКРАН */
.hero{
   position: relative;
   overflow: hidden;
   background: var(--navy);
   color: var(--white);
}

.hero-bg{
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
}

.grid-lines{
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: 56px 56px;
}

.orb-blue, .orb-gold{
   position: absolute;
   border-radius: 50%;
   animation: orb 14s ease-in-out infinite;
}

.orb-blue{
   width: 62rem;
   height: 62rem;
   right: -12rem;
   top: -16rem;
   background: radial-gradient(circle, rgba(43, 108, 184, 0.75) 0%, rgba(43, 108, 184, 0) 65%);
}

.orb-gold{
   width: 48rem;
   height: 48rem;
   left: -16rem;
   bottom: -22rem;
   background: radial-gradient(circle, rgba(233, 185, 73, 0.28) 0%, rgba(233, 185, 73, 0) 65%);
   animation-delay: -6s;
}

.confetti{
   position: absolute;
   top: 0;
   animation: fall linear infinite;
}

.hero-inner{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 3.2rem 5.6rem;
   max-width: 124rem;
   margin-inline: auto;
   padding: 8.8rem var(--gutter) 3.2rem;
}

.hero-text{
   flex: 999 1 54rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.pill{
   display: inline-flex;
   align-self: flex-start;
   align-items: center;
   gap: 1rem;
   padding: 0.8rem 1.6rem 0.8rem 1.2rem;
   border-radius: 99rem;
   font-size: 1.4rem;
   font-weight: 500;
   color: #D6E0EE;
}

.pill i{
   width: 0.8rem;
   height: 0.8rem;
   border-radius: 50%;
   background: var(--gold);
   box-shadow: 0 0 12px var(--gold);
   animation: blink 1.2s steps(1) infinite;
}

.hero h1.display{
   font-size: clamp(3.4rem, 2.2rem + 3.4vw, 6.4rem);
   line-height: 1.02;
   letter-spacing: -0.03em;
}

.hero-lead{
   max-width: 56rem;
   font-size: clamp(1.6rem, 1.5rem + 0.4vw, 1.9rem);
   line-height: 1.55;
   color: var(--sky);
}

.hero-cta{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.2rem;
}

.hero-cta .btn{
   min-height: 5.8rem;
   padding: 0.6rem 3rem;
   border-radius: 1.6rem;
   font-size: 1.8rem;
}

.hero-cta .btn.glass{
   padding: 0.6rem 2.4rem;
   font-size: 1.7rem;
}

.hero-price{
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.4rem 1.2rem;
   margin: 0;
}
.hero-price b{
   font-family: var(--display);
   font-size: clamp(3.6rem, 6vw, 4.8rem);
   font-weight: 800;
   line-height: 1;
}
.hero-price span{
   font-size: 1.5rem;
   color: var(--sky-2);
}

.hero-note{
   font-size: 1.4rem;
   color: #8EA2BC;
}

.closed-note{
   align-self: flex-start;
   padding: 1.2rem 1.6rem;
   border-radius: 1.4rem;
   background: rgba(255, 255, 255, 0.1);
   font-weight: 500;
}

.timer-box{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1.4rem;
   border-radius: 1.8rem;
}

.timer-box > p{
   font-size: 1.3rem;
   line-height: 1.35;
   color: var(--sky-2);
}

.timer{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0.6rem;
}

.timer > div{
   padding: 1rem 0.4rem 0.8rem;
   border-radius: 1.2rem;
   background: rgba(255, 255, 255, 0.06);
   text-align: center;
}

.timer b{
   display: block;
   font-family: var(--mono);
   font-size: 2.6rem;
   font-weight: 700;
   line-height: 1;
}

.timer span{
   display: block;
   margin-top: 0.4rem;
   font-size: 1.2rem;
   color: var(--sky-2);
}

.hero-art{
   position: relative;
   flex: 1 1 42rem;
   min-width: 0;
   height: 21rem;
}

.ticket-art{
   position: absolute;
   top: 0.6rem;
   left: 0;
   display: flex;
   width: min(36rem, 100%);
   height: 18rem;
   border-radius: 2.2rem;
   color: var(--white);
   box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
   animation: floatA 7s ease-in-out infinite;
}

.ticket-art-body{
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 1.6rem 1.4rem 1.4rem 1.8rem;
}

.ticket-art-head{
   display: flex;
   align-items: center;
   gap: 1rem;
}

.ticket-art-head img{
   width: 3.2rem;
   height: 3.2rem;
   padding: 0.2rem;
   border-radius: 0.9rem;
   background: var(--white);
}

.ticket-art-title{
   font-family: var(--display);
   font-size: 1.3rem;
   font-weight: 700;
}

.ticket-art-org, .ticket-art-label{
   font-size: 1.1rem;
   color: var(--sky-2);
}

.ticket-art-label{
   letter-spacing: 0.12em;
   text-transform: uppercase;
}

.ticket-art-code{
   font-family: var(--mono);
   font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.4rem);
   font-weight: 700;
   letter-spacing: 0.02em;
}

.ticket-art-tags{
   display: flex;
   gap: 0.6rem;
}

.ticket-art-tags span{
   padding: 0.4rem 0.8rem;
   border-radius: 0.7rem;
   background: rgba(255, 255, 255, 0.1);
   font-size: 1.1rem;
   font-weight: 600;
}

.ticket-art-stub{
   position: relative;
   flex: none;
   width: 9rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
   border-left: 2px dashed rgba(42, 30, 5, 0.35);
   border-radius: 0 2.1rem 2.1rem 0;
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: 0.1em;
}

.ticket-art-stub b{
   font-family: var(--display);
   font-size: 3.2rem;
   font-weight: 800;
   line-height: 1;
   letter-spacing: 0;
}

.ticket-art-stub::before, .ticket-art-stub::after{
   content: "";
   position: absolute;
   left: -1.4rem;
   width: 2.6rem;
   height: 2.6rem;
   border-radius: 50%;
   background: var(--navy);
}

.ticket-art-stub::before{ top: -1.3rem; }
.ticket-art-stub::after{ bottom: -1.3rem; }

.ticket-ghost, .ring{
   display: none;
}

.marquee-box{
   position: relative;
   overflow: hidden;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.marquee{
   display: flex;
   width: max-content;
   gap: 4.4rem;
   padding: 1.8rem 0;
   font-family: var(--display);
   font-size: 1.5rem;
   font-weight: 500;
   white-space: nowrap;
   color: #8EA2BC;
   animation: marquee 34s linear infinite;
}

/* РАЗДЕЛЫ ГЛАВНОЙ */
.section{
   max-width: 124rem;
   margin-inline: auto;
   padding: clamp(3.2rem, 2rem + 4vw, 5.6rem) var(--gutter) 1rem;
   scroll-margin-top: 1rem;
}

.section:first-of-type{
   padding-top: clamp(4rem, 2rem + 6vw, 9.6rem);
}

.section:last-of-type{
   padding-bottom: clamp(4rem, 2rem + 5vw, 9.6rem);
}

.section h2{
   font-size: clamp(2.6rem, 2rem + 2.2vw, 4.6rem);
   line-height: 1.1;
}

.section-head{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.2rem 1.6rem;
   margin-bottom: 2.4rem;
}

.section-head p:not(.eyebrow){
   max-width: 40rem;
   color: var(--text);
}

.section-head .eyebrow{
   margin-bottom: 1.2rem;
}

.equation{
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 1.2rem;
}

.eq-card{
   min-width: 0;
   display: flex;
   flex-direction: column;
   padding: 2rem;
   border-radius: 2.4rem;
}

.eq-buy{
   flex: 1 1 100%;
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
   gap: 1.6rem;
   background: var(--navy);
   color: var(--white);
}

.eq-buy span{ font-size: 1.4rem; color: var(--sky-2); }
.eq-buy b{ font-family: var(--display); font-size: 2.6rem; font-weight: 800; line-height: 1.05; }

.eq-sign{
   flex: 1 1 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--display);
   font-size: 2.8rem;
   font-weight: 800;
   line-height: 1;
   color: var(--blue);
}

.eq-bonus{
   flex: 1 1 100%;
   gap: 1.6rem;
   background: var(--white);
}

.eq-title{
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: 0.4rem 1.2rem;
}

.eq-title b{ font-family: var(--display); font-size: 2rem; font-weight: 700; }
.eq-title span{ font-size: 1.4rem; color: var(--muted); }

.perks{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   gap: 1rem;
}

.perks li{
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
   padding: 1.6rem;
   border: 1px solid var(--line-soft);
   border-radius: 1.6rem;
   background: var(--bg);
}

.perks b{ font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--blue); }
.perks strong{ font-weight: 700; }
.perks span{ font-size: 1.3rem; color: var(--muted); }

.eq-draw{
   flex: 1 1 100%;
   justify-content: space-between;
   gap: 2rem;
}

.eq-draw > span{ font-size: 1.4rem; font-weight: 600; }
.eq-draw b{ display: block; font-family: var(--display); font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.eq-draw small{ display: block; margin-top: 0.8rem; font-size: 1.4rem; font-weight: 500; }

.section-note{
   margin-top: 2rem;
   color: var(--text);
}

.partners{
   display: flex;
   gap: 1.2rem;
   margin-inline: calc(var(--gutter) * -1);
   padding: 0 var(--gutter) 0.6rem;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-padding-left: var(--gutter);
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.partners::-webkit-scrollbar{ display: none; }

.partner{
   flex: 0 0 min(30rem, 84%);
   scroll-snap-align: start;
   display: flex;
   flex-direction: column;
   gap: 1.8rem;
   padding: 2.4rem;
   border-radius: 2.4rem;
   background: var(--white);
}

.partner-head{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
}

.partner-logo{
   width: 6.4rem;
   height: 6.4rem;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.8rem;
   background: var(--blue-soft);
   color: var(--blue);
}

.partner-logo .icon{
   width: 3rem;
   height: 3rem;
}

.partner-badge{
   padding: 0.8rem 1.4rem;
   border-radius: 1.2rem;
   font-family: var(--display);
   font-size: 1.8rem;
   font-weight: 800;
}

.partner-badge.plain{
   background: var(--blue-soft);
   color: var(--blue);
}

.partner-text{
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.partner-text span{ font-size: 1.3rem; color: var(--muted); }
.partner-text h3{ font-size: 2rem; }
.partner-text p{ font-size: 1.5rem; line-height: 1.5; color: var(--text); }

.partner-where{
   display: flex;
   gap: 0.8rem;
   margin-top: auto;
   padding-top: 1.6rem;
   border-top: 1px dashed var(--line);
   font-size: 1.4rem;
   color: var(--text);
   overflow-wrap: anywhere;
}

.partner-where .icon{ width: 1.6rem; height: 1.6rem; margin-top: 0.3rem; }

.partner-join{
   justify-content: center;
   gap: 1rem;
   border: 2px dashed #CDD4DF;
   background: none;
}

.partner-join h3{ font-family: var(--display); }
.partner-join p{ font-size: 1.5rem; color: var(--text); }
.partner-join a{ font-size: 1.5rem; font-weight: 600; }

.swipe-hint{
   font-size: 1.3rem;
   color: var(--muted);
}

.how{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
   gap: 1.6rem;
}

.how li{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   padding: 2.4rem;
   border-radius: 2.4rem;
   background: var(--white);
}

.how span{ font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.how h3{ font-size: 2.1rem; }
.how p{ color: var(--text); }

.bento{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
}

.bento-main{
   grid-column: 1 / -1;
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 2.4rem;
   background: var(--navy);
   color: var(--white);
}

.bento-main::before{
   content: "";
   position: absolute;
   width: 38rem;
   height: 38rem;
   right: -8rem;
   top: -8rem;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(233, 185, 73, 0.35), rgba(233, 185, 73, 0) 65%);
}

/* Главный приз в переливающейся золотой рамке: кольцо из золотого градиента (маска оставляет
   только полосу по краю), блик бежит по кругу; плюс мягкое золотое свечение вокруг карточки. */
.bento-main{
   box-shadow: 0 0 0 1px rgba(247, 215, 116, 0.5), 0 0 28px rgba(247, 215, 116, 0.32), 0 18px 50px rgba(226, 181, 74, 0.25);
   animation: prizeglow 6s ease-in-out infinite;
}

@keyframes prizeglow{
   0%, 100%{ box-shadow: 0 0 0 1px rgba(247, 215, 116, 0.5), 0 0 22px rgba(247, 215, 116, 0.25), 0 18px 50px rgba(226, 181, 74, 0.22); }
   50%{ box-shadow: 0 0 0 1px rgba(247, 215, 116, 0.7), 0 0 40px rgba(247, 215, 116, 0.45), 0 18px 50px rgba(226, 181, 74, 0.3); }
}

.bento-main::after{
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   padding: 4px;
   border-radius: inherit;
   background: var(--gold-grad);
   background-size: 200% 100%;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   animation: goldshift 6s linear infinite;
   pointer-events: none;
}

.prize-pic{
   position: relative;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 11rem;
   margin: 1rem 1rem 0;
   border-radius: 1.4rem;
   background: var(--blue-soft);
   color: var(--blue);
}

.prize-pic .icon{
   width: 4.8rem;
   height: 4.8rem;
   stroke-width: 1.2;
}

.bento-main .prize-pic{
   min-height: 18rem;
   margin: 1.4rem 1.4rem 0;
   border-radius: 1.8rem;
   background: rgba(255, 255, 255, 0.06);
   color: var(--gold);
}

.bento-main .prize-pic .icon{
   width: 9.6rem;
   height: 9.6rem;
}

.bento-text{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 2rem 2.2rem 2.4rem;
}

.prize-flag{
   align-self: flex-start;
   padding: 0.6rem 1.2rem;
   border-radius: 0.8rem;
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.08em;
}

.bento-text h3{
   font-family: var(--display);
   font-size: clamp(2.2rem, 2rem + 0.8vw, 2.8rem);
   line-height: 1.15;
}

.bento-text p{
   font-size: 1.5rem;
   color: var(--sky);
}

.prize-card{
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 2rem;
   background: var(--white);
}

/* Иерархия призов: главный — широкая золотая рамка со свечением (выше), следующий — золотая рамка тоньше,
   остальные — серебряная. Блик по рамке бежит тем же циклом в 6 секунд. */
.prize-card.tier-gold::after, .prize-card.tier-silver::after{
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   border-radius: inherit;
   background-size: 200% 100%;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   animation: goldshift 6s linear infinite;
   pointer-events: none;
}

.prize-card.tier-gold{ box-shadow: 0 10px 30px rgba(226, 181, 74, 0.22); }
.prize-card.tier-gold::after{ padding: 3px; background-image: var(--gold-grad); }

.prize-card.tier-silver{ box-shadow: 0 8px 24px rgba(120, 136, 152, 0.16); }
.prize-card.tier-silver::after{
   padding: 2px;
   background-image: linear-gradient(110deg, #8C98A5 0%, #C9D2DB 18%, #FFFFFF 32%, #AEB9C4 48%, #7E8A97 62%, #D8DFE6 80%, #9AA6B2 100%);
}

.prize-card h3{
   padding: 1.2rem 1.4rem 1.6rem;
   font-size: 1.5rem;
}

/* «И это ещё не всё!» — сувениры. Светлая карточка с золотыми акцентами: заметно, но скромнее главного приза. */
.more-prizes{
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin-top: 1.2rem;
   padding: 2.4rem 2rem;
   border-radius: 2.4rem;
   background: linear-gradient(135deg, var(--white) 40%, var(--gold-soft));
}

.more-prizes::before{
   content: "";
   position: absolute;
   width: 30rem;
   height: 30rem;
   right: -10rem;
   top: -14rem;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(247, 215, 116, 0.35), rgba(247, 215, 116, 0) 65%);
   pointer-events: none;
}

.more-head{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.more-kicker{
   display: flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 1.3rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--gold-brown);
}

.more-kicker .icon{ width: 1.8rem; height: 1.8rem; }

.more-head h3{
   font-family: var(--display);
   font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3rem);
   font-weight: 800;
   line-height: 1.15;
   color: var(--ink);
}

/* Золото на светлом фоне — тёмное: обычный .gold-text с бликами почти белый и сливается с карточкой. */
.more-head .gold-text{
   background-image: linear-gradient(110deg, #8A5E12 0%, #C38A22 22%, #E3AE3F 40%, #A8741C 58%, #C99430 78%, #8A5E12 100%);
}

.more-head > p:last-child{ color: var(--text); }

.souvenirs{
   position: relative;
   display: grid;
   /* 4 в ряд на компьютере, 2×2 на планшете, столбиком на телефоне */
   grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
   gap: 1rem;
}

.souvenirs li{
   display: flex;
   align-items: center;
   gap: 1.2rem;
   padding: 1.2rem 1.4rem;
   border: 1px solid var(--line-soft);
   border-radius: 1.6rem;
   background: var(--white);
}

.souv-ic{
   flex: none;
   display: grid;
   place-items: center;
   width: 4.4rem;
   height: 4.4rem;
   border: 1px solid var(--gold-line);
   border-radius: 50%;
   background: var(--gold-soft);
   color: var(--gold-brown);
}

.souv-ic .icon{ width: 2.2rem; height: 2.2rem; }

.souv-name{
   display: block;
   min-width: 0;
   overflow-wrap: anywhere;
   hyphens: auto;
   font-weight: 600;
   line-height: 1.3;
   color: var(--ink);
}

.souv-name::first-letter{ text-transform: uppercase; }

.timeline{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
   gap: 1.2rem;
}

.timeline li{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 2.2rem;
   border-radius: 2.2rem;
   background: var(--white);
}

.timeline li.main{
   background: var(--navy);
   color: var(--white);
}

.tl-date{
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 0.8rem;
   font-family: var(--mono);
}

.tl-date b{ font-size: 2rem; font-weight: 700; color: var(--blue); }
.tl-date b.gold-text{ color: transparent; }
.tl-date span{ font-size: 1.4rem; color: var(--text); }
.main .tl-date span{ color: var(--sky); }
.timeline strong{ font-size: 1.8rem; font-weight: 700; }
.timeline p{ font-size: 1.4rem; line-height: 1.45; color: var(--text); }
.main.timeline-item p, .timeline li.main p{ color: var(--sky); }

.tl-done{
   display: none;
   align-self: flex-start;
   margin-top: auto;
   padding: 0.3rem 1rem;
   border-radius: 99rem;
   background: var(--green-soft);
   color: var(--green);
   font-size: 1.2rem;
   font-weight: 600;
}

li.done .tl-done{ display: inline-block; }

.two-col{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
   gap: 1.6rem;
   margin-top: 1.6rem;
}

.two-col > div{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 2.6rem;
   border-radius: 2.4rem;
   background: var(--white);
}

.two-col h3{ font-size: 1.9rem; }
.two-col p{ font-size: 1.5rem; line-height: 1.55; color: var(--text); }

.final-cta{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 2.4rem;
   overflow: hidden;
   padding: clamp(3rem, 2rem + 3vw, 5.6rem) clamp(2.2rem, 1rem + 3vw, 4.8rem);
   border-radius: 3.2rem;
   background: var(--navy);
   color: var(--white);
}

.final-cta .orb-blue{
   width: 42rem;
   height: 42rem;
   right: -10rem;
   top: auto;
   bottom: -20rem;
}

.final-cta > div:not(.orb-blue){
   position: relative;
   flex: 1 1 42rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.section .final-cta h2{
   font-size: clamp(2.4rem, 2rem + 1.6vw, 4rem);
}

.final-cta p{ color: var(--sky); }

.final-cta .btn{
   position: relative;
   min-height: 5.8rem;
   padding: 0.6rem 3.2rem;
   border-radius: 1.6rem;
   font-size: 1.8rem;
}

/* Панель покупки на телефоне всегда под рукой — кроме момента, когда на экране сама форма покупки:
   там панель закрывала бы кнопки оплаты (класс away ставит app.js). */
.sticky-cta{
   position: sticky;
   bottom: 0;
   z-index: 15;
   transition: opacity 0.2s, transform 0.2s;
   padding: 1rem 1.2rem max(1.4rem, env(safe-area-inset-bottom));
   background: linear-gradient(180deg, rgba(243, 245, 249, 0) 0%, var(--bg) 30%);
}

.sticky-cta.away{ opacity: 0; transform: translateY(100%); pointer-events: none; }

.sticky-cta-box{
   display: flex;
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 0.8rem 0.8rem 1.6rem;
   border-radius: 2rem;
   background: var(--navy);
   color: var(--white);
   box-shadow: 0 16px 40px rgba(10, 26, 48, 0.35);
}

.sticky-cta-box > div{
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.sticky-cta-box b{ font-family: var(--display); font-size: 1.8rem; font-weight: 800; }
.sticky-cta-box b.text{ font-family: inherit; font-size: 1.5rem; font-weight: 700; }
.sticky-cta-box span{ font-size: 1.2rem; color: var(--sky-2); }

/* ФУТЕР */
.footer{
   border-top: 1px solid var(--line-soft);
}

.footer-row{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   max-width: 124rem;
   margin-inline: auto;
   padding: 3.2rem var(--gutter) max(3.2rem, env(safe-area-inset-bottom));
   color: var(--muted);
}

.footer-links{
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem 2.4rem;
}

.footer p{
   max-width: 90rem;
   font-size: 1.3rem;
   line-height: 1.6;
}

/* ВХОД */
.auth{
   display: flex;
   flex-wrap: wrap;
   min-height: 100dvh;
}

.auth-aside{
   position: relative;
   flex: 1 1 52rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   overflow: hidden;
   padding: 1.2rem var(--gutter) 2.4rem;
   background: var(--navy);
   color: var(--white);
}

.auth-aside .logo{ position: relative; }

.auth-art{
   display: none;
}

.auth-aside-text{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

.auth-aside-text h2{
   font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.8rem);
   line-height: 1.1;
}

.auth-aside-text p{
   max-width: 44rem;
   font-size: 1.5rem;
   color: var(--sky);
}

.auth-main{
   flex: 1 1 52rem;
   min-width: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2.4rem var(--gutter) 4rem;
}

.auth-box{
   width: 100%;
   max-width: 44rem;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.auth-box > form, .auth-box form.stack{
   display: flex;
   flex-direction: column;
   gap: 1.8rem;
   animation: step 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* На шаге с кодом вход через соцсети уже ни к чему. */
.auth-box:has(input.code) .social{
   display: none;
}

.auth-title{
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
}

.auth-title p{
   font-size: 1.5rem;
   color: var(--text);
}

.steps-bar{
   display: flex;
   gap: 0.8rem;
}

.steps-bar li{
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
   font-size: 1.3rem;
   font-weight: 500;
   color: var(--muted);
}

.steps-bar i{
   height: 0.4rem;
   border-radius: 99rem;
   background: var(--line);
}

.steps-bar .done{ color: var(--ink); }
.steps-bar .done i{ background: var(--blue); }
.steps-bar .now{ color: var(--ink); font-weight: 700; }

.social{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

.social-or{
   display: flex;
   align-items: center;
   gap: 1.2rem;
   font-size: 1.3rem;
   color: var(--muted);
}

.social-or::before, .social-or::after{
   content: "";
   flex: 1 1 auto;
   height: 1px;
   background: var(--line);
}

.social-row{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
}

.social-row .btn{
   min-height: 5.2rem;
   padding-inline: 0.8rem;
   font-size: 1.5rem;
}

.social-row i{
   width: 1rem;
   height: 1rem;
   flex: none;
   border-radius: 50%;
}

.note-line{
   font-size: 1.3rem;
   line-height: 1.5;
   color: var(--muted);
}

/* КАБИНЕТ */
.hero-small .hero-inner{
   align-items: flex-end;
   justify-content: space-between;
   gap: 2rem;
   padding-top: 8rem;
   padding-bottom: 2.4rem;
}

.hero-small h1{
   font-size: clamp(3rem, 2.4rem + 2.6vw, 5.2rem);
   letter-spacing: -0.03em;
}

.hero-small .who{
   margin-bottom: 0.8rem;
   font-size: 1.5rem;
   color: var(--sky-2);
   overflow-wrap: anywhere;
}

.me-stats{
   flex: 1 1 100%;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.8rem;
}

.me-stat{
   min-width: 0;
   padding: 1rem 1.2rem;
   border-radius: 1.4rem;
}

.me-stat span{
   display: block;
   font-size: 1.2rem;
   line-height: 1.3;
   color: var(--sky-2);
}

.me-stat b{
   display: block;
   margin-top: 0.4rem;
   font-family: var(--display);
   font-size: 2rem;
   font-weight: 800;
}

.me-stat b small{
   font-size: 1.3rem;
   font-weight: 500;
   color: var(--sky-2);
}

.me-stat b.countdown{
   font-family: var(--mono);
   font-size: 1.3rem;
   font-weight: 700;
   line-height: 1.3;
}

.me{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 2.4rem;
   max-width: 124rem;
   margin-inline: auto;
   padding: 1.6rem var(--gutter) 3.2rem;
}

.me-main{
   flex: 999 1 60rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.me-side{
   flex: 1 1 32rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
}

/* Купонов ещё нет: на телефоне первым идёт блок покупки. */
@media (max-width: 899px){
   .me:not(.has-coupons) .me-side{
      order: -1;
   }
}

.status-card{
   flex-direction: row;
   align-items: center;
   gap: 1.6rem;
}

.status-card h2{ font-size: 1.7rem; font-weight: 700; letter-spacing: 0; }
.status-card p{ margin-top: 0.4rem; font-size: 1.5rem; color: var(--text); }

.status-mark{
   width: 4.4rem;
   height: 4.4rem;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.4rem;
}

.register-card{
   border: 1.5px dashed var(--gold-line);
   background: var(--gold-soft);
}

.register-card > p{ color: var(--gold-brown); }

.tickets{
   display: flex;
   flex-direction: column;
   gap: 2.2rem;
}

.ticket{
   position: relative;
   display: flex;
   flex-direction: column;
   border: 1.5px solid #D3DAE4;
   border-radius: 2.4rem;
   background: var(--white);
   box-shadow: 0 8px 22px rgba(10, 26, 48, 0.07);
   transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

@media (hover: hover){
   .ticket:hover{
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(10, 26, 48, 0.12);
   }
}

.ticket-body{
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1.4rem;
   padding: 1.8rem 1.8rem 1.6rem;
}

.ticket-head{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: 0.4rem 1rem;
}

.ticket-head > div{
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.ticket-kind{
   font-size: 1.2rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
}

.ticket-owner{ font-size: 1.7rem; font-weight: 700; }
.ticket-code{ font-family: var(--mono); font-size: 1.4rem; font-weight: 700; color: var(--text); }
.ticket-date{ font-size: 1.3rem; color: var(--muted); }

.bonus-empty{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   padding: 1.6rem 1.8rem;
   border: 1.5px dashed var(--gold-line);
   border-radius: 1.6rem;
   background: var(--gold-soft);
}

.bonus-empty > div{
   flex: 1 1 18rem;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.bonus-empty b{ font-size: 1.6rem; }
.bonus-empty span{ font-size: 1.3rem; color: var(--gold-brown); }
.bonus-empty button{ flex: 1 1 auto; }

.bonus-chosen{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.2rem 1.4rem;
   padding: 1.4rem 1.6rem;
   border: 1px solid var(--line-soft);
   border-radius: 1.6rem;
   background: var(--bg);
}

.bonus-badge{
   width: 5.2rem;
   height: 5.2rem;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.4rem;
   font-family: var(--display);
   font-size: 1.3rem;
   font-weight: 800;
}

.bonus-text{
   flex: 1 1 16rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.bonus-text b{ font-size: 1.6rem; }
.bonus-text span{ font-size: 1.3rem; color: var(--text); }

.bonus-state{
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--muted);
   white-space: nowrap;
}

.bonus-state .icon{ width: 1.4rem; height: 1.4rem; }

.link-btn{
   min-height: 4.4rem;
   padding: 0.4rem 1.4rem;
   font-size: 1.4rem;
}

.ticket-stub{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.6rem 1.8rem;
   border-top: 2px dashed var(--line);
   border-radius: 0 0 2.2rem 2.2rem;
   background: var(--bg);
   color: var(--ink);
}

.ticket-stub::before, .ticket-stub::after{
   content: "";
   position: absolute;
   top: -1.4rem;
   width: 2.6rem;
   height: 2.6rem;
   border: 1.5px solid #D3DAE4;
   border-radius: 50%;
   background: var(--bg);
}

.ticket-stub::before{ left: -1.4rem; clip-path: inset(0 0 0 50%); }
.ticket-stub::after{ right: -1.4rem; clip-path: inset(0 50% 0 0); }

.ticket-stub.in{ background: var(--navy); color: var(--white); }
.ticket-stub.won{
   background: var(--gold-grad);
   background-size: 200% 100%;
   color: var(--gold-ink);
}
.ticket-stub.off{ background: #EDF0F5; }

.stub-num{
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
}

.stub-label{
   font-size: 1.1rem;
   letter-spacing: 0.12em;
   color: var(--muted);
}

.ticket-stub.in .stub-label{ color: var(--sky-2); }
.ticket-stub.won .stub-label{ color: var(--gold-ink); font-weight: 600; }

.stub-code{
   font-family: var(--mono);
   font-size: 1.8rem;
   font-weight: 700;
   letter-spacing: 0.03em;
}

.stub-side{
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.6rem;
}

.stub-side a{ font-size: 1.4rem; font-weight: 600; }
.ticket-stub.in a{ color: var(--gold); }
.ticket-stub.won a{ color: var(--gold-ink); }

.stamp{
   padding: 0.5rem 1rem;
   border: 2.5px solid var(--gold);
   border-radius: 1rem;
   color: var(--gold);
   font-family: var(--display);
   font-size: 1.05rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   white-space: nowrap;
   transform: rotate(-12deg);
   animation: stamp 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.stamp.dark{ border-color: var(--gold-ink); color: var(--gold-ink); white-space: normal; text-align: center; }
.stamp.grey{ border-color: var(--muted); color: var(--muted); animation: none; }

.howto summary{
   cursor: pointer;
   font-size: 1.5rem;
   font-weight: 600;
}

.howto p{ margin-top: 1rem; }

.howto ul{
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
   font-size: 1.4rem;
   color: var(--text);
}

.howto b{ color: var(--ink); }

/* Покупка */
.buy-card{
   position: relative;
   overflow: hidden;
   gap: 1.8rem;
   background: var(--navy);
   color: var(--white);
   scroll-margin-top: 2rem;
}

.buy-card > *{ position: relative; }

.buy-card .orb-blue{
   position: absolute;
   width: 28rem;
   height: 28rem;
   left: -10rem;
   right: auto;
   top: auto;
   bottom: -14rem;
   background: radial-gradient(circle, rgba(43, 108, 184, 0.6), rgba(43, 108, 184, 0) 65%);
   animation: none;
}

.buy-card h2{ font-size: 2.1rem; font-weight: 700; letter-spacing: 0; }
.buy-card > p{ font-size: 1.5rem; color: var(--sky); }
.buy-card a{ color: var(--gold); }
.buy-card .check{ color: #D6E0EE; }
.buy-card .error{ color: #FFB4A8; }

.buy-card form{
   display: flex;
   flex-direction: column;
   gap: 1.8rem;
}

.qty{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   padding: 1rem;
   border-radius: 1.8rem;
}

.qty button{
   width: 4.8rem;
   flex: none;
   padding: 0;
   border: 0;
   border-radius: 1.4rem;
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
   font-size: 2.4rem;
   font-weight: 400;
}

.qty button.gold{
   background-image: var(--gold-grad);
   background-size: 200% 100%;
   color: var(--gold-ink);
}

@media (hover: hover){
   .qty button:hover{ color: var(--white); }
   .qty button.gold:hover{ color: var(--gold-ink); }
}

.qty label{
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
   font-size: 1.2rem;
   color: var(--sky-2);
   text-align: center;
}

.qty input[type="number"]{
   min-height: 0;
   padding: 0;
   border: 0;
   background: none;
   color: var(--white);
   font-family: var(--display);
   font-size: 3.4rem;
   font-weight: 800;
   line-height: 1;
   text-align: center;
   -moz-appearance: textfield;
   appearance: textfield;
}

.qty input[type="number"]:focus{
   box-shadow: none;
   text-decoration: underline;
   text-decoration-color: var(--gold);
}

.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{
   -webkit-appearance: none;
   margin: 0;
}

.qty-sum{
   font-size: 1.4rem;
   color: var(--sky);
}

.qty-sum b{ color: var(--white); }

.buy-note{ font-size: 1.3rem; color: #8EA2BC; }

.details-card summary{
   cursor: pointer;
   font-size: 1.7rem;
   font-weight: 700;
}

.details-card[open] summary{ margin-bottom: 1.6rem; }

.me-actions{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

/* Выбор бонуса */
dialog.bonus-dialog{
   width: 100%;
   max-width: none;
   max-height: 92dvh;
   margin: auto 0 0;
   padding: 0;
   border: 0;
   border-radius: 2.4rem 2.4rem 0 0;
   background: var(--white);
   color: var(--ink);
   overflow: hidden;
}

dialog.bonus-dialog[open]{
   display: flex;
   animation: sheetIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

dialog.bonus-dialog::backdrop{
   background: rgba(10, 26, 48, 0.62);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   animation: fadeIn 0.25s ease both;
}

.bonus-dialog form{
   width: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

.bonus-top{
   position: relative;
   flex: none;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1.6rem;
   overflow: hidden;
   padding: 2rem 1.6rem 1.8rem;
   background: var(--navy);
   color: var(--white);
}

.bonus-top::before{
   content: "";
   position: absolute;
   width: 32rem;
   height: 32rem;
   right: -6rem;
   top: -18rem;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(233, 185, 73, 0.4), rgba(233, 185, 73, 0) 65%);
}

.bonus-top > div{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
}

.bonus-top > div > span{ font-size: 1.4rem; color: var(--sky-2); }
.bonus-top b{ font-family: var(--mono); color: var(--white); }
.bonus-top h2{ font-size: clamp(2.2rem, 2rem + 1vw, 3rem); }
.bonus-top p{ font-size: 1.4rem; color: var(--sky); }

.bonus-close{
   position: relative;
   width: 4.4rem;
   min-height: 4.4rem;
   flex: none;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(255, 255, 255, 0.08);
   color: var(--white);
}

@media (hover: hover){
   .bonus-close:hover{ color: var(--white); }
}

.bonus-options{
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
   align-content: start;
   gap: 1.4rem;
   padding: 1.6rem;
   background: var(--bg);
}

.bonus-option{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   padding: 1.8rem;
   border: 2px solid var(--white);
   border-radius: 2rem;
   background: var(--white);
   box-shadow: 0 1px 2px rgba(10, 26, 48, 0.06);
   cursor: pointer;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover){
   .bonus-option:hover{ border-color: #C38A22; }
}

.bonus-option:has(input:checked){
   border-color: #D9A93A;
   box-shadow: 0 0 0 4px rgba(247, 215, 116, 0.35), 0 14px 30px rgba(168, 116, 28, 0.18);
}

.bonus-option:has(input:focus-visible){
   outline: 2px solid var(--blue);
   outline-offset: 2px;
}

.bonus-option input{
   position: absolute;
   width: 2.4rem;
   height: 2.4rem;
   top: 1.8rem;
   right: 1.8rem;
   margin: 0;
   accent-color: #C38A22;
}

.bonus-tag{
   align-self: flex-start;
   padding: 0.4rem 1rem;
   border-radius: 0.8rem;
   background: #FCEAB4;
   color: #6B4A0E;
   font-family: var(--display);
   font-size: 1.4rem;
   font-weight: 800;
}

.bonus-tag.plain{
   background: var(--blue-soft);
   color: var(--blue);
}

.bonus-option strong{ padding-right: 3rem; font-size: 1.7rem; font-weight: 700; }
.bonus-option p{ font-size: 1.4rem; line-height: 1.45; color: var(--text); }

.bonus-option small{
   margin-top: auto;
   padding-top: 1.2rem;
   border-top: 1px dashed var(--line);
   font-size: 1.3rem;
   color: var(--muted);
   overflow-wrap: anywhere;
}

.bonus-foot{
   flex: none;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   padding: 1.4rem 1.6rem max(1.4rem, env(safe-area-inset-bottom));
   border-top: 1px solid var(--line-soft);
}

.bonus-foot p{
   flex: 1 1 28rem;
   font-size: 1.4rem;
   color: var(--gold-brown);
}

.bonus-foot > div{
   flex: 1 1 auto;
   display: flex;
   gap: 1rem;
}

.bonus-foot button{ flex: 1 1 auto; }

/* СЕРТИФИКАТ */
.cert-page{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.6rem;
   padding: 2rem 1.6rem 4rem;
}

.cert-tools{
   width: min(71.4rem, 100%);
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

/* На телефоне кнопки переносятся: пусть тянутся на всю ширину, а не стоят лесенкой разной длины. */
.cert-tools > *{ flex: 1 1 auto; }

@media (min-width: 600px){
   .cert-tools > *{ flex: 0 0 auto; }
}

.cert{
   position: relative;
   width: min(71.4rem, 100%);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 2.4rem;
   background: var(--white);
   color: #14202E;
}

.cert-top{
   position: relative;
   display: flex;
   align-items: center;
   gap: clamp(1.4rem, 1rem + 2vw, 2.4rem);
   overflow: hidden;
   padding: clamp(2rem, 1rem + 3vw, 3.6rem) clamp(1.8rem, 1rem + 3vw, 4rem);
   background: var(--navy);
   color: var(--white);
}

.cert-logo{
   width: clamp(6.4rem, 4rem + 7vw, 9.6rem);
   height: clamp(6.4rem, 4rem + 7vw, 9.6rem);
   flex: none;
   padding: 0.6rem;
   border-radius: 50%;
   background: var(--white);
}

.cert-head{
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   min-width: 0;
}

.cert-org{
   font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
   font-weight: 600;
   letter-spacing: 0.14em;
   color: var(--gold);
}

.cert-title{
   font-family: var(--display);
   font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
   font-weight: 800;
   line-height: 1.1;
}

.cert-dates{
   font-size: 1.5rem;
   color: #C2D0E2;
}

.cert-top i{
   position: absolute;
}

/* На узком экране конфетти легло бы на текст. */
@media screen and (max-width: 599px){
   .cert-top i{ display: none; }
}

.cert-top i:nth-of-type(1){ right: 3.4rem; top: 2.8rem; width: 1.4rem; height: 1.4rem; border-radius: 0.3rem; background: var(--gold); transform: rotate(20deg); }
.cert-top i:nth-of-type(2){ right: 8rem; top: 7rem; width: 0.9rem; height: 1.8rem; border-radius: 0.2rem; background: #5B9BE0; transform: rotate(-30deg); }
.cert-top i:nth-of-type(3){ right: 5rem; bottom: 3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--white); }
.cert-top i:nth-of-type(4){ right: 12rem; bottom: 4.4rem; width: 0.8rem; height: 1.6rem; border-radius: 0.2rem; background: #FF8A5B; transform: rotate(40deg); }

.cert-body{
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   padding: clamp(1.8rem, 1rem + 2vw, 3.2rem) clamp(1.8rem, 1rem + 3vw, 4rem) 0;
}

.cert-main{
   display: flex;
   flex-wrap: wrap;
   gap: 2.4rem;
   padding: 2.4rem;
   border-radius: 1.8rem;
   background: linear-gradient(120deg, #FFF6DA 0%, #FCEAB4 45%, #FFF3CF 100%);
}

.cert-pic{
   flex: 0 0 auto;
   width: 14rem;
   height: 16rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.2rem;
   background: rgba(255, 255, 255, 0.55);
   color: var(--navy);
}

.cert-pic .icon{
   width: 8rem;
   height: 8rem;
   stroke-width: 1.1;
}

.cert-main > div:last-child{
   flex: 1 1 26rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.cert-flag{
   align-self: flex-start;
   padding: 0.5rem 1.2rem;
   border-radius: 99rem;
   background: var(--navy);
   color: var(--gold);
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.08em;
}

.cert-prize{
   font-family: var(--display);
   font-size: clamp(1.9rem, 1.6rem + 0.8vw, 2.4rem);
   font-weight: 800;
   line-height: 1.15;
   color: #0F2A4A;
}

.cert-main ul{
   padding-left: 1.8rem;
   list-style: disc;
   font-size: 1.4rem;
   line-height: 1.6;
   color: #3F4A58;
}

.cert-more{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.2rem;
}

.cert-more div{
   padding: 1.6rem 1.2rem;
   border-radius: 1.4rem;
   background: #EEF3FA;
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
   color: #0F2A4A;
}

.cert-others{
   padding: 1.4rem 1.8rem;
   border: 2px dashed #D5CCB8;
   border-radius: 1.4rem;
   font-size: 1.3rem;
   line-height: 1.5;
   color: #3F4A58;
}

.cert-others b{ color: #0F2A4A; }

.cert-number{
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 2.4rem;
   margin-top: 2.8rem;
   padding: 2.8rem clamp(1.8rem, 1rem + 3vw, 4rem) 3.2rem;
   border-top: 2px dashed #D5CCB8;
}

.cert-number::before, .cert-number::after{
   content: "";
   position: absolute;
   top: -1.3rem;
   width: 2.4rem;
   height: 2.4rem;
   border-radius: 50%;
   background: var(--bg);
}

.cert-number::before{ left: -1.3rem; }
.cert-number::after{ right: -1.3rem; }

.cert-number > div:first-child{
   flex: 1 1 28rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.cert-label{
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   color: var(--muted);
}

.cert-code{
   font-family: var(--mono);
   font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.03em;
   color: #0F2A4A;
}

.cert-owner{
   margin-top: 0.4rem;
   font-size: 1.4rem;
   color: var(--text);
}

.cert-keep{
   margin-top: 0.6rem;
   font-size: 1.3rem;
   font-weight: 700;
   color: #7A5600;
}

.cert-seal{
   width: 13rem;
   height: 13rem;
   flex: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: linear-gradient(135deg, #FFF1BE 0%, #E9B949 35%, #A8741C 62%, #F7D774 100%);
   color: var(--gold-ink);
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   box-shadow: 0 10px 24px rgba(168, 116, 28, 0.35);
   transform: rotate(-10deg);
}

.cert-seal b{
   font-family: var(--display);
   font-size: 2.6rem;
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: 0;
}

.cert-seal span{
   font-size: 1.3rem;
   letter-spacing: 0;
}

.cert-foot{
   padding: 1.6rem clamp(1.8rem, 1rem + 3vw, 4rem) 2.4rem;
   background: #F3EFE6;
   font-size: 1.1rem;
   line-height: 1.5;
   color: var(--text);
}

/* ОРГАНИЗАТОРАМ */
.admin{
   display: flex;
   flex-direction: column;
   gap: 2rem;
   width: min(132rem, 100%);
   margin-inline: auto;
   padding: 2.8rem var(--gutter) 8rem;
}

.admin-head{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.6rem;
}

.stats{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
   gap: 1.2rem;
}

.stat{
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   padding: 2rem 2.2rem;
   border-radius: 2rem;
   background: var(--white);
}

.stat span{ font-size: 1.4rem; color: var(--muted); }
.stat b{ font-family: var(--display); font-size: 3.4rem; font-weight: 800; line-height: 1.15; }
.stat b small{ font-size: 1.5rem; font-weight: 500; color: var(--muted); }

.stat.dark{ background: var(--navy); color: var(--white); container-type: inline-size; }
.stat.dark span{ color: var(--sky-2); }
/* «10д 13:03:11» одной строкой: размер — по ширине плитки, иначе на телефоне и планшете цифры рвались посередине. */
.stat.dark b{ font-family: var(--mono); font-size: min(3rem, 13cqi); font-weight: 700; white-space: nowrap; }

.bar{
   height: 0.8rem;
   overflow: hidden;
   border-radius: 99rem;
   background: #EDF0F5;
}

.bar i{
   display: block;
   height: 100%;
   border-radius: 99rem;
}

.alert{
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 1.4rem;
   padding: 1.6rem 2rem;
   border: 1px solid var(--red-line);
   border-radius: 1.8rem;
   background: var(--red-soft);
   color: var(--red);
}

.alert .icon{ margin-top: 0.1rem; color: #B42318; }

.alert > div{
   flex: 1 1 24rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   font-size: 1.4rem;
   overflow-wrap: anywhere;
}

.alert b{ font-size: 1.5rem; }

.alert button{
   border-color: #E5A3A3;
   color: var(--red);
   font-size: 1.4rem;
}

.admin-tools{
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 1.6rem;
}

.admin-tools > .card{
   flex: 1 1 42rem;
}

.tool-title{
   display: flex;
   align-items: center;
   gap: 1.2rem;
}

.tool-title h2{
   font-family: inherit;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: 0;
}

.tool-mark{
   width: 4rem;
   height: 4rem;
   flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 1.2rem;
}

.tool-mark.plain{
   background: var(--blue-soft);
   color: var(--blue);
}

.admin-tabs{
   display: flex;
   gap: 0.4rem;
   padding: 0.4rem;
   overflow-x: auto;
   border-radius: 1.4rem;
   background: var(--white);
   scrollbar-width: none;
}

.admin-tabs a{
   flex: none;
   display: inline-flex;
   align-items: center;
   min-height: 4.4rem;
   padding: 0.4rem 1.6rem;
   border-radius: 1.1rem;
   color: var(--text);
   font-size: 1.5rem;
   font-weight: 500;
   text-decoration: none;
}

.admin-tabs a[aria-current="page"]{
   background: var(--navy);
   color: var(--white);
   font-weight: 600;
}

.stat-inline{
   padding: 1.2rem 1.8rem;
}

.stat-inline b{ font-size: 2.4rem; }

.catalog{
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
}

.catalog-row{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.2rem 1.6rem;
   padding: 1.6rem;
   border-radius: 2rem;
   background: var(--white);
}

.catalog-row.off{ opacity: 0.6; }

.catalog-row .partner-logo{
   width: 5.2rem;
   height: 5.2rem;
   border-radius: 1.4rem;
}

.catalog-row .partner-logo .icon{
   width: 2.4rem;
   height: 2.4rem;
}

.catalog-text{
   flex: 1 1 24rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
}

.catalog-text .badge{ vertical-align: middle; }

.catalog-actions{
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem;
}

.form-grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
   gap: 1.6rem;
}

.form-grid .wide{
   grid-column: 1 / -1;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

textarea{
   width: 100%;
   min-height: 9rem;
   padding: 1.2rem 1.4rem;
   border: 1.5px solid var(--line);
   border-radius: 1.2rem;
   background: var(--white);
   color: var(--ink);
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.45;
   resize: vertical;
}

textarea:focus{
   outline: none;
   border-color: var(--blue);
   box-shadow: 0 0 0 4px rgba(36, 89, 166, 0.15);
}

.plain-list{
   display: flex;
   flex-direction: column;
}

.plain-list li{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 0.8rem 1.6rem;
   padding: 1rem 0;
   border-top: 1px solid #EDF0F5;
}

.user-search{
   flex: 1 1 28rem;
   max-width: 44rem;
   display: flex;
   gap: 0.8rem;
}

.user-search input{ min-height: var(--control); }

.role-form{
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
}

.role-form select{
   flex: 1 1 15rem;
   width: auto;
   min-height: var(--control);
}

.partner-cabinet{
   width: min(90rem, 100%);
}

.coupon-use p{ color: var(--text); }

/* ФОТО ПРИЗОВ: фото заполняет рамку целиком, на месте иконки. */
.prize-pic, .cert-pic, .partner-logo{
   position: relative;
   overflow: hidden;
}

.prize-pic img, .cert-pic img, .partner-logo img{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.photo-box{
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
}

.photo-preview{
   position: relative;
   flex: 0 0 min(28rem, 100%);
   aspect-ratio: 4 / 3;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   overflow: hidden;
   padding: 1.6rem;
   border-radius: 1.6rem;
   background: var(--blue-soft);
   color: var(--blue);
   text-align: center;
}

.photo-preview .icon{ width: 4.8rem; height: 4.8rem; stroke-width: 1.2; }

.photo-preview img{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.photo-actions{
   flex: 1 1 28rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1.4rem;
}

.photo-buttons{
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

input[type="file"]{
   min-height: 0;
   padding: 1rem;
   font-size: 1.5rem;
}

/* На телефоне блоки идут друг под другом: разделитель сверху, а не сбоку. */
@media (max-width: 599px){
   .coupon-use{
      border-left: 0;
      border-top: 2px dashed var(--line);
   }
}

.winner-form{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
   gap: 1.2rem;
}

.card > form.coupon-find{
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 1rem;
}

.coupon-find .field{ flex: 1 1 20rem; min-width: 0; }

.coupon-card{
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   border: 1.5px solid var(--line);
   border-radius: 1.8rem;
}

.coupon-info{
   flex: 1 1 26rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
   padding: 1.8rem 2rem;
}

.coupon-info .mono{ font-size: 1.8rem; }
.coupon-info .owner{ font-weight: 600; }

.coupon-use{
   flex: 1 1 22rem;
   min-width: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
   padding: 1.8rem 2rem;
   border-left: 2px dashed var(--line);
   background: #F7F9FC;
}

.people-box{
   overflow: hidden;
   border-radius: 2.4rem;
   background: var(--white);
}

.people-tools{
   display: none;
}

.js .people-tools{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.2rem;
   padding: 1.8rem 2rem;
   border-bottom: 1px solid #EDF0F5;
}

.tabs{
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
   padding: 0.4rem;
   border-radius: 1.2rem;
   background: var(--bg);
}

.tabs button{
   min-height: 3.8rem;
   padding: 0.2rem 1.4rem;
   border: 0;
   border-radius: 0.9rem;
   background: none;
   font-size: 1.4rem;
   font-weight: 500;
}

.tabs button span{
   color: var(--muted);
   font-weight: 500;
}

.tabs button[aria-selected="true"]{
   background: var(--white);
   font-weight: 700;
   box-shadow: 0 1px 3px rgba(10, 26, 48, 0.12);
}

@media (pointer: coarse){
   .tabs button{ min-height: 4.4rem; }
}

.people-search{
   flex: 0 1 34rem;
   min-width: 0;
}

.people-tools input{
   min-height: 4.2rem;
   font-size: 1.6rem;
}

.people-empty{
   padding: 3.2rem 2rem;
   text-align: center;
   color: var(--muted);
}

.people-empty[hidden]{ display: none; }

/* Таблица: на узких экранах каждая строка становится карточкой. */
.people{
   display: block;
   width: 100%;
   font-size: 1.5rem;
}

.people thead{ display: none; }

.people tbody{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr));
   gap: 1.2rem;
   padding: 1.2rem;
}

.people tr{
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   padding: 1.6rem;
   border: 1px solid #EDF0F5;
   border-radius: 1.8rem;
}

.people tr[hidden]{ display: none; }
.people tr.win{ border-color: var(--gold-line); background: #FFF9E6; }
.people tr.off{ opacity: 0.55; }

.people td{
   display: grid;
   grid-template-columns: 10rem minmax(0, 1fr);
   gap: 1rem;
   min-width: 0;
   color: var(--text);
}

.people td::before{
   content: attr(data-label);
   font-size: 1.4rem;
   color: var(--muted);
}

.people td:empty{ display: none; }

.people td.num{ display: block; }
.people td.num::before, .people td.who::before, .people td.act::before, .people td.empty::before{ content: none; }
.people td.num a{ font-family: var(--mono); font-weight: 700; color: var(--ink); text-decoration: none; }

.cert-coupon{
   display: block;
   margin-top: 0.2rem;
   font-family: var(--mono);
   font-size: 1.2rem;
   font-weight: 500;
   color: var(--muted);
}
.people td.who{ display: block; color: var(--ink); font-size: 1.7rem; font-weight: 600; }
.people td.empty{ display: block; color: var(--muted); text-align: center; }

.prize-cell{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.6rem;
}

.prize-cell:empty::before{
   content: "—";
   color: #8A94A3;
}

.people td.act{
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
   margin-top: 0.6rem;
}

.people td.act button{
   flex: 1 1 auto;
   font-size: 1.4rem;
}

/* ДОКУМЕНТЫ И РЕЗУЛЬТАТЫ */
.legal{
   width: min(78rem, 100% - 3.2rem);
   display: flex;
   flex-direction: column;
   gap: 1.6rem;
   margin: clamp(2.4rem, 2rem + 3vw, 5.6rem) auto;
   padding: clamp(2rem, 1rem + 3vw, 4rem);
   border-radius: 2.4rem;
   background: var(--white);
}

.legal p{
   color: var(--text);
}

.people-wrap{
   overflow-x: auto;
}

.results{
   width: 100%;
   border-collapse: collapse;
   font-size: 1.5rem;
}

.results th{
   padding: 1rem 1.2rem;
   font-size: 1.2rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-align: left;
   text-transform: uppercase;
   color: var(--muted);
}

.results td{
   padding: 1.2rem;
   border-top: 1px solid #EDF0F5;
}

/* На самых узких экранах логотипа без подписи достаточно. */
@media (max-width: 359px){
   .logo span{ display: none; }
   .me-stat{ padding: 1rem 0.8rem; }
}

/* ПЛАНШЕТ */
@media (min-width: 600px){
   .org-tag{ display: inline-block; }

   .hero-inner{
      padding-top: 9.6rem;
      padding-bottom: 5.6rem;
   }

   .timer-box{
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      align-self: flex-start;
      gap: 1.8rem;
      padding: 1.6rem 2rem;
      border-radius: 2rem;
   }

   .timer{
      display: flex;
      gap: 1.6rem;
   }

   .timer > div{
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      padding: 0;
      background: none;
   }

   .timer b{ font-size: 3.4rem; }
   .timer span{ margin: 0; font-size: 1.3rem; }

   .partners{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
      gap: 1.6rem;
      margin-inline: 0;
      padding: 0;
      overflow: visible;
   }

   .swipe-hint{ display: none; }

   .prize-pic{ min-height: 13rem; margin: 1.2rem 1.2rem 0; border-radius: 1.6rem; }
   .prize-card h3{ padding: 1.6rem 2rem 2rem; font-size: 1.7rem; }
   .bento{ gap: 1.6rem; }
   .more-prizes{ margin-top: 1.6rem; padding: 2.8rem 3.2rem; }

   .cert-more{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

   .ticket{ flex-direction: row; }
   .ticket-body{ padding: 2.4rem 2.6rem; gap: 1.6rem; }

   .ticket-stub{
      flex: 0 0 21rem;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 0.8rem;
      min-height: 16rem;
      padding: 2rem;
      border-top: 0;
      border-left: 2px dashed var(--line);
      border-radius: 0 2.2rem 2.2rem 0;
      text-align: center;
   }

   .ticket-stub::before, .ticket-stub::after{
      left: -1.4rem;
      right: auto;
   }

   .ticket-stub::before{ top: -1.5rem; clip-path: inset(50% 0 0 0); }
   .ticket-stub::after{ top: auto; bottom: -1.5rem; clip-path: inset(0 0 50% 0); }

   .stub-num{ align-items: center; order: 1; }
   .stub-side{ display: contents; }
   .stub-side .stamp{ order: 0; margin-bottom: 0.6rem; }
   .stub-side a{ order: 2; }
   .stub-code{ font-size: 1.7rem; }

   .me-stats{
      display: flex;
      flex: 0 1 auto;
      flex-wrap: wrap;
      gap: 1rem;
   }

   .me-stat{
      min-width: 12rem;
      padding: 1.4rem 1.8rem;
      border-radius: 1.8rem;
   }

   .me-stat span{ font-size: 1.3rem; }
   .me-stat b{ font-size: 2.4rem; }
   .me-stat b.countdown{ font-size: 2.2rem; line-height: 3.6rem; white-space: nowrap; }

   .hero-small .hero-inner{
      padding-top: 8.8rem;
      padding-bottom: 4rem;
   }

   .me{ padding-top: 3.2rem; padding-bottom: 8rem; }

   dialog.bonus-dialog{
      width: min(90rem, 100% - 4.8rem);
      max-height: 88dvh;
      margin: auto;
      border-radius: 2.8rem;
   }

   .bonus-top{ padding: 2.8rem 2.8rem 2.4rem; }
   .bonus-options{ padding: 2.4rem 2.8rem; }
   .bonus-foot{ padding: 1.8rem 2.8rem; }
   .bonus-foot > div{ flex: 0 0 auto; }

   .equation{ gap: 1.6rem; }
   .eq-card{ padding: 2.8rem; }
   .eq-buy b{ font-size: 3.4rem; }
   .eq-sign{ font-size: 3.2rem; }
   .eq-bonus{ gap: 1.8rem; }
   .eq-title b{ font-size: 2.2rem; }
   .eq-draw b{ font-size: 2.6rem; }

   /* Форма и кнопка под ней не растягиваются на всю широкую карточку. */
   .sticky-cta{ display: none; }

   .auth-main{ padding: 4.8rem var(--gutter); }
}

/* КОМПЬЮТЕР */
@media (min-width: 900px){
   .header-row{ padding: 2rem 2.4rem; }

   .logo{ font-size: 1.6rem; gap: 1.2rem; }
   .logo img{ width: 4.2rem; height: 4.2rem; border-radius: 1.2rem; }

   .header-actions{
      gap: 0.4rem;
      padding: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 99rem;
      background: rgba(255, 255, 255, 0.06);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
   }

   .nav, .nav.open{
      position: static;
      display: flex;
      flex-direction: row;
      gap: 0.4rem;
      padding: 0;
      border: 0;
      background: none;
      box-shadow: none;
   }

   .nav a{
      padding: 1rem 1.6rem;
      border-radius: 99rem;
      font-size: 1.5rem;
      font-weight: 400;
   }

   .nav-toggle{ display: none; }

   .hero-inner{
      padding: 11.6rem 2.4rem 10.4rem;
   }

   .hero-text{ gap: 2.6rem; }

   .hero-art{ height: 44rem; }

   .ticket-art{
      top: 12rem;
      left: 1rem;
      width: min(43rem, 100%);
      height: 22rem;
   }

   .ticket-art-body{ padding: 2.4rem 2.4rem 2rem 2.6rem; }
   .ticket-art-head img{ width: 3.6rem; height: 3.6rem; border-radius: 1rem; }
   .ticket-art-title{ font-size: 1.4rem; }
   .ticket-art-org{ font-size: 1.2rem; }
   .ticket-art-tags span{ padding: 0.5rem 1rem; font-size: 1.2rem; }
   .ticket-art-stub{ width: 11.2rem; font-size: 1.1rem; }
   .ticket-art-stub b{ font-size: 4rem; }

   .ticket-ghost{
      display: block;
      position: absolute;
      top: 3rem;
      left: 8rem;
      width: min(36rem, 80%);
      height: 19rem;
      border-radius: 2.2rem;
      animation: floatB 8s ease-in-out infinite;
   }

   .ring{
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      width: 12.4rem;
      height: 12.4rem;
      animation: spin 26s linear infinite;
   }

   .ring text{ font-family: var(--display); }

   .section-head{ margin-bottom: 3.2rem; }

   .bento{
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .bento-main{
      grid-column: span 2;
      grid-row: span 2;
      min-height: 44rem;
      border-radius: 2.8rem;
   }

   .bento-main .prize-pic{ min-height: 24rem; margin: 1.6rem 1.6rem 0; border-radius: 2rem; }
   .bento-text{ padding: 2.4rem 2.8rem 2.8rem; }

   .auth-aside{
      padding: 3.2rem 4rem 4rem;
      justify-content: space-between;
   }

   .auth-art{
      display: block;
      position: relative;
      height: 28rem;
      margin: 2.4rem 0;
   }

   .auth-art .ticket-art{
      top: 3rem;
      left: 0;
      width: min(40rem, 100%);
      height: 20rem;
   }

   .auth-art .ticket-art-stub{ width: 10rem; }
   .auth-art .ticket-art-stub b{ font-size: 3.6rem; }

   .me-stat{ border-radius: 1.8rem; }
}

/* «Купон = бонус + участие» в одну строку — только когда помещаются все пять частей.
   Уже — столбиком: иначе на планшете «+» оставался в конце строки, а карточка участия
   уезжала на следующую. */
@media (min-width: 1200px){
   .eq-buy{ flex: 1 1 22rem; flex-direction: column; }
   .eq-sign{ flex: none; width: 4rem; }
   .eq-bonus{ flex: 2 1 38rem; }
   .eq-draw{ flex: 1 1 24rem; }
}

/* Место под виджет «Я не робот», чтобы форма не прыгала, пока он грузится. */
.captcha{ min-height: 10.2rem; }

/* Вход: до 1080px панель над формой, с 1080px — две колонки. Порог явный: перенос по ширине
   колонок зависел бы от полосы прокрутки, и на 1040–1080px раскладка прыгала бы.
   В две колонки левая панель ровно в экран и стоит на месте, пока длинная анкета прокручивается:
   иначе она растягивалась на всю высоту формы и заголовок уезжал за нижний край экрана. */
@media (max-width: 1079.98px){
   .auth-aside, .auth-main{ flex-basis: 100%; }
}

@media (min-width: 1080px){
   .auth{ flex-wrap: nowrap; }
   .auth-aside, .auth-main{ flex: 1 1 0; }

   .auth-aside{
      position: sticky;
      top: 0;
      height: 100dvh;
      align-self: flex-start;
   }
}

/* Низкий экран: билет с текстом не помещаются — оставляем логотип и текст. */
@media (min-width: 1080px) and (max-height: 680px){
   .auth-art{ display: none; }
}

/* Настоящая таблица: уже 1200px длинные ФИО и почта рвутся по буквам. */
@media (min-width: 1200px){
   .people-wrap{ overflow-x: auto; }

   .people{
      display: table;
      border-collapse: collapse;
      font-size: 1.4rem;
   }

   .people thead{ display: table-header-group; }
   .people tbody{ display: table-row-group; padding: 0; }

   .people tr{
      display: table-row;
      padding: 0;
      border: 0;
      border-radius: 0;
      transition: background-color 0.2s ease;
   }

   .people tr.win{ border: 0; }
   .people tbody tr:not(.win):hover{ background: #F7F9FC; }

   .people th{
      padding: 1.2rem;
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--muted);
   }

   .people th:first-child, .people td:first-child{ padding-left: 2rem; }
   .people th:last-child, .people td:last-child{ padding-right: 2rem; text-align: right; }

   /* Иначе overflow-wrap: anywhere сжимает колонку почты до нескольких букв. */
   .people th:nth-child(4){ width: 22%; }
   .people.users th:nth-child(4){ width: auto; }
   .people.users th:nth-child(2){ width: 22%; }
   .people.users td:last-child{ width: 34rem; }
   .people.users .role-form{ flex-wrap: nowrap; justify-content: flex-end; }

   .people td, .people td.num, .people td.who, .people td.act, .people td.empty{
      display: table-cell;
      margin: 0;
      padding: 1.4rem 1.2rem;
      border-top: 1px solid #EDF0F5;
      font-size: 1.4rem;
      vertical-align: middle;
   }

   .people td:empty{ display: table-cell; }
   .people td::before{ content: none; }
   .people td.who{ font-weight: 600; }
   .people td.num, .people td.nowrap{ white-space: nowrap; }

   .people td.act{ white-space: nowrap; }
   .people td.act button{
      min-height: 3.6rem;
      margin-left: 0.6rem;
      padding: 0.2rem 1.2rem;
      border-width: 1px;
      border-radius: 0.9rem;
      font-size: 1.3rem;
   }
   .people td.act button.dark{ border: 0; }
}

@media (prefers-reduced-motion: reduce){
   html{ scroll-behavior: auto; }
   *, *::before, *::after{
      animation: none !important;
      transition: none !important;
   }
   .stamp{ transform: rotate(-12deg); }
   .ticket-art{ transform: perspective(900px) rotateY(-10deg) rotateX(6deg) rotate(-5deg); }
   .confetti{ display: none; }
   .gold-text{ background-position: 30% 50%; }
}

/* ПЕЧАТЬ: сертификат на один лист A4 */
@media print{
   @page{
      size: A4 portrait;
      margin: 0;
   }

   html, body{
      min-height: 0;
      background: var(--white);
   }

   .header, .footer, .cert-tools, .toast{
      display: none !important;
   }

   .cert-page{
      padding: 0;
      gap: 0;
   }

   .cert{
      width: 210mm;
      height: 297mm;
      border-radius: 0;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      break-inside: avoid;
   }

   .cert *{
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }

   .cert-number{ margin-top: auto; }
   .cert-more{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .cert-number::before, .cert-number::after{ background: var(--white); }
   .cert-seal{ box-shadow: none; }
}

.doc-list { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; gap: 1.6rem; }
.doc-list li { padding: 1.6rem 2rem; border: 1px solid var(--border, #e4e5e9); border-radius: 1.2rem; }
.doc-list a { font-weight: 600; }