:root{
  --bg:#0f1115; --fg:#eef1f4; --muted:#a7abb1;
  --card:#171a21; --ring:#2a2f3a;
  --primary:#3b82f6; --primary-ink:#fff;
  --danger:#ef4444; --danger-ink:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--fg);
  font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.wrap{max-width:960px;margin:0 auto;padding:20px}

.hero{padding:28px 0 16px}
.hero h1{margin:0 0 8px;font-size:32px}
.sub{margin:0;color:var(--muted)}

.head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.head.slim{padding:6px 0}
.grow{flex:1}
.tiny{font-size:12px}
.muted{color:var(--muted)}

.center{display:flex; justify-content:center; padding:30px 0}

.big{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 12px; border:0; border-radius:14px; background:#232835; color:var(--fg);
  outline:1px solid var(--ring); cursor:pointer; min-height:92px; font-weight:600; text-align:center
}
.big.primary{background:var(--primary); color:var(--primary-ink)}
.big.danger{background:var(--danger); color:var(--danger-ink)}
.emoji{font-size:28px}
.label{font-size:16px}

.btn{
  border:0; padding:10px 14px; border-radius:10px; background:#232835; color:var(--fg);
  cursor:pointer; outline:1px solid var(--ring);
}
.ghost{
  background:transparent; color:var(--fg); border:0; cursor:pointer; padding:8px 10px;
  border-radius:10px; outline:1px solid var(--ring)
}

.stage{
  position:relative; background:#000; border-radius:16px; overflow:hidden; outline:1px solid var(--ring);
}
#remoteVideo{
  display:block; width:100%; height:56vh; min-height:300px; background:#000; object-fit:cover;
}
#localVideo{
  position:absolute; right:12px; bottom:12px; width:160px; height:120px; object-fit:cover;
  border-radius:12px; outline:2px solid var(--ring)
}
@media (max-width:520px){
  #localVideo{width:124px;height:92px}
}

.overlay{
  display:flex; align-items:center; justify-content:center;
  position:absolute; inset:0; background:rgba(15,17,21,.6); backdrop-filter:saturate(120%) blur(2px);
}
.overlay__box{
  background:var(--card); border:1px solid var(--ring); border-radius:14px; padding:16px; text-align:center; max-width:420px
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:var(--muted); margin-bottom:10px}

.status{margin:12px 0 0; padding:10px 12px; border-radius:12px; background:var(--card);
  outline:1px solid var(--ring)}

.controls{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:10px 0}

/* ====== Full-bleed сцена ====== */
body.is-room{margin:0}
.stage--full{
  position:relative; width:100%; height:100svh; /* мобильный безопасный вьюпорт */
  background:#000; overflow:hidden; outline:1px solid var(--ring);
}
.stage--full #remoteVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}
.stage--full #localVideo{
  position:absolute; right:12px; bottom:12px; width:128px; height:96px;
  object-fit:cover; border-radius:10px; outline:2px solid rgba(255,255,255,.2); z-index:3;
}
@media (min-width:720px){
  .stage--full #localVideo{ width:160px; height:120px }
}

/* ====== HUD поверх видео (auto-hide) ====== */
.hud{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:10px; padding:8px; border-radius:16px; z-index:4;
  background:rgba(20,22,28,.45); backdrop-filter:saturate(120%) blur(8px);
  outline:1px solid rgba(255,255,255,.12);
  transition:opacity .18s ease, transform .18s ease;
}
.hud.hidden{ opacity:0; pointer-events:none; transform:translate(-50%, 8px); }
.hud__btn{
  appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  font-size:20px; line-height:1; color:#fff; background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.18);
}
.hud__btn--danger{ background:rgba(239,68,68,.9); outline:1px solid rgba(0,0,0,.2) }

/* ====== Оверлеи ====== */
.overlay{ position:absolute; inset:0; display:none; z-index:5; }
.overlay--center{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  backdrop-filter:saturate(120%) blur(2px);
}
.overlay.hidden{ display:none !important; }
.overlay__box{
  background:rgba(23,26,33,.92); border:1px solid var(--ring);
  border-radius:14px; padding:16px; text-align:center; max-width:420px; color:#fff;
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:var(--muted)}

/* ====== Плавающий статус ====== */
.status--float{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  z-index:4; padding:6px 10px; border-radius:12px;
  background:rgba(23,26,33,.7); backdrop-filter: blur(6px);
  outline:1px solid rgba(255,255,255,.12);
  font-size:14px;
}

/* ====== Anti-scroll & viewport ====== */
html, body { height:100%; }
body.is-room{ margin:0; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }

/* CSS-переменная для точной высоты экрана под адресную строку */
:root{ --app-vh: 1vh; }

/* ====== Full-bleed сцена ====== */
.stage--full{
  position:relative; width:100%;
  height:calc(var(--app-vh, 1vh) ); /* динамическая высота */
  background:#000; overflow:hidden;
}
.stage--full #remoteVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}
.stage--full #localVideo{
  position:absolute; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom));
  width:128px; height:96px; object-fit:cover; border-radius:10px;
  outline:2px solid rgba(255,255,255,.2); z-index:3;
}
@media (min-width:720px){ .stage--full #localVideo{ width:160px; height:120px } }

/* ====== Topbar overlay ====== */
.topbar{
  position:absolute; left:0; right:0; top:0; z-index:6;
  display:flex; align-items:center; gap:10px; padding: max(10px, env(safe-area-inset-top)) 12px 8px;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.0));
}
.ghost--top{ background:rgba(255,255,255,.08); outline:1px solid rgba(255,255,255,.18); color:#fff }

/* ====== HUD поверх видео (auto-hide) ====== */
.hud{
  position:absolute; left:50%; bottom:max(12px, env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; gap:10px; padding:8px; border-radius:16px; z-index:5;
  background:rgba(20,22,28,.45); backdrop-filter:saturate(120%) blur(8px);
  outline:1px solid rgba(255,255,255,.12);
  transition:opacity .18s ease, transform .18s ease;
}
.hud.hidden{ opacity:0; pointer-events:none; transform:translate(-50%, 8px); }
.hud__btn{
  appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  font-size:20px; line-height:1; color:#fff; background:rgba(255,255,255,.08);
  outline:1px solid rgba(255,255,255,.18);
}
.hud__btn--danger{ background:rgba(239,68,68,.9); outline:1px solid rgba(0,0,0,.2) }

/* ====== Оверлеи ====== */
.overlay{ position:absolute; inset:0; display:none; z-index:4; }
.overlay--center{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  backdrop-filter:saturate(120%) blur(2px);
}
.overlay.hidden{ display:none !important; }
.overlay__box{
  background:rgba(23,26,33,.92); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:16px; text-align:center; max-width:420px; color:#fff;
}
.overlay__emoji{font-size:36px; margin-bottom:6px}
.overlay__title{font-size:18px; font-weight:700; margin-bottom:6px}
.overlay__hint{color:#a7abb1}

/* ====== Плавающий статус ====== */
.status--float{
  position:absolute; left:50%; top:max(10px, env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:6; padding:6px 10px; border-radius:12px;
  background:rgba(23,26,33,.7); backdrop-filter: blur(6px);
  outline:1px solid rgba(255,255,255,.12); font-size:14px; color:#fff;
}

/* ===== Landing (главная заставка) ===== */
:root{ --landing-bg: none; --scrim: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
body.landing{
  margin:0; min-height:100dvh; height:100dvh; overflow:hidden;
  background: var(--scrim), var(--landing-bg) center center / cover no-repeat fixed;
  /* на iOS избегаем fixed из-за перерисовок: */
  background-attachment: scroll, scroll;
  color:#fff; font:18px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.landing__scrim{
  position:fixed; inset:0;
  background: var(--scrim);
  pointer-events:none;
}
.landing__top{
  position:fixed; left:0; right:0; top:0; z-index:2;
  padding: max(16px, env(safe-area-inset-top)) 18px 10px;
  text-align:center;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.landing__title{
  margin:0; font-size:clamp(24px, 3.6vw, 40px); font-weight:800; letter-spacing:.2px; text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.landing__text{
  margin:.85rem auto 0; max-width: 30rem; font-size:clamp(1rem, 2.2vw, 1.2rem); color: rgba(255,255,255,.88); text-shadow:0 1px 14px rgba(0,0,0,.25);
}
.landing__bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:center; padding: 18px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.cta{
  -webkit-tap-highlight-color: transparent;
  appearance:none; border:0; cursor:pointer;
  padding:16px 28px; border-radius:14px;
  font-weight:800; font-size:18px; letter-spacing:.3px;
  color:#fff; background:#3b82f6; /* тот же primary, что в теме */
  outline:2px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(59,130,246,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .08s ease, filter .15s ease;
}
.cta:active{ transform:translateY(1px); filter: brightness(.95); }
@media (hover:hover){
  .cta:hover{ filter: brightness(1.05); }
}

/* фикс, чтобы основная сетка комнат не конфликтовала по отступам */
body.landing .wrap, body.landing main, body.landing section{ all: unset; }
body.install-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.18), transparent 28%),
    linear-gradient(180deg, #09111f 0%, #0f1115 48%, #121723 100%);
  color:#f8fafc;
}

.page-shell{ min-height:100vh; background:#0f1115; color:var(--fg); }
.panel{ max-width:820px; margin:0 auto; padding:24px; }
.panel__header{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-bottom:24px; }
.section{ background:#11151f; border:1px solid rgba(255,255,255,.07); border-radius:18px; padding:22px; margin-bottom:18px; }
.field-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field input,
.field select{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--fg);
}
.btn-primary{ background:var(--primary); color:var(--primary-ink); }
.btn-secondary{ background:rgba(255,255,255,.08); color:var(--fg); border:1px solid rgba(255,255,255,.12); }
.btn-small{ padding:8px 12px; border-radius:12px; }
.contact-list{ display:grid; gap:12px; }
.contact-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); }
.contact-actions{ display:flex; gap:10px; }
.hint{ color:var(--muted); margin-top:10px; font-size:0.95rem; }
.landing__link{ display:inline-flex; margin-top:18px; }
.button-row{ display:flex; flex-wrap:wrap; gap:10px; }

.call-screen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.call-screen__panel{
  width:min(100%, 680px);
  padding:32px;
}

.call-screen__eyebrow{
  margin:0 0 10px;
  color:#93c5fd;
  font-size:0.92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.call-screen__meta{
  margin:20px 0;
}

.call-screen__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.install-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.install-card{
  width:min(100%, 760px);
  padding:32px;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.72));
  box-shadow:0 28px 80px rgba(2,6,23,.45);
}

.install-card__eyebrow{
  margin:0 0 12px;
  color:#7dd3fc;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:700;
}

.install-card__title{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-.03em;
}

.install-card__text{
  margin:16px 0 0;
  max-width:42rem;
  color:rgba(226,232,240,.86);
  font-size:1.05rem;
}

.install-card__steps{
  margin:26px 0 0;
  padding-left:1.2rem;
  color:#e2e8f0;
}

.install-card__steps li{
  margin:0 0 12px;
}

.install-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.install-card__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.install-card__hint{
  margin-top:18px;
}

.app-shell{
  max-width:760px;
  margin:0 auto;
  padding:20px 18px 32px;
}

.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 0;
}

.auth-shell__card{
  width:min(100%, 900px);
}

.auth-shell--page{
  padding:24px;
}

.auth-shell__eyebrow{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#7dd3fc;
  font-size:.8rem;
  font-weight:700;
}

.auth-shell__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin-top:20px;
}

.auth-page{
  max-width:920px;
  margin:0 auto;
}

.auth-tabs{
  display:inline-flex;
  gap:8px;
  margin:24px 0 14px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.auth-tab{
  border:0;
  padding:10px 18px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

.auth-tab.is-active{
  background:#1d4ed8;
  color:#fff;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contacts-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}

.contacts-header__title h1{
  margin:0;
  font-size:1.8rem;
}

.contacts-header__title p{
  margin:.2rem 0 0;
}

.icon-button{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--fg);
  font-size:1.3rem;
  cursor:pointer;
}

.icon-button--small{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:1rem;
}

.contacts-toolbar{
  padding:14px;
}

.contacts-search{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--fg);
}

.contacts-section{
  padding:8px 0 0;
  background:transparent;
  border:0;
}

.contacts-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--fg);
  text-align:left;
  cursor:pointer;
}

.contact-row__info{
  min-width:0;
}

.contact-row__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.contact-row__username{
  margin-top:4px;
  color:var(--muted);
}

.presence-dot{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.86rem;
  color:var(--muted);
}

.presence-dot::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#64748b;
}

.presence-dot.is-online::before{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15);
}

.presence-dot.is-online{
  color:#86efac;
}

.error-text{
  margin-top:12px;
  color:#fda4af;
}

.modal{
  position:fixed;
  inset:0;
  z-index:40;
}

.modal.hidden{
  display:none;
}

.modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.6);
  backdrop-filter:blur(6px);
}

.modal__card{
  position:relative;
  z-index:1;
  width:min(100% - 24px, 520px);
  margin:12vh auto 0;
}

.modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.profile-page{
  max-width:760px;
}

.profile-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.toast-stack{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  min-width:220px;
  max-width:320px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.16);
  color:#e2e8f0;
  box-shadow:0 18px 48px rgba(2,6,23,.36);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}

.toast.is-visible{
  opacity:1;
  transform:translateY(0);
}

.toast--success{
  border-color:rgba(34,197,94,.3);
}

.toast--error{
  border-color:rgba(244,63,94,.3);
}

@media (max-width:640px){
  .contacts-header__title h1{
    font-size:1.45rem;
  }

  .profile-hero{
    flex-direction:column;
    align-items:flex-start;
  }
}