:root{
  --bg:#0B0E1F;
  --panel:#12192b; --panel-2:#0f1526; --text:#e9ecf1; --muted:#9aa4b2;
  --accent:#8c5bff; --accent-2:#5b9dff; --accent-3:#ff9e5b;
  --good:#52ffa8; --bad:#ff6b6b;
  --crash-blue:#3071F2; --crash-purple:#7130F2; --crash-orange:#F27130; --crash-red:#FF3355;
  --crash-progress:#8447FF;
  --primary-accent:#01FF80; --primary-accent-s:#01CC66;
  --light-title:#e9ecf1; --light-desc:#b7c0cf;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Roboto,"Helvetica Neue",Arial;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.wrap{flex:1;max-width:1100px;margin:0 auto;padding:20px;width:100%}
header{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo i{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#8c5bff,#5b9dff);display:inline-block}
.logo b{font-size:20px;letter-spacing:.3px}
.card{background:var(--panel);border-radius:16px;padding:20px}
.section{margin-bottom:60px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.field{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);padding:12px 14px;border-radius:12px;color:var(--text)}
.btn{appearance:none;border:0;padding:14px 18px;border-radius:12px;font-weight:700;color:#0c1220;background:linear-gradient(135deg,#8c5bff,#5b9dff);cursor:pointer;box-shadow:0 6px 14px rgba(99,122,255,.25)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.16)}
.muted{color:var(--muted);font-size:14px}
.circle{width:200px;height:200px;border-radius:50%;display:flex;justify-content:center;align-items:center;margin:24px auto;background:var(--panel-2);border:4px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.25s ease}
.circle span{font-size:46px;font-weight:800;letter-spacing:.5px;color:var(--light-title)}
.circle.blue{border-color:rgba(48,113,242,.45); box-shadow:0 0 24px rgba(48,113,242,.25)}
.circle.blue span{color:var(--crash-blue)}
.circle.purple{border-color:rgba(113,48,242,.45); box-shadow:0 0 24px rgba(113,48,242,.25)}
.circle.purple span{color:var(--crash-purple)}
.circle.orange{border-color:rgba(242,113,48,.45); box-shadow:0 0 26px rgba(242,113,48,.25)}
.circle.orange span{color:var(--crash-orange)}
.circle.red{border-color:rgba(255,51,85,.5); box-shadow:0 0 28px rgba(255,51,85,.3)}
.toast{position:fixed;right:20px;bottom:70px;background:rgba(16,23,40,.9);border:1px solid rgba(255,255,255,.12);color:var(--text);padding:10px 14px;border-radius:12px;opacity:0;transform:translateY(8px);transition:.3s ease;z-index:10}
.toast.show{opacity:1;transform:translateY(0)}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{padding:6px 10px;border-radius:10px;font-weight:700;font-size:13px;letter-spacing:.2px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
.badge.blue{color:var(--crash-blue);border-color:rgba(48,113,242,.35);background:rgba(48,113,242,.12)}
.badge.purple{color:var(--crash-purple);border-color:rgba(113,48,242,.35);background:rgba(113,48,242,.12)}
.badge.orange{color:var(--crash-orange);border-color:rgba(242,113,48,.35);background:rgba(242,113,48,.12)}
.badge.red{color:var(--crash-red);border-color:rgba(255,51,85,.35);background:rgba(255,51,85,.12)}
#pBtn{background:linear-gradient(135deg,var(--primary-accent),var(--primary-accent-s));color:#001b0e;font-size:20px;padding:16px 28px;border-radius:16px;box-shadow:0 10px 28px rgba(1,255,128,.25), inset 0 -2px 0 rgba(0,0,0,.15)}
#pBtn:active{transform:translateY(1px);filter:saturate(1.1)}
.section h2.title-center{margin:0 0 12px;text-align:center;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.01em;background:linear-gradient(180deg,var(--crash-purple),var(--crash-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.casino-info{margin-top:16px;display:grid;gap:16px}
.info-card{background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.info-card h3{margin:0 0 10px;font-size:18px;letter-spacing:.2px;font-weight:800;background:linear-gradient(180deg,var(--crash-purple),var(--crash-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:var(--light-title);opacity:.9}
.list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--light-desc)}
.list li .em{font-size:18px;line-height:1;margin-top:2px}
.check{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:820px){.check{grid-template-columns:1fr}}
.check .item{display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:12px}
.check .tick{font-size:16px;color:var(--primary-accent)}
.steps{counter-reset:step;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:12px}
.steps li:before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:800;color:#001b0e;background:linear-gradient(135deg,var(--primary-accent),var(--primary-accent-s))}
.why{display:grid;gap:10px}
.account-info{display:grid;gap:12px;background:var(--panel-2);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}
.kv .key{color:var(--light-desc)}
.kv .val{font-weight:800;color:var(--light-title)}
.attempts{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:820px){.prices{grid-template-columns:1fr}}
.price{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px}
.price .plan{font-weight:700}
.price .price-tag{padding:8px 12px;border-radius:12px;color:#001b0e;background:linear-gradient(135deg,var(--primary-accent),var(--primary-accent-s));font-weight:800}
.note{margin-top:6px;color:var(--light-desc);font-size:13px}
.guide-info{margin-top:16px;display:grid;gap:16px}
.callout{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);padding:10px 12px;border-radius:12px}
.nav a{margin-left:12px;color:var(--light-desc)}
.nav a.active{color:var(--light-title);font-weight:700}
/* === Bottom Dock === */
.dock-spacer{height:76px} /* чтобы контент не прятался за док */
@supports(padding: max(0px)) {
  .dock-spacer{height: calc(76px + env(safe-area-inset-bottom));}
}
.dock{
  position: fixed; left:0; right:0; bottom:0; z-index:1000;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:10px 12px env(safe-area-inset-bottom) 12px;
  background:rgba(10,14,30,.85); backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.08);
}
.dock .item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px 6px; border-radius:12px;
  color:var(--light-desc); text-decoration:none; font-weight:600; font-size:13px;
  border:1px solid transparent; background:transparent;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.dock .item .ic{font-size:18px; line-height:1;}
.dock .item:active{transform: translateY(1px)}
.dock .item.active{
  color:var(--light-title);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.logo{display:flex;gap:12px;align-items:center}
.logo-rocket{width:32px;height:32px;display:inline-block}
.logo-rocket{
  filter: drop-shadow(0 2px 10px rgba(140,91,255,.25));
  transition: transform .15s ease, filter .15s ease;
}
.logo:hover .logo-rocket{
  transform: translateY(-1px);
  filter: drop-shadow(0 3px 14px rgba(91,157,255,.35));
}
/* === Auth pages === */
.auth-wrap{min-height:calc(100vh - 40px);display:grid;place-items:center}
.auth-card{
  width:100%;max-width:640px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:28px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-title{margin:0 0 6px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(180deg,#8c5bff,#5b9dff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-sub{margin:0 0 18px;color:var(--light-desc)}
.form-grid{display:grid;gap:14px}
.field.lg{padding:16px 16px;font-size:16px;border-radius:14px}
.btn.block{width:100%;padding:16px 20px;font-size:16px;border-radius:14px}
.sep{height:1px;background:rgba(255,255,255,.08);margin:16px 0}
.small{font-size:13px;color:var(--muted)}
.inline{display:flex;gap:10px;align-items:center}
.inline > *{flex:1}
.logo .brand{opacity:.85;font-weight:800}
.logo-sub{font-size:12px;color:var(--muted);margin-left:6px}