/* ===========================================================================
   Mark Meet — общий стиль.

   Палитра снята с присланного скриншота «Boom»:
   оливковый фон и сливочно-белые буквы с глянцевым объёмом.
   Правило простое — фон всегда оливковый, кнопки белые,
   текст белый и чуть прозрачный, как жидкое стекло.
   =========================================================================== */

/* ---------------------------------------------------------------- шрифт ---- */
/* Nunito лежит у нас на сервере и включается там, где нет системного
   округлого шрифта Apple. Лицензия OFL — см. fonts/OFL.txt. */
@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{
  /* оливковый — из скриншота */
  --olive-900:#2E3022;
  --olive-800:#3C3F2C;
  --olive-700:#4A4D37;
  --olive:#585A43;
  --olive-500:#686B50;
  --olive-400:#7A7D5F;

  /* сливочно-белый — цвет букв «Boom» */
  --cream:#EDEBD6;
  --cream-bright:#FCFBF3;
  --cream-dim:#D5D3B9;
  --cream-deep:#B9B79C;

  /* текст: белый, чуть прозрачный */
  --fg:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.34);

  /* жидкое стекло поверх оливкового */
  --glass:rgba(255,255,255,.11);
  --glass-strong:rgba(255,255,255,.16);
  --glass-border:rgba(255,255,255,.22);
  --sheen:rgba(255,255,255,.34);
  --field:rgba(255,255,255,.09);

  --danger:#E9A79B;
  --danger-solid:#C2604F;
  --ok:#C7D6A8;

  --shadow:0 16px 44px rgba(20,22,12,.4);
  --shadow-soft:0 8px 22px rgba(20,22,12,.28);
  --radius:28px; --radius-sm:18px;
  --blur:blur(30px) saturate(150%);

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

  color-scheme:dark;
}

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

/* Фон: ровный оливковый, поверх него мягкие пятна света и очень мелкое
   зерно — так плоская заливка перестаёт выглядеть пластиковой и становится
   похожей на матовую кожу со скриншота. */
.aurora{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden}
.aurora span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 15s ease-in-out infinite}
.aurora .b1{width:70vmax;height:70vmax;left:-22vmax;top:-26vmax;background:var(--olive-400)}
.aurora .b2{width:60vmax;height:60vmax;right:-20vmax;bottom:-24vmax;background:var(--olive-900);animation-delay:-6s;opacity:.6}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3vmax,2vmax) scale(1.08)}}

/* Зерно — свой SVG прямо в стилях, никаких картинок с других сайтов. */
.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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.stars i{display:none}
@media (prefers-reduced-motion: reduce){ .aurora span{animation:none} }

/* -------------------------------------------------- глянцевые буквы -------- */
/* Тот самый объём с «Boom»: градиент внутри самих букв плюс тень снизу. */
.gloss{
  font-weight:900; letter-spacing:-.025em;
  background:linear-gradient(176deg,var(--cream-bright) 0%,var(--cream) 40%,var(--cream-deep) 56%,var(--cream-bright) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 3px 5px rgba(24,26,16,.45));
  padding-bottom:.06em;
}

/* --------------------------------------------- стеклянный материал -------- */
.glass{
  position:relative; background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border); border-radius:var(--radius);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen), inset 0 -14px 26px rgba(255,255,255,.045);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 30%,transparent 82%,rgba(255,255,255,.07));
}

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

.topbar{display:flex; align-items:center; gap:12px; min-height:44px}
.topbar h1{
  font-size:28px; line-height:1.1; margin:0; font-weight:900; letter-spacing:-.025em; flex:1;
  background:linear-gradient(176deg,var(--cream-bright) 0%,var(--cream) 42%,var(--cream-deep) 58%,var(--cream-bright) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.28)) drop-shadow(0 2px 4px rgba(24,26,16,.4));
  padding-bottom:.05em;
}
.topbar .sub{font-size:13.5px; color:var(--muted); font-weight:600}

.iconbtn{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--glass-border); background:var(--glass);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  color:var(--fg); cursor:pointer; font-size:19px; font-family:inherit;
  transition:transform .12s ease, background .15s;
  box-shadow:inset 0 1px 0 var(--sheen);
}
.iconbtn:active{transform:scale(.92)}
.iconbtn.ghost{background:transparent; border-color:transparent; box-shadow:none}

.brand{display:flex; align-items:center; gap:10px}
.brand .mark{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(168deg,var(--cream-bright),var(--cream) 46%,var(--cream-dim));
  color:var(--olive-800); font-weight:900; font-size:19px; letter-spacing:-.05em;
  box-shadow:0 8px 18px rgba(20,22,12,.35), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 8px rgba(120,118,90,.28);
}

/* ------------------------------------------------------------ кнопки ------ */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 20px; border-radius:var(--radius-sm); border:1px solid var(--glass-border);
  background:var(--glass-strong); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:var(--fg); font-family:inherit; font-weight:700; font-size:17px; cursor:pointer;
  transition:transform .12s ease, filter .15s; text-align:center; width:100%;
  box-shadow:inset 0 1px 0 var(--sheen), var(--shadow-soft);
}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* Главная кнопка — сливочно-белая, буквы оливковые. */
.btn.primary{
  background:linear-gradient(168deg,var(--cream-bright) 0%,var(--cream) 52%,var(--cream-dim) 100%);
  color:var(--olive-800); border-color:rgba(255,255,255,.7); font-weight:800;
  box-shadow:0 12px 26px rgba(20,22,12,.34), inset 0 2px 2px rgba(255,255,255,.95), inset 0 -5px 10px rgba(140,138,105,.22);
}
.btn.danger{background:rgba(194,96,79,.24); border-color:rgba(233,167,155,.42); color:var(--danger)}
.btn.small{padding:11px 15px; font-size:15px; border-radius:14px; width:auto}
.btn-row{display:flex; gap:12px}
.btn-row .btn{flex:1}

/* ------------------------------------------- крупные карточки-действия ---- */
.actions{display:grid; gap:14px}
.action{
  display:flex; align-items:center; gap:16px; padding:20px; cursor:pointer;
  border:none; font-family:inherit; color:var(--fg); text-align:left; width:100%;
  transition:transform .14s ease;
}
.action:active{transform:scale(.985)}
.action .ic{
  width:52px; height:52px; flex:0 0 auto; border-radius:17px; display:grid; place-items:center;
  font-size:23px; color:var(--olive-800);
  background:linear-gradient(168deg,var(--cream-bright),var(--cream) 50%,var(--cream-dim));
  box-shadow:0 8px 18px rgba(20,22,12,.3), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 8px rgba(140,138,105,.24);
}
.action .ic.alt{background:linear-gradient(168deg,#FFFDF4,#E4E2CB 52%,#C9C7AE)}
.action .ic.alt2{background:linear-gradient(168deg,#FFFCEC,#DEDCC0 52%,#BFBDA1)}
.action .tx{flex:1; min-width:0}
.action .tx b{display:block; font-size:18.5px; font-weight:800; letter-spacing:-.015em}
.action .tx span{display:block; font-size:14px; color:var(--muted); margin-top:2px; font-weight:500}
.action .chev{color:var(--faint); font-size:20px}

/* -------------------------------------------------------------- поля ------ */
.field{
  width:100%; padding:15px 17px; font-family:inherit; font-size:17px; font-weight:600; color:var(--fg);
  background:var(--field); border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.field::placeholder{color:var(--faint); font-weight:500}
.field:focus{outline:2px solid var(--cream); outline-offset:1px; background:rgba(255,255,255,.14)}
.field.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em;
  text-transform:uppercase; text-align:center; font-size:22px; font-weight:700;
}
label.lbl{display:block; font-size:12px; font-weight:800; color:var(--muted); margin:0 0 7px 4px; letter-spacing:.04em}

/* ------------------------------------------------------------ список ------ */
.list{display:flex; flex-direction:column; padding:6px; gap:2px}
.row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px;
  cursor:pointer; border:none; background:transparent; font-family:inherit; color:var(--fg);
  text-align:left; width:100%; transition:background .15s;
}
.row:hover{background:var(--field)}
.row.selected{background:rgba(237,235,214,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.row .tx{flex:1; min-width:0}
.row .tx b{display:block; font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .tx span{display:block; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.row .tick{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  border:2px solid var(--faint); color:var(--olive-800); font-size:14px; font-weight:900;
}
.row.selected .tick{background:var(--cream); border-color:transparent}

.avatar{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:16px; color:var(--olive-900); letter-spacing:-.02em;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7), inset 0 -3px 7px rgba(90,88,64,.24), 0 4px 10px rgba(20,22,12,.25);
}
.avatar.sm{width:32px; height:32px; font-size:12.5px}
.avatar.lg{width:76px; height:76px; font-size:27px}

.empty{padding:30px 22px; text-align:center; color:var(--muted); font-size:15px; font-weight:500}
.empty .big{font-size:40px; display:block; margin-bottom:10px; opacity:.7}

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:800; background:var(--glass); border:1px solid var(--glass-border);
}
.pill.live{background:rgba(199,214,168,.22); border-color:rgba(199,214,168,.45); color:var(--ok)}
.pill.owner{background:rgba(237,235,214,.2)}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.dot.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ------------------------------------------------- экран приветствия ------ */
.hero{text-align:center; padding:34px 24px}
.hero .logo{
  width:92px; height:92px; margin:0 auto 20px; border-radius:28px; display:grid; place-items:center;
  background:linear-gradient(168deg,var(--cream-bright) 0%,var(--cream) 48%,var(--cream-dim) 100%);
  color:var(--olive-800); font-size:40px; font-weight:900; letter-spacing:-.06em;
  box-shadow:0 18px 36px rgba(20,22,12,.42), inset 0 3px 3px rgba(255,255,255,.95), inset 0 -8px 14px rgba(140,138,105,.3);
}
.hero h2{
  margin:0 0 8px; font-size:30px; font-weight:900; letter-spacing:-.03em;
  background:linear-gradient(176deg,var(--cream-bright) 0%,var(--cream) 42%,var(--cream-deep) 58%,var(--cream-bright) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 3px 5px rgba(24,26,16,.45));
}
.hero p{margin:0 0 22px; color:var(--muted); font-size:15px; font-weight:500}

/* -------------------------------------------------------------- QR -------- */
.qr-wrap{display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px}
.qr-card{
  background:var(--cream-bright); padding:16px; border-radius:24px; line-height:0;
  box-shadow:0 18px 40px rgba(20,22,12,.42), inset 0 2px 2px rgba(255,255,255,.9);
}
.qr-card img{width:min(268px,64vw); height:auto; display:block; border-radius:8px}
.qr-code-text{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:26px; font-weight:700;
  letter-spacing:.16em; text-align:center; color:var(--cream);
}
.hint{font-size:13.5px; color:var(--muted); text-align:center; line-height:1.5; font-weight:500}

/* ------------------------------------------------------------ тосты ------ */
#toasts{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + 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:14.5px; font-weight:700;
  background:var(--cream); color:var(--olive-800);
  box-shadow:0 10px 26px rgba(20,22,12,.45), inset 0 1px 1px rgba(255,255,255,.9);
  animation:toastin .25s ease; max-width:88vw; text-align:center;
}
@keyframes toastin{from{opacity:0; transform:translateY(10px)}}

/* --------------------------------------------------- входящий звонок ----- */
#ring{
  position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:22px;
  background:rgba(30,32,20,.62); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
#ring.on{display:grid}
.ring-card{width:100%; max-width:380px; padding:30px 24px; text-align:center}
.ring-card .avatar{margin:0 auto 16px; animation:ringpulse 1.4s ease-in-out infinite}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 0 rgba(237,235,214,.55)}50%{box-shadow:0 0 0 18px rgba(237,235,214,0)}}
.ring-card h3{margin:0 0 4px; font-size:22px; font-weight:800}
.ring-card p{margin:0 0 22px; color:var(--muted); font-size:15px}

/* ---------------------------------------------------------- модалка ------ */
.sheet-bg{
  position:fixed; inset:0; z-index:150; display:grid; place-items:end center;
  background:rgba(30,32,20,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}}
.sheet{
  width:100%; max-width:560px; padding:24px 20px calc(26px + var(--safe-b));
  border-radius:28px 28px 0 0; animation:slideup .28s cubic-bezier(.22,1,.36,1);
  max-height:88vh; overflow:auto; background:rgba(72,75,55,.86);
}
@keyframes slideup{from{transform:translateY(100%)}}
.sheet h3{margin:0 0 16px; font-size:21px; font-weight:800; letter-spacing:-.02em}
.sheet .stack{display:flex; flex-direction:column; gap:12px}
.grab{width:38px; height:5px; border-radius:3px; background:var(--faint); margin:-8px auto 16px}

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