*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* touch-action: manipulation — запрещает double-tap zoom на кнопках.
   Пользователь случайно дважды тапает на + или кнопку — браузер не зумирует.
   Pinch-zoom (двумя пальцами) при этом работает нормально. */
button,a,input,select,
.btn,.btn-choose,.calc-btn,.dp-btn,.bn-item,
.doc-slot,.tab,.loyalty-board{
  touch-action: manipulation;
}
:root{
    --bg:#0f0f0f;--surface:#111111;--surface-2:#161616;
    --primary:#D4AF37;--primary-2:#B8922A;
    --text:#F5EDD4;--text-muted:rgba(245,237,212,.45);--border:rgba(212,175,55,.15);
    --success:#4ade80;--success-bg:rgba(56,161,105,.12);
    --danger:#fc8181;--danger-bg:rgba(229,62,62,.12);
    --warning:#D4AF37;--warning-bg:rgba(212,175,55,.1);
    --radius-lg:10px;--radius:8px;--radius-sm:6px;
    --shadow:0 4px 24px rgba(0,0,0,.6);--shadow-sm:0 2px 8px rgba(0,0,0,.4);
    /* металлическое золото: яркий блик сверху-слева -> тёмное золото снизу-справа */
    --gold-grad:linear-gradient(135deg,#FBE58F 0%,#F0C84A 24%,#D4AF37 52%,#B8922A 78%,#8A6B1C 100%);
    --gold-glow:0 6px 22px rgba(212,175,55,.42),0 2px 6px rgba(0,0,0,.55);
    --gold-glow-hi:0 10px 34px rgba(212,175,55,.62),0 2px 8px rgba(0,0,0,.55);
    --gold-inset:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(120,90,10,.4);
    --card-glow:0 8px 30px rgba(0,0,0,.55),0 0 34px rgba(212,175,55,.07),inset 0 1px 0 rgba(255,255,255,.04);
}
html,body{height:100%}
body{font-family:'Oswald',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
.page-wrap{flex:1;display:flex;flex-direction:column;width:100%}
a{color:inherit}
.container{max-width:560px;margin:0 auto;padding:1rem;flex:1;width:100%}

/* ---- верхняя панель ---- */
.appbar{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:#000000;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(212,175,55,.2),0 4px 20px rgba(0,0,0,.8)}
.appbar-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.02rem;letter-spacing:.2px}
.appbar-brand .logo{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.appbar-nav{display:flex;gap:.2rem}
.appbar-nav a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;text-decoration:none;opacity:.82;transition:.15s}
.appbar-nav a svg{width:19px;height:19px}
.appbar-nav a:hover{opacity:1;background:rgba(255,255,255,.14)}
.appbar-nav a.active{opacity:1;background:rgba(255,255,255,.22)}

/* ---- карточки ---- */
.card{background:#151515;border-radius:var(--radius-lg);padding:1.4rem;margin-bottom:1rem;border:1px solid rgba(212,175,55,.12);box-shadow:0 4px 20px rgba(0,0,0,.5)}
.card-title{font-size:1.08rem;font-weight:700;margin-bottom:1.1rem;color:var(--text);display:flex;align-items:center;gap:.5rem}
.card-title svg{width:19px;height:19px;color:var(--primary)}

/* ---- кнопки ---- */
.btn{padding:.85rem 1.4rem;border:none;border-radius:8px;font-weight:600;font-size:1.07rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .12s,box-shadow .12s,opacity .12s;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold-grad);color:#1a1305;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.28);box-shadow:var(--gold-glow),var(--gold-inset)}
.btn-success{
  background:linear-gradient(135deg,#4fd08a 0%,#34c576 55%,#1fa35c 100%);
  color:#04240f;font-weight:800;
  box-shadow:0 3px 12px rgba(31,163,92,.25),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-success:hover{box-shadow:0 4px 16px rgba(31,163,92,.3),inset 0 1px 0 rgba(255,255,255,.1)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{
  background:linear-gradient(135deg,#e88080 0%,#f16565 55%,#d63a3a 100%);
  color:#3a0a0a;font-weight:800;
  box-shadow:0 3px 12px rgba(214,58,58,.25),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-danger:hover{box-shadow:0 4px 16px rgba(214,58,58,.3),inset 0 1px 0 rgba(255,255,255,.1)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---- формы ---- */
.form-group{margin-bottom:.9rem}
.form-label{display:block;font-size:1.07rem;font-weight:600;color:var(--text-muted);margin-bottom:.4rem}
.form-input{width:100%;padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:8px;font-size:1.07rem;background:var(--surface-2);color:var(--text);font-family:inherit;transition:.15s}
.form-input:focus{outline:none;border-color:var(--primary);background:var(--surface-2);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.form-input:disabled{color:var(--text-muted);cursor:not-allowed}

/* ---- тарифы ---- */
.tariffs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.tariff-card{text-align:center;position:relative;overflow:hidden}
.tariff-card.popular{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset,0 0 30px rgba(212,175,55,.14),var(--shadow-sm);background:linear-gradient(160deg,rgba(212,175,55,.10) 0%,rgba(212,175,55,.03) 60%)}
.tariff-card.popular::before{content:'Популярно';position:absolute;top:.7rem;right:-2rem;background:var(--gold-grad);color:#1a1305;font-size:.89rem;font-weight:700;padding:.2rem 2.2rem;transform:rotate(35deg)}
.tariff-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.tariff-price{font-size:1.9rem;font-weight:800;color:var(--primary);margin:.4rem 0}
.tariff-features{list-style:none;text-align:left;margin:.9rem 0;color:var(--text-muted);font-size:1.12rem}
.tariff-features li{padding:.35rem 0;display:flex;align-items:center;gap:.5rem}
.tariff-features li svg{width:15px;height:15px;color:var(--success);flex-shrink:0}

/* ---- прицепы / сейфы ---- */
.safe-item{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--border)}
.safe-item:last-child{border-bottom:none}
.safe-icon{width:42px;height:42px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.safe-info{display:flex;align-items:center;gap:.8rem}
.safe-id{font-weight:700;font-size:1.04rem;color:var(--text)}
.safe-loc{font-size:1.07rem;color:var(--text-muted)}
.badge{padding:.3rem .7rem;border-radius:20px;font-size:.97rem;font-weight:700;white-space:nowrap}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-muted{background:#1a1a1a;color:rgba(212,175,55,.5)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.empty{text-align:center;color:var(--text-muted);padding:2rem 1rem;font-size:1.04rem}

/* ---- модалки ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:999;padding:1rem;animation:fadeIn .15s ease}
.modal-content{background:var(--surface);border-radius:12px;padding:1.5rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:popIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-title{font-size:1.1rem;font-weight:700;margin-bottom:.4rem;color:var(--text)}
.modal-sub{color:var(--text-muted);font-size:1.14rem;margin-bottom:1rem}

/* ---- фото ---- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0}
.photo-slot{aspect-ratio:1;background:var(--surface-2);border:1.5px dashed var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;color:var(--text-muted);font-size:1.01rem;flex-direction:column;gap:.3rem}
.photo-slot svg{width:20px;height:20px}
.photo-slot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.photo-slot input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;inset:0}

/* ---- тосты (вместо alert) ---- */
.toast-wrap{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:.5rem;align-items:center;width:100%;padding:0 1rem}
.toast{background:var(--text);color:#fff;padding:.7rem 1.1rem;border-radius:12px;font-size:1.12rem;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.2);max-width:420px;text-align:center;animation:toastIn .2s ease;transition:opacity .25s,transform .25s}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

/* ---- разное ---- */
.footer{margin-top:auto;padding:1.5rem 1rem;padding-bottom:calc(1.5rem + 90px);text-align:center;color:var(--text-muted);font-size:1.03rem}
.footer a{color:var(--primary);text-decoration:none;font-weight:600}
.hint{font-size:1.10rem;color:var(--text-muted);text-align:center;margin-top:1rem}
.hint a{color:var(--primary);text-decoration:none;font-weight:600}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:480px){
    .container{padding:.8rem}
    .card{padding:1.05rem}
    .tariffs-grid{grid-template-columns:1fr}
    .appbar-brand span.full{display:none}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Нижняя навигация: приклеена к низу ─────────────────── */
.bottom-nav{
  position:fixed;z-index:60;
  left:0;right:0;bottom:0;
  display:flex;justify-content:space-around;align-items:stretch;
  background:#0a0a0a;
  border-top:1px solid rgba(212,175,55,.2);
  box-shadow:0 -2px 20px rgba(0,0,0,.6);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:.55rem .2rem;text-decoration:none;color:var(--text-muted);
  font-size:.85rem;font-weight:600;transition:.15s;
}
.bn-item svg{width:22px;height:22px}
.bn-item.active{color:var(--primary)}
.bn-item.active svg{filter:drop-shadow(0 0 5px rgba(212,175,55,.5))}
.bn-item:active{opacity:.6}
/* отступ снизу чтобы меню не перекрывало контент */
body{padding-bottom:20px}
body.dash-page{padding-bottom:20px}

/* ── Телефонный ввод с кодом страны ───────────────────────── */
.phone-wrap{display:flex;gap:0;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-2);transition:.15s}
.phone-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.phone-code{padding:.82rem .6rem;background:transparent;border:none;border-right:1px solid var(--border);color:var(--text);font-size:1.14rem;font-family:inherit;cursor:pointer;outline:none;flex-shrink:0;max-width:120px}
.phone-num{border:none !important;box-shadow:none !important;border-radius:0 !important;background:transparent !important;flex:1}
.phone-num:focus{outline:none;box-shadow:none !important}

/* ══ ТИПОГРАФИКА: Oswald для заголовков (брутальный, сжатый) ══
   Только GPU-безопасные свойства. Без backdrop-filter.
   Системный шрифт для body — быстро и надёжно на мобилках.    */
.card-title,
.modal-title,
.logo-title,
.hero-nm,
.lb-title,
.card-name {
  font-family: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Заглавными — только там где это не личное имя пользователя */
.card-title,
.modal-title,
.logo-title,
.lb-title,
.card-name {
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ══ ПРОСТРАНСТВО: чуть больше воздуха — учтено в .card/.card-title выше ══ */

/* ══ КНОПКА «ОТКРЫТЬ СЕЙФ» ════════════════════════════════════ */
.btn-open-safe {
  width: 100%;
  padding: 1.15rem 1rem;
  border: none; border-radius: 10px;
  background: var(--gold-grad);
  color: #1a1305;
  font-size: 1.08rem; font-weight: 900;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .3px;
  cursor: pointer;
  position: relative; overflow: hidden;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
  box-shadow: 0 0 0 0 rgba(212,175,55,.35), var(--gold-inset);
  animation: openBtnPulse 2.6s ease-in-out infinite;
  transition: transform .12s, opacity .12s;
}
.btn-open-safe:active  { transform: scale(.97); opacity: .9; }
.btn-open-safe:disabled {
  opacity: .55; cursor: not-allowed;
  animation: none;
  box-shadow: var(--gold-inset);
}
@keyframes openBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,.28), var(--gold-inset); }
  50%       { box-shadow: 0 0 0 6px rgba(212,175,55,0), var(--gold-inset); }
}

/* ══ АНИМАЦИЯ ЗАМКА ════════════════════════════════════════════ */
#lockOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,10,10,.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  opacity: 0;
  /* fade-in при появлении */
  animation: lockFadeIn .25s ease forwards;
}
@keyframes lockFadeIn { to { opacity: 1; } }
#lockOverlay.hiding { animation: lockFadeOut .4s ease forwards; }
@keyframes lockFadeOut { to { opacity: 0; } }

.lock-svg-wrap { position: relative; }

/* Дужка замка поднимается вверх */
.lock-shackle {
  transform-origin: center bottom;
  animation: shackleUp .55s cubic-bezier(.34,1.56,.64,1) .3s forwards;
}
@keyframes shackleUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-14px); }
}

/* Тело замка мягко покачивается */
.lock-body {
  animation: bodyWiggle .4s ease .85s forwards;
}
@keyframes bodyWiggle {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(-3deg); }
  75%     { transform: rotate(3deg); }
}

/* Золотое свечение вокруг замка */
.lock-glow {
  position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.25) 0%, transparent 70%);
  opacity: 0;
  animation: glowAppear .5s ease .7s forwards;
}
@keyframes glowAppear { to { opacity: 1; } }

.lock-label {
  color: #F0C84A;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem; font-weight: 700;
  opacity: 0;
  animation: lockFadeIn .3s ease .6s forwards;
}
.lock-sub {
  color: rgba(212,175,55,.55);
  font-size: .8rem;
  opacity: 0;
  animation: lockFadeIn .3s ease .85s forwards;
}

/* ══ FADE-ПЕРЕХОД МЕЖДУ СТРАНИЦАМИ (лёгкий) ═══════════════════ */
/* Переход страниц через JS (см. TOAST_JS) — не CSS animation на body,
   чтобы не было зум-петли на мобилках. */
.page-wrap{flex:1;display:flex;flex-direction:column;width:100%}