/* Окна входа и ожидания Telegram в стиле «Улья» — исключение из бренд-бука (стиль C, решение владельца
   22.10.2026; окна Telegram, вариант B — 29.10.2026). Перенесено из живого макета
   research/sotyhub-platform-2026/ulei-glavnaya/maket/index.html. Рабочие экраны «Входа» — на v2,
   этот файл к ним не подключается. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/sotyhub/fonts/Montserrat-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/sotyhub/fonts/Montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --bg: #060504;
  --ink: #F4E9D6;
  --ink-2: #CDBFA8;
  --brown: #3A1D02;
  --honey: #FFAA2E;
  --honey-hi: #FFD27A;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Montserrat', system-ui, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255, 170, 46, .38); color: #fff; }

/* ---------- сцена: свечение, огни, сетка, пол, зерно ---------- */
.scene { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.scene .base { position: absolute; inset: 0; background:
    radial-gradient(ellipse 52% 50% at 50% var(--cy, 52%), rgba(255, 136, 22, .17) 0%, rgba(150, 72, 8, .07) 38%, transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 42%, #16110b 0%, #0a0806 52%, #040303 100%); }
.scene .bokeh { position: absolute; inset: -4%; filter: blur(9px); background:
    radial-gradient(circle 52px at 4% 44%, rgba(255, 150, 55, .15), transparent),
    radial-gradient(circle 38px at 9% 53%, rgba(255, 160, 70, .19), transparent),
    radial-gradient(circle 64px at 3% 64%, rgba(255, 140, 40, .11), transparent),
    radial-gradient(circle 30px at 12% 76%, rgba(255, 165, 80, .14), transparent),
    radial-gradient(circle 26px at 7% 34%, rgba(255, 160, 70, .10), transparent),
    radial-gradient(circle 58px at 96% 56%, rgba(255, 150, 55, .14), transparent),
    radial-gradient(circle 34px at 91% 63%, rgba(255, 165, 80, .18), transparent),
    radial-gradient(circle 44px at 89% 46%, rgba(255, 140, 40, .10), transparent),
    radial-gradient(circle 28px at 95% 74%, rgba(255, 160, 70, .13), transparent),
    radial-gradient(circle 70px at 99% 40%, rgba(255, 140, 40, .08), transparent); }
.scene .hud { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%); mask-image: linear-gradient(to bottom, transparent 0%, #000 42%); background:
    radial-gradient(ellipse 34% 44% at 50% 46%, rgba(255, 150, 40, .34), transparent 74%),
    radial-gradient(ellipse 80% 60% at 50% 52%, rgba(160, 80, 15, .18), transparent 80%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 100%); }
.scene .floor::before { content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .64 0 0 0 0 .24 9 0 0 0 -6.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 42%, #000 0%, rgba(0,0,0,.45) 48%, transparent 78%), linear-gradient(to bottom, transparent 0%, #000 38%);
    -webkit-mask-composite: source-in;
            mask-image: radial-gradient(ellipse 62% 70% at 50% 42%, #000 0%, rgba(0,0,0,.45) 48%, transparent 78%), linear-gradient(to bottom, transparent 0%, #000 38%);
            mask-composite: intersect; }
.scene .floor::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26%; transform: translateX(-50%);
    background: radial-gradient(ellipse 16% 70% at 50% 34%, rgba(255, 176, 70, .4), transparent 72%); }
.scene .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 78% at 50% 48%, transparent 52%, rgba(0, 0, 0, .7) 100%); }
.scene .sparks i { position: absolute; width: 2px; height: 2px; border-radius: 50%; opacity: var(--o, .5); background: #FFC88A; }

/* окно — поверх сцены; на низком экране листается, сцена стоит */
.screen { position: relative; z-index: 2; min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 0; }

/* ---------- кнопки ---------- */
.glass-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 236, 210, .16); border-radius: 11px; padding: 10px 20px; cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .35);
    transition: background .2s var(--ease), border-color .2s var(--ease); }
.glass-btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 210, 150, .3); }
.glass-btn:focus-visible { outline: 2px solid var(--honey-hi); outline-offset: 3px; }
.btn-honey { width: 100%; height: 52px; margin-top: 10px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; color: var(--brown); cursor: pointer;
    background: linear-gradient(180deg, #FFCB68 0%, #FFAA2E 52%, #EE8913 100%);
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, .8), inset 0 -2px 0 rgba(160, 80, 0, .35), 0 10px 26px rgba(255, 140, 20, .28), 0 2px 6px rgba(0, 0, 0, .4);
    transition: transform .12s var(--ease), filter .18s var(--ease); }
.btn-honey:hover { filter: brightness(1.05); }
.btn-honey:active { transform: translateY(1px) scale(.99); }
.btn-honey:focus-visible { outline: 2px solid var(--honey-hi); outline-offset: 3px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 11px; text-decoration: none; }
.btn-wide { width: 100%; height: 52px; margin-top: 10px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }

/* ---------- окно входа ---------- */
.login-card { width: min(400px, 88vw); display: flex; flex-direction: column; align-items: center; }
.login-bee { width: 132px; height: 152px; margin-bottom: 26px; }
.login-bee svg { overflow: visible; }
.login h1, .tgwait h1 { font-size: 28px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; text-align: center; text-wrap: balance; }
.login .sub { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 30px; letter-spacing: .18em; }
.login .error { width: 100%; margin: -12px 0 18px; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; text-align: center;
    color: var(--honey-hi); background: rgba(255, 170, 46, .08); border: 1px solid rgba(255, 170, 46, .28); }
.login form { width: 100%; margin: 0; }
.field { width: 100%; margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 7px; }
.field input { width: 100%; height: 50px; border-radius: 12px; border: 1px solid rgba(255, 176, 90, .24); background: rgba(16, 12, 8, .62);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-size: 15.5px; padding: 0 16px; outline: none; caret-color: var(--honey);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.field input::placeholder { color: #A8998A; }
.field input:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(255, 170, 46, .16), inset 0 1px 0 rgba(255, 255, 255, .04); }
.or-divider { display: flex; align-items: center; gap: 14px; width: 100%; margin: 22px 0 14px; color: var(--ink-2); font-size: 13.5px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 196, 120, .28), transparent); }
.login .hint { margin-top: 18px; font-size: 13.5px; color: var(--ink-2); text-align: center; }

/* ---------- окно ожидания Telegram ---------- */
.tg-card { width: min(420px, 88vw); display: flex; flex-direction: column; align-items: center; text-align: center; }
.tgwait h1 { margin-bottom: 10px; }
.tg-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 26px; max-width: 34ch; text-wrap: balance; }
.qr-plate { position: relative; width: 236px; padding: 18px; border-radius: 22px; background: #FFF8EC;
    box-shadow: 0 0 0 1px rgba(255, 196, 120, .45), 0 22px 48px rgba(0, 0, 0, .55), 0 0 70px rgba(255, 150, 40, .22);
    transition: opacity .35s var(--ease), filter .35s var(--ease); }
.qr-svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.qr-badge { position: absolute; left: 50%; top: 50%; width: 52px; height: 58px; transform: translate(-50%, -50%); }
.qr-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qr-cap { margin: 14px 0 22px; font-size: 13.5px; color: var(--ink-2); }
.tg-card form { width: 100%; margin: 0; }
.tg-state { min-height: 22px; margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); text-align: center; text-wrap: balance; }
.pulse { display: inline-block; vertical-align: 1px; margin-right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--honey);
    box-shadow: 0 0 0 0 rgba(255, 170, 46, .55); animation: pulse 1.8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 170, 46, .55); } 70% { box-shadow: 0 0 0 10px rgba(255, 170, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 170, 46, 0); } }
.tg-alt { margin-top: 18px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 196, 120, .45); }
.tg-alt:hover { color: var(--ink); text-decoration-color: var(--honey); }
.tg-alt:focus-visible { outline: 2px solid var(--honey-hi); outline-offset: 3px; border-radius: 6px; }
.tg-noscript { margin: 16px 0 0; font-size: 13.5px; color: var(--honey-hi); }
#tg-retry-form { display: none; }
.tg-card:not([data-state="wait"]) .qr-plate { opacity: .2; filter: grayscale(1) blur(1.5px); margin-bottom: 28px; }
.tg-card:not([data-state="wait"]) .qr-cap, .tg-card:not([data-state="wait"]) #tg-open, .tg-card:not([data-state="wait"]) .tg-state { display: none; }
.tg-card[data-state="denied"] #tg-retry-form, .tg-card[data-state="expired"] #tg-retry-form, .tg-card[data-state="offline"] #tg-retry-form { display: block; }
.tg-card[data-state="refused"] .tg-alt { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 0; border-radius: 12px;
    font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 236, 210, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px rgba(0, 0, 0, .35); }

@media (max-width: 639px) {
  .field input { font-size: 16px; }
  .qr-plate, .qr-cap { display: none; }
  .tg-sub { margin-bottom: 30px; }
  .tg-card[data-state="wait"] .tg-state { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .qr-plate, .btn-honey, .glass-btn, .field input { transition: none; }
}