/* ===========================================================================
   Boom — светлая тема.

   Идея: лист бумаги под мягким рассеянным светом, на нём стеклянные панели.
   Стекло становится стеклом только когда за ним есть что преломлять, поэтому
   фон — не плоская заливка, а два очень слабых пятна света, которые медленно
   плывут. Это единственный «эффект» на всю программу.

   Оливковый и сливочный остаются, но как знак бренда: они появляются на
   главной кнопке, на активных состояниях и на плашке с надписью Boom.
   Фоном они больше не работают — от этого и была тяжесть.
   =========================================================================== */

@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400 1000; font-display:swap;
  src:url(/fonts/nunito-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400 1000; font-display:swap;
  src:url(/fonts/nunito-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:400 1000; font-display:swap;
  src:url(/fonts/nunito-latin.woff2) format('woff2');
  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:'Nunito'; font-style:normal; font-weight:400 1000; font-display:swap;
  src:url(/fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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;
}

:root{
  /* бумага: белый с еле слышной зеленью, чтобы родниться с оливковым */
  --paper:#F6F8F3;
  --paper-2:#EAEFE3;

  /* чернила: почти чёрный с оливковым подтоном, не серый и не коричневый */
  --ink:#1E2317;
  --ink-2:#5B6353;
  --ink-3:#8E9585;

  /* стекло */
  --glass:rgba(255,255,255,.6);
  --glass-2:rgba(255,255,255,.4);
  --glass-line:rgba(255,255,255,.85);
  --line:rgba(30,35,23,.08);
  --field:rgba(255,255,255,.72);

  /* бренд */
  --olive:#5A6247;
  --olive-deep:#454B36;
  --olive-tint:rgba(90,98,71,.08);
  --cream:#EDEBD6;

  /* единственная тёплая нота — только для «идёт сейчас» */
  --live:#D8834A;
  --danger:#C4553F;

  --shadow-sm:0 2px 8px rgba(31,36,24,.05);
  --shadow:0 10px 34px rgba(31,36,24,.09);
  --shadow-lg:0 22px 58px rgba(31,36,24,.13);

  --r-lg:26px; --r-md:18px; --r-sm:13px;
  --blur:blur(22px) saturate(150%);

  --font:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);

  color-scheme:light;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0}
body{
  color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.5; font-weight:500; overflow-x:hidden;
  background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Мягкий свет за стеклом. Медленно — 40 секунд на цикл: движение должно
   ощущаться как освещение комнаты, а не как анимация на странице. */
.aurora{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden}
.aurora span{position:absolute; border-radius:50%; filter:blur(90px)}
.aurora .b1{
  width:92vmax; height:92vmax; left:-34vmax; top:-46vmax;
  background:radial-gradient(circle,rgba(122,134,96,.2),rgba(122,134,96,0) 70%);
  animation:breathe 44s ease-in-out infinite;
}
.aurora .b2{
  width:78vmax; height:78vmax; right:-30vmax; bottom:-38vmax;
  background:radial-gradient(circle,rgba(200,206,178,.34),rgba(200,206,178,0) 70%);
  animation:breathe 52s ease-in-out infinite reverse;
}
@keyframes breathe{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3vmax,-2vmax) scale(1.1)}
}

/* Зерно бумаги — чуть заметное, чтобы белое не выглядело пластиком. */
.stars{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
.stars i{display:none}
@media (prefers-reduced-motion: reduce){ .aurora span{animation:none} }

/* ---------------------------------------------------- стеклянный материал */
.glass{
  position:relative; background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ------------------------------------------------------------------ каркас */
#app{min-height:100%; display:flex; flex-direction:column}
.screen{
  flex:1; width:100%; max-width:600px; margin:0 auto;
  padding:calc(20px + var(--safe-t)) 20px calc(36px + var(--safe-b));
  display:flex; flex-direction:column; gap:26px;
}

.topbar{display:flex; align-items:center; gap:14px; min-height:44px}
.topbar h1{
  font-size:26px; line-height:1.15; margin:0; font-weight:700;
  letter-spacing:-.022em; color:var(--ink); flex:1; min-width:0;
}
.topbar .sub{font-size:13.5px; color:var(--ink-3); font-weight:600; letter-spacing:.01em}

/* Заголовки больше не залиты градиентом: именно от этого рябило в глазах. */
.gloss{color:var(--ink); background:none; -webkit-text-fill-color:currentColor; filter:none}

.iconbtn{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--glass-line); background:var(--glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--ink-2); cursor:pointer; font-size:17px; font-family:inherit;
  box-shadow:var(--shadow-sm); transition:transform .14s ease, color .15s;
}
.iconbtn:active{transform:scale(.93)}
.iconbtn.ghost{background:transparent; border-color:transparent; box-shadow:none}

/* Иконка программы: у картинки свои прозрачные края, поэтому тень по форме. */
.appicon{display:block; flex:0 0 auto; filter:drop-shadow(0 10px 22px rgba(31,36,24,.2))}

/* -------------------------------------------------- язык и надпись Boom */
.topright{display:flex; align-items:center; gap:10px; flex:0 0 auto}

/* Надпись сливочная, на светлом фоне её не видно — поэтому она живёт на
   своей оливковой плашке, ровно по логике самой иконки. */
.wordmark{
  display:block; height:17px; width:auto; flex:0 0 auto;
  padding:7px 11px; border-radius:11px; box-sizing:content-box;
  background:var(--olive); box-shadow:var(--shadow-sm);
}
.wordmark.sm{height:13px; padding:5px 8px; border-radius:9px}

.langchip{
  min-width:34px; height:31px; padding:0 10px; border-radius:16px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:800; letter-spacing:.04em;
  color:var(--ink-2); background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--shadow-sm);
}
.langchip:active{transform:scale(.94)}
.langchip.sm{height:27px; min-width:30px; font-size:11px; padding:0 8px}

/* ------------------------------------------------------------------ кнопки */
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 20px; border-radius:var(--r-md); border:1px solid var(--glass-line);
  background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:var(--ink); font-family:inherit; font-weight:650; font-size:16.5px; cursor:pointer;
  transition:transform .14s ease; text-align:center; width:100%;
  box-shadow:var(--shadow-sm);
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* Главное действие — единственное сплошное оливковое пятно на экране. */
.btn.primary{
  background:var(--olive); color:#fff; border-color:transparent; font-weight:700;
  box-shadow:0 10px 26px rgba(90,98,71,.28);
}
.btn.primary:active{background:var(--olive-deep)}
.btn.danger{background:rgba(196,85,63,.1); border-color:rgba(196,85,63,.24); color:var(--danger)}
.btn.small{padding:11px 16px; font-size:14.5px; border-radius:var(--r-sm); width:auto; font-weight:650}
.btn-row{display:flex; gap:12px}
.btn-row .btn{flex:1}

/* ------------------------------------------------- два квадрата на главной */
.squares{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.square{
  aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between;
  padding:22px; border:none; cursor:pointer; color:var(--ink); font-family:inherit;
  text-align:left; transition:transform .16s ease, box-shadow .16s ease;
}
.square:active{transform:scale(.975)}
.square .sq-ic{
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  font-size:21px; color:var(--olive); background:var(--olive-tint);
}
.square .sq-tx b{display:block; font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.2}
.square .sq-tx span{display:block; font-size:13px; color:var(--ink-3); margin-top:5px; font-weight:550; line-height:1.35}
@media (max-width:360px){ .square{padding:18px} .square .sq-tx b{font-size:16.5px} }

/* Карточки-строки для остальных действий */
.actions{display:grid; gap:12px}
.action{
  display:flex; align-items:center; gap:15px; padding:18px; cursor:pointer;
  border:none; font-family:inherit; color:var(--ink); text-align:left; width:100%;
  transition:transform .14s ease;
}
.action:active{transform:scale(.99)}
.action .ic{
  width:44px; height:44px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center;
  font-size:19px; color:var(--olive); background:var(--olive-tint);
}
.action .tx{flex:1; min-width:0}
.action .tx b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.action .tx span{display:block; font-size:13px; color:var(--ink-3); margin-top:2px; font-weight:550}
.action .chev{color:var(--ink-3); font-size:19px}

/* -------------------------------------------------------------------- поля */
.field{
  width:100%; padding:15px 17px; font-family:inherit; font-size:16.5px; font-weight:600;
  color:var(--ink); background:var(--field); border:1px solid var(--line);
  border-radius:var(--r-md); transition:border-color .15s, box-shadow .15s;
}
.field::placeholder{color:var(--ink-3); font-weight:550}
.field:focus{
  outline:none; border-color:var(--olive);
  box-shadow:0 0 0 3px rgba(90,98,71,.12);
}
/* Пароль митинга — это данные, поэтому и выглядит как данные. */
.field.code{
  font-family:var(--mono); letter-spacing:.22em; text-transform:uppercase;
  text-align:center; font-size:21px; font-weight:600;
}
label.lbl{
  display:block; font-size:11.5px; font-weight:800; color:var(--ink-3);
  margin:0 0 8px 2px; letter-spacing:.07em; text-transform:uppercase;
}

/* ------------------------------------------------------------------ список */
.list{display:flex; flex-direction:column; padding:8px; gap:2px}
.row{
  display:flex; align-items:center; gap:14px; padding:12px 13px; border-radius:var(--r-md);
  cursor:pointer; border:none; background:transparent; font-family:inherit; color:var(--ink);
  text-align:left; width:100%; transition:background .15s;
}
.row:hover{background:rgba(255,255,255,.6)}
.row.selected{background:var(--olive-tint); box-shadow:inset 0 0 0 1px rgba(90,98,71,.2)}
.row .tx{flex:1; min-width:0}
.row .tx b{display:block; font-weight:650; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .tx span{display:block; font-size:12.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550}
.row .tick{
  width:25px; height:25px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--ink-3); color:#fff; font-size:13px; font-weight:800;
}
.row.selected .tick{background:var(--olive); border-color:transparent}
.row .chev{color:var(--ink-3); font-size:18px}

.avatar{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:750; font-size:15px; color:var(--olive-deep); letter-spacing:-.01em;
}
.avatar.sm{width:32px; height:32px; font-size:12px}
.avatar.lg{width:72px; height:72px; font-size:25px}

.empty{padding:34px 24px; text-align:center; color:var(--ink-3); font-size:14.5px; font-weight:550}
.empty .big{font-size:34px; display:block; margin-bottom:12px; opacity:.45}

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:800; background:var(--glass); border:1px solid var(--line);
}
.pill.live{background:rgba(216,131,74,.1); border-color:rgba(216,131,74,.28); color:var(--live)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.dot.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Тихие ссылки вместо ещё двух кнопок: экран и так полон поверхностей. */
.quiet-links{
  display:flex; justify-content:center; gap:22px; padding:2px 0 0;
}
.quiet-links button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:650; color:var(--ink-3); padding:6px 2px;
}
.quiet-links button:active{color:var(--olive)}

/* ------------------------------------------------------- шаги мастера */
.steps{display:flex; gap:6px; align-items:center; justify-content:center}
.steps i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); opacity:.3; transition:all .25s}
.steps i.on{background:var(--olive); opacity:1; width:20px; border-radius:3px}

/* ------------------------------------------------------------ переключатель */
.seg{display:flex; gap:4px; padding:4px; border-radius:var(--r-md); background:var(--olive-tint)}
.seg button{
  flex:1; padding:10px 8px; border:none; border-radius:var(--r-sm); cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:650; color:var(--ink-2); background:transparent;
}
.seg button.on{background:#fff; color:var(--olive); box-shadow:var(--shadow-sm)}

/* -------------------------------------------------------------------- QR */
.qr-wrap{display:flex; flex-direction:column; align-items:center; gap:18px; padding:26px 24px}
.qr-card{
  background:#fff; padding:18px; border-radius:22px; line-height:0;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.qr-card img{width:min(250px,62vw); height:auto; display:block; border-radius:6px}
.qr-code-text{
  font-family:var(--mono); font-size:23px; font-weight:600; letter-spacing:.2em;
  text-align:center; color:var(--ink);
}
.hint{font-size:13.5px; color:var(--ink-3); text-align:center; line-height:1.55; font-weight:550; margin:0}

/* ------------------------------------------------------------------ тосты */
#toasts{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(26px + var(--safe-b));
  z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.toast{
  padding:12px 18px; border-radius:999px; font-size:14px; font-weight:650;
  background:rgba(30,35,23,.9); color:#fff; box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  animation:toastin .28s cubic-bezier(.22,1,.36,1); max-width:86vw; text-align:center;
}
@keyframes toastin{from{opacity:0; transform:translateY(12px)}}

/* --------------------------------------------------------- входящий звонок */
#ring{
  position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:24px;
  background:rgba(246,248,243,.72); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
}
#ring.on{display:grid}
.ring-card{width:100%; max-width:360px; padding:32px 26px; text-align:center}
.ring-card .avatar{margin:0 auto 18px; animation:ringpulse 1.6s ease-in-out infinite}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 0 rgba(90,98,71,.3)}50%{box-shadow:0 0 0 16px rgba(90,98,71,0)}}
.ring-card h3{margin:0 0 5px; font-size:20px; font-weight:700; letter-spacing:-.015em}
.ring-card p{margin:0 0 24px; color:var(--ink-3); font-size:14.5px; font-weight:550}

/* ----------------------------------------------------------------- шторка */
.sheet-bg{
  position:fixed; inset:0; z-index:150; display:grid; place-items:end center;
  background:rgba(30,35,23,.24); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fade .22s ease;
}
@keyframes fade{from{opacity:0}}
.sheet{
  width:100%; max-width:520px; padding:22px 20px calc(26px + var(--safe-b));
  border-radius:28px 28px 0 0; animation:slideup .32s cubic-bezier(.22,1,.36,1);
  max-height:86vh; overflow:auto;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%);
  border-top:1px solid var(--glass-line); box-shadow:0 -20px 60px rgba(31,36,24,.16);
}
@keyframes slideup{from{transform:translateY(100%)}}
.sheet h3{margin:0 0 18px; font-size:19px; font-weight:700; letter-spacing:-.015em}
.sheet .stack{display:flex; flex-direction:column; gap:11px}
.grab{width:36px; height:4px; border-radius:2px; background:var(--ink-3); opacity:.28; margin:-6px auto 16px}

.sticky-cta{
  position:sticky; bottom:0; padding-top:14px; margin-top:auto;
  padding-bottom:calc(4px + var(--safe-b));
}
.count-badge{
  min-width:23px; height:23px; padding:0 7px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.22); font-size:12.5px; font-weight:800;
}

:root[dir="rtl"] .chev{transform:scaleX(-1)}