/* Дизайн-система BrickPay — те же токены, что на лендинге. */
:root{
  --ink:#130B24; --ink-2:#1E1436; --ink-3:#271A44; --ink-edge:#0C0718; --line:#3B2B60;
  --gold:#AE79EE; --gold-hi:#C9A6F5; --gold-deep:#6E3CB4;
  --lime:#C9B3FF; --red:#D08AB8;
  --text:#F1ECFA; --muted:#A99CC6; --dim:#726594;
  --display:"Nunito","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --mono:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,#150C28,#0C0718 62%); background-attachment:fixed;
  color:var(--text); font-family:var(--body); font-weight:600;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px}

.wrap{max-width:900px; margin:0 auto; padding:0 22px}
.wrap-wide{max-width:1500px}

h1,h2,h3{font-family:var(--display); font-weight:900; text-transform:uppercase; margin:0; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(1.9rem,4vw,2.8rem); line-height:1;
   text-shadow:0 1px 0 #4A2D7A,0 2px 0 #3F2668,0 3px 0 #341F56,0 5px 12px rgba(0,0,0,.6)}
h2{font-size:1.35rem; text-shadow:0 2px 0 var(--ink-edge)}
h3{font-size:1.05rem}
p{margin:0}
.label{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--dim)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* шапка */
/* gap поменьше: кнопок в шапке стало больше и при 20px она переносилась на две строки */
header{display:flex; align-items:center; gap:10px; padding:18px 0; flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:1.15rem;
      text-decoration:none; color:var(--text)}
.logo .cap{width:28px; height:28px; border-radius:9px; position:relative;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 3px 0 var(--gold-deep)}
.logo .cap::after{content:""; position:absolute; left:8px; top:-4px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(180deg,#D9C2FA,var(--gold)); box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.spacer{margin-left:auto}

/* кирпич */
.brick{
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line); border-top-color:#3d2f66; border-radius:var(--r);
  box-shadow:0 6px 0 var(--ink-edge), 0 18px 34px rgba(0,0,0,.5);
}
.card{padding:24px; margin-bottom:22px}

/* кнопки */
.btn{
  display:inline-block; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:1rem; border:0; cursor:pointer; border-radius:13px; padding:16px 24px; color:#1E1030;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); text-decoration:none; text-align:center;
  box-shadow:0 5px 0 var(--gold-deep), 0 12px 24px rgba(174,121,238,.22);
  transition:transform .07s ease, box-shadow .07s ease, background .2s ease;
}
.btn:hover{background:linear-gradient(180deg,#D9C2FA,var(--gold-hi))}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--gold-deep)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:0 5px 0 var(--gold-deep)}
.btn-ghost{background:var(--ink-3); color:var(--text); border:1px solid var(--line); box-shadow:0 4px 0 var(--ink-edge)}
.btn-ghost:hover{background:#2A1F47}
.btn-ghost:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink-edge)}
.btn-sm{padding:10px 16px; font-size:.8rem; border-radius:11px}
.btn-wide{width:100%}

/* поля */
label.field{display:block; margin-bottom:14px}
.field .label{display:block; margin-bottom:6px}
input[type=text], input[type=email], input[type=number]{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; color:var(--text); font-family:var(--body); font-size:1rem;
}
input.num{font-family:var(--mono); font-size:1.3rem; font-weight:700}
input:focus{outline:none; border-color:var(--gold)}
input.bad{border-color:var(--red)}

.presets{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px; margin:14px 0}
.preset{
  border:1px solid var(--line); background:var(--ink); color:var(--muted); cursor:pointer;
  border-radius:10px; padding:11px 4px; font-family:var(--mono); font-size:.85rem; font-variant-numeric:tabular-nums;
}
.preset:hover{color:var(--text); border-color:#4A3A70}
.preset[aria-pressed=true]{background:rgba(174,121,238,.1); border-color:var(--gold); color:var(--gold)}

/* строка с ценой пасса */
.pass-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0;
  background:rgba(174,121,238,.07); border:1px dashed rgba(174,121,238,.4); border-radius:12px; padding:14px;
}
.pass-row .val{margin-left:auto; font-family:var(--mono); font-size:1.25rem; font-weight:700; color:var(--gold)}

.totals{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0}
.total-box{background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 15px}
.total-box.out{border-color:rgba(174,121,238,.35); background:rgba(174,121,238,.06)}
.total-box .v{font-family:var(--mono); font-size:1.35rem; font-weight:700}
.total-box.out .v{color:var(--gold)}

/* шаги */
.steps-nav{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap}
.step-chip{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; color:var(--dim);
}
.step-chip.on{border-color:var(--gold); color:var(--gold); background:rgba(174,121,238,.08)}
.step-chip.done{border-color:rgba(201,179,255,.4); color:var(--lime)}

/* сообщения */
.msg{border-radius:12px; padding:14px 16px; margin:14px 0; font-size:.94rem; display:none}
.msg.on{display:block}
.msg.err{background:rgba(208,138,184,.1); border:1px solid rgba(208,138,184,.4); color:#E7A9C4}
.msg.ok{background:rgba(201,179,255,.09); border:1px solid rgba(201,179,255,.35); color:#C9B3FF}
.msg.info{background:rgba(174,121,238,.08); border:1px solid rgba(174,121,238,.3); color:var(--gold-hi)}

/* статусы */
.chip{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
      border:1px solid var(--line); border-radius:999px; padding:5px 11px; color:var(--muted); white-space:nowrap}
.chip.gold{border-color:rgba(174,121,238,.4); color:var(--gold); background:rgba(174,121,238,.07)}
.chip.green{border-color:rgba(201,179,255,.35); color:var(--lime); background:rgba(201,179,255,.07)}
.chip.red{border-color:rgba(208,138,184,.4); color:var(--red); background:rgba(208,138,184,.07)}

/* таймлайн заказа */
.timeline{list-style:none; padding:0; margin:20px 0}
.timeline li{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid rgba(38,48,74,.5)}
.timeline li:last-child{border-bottom:0}
.timeline .dot{width:12px; height:12px; border-radius:50%; background:var(--ink-3);
               border:2px solid var(--line); margin-top:7px; flex:none}
.timeline li.done .dot{background:var(--lime); border-color:var(--lime)}
.timeline li.now .dot{background:var(--gold); border-color:var(--gold); animation:pulse 1.8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(174,121,238,0)}0%,100%{box-shadow:0 0 0 0 rgba(174,121,238,.35)}}
.timeline .t{font-weight:700}
.timeline li:not(.done):not(.now) .t{color:var(--dim); font-weight:400}

/* таблицы (админка, список заказов) */
table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--dim)}
td.num, th.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
tr:hover td{background:rgba(255,255,255,.02)}
.scroll-x{overflow-x:auto}

footer{border-top:1px solid var(--line); margin-top:50px; padding:26px 0 40px; color:var(--dim); font-size:.86rem}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--gold)}

.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:620px){ .totals,.grid-2{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }


/* ================= тихий фон, общий с главной ================= */
/* ореолы: тёплое золото сверху-справа + холодный намёк снизу-слева */
/* строгое свечение: тёплый золотой сверху-справа + едва заметный холодный слева */
.glow{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(75% 55% at 80% -8%, rgba(174,121,238,.11), transparent 60%),
    radial-gradient(55% 45% at 8% 2%, rgba(160,130,230,.05), transparent 62%);
  animation: glowBreathe 20s ease-in-out infinite;
}
@keyframes glowBreathe{ 50%{ opacity:.9; } }
/* аккуратная виньетка — гасит углы */
.plate{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 115% at 50% -8%, transparent 56%, rgba(0,0,0,.6));
}
/* тонкая инженерная сетка, гаснет к краям */
.plate::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 95% at 72% 0%, #000 22%, transparent 80%);
  mask-image: radial-gradient(120% 95% at 72% 0%, #000 22%, transparent 80%);
}
/* плёночное зерно — убирает бандинг, даёт фактуру */
.plate::after{
  content:""; position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ .glow{ animation:none; } }



/* наклон панелей по курсору — те же правила, что на главной */
/* перспективу задаёт сам элемент внутри transform: у контейнера её центр
   находится в середине блока, и элементы с краю выворачивало клином */
.tilt{
  position: relative;
  /* НЕ preserve-3d: иначе панель передаёт свою перспективу детям, и кнопку,
     сидящую далеко от её центра, проецирует клином. Плоская карточка —
     содержимое наклоняется вместе с ней, как рисунок на поверхности. */
  transform-style: flat;
  /* transform ведёт покадровый сглаживатель в JS — без CSS-перехода,
     иначе получалось два сглаживания подряд и запаздывание за курсором. */
  will-change: transform;
  transition: box-shadow .25s ease;
}
/* тень поднимается один раз на наведение, а не пересчитывается каждый кадр */
.tilt.live{ box-shadow: 0 10px 0 var(--ink-edge), 0 28px 46px rgba(0,0,0,.62); }
.tilt::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(201,166,245,.13), transparent 55%);
  opacity:0; transition: opacity .3s ease;
}
.tilt.live::after{ opacity:1; }

/* кнопка «Назад» в шапке */
.back-btn{ display:inline-flex; align-items:center; gap:7px; }
.back-btn span{ font-size:1.05em; line-height:1; }
/* пройденный шаг — по нему можно вернуться, поэтому он ведёт себя как ссылка */
.step-chip.clickable{ cursor:pointer; }
.step-chip.clickable:hover{ border-color: var(--gold); color: var(--gold); }

/* кнопка входа через Google + разделитель */
.google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.or-line{ display:flex; align-items:center; gap:12px; margin:16px 0 18px; color:var(--dim); font-size:.8rem; }
.or-line::before, .or-line::after{ content:""; flex:1; height:1px; background:var(--line); }

/* кнопка «Главная» рядом с «Назад» */
.home-btn{ display:inline-flex; align-items:center; gap:7px; }
.home-btn span{ font-size:1.05em; line-height:1; }
/* на узких экранах в шапке остаётся только самое нужное */
@media (max-width: 620px){
  .home-btn span, .back-btn span{ margin:0; }
  .home-btn, .back-btn{ padding:9px 11px; }
}

/* ---------- профиль ---------- */
.profile-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.avatar{
  width:56px; height:56px; border-radius:16px; flex:none;
  display:grid; place-items:center;
  font-family:var(--display); font-size:1.5rem; color:#1E1030;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow:0 4px 0 var(--gold-deep);
}
.profile-mail{ font-weight:700; font-size:1.05rem; word-break:break-all; }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stat-box{
  background:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:14px 12px; text-align:center;
}
.stat-box .v{ font-family:var(--display); font-size:1.35rem; letter-spacing:-.02em; }
.stat-box .v.gold{ color:var(--gold); }
.stat-box .label{ margin-top:4px; }
@media (max-width:560px){ .stats-row{ grid-template-columns:repeat(2,1fr); } }

/* На узких экранах в шапке остаётся суть: подписи кнопок навигации прячем,
   оставляя значки — иначе шапка занимает три строки из четырёх видимых. */
@media (max-width: 700px){
  header{ gap:8px; }
  .logo{ font-size:1rem; }
  .home-btn .txt, .back-btn .txt{ display:none; }
}

/* сумма выше того, что можем выдать со склада */
.preset.off{ opacity:.35; cursor:not-allowed; }
.preset.off:hover{ border-color:var(--line); color:var(--muted); }


/* --- Юридические страницы: читабельный длинный текст --- */
.legal-doc{ max-width:76ch; margin:0 auto; line-height:1.7; }
.legal-doc h1{ margin:0 0 4px; }
.legal-doc .updated{ color:var(--muted); font-size:.9rem; margin:0 0 26px; }
.legal-doc h2{ font-size:1.15rem; margin:28px 0 10px; color:var(--text); }
.legal-doc p{ margin:0 0 12px; color:var(--text); }
.legal-doc ul{ margin:0 0 12px; padding-left:22px; }
.legal-doc li{ margin-bottom:7px; color:var(--text); }
.legal-doc a{ color:var(--gold); }
.legal-doc .note{ background:var(--ink-3); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; padding:14px 16px; margin:20px 0; }
.legal-doc .ok{ color:#3fbf7a; } .legal-doc .no{ color:#ff8a66; }