@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --bg:        #f0f4f8;
  --card:      #ffffff;
  --s1:        #f7f9fc;
  --s2:        #edf2f7;
  --s3:        #d4e0ee;
  --border:    rgba(30,80,160,0.08);
  --border-f:  rgba(30,80,160,0.22);
  --accent:    #22c55e;
  --accent-d:  #16a34a;
  --accent-dd: #166534;
  --ag:        rgba(34,197,94,0.1);
  --text:      #0f172a;
  --text2:     #475569;
  --text3:     #94a3b8;
  --error:     #ef4444;
  --ok:        #16a34a;
  --gold:      #f59e0b;
  --r:         12px;
  --r-lg:      18px;
  --sidebar-w: 248px;
  --topbar-h:  64px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:15px; scroll-behavior:smooth }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh }
h1,h2,h3,h4,h5 { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700 }
a { text-decoration:none; color:inherit }
button { cursor:pointer; font-family:'DM Sans',sans-serif }
img { display:block }

/* -- PAGES -- */
.page { display:none }
.page.active { display:block }

/* -- LANDING -- */
.land-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(240,244,248,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.land-logo { display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px }
.logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--accent),var(--accent-d)); border-radius:12px; display:flex; align-items:center; justify-content:center }
.logo-icon svg { width:20px; height:20px }
.land-nav-links { display:flex; align-items:center; gap:28px }
.land-nav-links a { font-size:14px; font-weight:500; color:var(--text2); transition:color .2s }
.land-nav-links a:hover { color:var(--accent-d) }
.nav-btns { display:flex; gap:10px }
.btn-ghost { padding:8px 18px; border:1.5px solid var(--border-f); border-radius:10px; background:transparent; font-size:13.5px; font-weight:600; color:var(--accent-d); transition:all .2s }
.btn-ghost:hover { background:var(--ag); border-color:var(--accent) }
.btn-primary { padding:9px 20px; border:none; border-radius:10px; background:var(--accent-d); color:#fff; font-size:13.5px; font-weight:700; transition:all .2s; position:relative; overflow:hidden }
.btn-primary:hover { background:var(--accent); box-shadow:0 4px 16px rgba(22,163,74,.3); transform:translateY(-1px) }

/* -- HERO -- */
.hero { padding:96px 5% 80px; background:linear-gradient(150deg,#f0f7ea 0%,#e4f0fd 50%,#f0f4f8 100%); position:relative; overflow:hidden }
.hero::before { content:''; position:absolute; top:-120px; right:-80px; width:560px; height:560px; background:radial-gradient(circle,rgba(34,197,94,0.13) 0%,transparent 65%); border-radius:50% }
.hero::after { content:''; position:absolute; bottom:-80px; left:5%; width:320px; height:320px; background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 65%); border-radius:50% }
.hero-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1 }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(22,163,74,0.1); border:1px solid rgba(22,163,74,0.2); border-radius:30px; padding:5px 14px; font-size:12px; font-weight:600; color:var(--accent-d); margin-bottom:20px; animation:fadeInUp .6s ease both }
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2s infinite }
.hero h1 { font-size:52px; line-height:1.08; letter-spacing:-1.5px; margin-bottom:18px; animation:fadeInUp .6s .1s ease both }
.hero h1 span { color:var(--accent-d) }
.hero-sub { font-size:16px; color:var(--text2); line-height:1.7; margin-bottom:32px; font-weight:300; animation:fadeInUp .6s .2s ease both }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; animation:fadeInUp .6s .3s ease both }
.btn-hero { padding:14px 28px; border-radius:14px; font-size:15px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; transition:all .25s }
.btn-hero-primary { background:var(--accent-d); color:#fff; border:none; box-shadow:0 8px 24px rgba(22,163,74,.25) }
.btn-hero-primary:hover { background:var(--accent); transform:translateY(-2px); box-shadow:0 14px 36px rgba(22,163,74,.35) }
.btn-hero-secondary { background:#fff; color:var(--text); border:1.5px solid var(--border-f) }
.btn-hero-secondary:hover { border-color:var(--accent); background:var(--ag) }
.hero-stats { display:flex; gap:32px; margin-top:40px; animation:fadeInUp .6s .4s ease both }
.hstat-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:30px; font-weight:800; color:var(--accent-d) }
.hstat-lbl { font-size:12px; color:var(--text2); margin-top:2px }
.hero-visual { position:relative; animation:fadeInUp .6s .2s ease both }
.hero-card-main { background:#fff; border-radius:24px; padding:28px; box-shadow:0 24px 64px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05); border:1px solid var(--border) }
.hc-title { font-size:12px; font-weight:700; color:var(--text3); margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px }
.hc-scooter { display:flex; align-items:center; gap:14px; padding:14px; background:var(--s1); border-radius:14px; margin-bottom:10px; border:1px solid var(--border) }
.hc-scooter:last-child { margin-bottom:0 }
.scoot-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.si-green { background:linear-gradient(135deg,#dcfce7,#bbf7d0) }
.si-blue  { background:linear-gradient(135deg,#dbeafe,#bfdbfe) }
.si-gold  { background:linear-gradient(135deg,#fef3c7,#fde68a) }
.hc-name { font-weight:600; font-size:14px }
.hc-earn { font-size:12px; color:var(--text3); margin-top:2px }
.hc-badge { margin-left:auto; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700 }
.badge-green  { background:#dcfce7; color:#16a34a }
.badge-blue   { background:#dbeafe; color:#2563eb }
.badge-gold   { background:#fef3c7; color:#d97706 }
.hero-float-card { position:absolute; top:-20px; right:-20px; background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 8px 28px rgba(0,0,0,.12); border:1px solid var(--border); min-width:155px; animation:float 3s ease-in-out infinite }
.hfc-label { font-size:11px; color:var(--text2); margin-bottom:4px }
.hfc-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:var(--accent-d) }
.hfc-sub { font-size:11px; color:var(--text3); margin-top:2px }
.hero-float-card2 { position:absolute; bottom:-10px; left:-20px; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:0 8px 24px rgba(0,0,0,.1); border:1px solid var(--border); display:flex; align-items:center; gap:10px; animation:float 3s 1.5s ease-in-out infinite }
.hfc2-icon { width:32px; height:32px; background:var(--ag); border-radius:8px; display:flex; align-items:center; justify-content:center }
.hfc2-text { font-size:12px; font-weight:600 }
.hfc2-sub { font-size:11px; color:var(--text3) }

/* -- SECTION -- */
.section { padding:80px 5% }
.section-inner { max-width:1160px; margin:0 auto }
.section-label { font-size:12px; font-weight:700; color:var(--accent-d); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px }
.section-title { font-size:38px; letter-spacing:-.5px; margin-bottom:14px }
.section-sub { font-size:15px; color:var(--text2); line-height:1.65; max-width:560px }

/* -- HOW -- */
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px }
.how-card { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:28px 22px; position:relative; transition:transform .3s,box-shadow .3s }
.how-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(0,0,0,.08) }
.how-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:48px; font-weight:800; color:var(--s3); line-height:1; margin-bottom:16px }
.how-icon { width:46px; height:46px; background:var(--ag); border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:14px }
.how-icon svg { width:22px; height:22px; color:var(--accent-d) }
.how-title { font-size:16px; font-weight:700; margin-bottom:8px }
.how-text { font-size:13.5px; color:var(--text2); line-height:1.6 }
.how-arrow { position:absolute; right:-14px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:#fff; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; color:var(--text3) }
.how-card:last-child .how-arrow { display:none }

/* -- CATALOG (landing) -- */
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px }
.cat-card { background:var(--card); border:1px solid var(--border); border-radius:26px; overflow:hidden; transition:transform .3s,box-shadow .3s; position:relative }
.cat-card:hover { transform:translateY(-6px); box-shadow:0 28px 64px rgba(0,0,0,.1) }
.cat-card.featured { border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,197,94,.12) }
.cat-card-top { padding:28px 24px 20px; background:var(--s1) }
.cat-popular { position:absolute; top:16px; right:16px; background:var(--accent-d); color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px }
.cat-scoot-visual { height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:16px }
.cat-name { font-size:20px; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif }
.cat-price { font-size:28px; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; color:var(--accent-d); margin-top:6px }
.cat-price span { font-size:14px; font-weight:400; color:var(--text2) }
.cat-body { padding:20px 24px 24px }
.cat-stat { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border) }
.cat-stat:last-of-type { border-bottom:none }
.cat-stat-lbl { font-size:13px; color:var(--text2) }
.cat-stat-val { font-size:13.5px; font-weight:600 }
.cat-btn { width:100%; padding:13px; border:none; border-radius:12px; font-size:14px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; margin-top:18px; transition:all .2s; cursor:pointer }
.cat-btn-main { background:var(--accent-d); color:#fff }
.cat-btn-main:hover { background:var(--accent); box-shadow:0 6px 18px rgba(22,163,74,.3); transform:translateY(-1px) }
.cat-btn-outline { background:transparent; color:var(--accent-d); border:1.5px solid var(--border-f) }
.cat-btn-outline:hover { background:var(--ag); border-color:var(--accent) }

/* -- STATS BAR -- */
.stats-bar { background:linear-gradient(135deg,var(--accent-d),#15803d); padding:52px 5% }
.stats-bar-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.sbar-item { text-align:center }
.sbar-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:38px; font-weight:800; color:#fff }
.sbar-lbl { font-size:13px; color:rgba(255,255,255,.75); margin-top:4px }

/* -- FAQ -- */
.faq-list { margin-top:42px; max-width:740px }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:16px; margin-bottom:10px; overflow:hidden; transition:box-shadow .2s }
.faq-item.open { box-shadow:0 4px 16px rgba(0,0,0,.06) }
.faq-q { padding:18px 22px; font-weight:600; font-size:14.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; transition:background .2s }
.faq-q:hover { background:var(--s1) }
.faq-q svg { width:18px; height:18px; color:var(--text3); transition:transform .25s; flex-shrink:0 }
.faq-item.open .faq-q svg { transform:rotate(180deg) }
.faq-a { display:none; padding:0 22px 18px; font-size:13.5px; color:var(--text2); line-height:1.65 }
.faq-item.open .faq-a { display:block }

/* -- FOOTER -- */
.footer { background:var(--text); padding:52px 5% 32px; color:rgba(255,255,255,.7) }
.footer-inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px }
.footer-brand { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:8px }
.footer-desc { font-size:13px; line-height:1.65 }
.footer-col h4 { font-family:'Plus Jakarta Sans',sans-serif; color:#fff; font-size:13.5px; margin-bottom:14px }
.footer-col a { display:block; font-size:13px; margin-bottom:8px; transition:color .2s }
.footer-col a:hover { color:#fff }
.footer-bottom { max-width:1160px; margin:32px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; font-size:12.5px }

/* -- AUTH -- */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); position:relative; overflow:hidden }
.auth-bg-deco { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.auth-dc { position:absolute; border-radius:50% }
.auth-dc1 { width:600px; height:600px; background:radial-gradient(circle,rgba(34,197,94,0.1) 0%,transparent 65%); top:-200px; right:-150px }
.auth-dc2 { width:480px; height:480px; background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 65%); bottom:-140px; left:-120px }
.auth-dots { position:fixed; inset:0; pointer-events:none; z-index:0; background-image:radial-gradient(circle,rgba(34,197,94,0.12) 1px,transparent 1px); background-size:30px 30px; opacity:.5 }
.auth-wrapper { position:relative; z-index:1; width:100%; max-width:420px }
.auth-back { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text2); cursor:pointer; margin-bottom:20px; width:fit-content; transition:color .2s }
.auth-back:hover { color:var(--accent-d) }
.auth-back svg { width:16px; height:16px }
.auth-logo { display:flex; align-items:center; justify-content:center; margin-bottom:22px }
.auth-logo-box { width:52px; height:52px; border-radius:18px; background:linear-gradient(145deg,var(--accent),var(--accent-d)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(22,163,74,.3),0 0 0 8px rgba(22,163,74,.08) }
.auth-logo-box svg { width:24px; height:24px }
.auth-card { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:30px 28px 26px; box-shadow:0 20px 64px rgba(0,0,0,.08) }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--s2); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:26px }
.auth-tab { font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:600; padding:9px; border:none; background:transparent; color:var(--text2); border-radius:9px; cursor:pointer; transition:all .2s }
.auth-tab.on { background:var(--card); color:var(--accent-d); box-shadow:0 1px 4px rgba(0,0,0,.1) }
.auth-panel { display:none }
.auth-panel.on { display:block; animation:fadeInUp .22s ease both }
.field { margin-bottom:15px }
.flabel { display:flex; align-items:center; font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.9px; margin-bottom:7px }
.flabel .opt { text-transform:none; letter-spacing:0; font-weight:400; font-size:11px; margin-left:auto }
.prow { display:flex; gap:8px }
.ccbtn { display:flex; align-items:center; gap:7px; background:var(--s1); border:1.5px solid var(--border); border-radius:var(--r); padding:0 11px; min-width:96px; height:46px; cursor:pointer; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; transition:all .2s; position:relative; user-select:none }
.ccbtn:hover,.ccbtn.op { border-color:var(--border-f); background:#fff; box-shadow:0 0 0 3px var(--ag) }
.cc-flag-img { width:22px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 1px 3px rgba(0,0,0,.18); flex-shrink:0 }
.cccode { font-size:13px; color:var(--text2); font-weight:500 }
.cchev { margin-left:auto; color:var(--text3); transition:transform .2s; flex-shrink:0 }
.ccbtn.op .cchev { transform:rotate(180deg) }
.ccdrop { display:none; position:absolute; top:calc(100% + 6px); left:0; width:230px; background:#fff; border:1.5px solid var(--border-f); border-radius:14px; overflow:hidden; z-index:100; box-shadow:0 14px 44px rgba(0,0,0,.12); max-height:280px; overflow-y:auto }
.ccdrop.sh { display:block; animation:fadeInUp .13s ease }
.cc-search-wrap { padding:8px 10px 6px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:1 }
.cc-search { width:100%; background:var(--s1); border:1px solid var(--border); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:12.5px; padding:7px 10px 7px 30px; outline:none; transition:border-color .2s }
.cc-search:focus { border-color:var(--border-f) }
.cc-search-ico { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--text3); pointer-events:none }
.ccopt { display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; font-size:12.5px; transition:background .12s }
.ccopt:hover { background:var(--s1) }
.ccopt .flag-wrap { width:24px; height:16px; border-radius:3px; overflow:hidden; flex-shrink:0 }
.ccopt .flag-wrap img { width:100%; height:100%; object-fit:cover }
.ccopt .nm { flex:1; color:var(--text); font-weight:500 }
.ccopt .cd { color:var(--text3); font-size:12px }
.ccopt.hidden { display:none }
.pfield { flex:1 }
.iw { position:relative; display:flex; align-items:center }
.iico { position:absolute; left:13px; color:var(--text3); display:flex; pointer-events:none; transition:color .2s }
.iico svg { width:15px; height:15px }
input[type="tel"],input[type="password"],input[type="text"],input[type="number"] { width:100%; background:var(--s1); border:1.5px solid var(--border); border-radius:var(--r); color:var(--text); font-family:'DM Sans',sans-serif; font-size:14px; padding:12px 14px 12px 39px; outline:none; transition:all .2s }
input::placeholder { color:var(--text3) }
input:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--ag) }
.iw:focus-within .iico { color:var(--accent-d) }
.field.er input { border-color:var(--error)!important; box-shadow:0 0 0 3px rgba(239,68,68,.1)!important }
.eyebtn { position:absolute; right:12px; background:none; border:none; cursor:pointer; color:var(--text3); display:flex; padding:0; transition:color .2s }
.eyebtn svg { width:15px; height:15px }
.pwbars { display:flex; gap:4px; margin-top:7px }
.pwbar { flex:1; height:2.5px; border-radius:2px; background:var(--s3); transition:background .3s }
.pwbar.s1 { background:#ef4444 }
.pwbar.s2 { background:#f59e0b }
.pwbar.s3 { background:#84cc16 }
.pwbar.s4 { background:var(--ok) }
.pwlbl { font-size:11px; color:var(--text3); margin-top:5px; height:13px }
.refbadge { position:absolute; right:12px; font-size:9.5px; font-weight:700; letter-spacing:.6px; padding:2px 7px; border-radius:5px; background:rgba(22,163,74,.1); color:var(--ok); border:1px solid rgba(22,163,74,.2); opacity:0; transition:opacity .25s; pointer-events:none }
.refbadge.on { opacity:1 }
.refbadge.bad { background:rgba(239,68,68,.1); color:var(--error); border-color:rgba(239,68,68,.2) }
.phint { display:flex; align-items:center; gap:5px; margin-top:6px; font-size:11.5px; color:var(--text3); opacity:0; transform:translateY(-3px); transition:all .2s }
.phint.sh { opacity:1; transform:translateY(0) }
.phint svg { width:13px; height:13px; min-width:13px; fill:#25d366 }
.emsg { display:none; align-items:center; gap:5px; font-size:11.5px; color:var(--error); margin-top:6px }
.emsg.sh { display:flex }
.emsg svg { width:12px; height:12px; min-width:12px }
.agree-row { display:flex; align-items:flex-start; gap:10px; margin:2px 0 20px; cursor:pointer }
.chkbox { width:18px; height:18px; min-width:18px; margin-top:1px; border:1.5px solid var(--border-f); border-radius:5px; display:flex; align-items:center; justify-content:center; transition:all .18s; background:#fff }
.chkbox.on { background:var(--accent-d); border-color:var(--accent-d) }
.chkbox svg { width:10px; height:10px; display:none }
.chkbox.on svg { display:block }
.agree-txt { font-size:12.5px; color:var(--text2); line-height:1.55; user-select:none }
.agree-txt a { color:var(--accent-d) }
.forgot { display:flex; justify-content:flex-end; margin:-4px 0 18px }
.forgot a { font-size:12px; color:var(--text3); transition:color .2s }
.forgot a:hover { color:var(--text2) }
.auth-btn { width:100%; padding:13px; border:none; border-radius:var(--r); background:var(--accent-d); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; position:relative; overflow:hidden; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:7px }
.auth-btn:hover { background:var(--accent); box-shadow:0 8px 26px rgba(22,163,74,.28); transform:translateY(-1px) }
.auth-btn.ld { opacity:.75; pointer-events:none }
.auth-btn svg { width:16px; height:16px }
.spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; display:none }
.auth-btn.ld .albl { display:none }
.auth-btn.ld .spin { display:block }

/* ======================================
   DASHBOARD LAYOUT - FIXED
======================================= */
.app-layout { min-height:100vh }

/* Sidebar */
.sidebar { width:var(--sidebar-w); min-height:100vh; background:var(--card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; left:0; top:0; height:100vh; z-index:50; transition:transform .3s; }
.sb-logo { padding:22px 20px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border) }
.sb-logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:17px }
.sb-nav { flex:1; padding:14px 10px; overflow-y:auto }
.sb-label { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:1px; padding:6px 10px; margin-top:10px; margin-bottom:2px }
.sb-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--text2); cursor:pointer; transition:all .18s; margin-bottom:2px; position:relative }
.sb-item:hover { background:var(--s1); color:var(--text) }
.sb-item.active { background:var(--ag); color:var(--accent-d); font-weight:600 }
.sb-item svg { width:17px; height:17px; flex-shrink:0 }
.sb-item .sb-badge { margin-left:auto; background:var(--accent-d); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px }
.sb-bottom { padding:14px 10px; border-top:1px solid var(--border) }
.sb-user { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:background .18s }
.sb-user:hover { background:var(--s1) }
.sb-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-d)); display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; color:#fff; flex-shrink:0 }
.sb-user-info { overflow:hidden; flex:1 }
.sb-user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sb-user-role { font-size:11px; color:var(--text3) }

/* App main - FIXED SCROLL */
.app-main { margin-left:var(--sidebar-w); width:calc(100% - var(--sidebar-w)); min-height:100vh; display:flex; flex-direction:column }
.app-topbar { height:var(--topbar-h); background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:40 }
.topbar-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700 }
.topbar-right { display:flex; align-items:center; gap:10px }
.topbar-notif { width:38px; height:38px; border-radius:10px; background:var(--s1); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .18s; position:relative }
.topbar-notif:hover { background:var(--s2) }
.topbar-notif svg { width:17px; height:17px; color:var(--text2) }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--error); border:1.5px solid var(--card) }
.topbar-dep { min-width:108px; padding:9px 14px; padding-left:34px; background:var(--accent-d); color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-align:center; position:relative; flex-shrink:1 }
.topbar-dep:hover { background:var(--accent); box-shadow:0 4px 14px rgba(22,163,74,.3) }
.topbar-dep-outline { min-width:104px; padding:9px 14px; padding-left:34px; background:transparent; color:var(--accent-d); border:1.5px solid var(--border-f); border-radius:10px; font-size:13px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-align:center; position:relative; flex-shrink:1 }
.topbar-dep-outline:hover { background:var(--ag) }

.app-content { padding:20px 28px 28px; flex:1; overflow-y:auto; width:100%; box-sizing:border-box }
.sub-page { display:none }
.sub-page.active { display:block; animation:fadeIn .2s ease both; min-height:calc(100vh - 64px); width:100%; padding-top:0 }

/* -- STAT CARDS -- */
.dash-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; width:100% }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px 20px; transition:all .25s; cursor:default; animation:fadeInUp .4s ease both }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.07) }
.sc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.sc-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.sci-green  { background:#dcfce7 }
.sci-blue   { background:#dbeafe }
.sci-gold   { background:#fef3c7 }
.sci-purple { background:#f3e8ff }
.sc-icon svg { width:20px; height:20px }
.sc-change { display:flex; align-items:center; gap:3px; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:20px }
.sc-change.up   { background:#dcfce7; color:#16a34a }
.sc-change.down { background:#fee2e2; color:#ef4444 }
.sc-change.flat { background:#e2e8f0; color:#64748b }
.sc-change svg { width:12px; height:12px }
.sc-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:28px; font-weight:800; line-height:1; margin-bottom:4px }
.sc-lbl { font-size:12.5px; color:var(--text2) }

/* -- CHART -- */
.dash-bottom { display:grid; grid-template-columns:2fr 1fr; gap:18px; width:100% }
.chart-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px; width:100%; min-width:0 }
.chart-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px }
.chart-card-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700 }
.chart-tabs { display:flex; gap:4px; background:var(--s2); border-radius:8px; padding:3px }
.chart-tab { padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--text2); cursor:pointer; transition:all .2s }
.chart-tab.on { background:var(--card); color:var(--accent-d); box-shadow:0 1px 3px rgba(0,0,0,.08) }
.chart-area { height:240px; position:relative; overflow:hidden }
.chart-bars { display:flex; align-items:flex-end; gap:8px; height:180px; padding:0 4px }
.bar-group { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 }
.bar { border-radius:6px 6px 0 0; transition:height .5s cubic-bezier(.34,1.1,.64,1); cursor:pointer; min-width:0 }
.bar:hover { filter:brightness(1.15) }
.bar-lbl { font-size:10.5px; color:var(--text3); white-space:nowrap }

/* -- ACTIVITY -- */
.activity-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px }
.act-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; margin-bottom:16px }
.act-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border) }
.act-item:last-child { border-bottom:none }
.act-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.act-icon svg { width:16px; height:16px }
.act-info { flex:1; min-width:0 }
.act-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.act-date { font-size:11.5px; color:var(--text3); margin-top:1px }
.act-amt { font-size:13.5px; font-weight:700; flex-shrink:0 }
.act-amt.pos { color:var(--ok) }
.act-amt.neg { color:var(--error) }

/* -- SCOOTERS -- */
.scooters-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px }
.scooters-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; width:100% }
.my-scoot-card { background:var(--card); border:1px solid var(--border); border-radius:22px; overflow:hidden; transition:all .25s }
.my-scoot-card:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.09) }
.msc-top { padding:20px; background:var(--s1); position:relative }
.msc-status { position:absolute; top:14px; right:14px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700 }
.msc-status.active   { background:#dcfce7; color:#16a34a }
.msc-status.inactive { background:#fee2e2; color:#ef4444 }
.msc-visual { height:80px; display:flex; align-items:center; justify-content:center; margin-bottom:12px }
.msc-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700 }
.msc-id { font-size:11.5px; color:var(--text3); margin-top:2px }
.msc-body { padding:16px 20px }
.msc-stat { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border) }
.msc-stat:last-of-type { border-bottom:none; padding-bottom:0 }
.msc-stat-l { font-size:12.5px; color:var(--text2) }
.msc-stat-r { font-size:13px; font-weight:600 }

/* -- CATALOG PAGE -- */
.catalog-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; width:100% }

/* -- TRANSACTIONS -- */
.tx-filters { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap }
.tx-filter { padding:7px 16px; border-radius:8px; font-size:13px; font-weight:600; border:1.5px solid var(--border); background:var(--card); color:var(--text2); cursor:pointer; transition:all .18s }
.tx-filter.on { background:var(--ag); border-color:var(--accent); color:var(--accent-d) }
.tx-table-wrap { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; width:100% }
.tx-table { width:100%; border-collapse:collapse }
.tx-table th { padding:12px 18px; font-size:11.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; text-align:left; background:var(--s1); border-bottom:1px solid var(--border) }
.tx-table td { padding:14px 18px; font-size:13.5px; border-bottom:1px solid var(--border) }
.tx-table tr:last-child td { border-bottom:none }
.tx-table tr:hover td { background:var(--s1) }
.tx-type { display:flex; align-items:center; gap:10px }
.tx-type-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.tx-name { font-weight:600; font-size:13px }
.tx-sub { font-size:11.5px; color:var(--text3); margin-top:1px }
  .tx-status { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; display:inline-block }
  .tx-status.done { background:#dcfce7; color:#16a34a }
  .tx-status.pend { background:#fef3c7; color:#f59e0b }

/* -- REFERRAL -- */
.ref-hero { width:100%; background:linear-gradient(135deg,var(--accent-d),var(--accent)); border-radius:24px; padding:34px; color:#fff; margin-bottom:24px; position:relative; overflow:hidden }
.ref-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:rgba(255,255,255,.06); border-radius:50% }
.ref-hero-inner { position:relative; z-index:1 }
.ref-hero h2 { font-size:26px; margin-bottom:8px }
.ref-hero p { font-size:14px; opacity:.85; margin-bottom:22px }
.ref-link-wrap { display:flex; gap:10px; max-width:480px }
.ref-link-input { flex:1; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:10px 14px; font-family:'DM Sans',sans-serif; font-size:13.5px; color:#fff; outline:none }
.ref-copy-btn { padding:10px 18px; background:#fff; color:var(--accent-d); border:none; border-radius:10px; font-size:13px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .2s; white-space:nowrap }
.ref-copy-btn:hover { background:rgba(255,255,255,.9) }
.ref-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; width:100% }
.ref-stat-card { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px }
.ref-stat-num { font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; color:var(--accent-d); margin-bottom:4px }
.ref-stat-lbl { font-size:13px; color:var(--text2) }

/* -- MODAL -- */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s }
.modal-overlay.open { opacity:1; pointer-events:all }
.modal-box { background:#fff; border-radius:24px; padding:28px; width:100%; max-width:440px; box-shadow:0 28px 80px rgba(0,0,0,.2); transform:translateY(20px); transition:transform .3s cubic-bezier(.34,1.1,.64,1) }
.modal-overlay.open .modal-box { transform:translateY(0) }
.bank-modal-box { max-width:560px !important; width:95% !important; max-height:min(92vh,900px); overflow-y:auto; overscroll-behavior:contain }
.bank-preview-card { background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:18px;padding:24px;margin-bottom:20px;position:relative;overflow:hidden }
.bank-preview-number, #card-preview-number { font-size:18px;font-weight:700;color:#fff;letter-spacing:3px;margin-bottom:16px;font-family:monospace;overflow-wrap:anywhere;word-break:break-word }
.bank-form-actions { display:flex;gap:10px;margin-top:24px }
.bonus-case-dialog { max-width:1320px !important; width:min(1320px,calc(100vw - 32px)) !important; padding:0 !important; overflow:hidden; background:transparent !important; box-shadow:none !important }
.bonus-case-shell { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:20px 20px 10px; max-height:min(92vh,980px); overflow:auto }
.bonus-card-title { display:flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; margin-bottom:6px }
.bonus-card-icon { display:flex; align-items:center; justify-content:center; color:var(--accent-d); flex-shrink:0 }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px }
.modal-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:700 }
.modal-close { width:32px; height:32px; border-radius:8px; background:var(--s2); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text2); transition:background .18s }
.modal-close:hover { background:var(--s3) }
.modal-close svg { width:16px; height:16px }
.modal-input-wrap { margin-bottom:18px }
.modal-input-label { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:7px }
.modal-input { width:100%; background:var(--s1); border:1.5px solid var(--border); border-radius:12px; padding:12px 16px; font-size:16px; font-weight:700; color:var(--text); outline:none; font-family:'Plus Jakarta Sans',sans-serif; transition:all .2s }
.modal-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ag) }
.modal-btn { width:100%; padding:14px; background:var(--accent-d); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .2s }
.modal-btn:hover { background:var(--accent); box-shadow:0 6px 20px rgba(22,163,74,.3) }
.modal-btn-secondary { width:100%; padding:13px 14px; background:#fff; color:var(--text); border:1.5px solid var(--border); border-radius:12px; font-size:14px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .2s }
.modal-btn-secondary:hover { border-color:var(--accent); color:var(--accent-d); box-shadow:0 6px 20px rgba(22,163,74,.08) }
.withdraw-breakdown { display:grid; gap:10px; margin-bottom:16px }
.withdraw-breakdown-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-radius:12px; background:linear-gradient(135deg,#f8fcf8,#f2f7f3); border:1px solid rgba(34,197,94,.12) }
.withdraw-breakdown-row strong { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px }
.withdraw-breakdown-row.net strong { color:var(--accent-d); font-size:18px }
.withdraw-min-note { margin-bottom:14px; padding:12px 14px; border-radius:12px; background:#f0fdf4; border:1px solid #bbf7d0; font-size:13px; color:#166534; line-height:1.5 }
.withdraw-actions { display:grid; gap:10px }
.topbar-dep svg,.topbar-dep-outline svg{width:16px;height:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%);flex-shrink:0}
.topbar-btn-label{display:block;width:100%;text-align:center;white-space:nowrap;line-height:1}
.topbar-btn-spacer{display:none}
.bank-card-summary{display:flex;align-items:center;gap:12px;padding:14px;background:var(--s1);border-radius:12px}
.bank-card-number{font-size:14px;font-weight:700;font-family:monospace;letter-spacing:1px;word-break:break-all}
.bank-card-meta{font-size:12px;color:var(--text2);margin-top:2px;overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.amount-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px }
.amt-btn { padding:10px; border:1.5px solid var(--border); border-radius:10px; background:var(--s1); font-size:14px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .18s; font-family:'Plus Jakarta Sans',sans-serif }
.amt-btn:hover,.amt-btn.on { background:var(--ag); border-color:var(--accent); color:var(--accent-d) }

/* -- TOAST -- */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px); background:#1e293b; color:#fff; border-radius:14px; padding:12px 20px; font-size:13px; font-weight:500; display:flex; align-items:center; gap:9px; box-shadow:0 16px 40px rgba(0,0,0,.25); transition:transform .4s cubic-bezier(.34,1.1,.64,1),opacity .3s; opacity:0; z-index:999; white-space:nowrap; pointer-events:none }
.toast.on { transform:translateX(-50%) translateY(0); opacity:1 }
.tdot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(34,197,94,.6); flex-shrink:0 }

/* -- MOBILE MENU BTN -- */
.mobile-menu-btn { display:none; width:38px; height:38px; background:var(--s1); border:1px solid var(--border); border-radius:10px; align-items:center; justify-content:center; cursor:pointer }
.mobile-menu-btn svg { width:18px; height:18px }

/* -- SIDEBAR OVERLAY -- */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:49 }
.sidebar-overlay.active { display:block }

/* ======================================
   ANIMATIONS
======================================= */
@keyframes fadeInUp { from { opacity:0 } to { opacity:1 } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.5) } 50% { box-shadow:0 0 0 6px rgba(34,197,94,0) } }
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
@keyframes fi { from{opacity:0} to{opacity:1} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes rise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes sp { to{transform:rotate(360deg)} }
.shake { animation:shake .35s ease }

/* ======================================
   RESPONSIVE
======================================= */
@media(max-width:1024px) {
  .dash-grid { grid-template-columns:repeat(2,1fr) }
  .dash-bottom { grid-template-columns:1fr }
  .scooters-grid,.catalog-page-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  :root { --sidebar-w:0px }
  .sidebar { transform:translateX(-260px); width:260px; z-index:200; position:fixed; top:0; left:0; height:100vh }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,.2) }
  .app-main { margin-left:0; width:100% }
  .mobile-menu-btn { display:flex }
  .sidebar-overlay.active { display:block }
  .ref-stats-grid { grid-template-columns:repeat(2,1fr) }
}
  @media(max-width:640px) {
  .app-content { padding:16px }
  .app-topbar { padding:0 16px }
  .topbar-title { font-size:16px }
  .dash-grid { grid-template-columns:repeat(2,1fr); gap:12px }
  .scooters-grid,.catalog-page-grid { grid-template-columns:1fr }
    .tx-table th:nth-child(3),.tx-table td:nth-child(3) { display:none }
    .tx-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
    .tx-table { font-size:12px; table-layout:fixed; min-width:100% }
    .tx-table td,.tx-table th { padding:10px 10px }
    .tx-table th:first-child,
    .tx-table td:first-child { width:auto }
    .tx-table th:nth-child(2),
    .tx-table td:nth-child(2) { width:96px; min-width:96px }
    .tx-table th:last-child,
    .tx-table td:last-child { width:98px; min-width:98px; text-align:right; padding-right:14px }
    .tx-status {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      white-space:nowrap;
      line-height:1.15;
      font-size:9.5px;
      padding:5px 7px;
      min-width:84px;
      min-height:28px;
      border-radius:12px;
    }
    .tx-type { align-items:flex-start }
    .tx-type-icon { width:30px; height:30px; flex-shrink:0 }
    .tx-name { font-size:12px }
    .tx-sub { font-size:10.5px; line-height:1.3 }
  .ref-stats-grid { grid-template-columns:1fr }
  .ref-link-wrap { flex-direction:column }
  .topbar-dep,.topbar-dep-outline { padding:8px 10px }
  .modal-box { padding:22px 16px }
  #bank-card-modal, #withdraw-modal { align-items:flex-start; padding:max(12px, env(safe-area-inset-top)) 12px 12px }
  #bank-card-modal .bank-modal-box { width:100% !important; max-width:none !important; max-height:calc(100dvh - max(24px, env(safe-area-inset-top)) - 12px); border-radius:22px; padding:18px 14px 16px }
  #withdraw-modal .modal-box { width:100% !important; max-width:none !important; max-height:calc(100dvh - max(24px, env(safe-area-inset-top)) - 12px); border-radius:22px; padding:18px 14px 16px; overflow:auto }
  #bank-card-modal .bank-preview-card { padding:16px; margin-bottom:14px; border-radius:16px }
  #bank-card-modal .bank-preview-number, #bank-card-modal #card-preview-number { font-size:15px; letter-spacing:2px; margin-bottom:14px }
  #bank-card-modal .field-inp { font-size:16px !important; padding:12px 14px !important }
  #bank-card-modal .bank-form-actions, #withdraw-modal .withdraw-actions { position:sticky; bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.82),#fff 24%); padding-top:10px; margin-top:18px }
  #bank-card-modal .bank-form-actions button { min-height:48px }
  #withdraw-modal .withdraw-breakdown-row { padding:10px 12px }
  #withdraw-modal .withdraw-breakdown-row strong { font-size:14px }
  #withdraw-modal .withdraw-breakdown-row.net strong { font-size:16px }
  #withdraw-modal .modal-btn, #withdraw-modal .modal-btn-secondary { min-height:48px }
  #bonus-case-modal { padding:0; align-items:stretch; justify-content:stretch }
  #bonus-case-modal .bonus-case-dialog { width:100vw !important; max-width:none !important; height:100dvh }
  #bonus-case-modal .bonus-case-shell { border-radius:0; border:none; padding:14px 12px 12px; max-height:100dvh }
  .hero-inner { grid-template-columns:1fr }
  .hero-visual { display:none }
  .how-grid { grid-template-columns:1fr 1fr }
  .catalog-grid { grid-template-columns:1fr }
  .stats-bar-inner { grid-template-columns:repeat(2,1fr) }
  .footer-inner { grid-template-columns:1fr }
  .hero h1 { font-size:32px }
  .sc-val { font-size:22px }
  #sp-profile > div > div[style*="grid-template"] { grid-template-columns:1fr !important }
}
@media(max-width:400px) {
  .dash-grid { grid-template-columns:1fr }
  .auth-card { padding:22px 16px }
}

.sub-page { display:none !important; min-height:0 !important }
.sub-page.active { display:block !important; min-height:calc(100vh - 64px) !important; width:100% }

/* -- CHART IMPROVED -- */
.chart-area { height:220px }
.chart-bars { display:flex; align-items:flex-end; gap:6px; padding:0 2px; position:relative }
.bar-group { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative }
.bar-wrap { flex:1; display:flex; align-items:flex-end; width:100%; cursor:pointer }
.bar { 
  border-radius:6px 6px 0 0; 
  width:100%;
  min-height:0;
  position:relative;
  transition:all .6s cubic-bezier(.34,1.1,.64,1);
  transform-origin:bottom;
}
.bar::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(255,255,255,0);
  transition:background .2s;
}
.bar:hover::after { background:rgba(255,255,255,0.2) }
.bar-zero { border-radius:4px; opacity:0.15 }
.bar-lbl { font-size:10px; color:var(--text3); white-space:nowrap; text-align:center; width:100% }

/* Chart grid lines */
.chart-grid-line { position:absolute; left:0; right:0; border-top:1px dashed rgba(0,0,0,0.06); pointer-events:none }

@keyframes barRise { from { transform:scaleY(0) } to { transform:scaleY(1) } }
.bar-animated { animation:barRise .6s cubic-bezier(.34,1.1,.64,1) both }


.dash-grid .stat-card:nth-child(1) { animation-delay:.05s }
.dash-grid .stat-card:nth-child(2) { animation-delay:.1s }
.dash-grid .stat-card:nth-child(3) { animation-delay:.15s }
.dash-grid .stat-card:nth-child(4) { animation-delay:.2s }




/* === NOTIFICATIONS === */
.notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:340px; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.12); z-index:100; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(-8px); transition:all .25s cubic-bezier(.4,0,.2,1) }
.notif-panel.open { opacity:1; pointer-events:all; transform:translateY(0) }
.notif-panel-head { padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border) }
.notif-panel-title { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px }
.notif-mark-all { font-size:12px; color:var(--accent-d); cursor:pointer; font-weight:600; border:none; background:none }
.notif-list { max-height:320px; overflow-y:auto }
.notif-item { display:flex; align-items:flex-start; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s }
.notif-item:hover { background:var(--s1) }
.notif-item.unread { background:#f0fdf4 }
.notif-item:last-child { border-bottom:none }
.notif-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px }
.notif-icon svg { width:16px; height:16px }
.notif-text { flex:1 }
.notif-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px }
.notif-desc { font-size:12px; color:var(--text2); line-height:1.4 }
.notif-time { font-size:11px; color:var(--text3); margin-top:3px }
.notif-unread-dot { width:7px; height:7px; background:var(--accent-d); border-radius:50%; flex-shrink:0; margin-top:6px }
.notif-empty { padding:32px 20px; text-align:center; color:var(--text3); font-size:13px }
.notif-count { position:absolute; top:5px; right:5px; min-width:16px; height:16px; background:var(--error); color:#fff; border-radius:8px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--card); transition:transform .3s }
.notif-count.bump { animation:bump .3s ease }
@keyframes bump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }





.bn-item svg { width:20px; height:20px }
.bn-item span { font-size:10px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif }


@media(max-width:900px) {
  
  .app-content { padding-bottom:72px !important }
}


@media(max-width:900px) {
  /* Скрываем бургер - заменён нижней навигацией */
  .mobile-menu-btn { display:none !important }
  
  /* Топбар на мобильном - красиво */
  .app-topbar { padding:0 16px !important; height:56px !important }
  .topbar-title { font-size:17px !important; font-weight:700 !important }
  
  /* Кнопки Вывести/Пополнить - компактно справа */
  .topbar-right { gap:7px !important; min-width:0 }
  .topbar-dep { min-width:92px !important; padding:7px 10px !important; padding-left:28px !important; font-size:12px !important; border-radius:9px !important }
  .topbar-dep-outline { min-width:90px !important; padding:7px 10px !important; padding-left:28px !important; font-size:12px !important; border-radius:9px !important }
  
  /* Колокол - не выходит за экран */
  .topbar-notif { width:34px !important; height:34px !important; border-radius:9px !important; flex-shrink:0 }
  .notif-panel { right:-8px !important; width:calc(100vw - 24px) !important; max-width:340px !important; position:fixed !important; top:62px !important }
  
  /* Нижняя навигация - равные отступы */
  
  
  
  .bn-item span { font-size:9.5px !important; white-space:nowrap !important }
  .bn-item svg { width:19px !important; height:19px !important }
}

@media(max-width:380px) {
  .topbar-btn-label,.topbar-btn-spacer { display:none }
  .topbar-dep { min-width:auto !important; padding:7px 10px !important; padding-left:10px !important }
  .topbar-dep-outline { min-width:auto !important; padding:7px 10px !important; padding-left:10px !important }
  .bn-item span { font-size:9px !important }
}


/* === BOTTOM NAV === */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 100;
  box-sizing: border-box;
}
.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  height: 100%;
  align-items: center;
}
.bn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  transition: color .2s;
}
.bn-item.active { color: var(--accent-d) }
.bn-item svg { width: 20px; height: 20px; flex-shrink: 0 }
.bn-item span { font-size: 10px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap }

@media(max-width:900px) {
  .bottom-nav { display: block }
  .app-content { padding-bottom: 72px !important }
  .mobile-menu-btn { display: none !important }
  .app-topbar { padding: 0 16px !important; height: 56px !important }
  .topbar-title { font-size: 17px !important }
  .topbar-right { gap: 7px !important }
  .topbar-dep { min-width:92px !important; padding:7px 10px !important; padding-left:28px !important; font-size:12px !important; border-radius:9px !important }
  .topbar-dep-outline { min-width:90px !important; padding:7px 10px !important; padding-left:28px !important; font-size:12px !important; border-radius:9px !important }
  .topbar-notif { width: 34px !important; height: 34px !important; border-radius: 9px !important; flex-shrink: 0 }
  .notif-panel { position: fixed !important; top: 62px !important; right: 8px !important; left: 8px !important; width: auto !important }
}


/* === MOBILE LANDING NAV === */
.land-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border:none; background:none }
.land-burger span { width:22px; height:2.5px; background:var(--text); border-radius:2px; transition:all .3s ease }
.land-burger.active span:nth-child(1) { transform:translateY(7.5px) rotate(45deg) }
.land-burger.active span:nth-child(2) { opacity:0; transform:scaleX(0) }
.land-burger.active span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg) }

/* КРТЧНО: overlay скрыт по умолчанию на ВСЕХ экранах */
.land-mob-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300 }
.land-mob-overlay.open { display:block }
.land-mob-drawer { position:absolute; top:0; right:0; width:78%; max-width:290px; height:100vh; background:#fff; padding:20px; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 32px rgba(0,0,0,.15) }
.land-mob-overlay.open .land-mob-drawer { transform:translateX(0) }
.land-mob-close { align-self:flex-end; width:32px; height:32px; border:none; background:var(--s2); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; margin-bottom:20px }
.land-mob-link { display:block; padding:14px 4px; font-size:15px; font-weight:500; color:var(--text); border-bottom:1px solid var(--border); text-decoration:none }
.land-mob-btns { margin-top:20px; display:flex; flex-direction:column; gap:10px }
.land-mob-btn { padding:13px; border-radius:12px; font-size:14px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; position:relative; overflow:hidden }

@media(max-width:768px) {
  .land-nav-links { display:none !important }
  .nav-btns { display:none !important }
  .land-burger { display:flex !important }
  .land-nav { padding:0 4% !important; height:58px !important }
}


/* === CASE OPENING === */
.case-card { background:
  radial-gradient(circle at top right, rgba(34,197,94,.16), transparent 30%),
  radial-gradient(circle at bottom left, rgba(187,247,208,.55), transparent 34%),
  linear-gradient(145deg,#ffffff,#f4fbf5 54%,#e8f7ea);
  border-radius:26px; padding:24px; color:#16311e; position:relative; overflow:hidden; margin-bottom:16px;
  border:1px solid rgba(34,197,94,.14); box-shadow:0 24px 60px rgba(22,49,30,.08) }
.case-card::before { content:''; position:absolute; inset:-35% auto auto 65%; width:240px; height:240px; border-radius:999px; background:rgba(34,197,94,.10); filter:blur(16px) }
.case-card::after { content:''; position:absolute; inset:auto auto -30% -8%; width:280px; height:280px; border-radius:999px; background:rgba(187,247,208,.9); filter:blur(18px) }
.case-card > * { position:relative; z-index:1 }
.case-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px }
.case-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; margin-bottom:6px }
.case-subtitle { font-size:13px; line-height:1.55; color:rgba(22,49,30,.72); max-width:560px }
.case-ticket-badge { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.16); font-size:13px; font-weight:700; white-space:nowrap }
.case-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px }
.case-meta { background:rgba(255,255,255,.72); border:1px solid rgba(34,197,94,.12); border-radius:18px; padding:14px 16px; backdrop-filter:blur(8px) }
.case-meta-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(22,49,30,.52); margin-bottom:8px }
.case-meta-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; color:#16311e }
.case-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px }
.case-info { font-size:13px; color:rgba(22,49,30,.66) }
.lottery-chip-row { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px }
.lottery-chip { padding:7px 12px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(34,197,94,.08); color:rgba(22,49,30,.82); border:1px solid rgba(34,197,94,.12) }
.lottery-chip.active { background:rgba(34,197,94,.16); color:#15803d; border-color:rgba(34,197,94,.28) }
.case-reel-shell { position:relative; border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(240,253,244,.98)); border:1px solid rgba(34,197,94,.12); padding:18px 18px 22px; overflow:hidden; margin-bottom:16px }
.case-reel-shell::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(236,253,245,.96),transparent 18%,transparent 82%,rgba(236,253,245,.96)); pointer-events:none; z-index:3 }
.case-reel-viewport { overflow:hidden; border-radius:18px; background:rgba(255,255,255,.7); border:1px solid rgba(34,197,94,.08) }
.case-reel-track { display:flex; gap:12px; padding:18px 16px; transform:translateX(0); will-change:transform }
.case-pointer { position:absolute; top:8px; bottom:8px; left:50%; width:2px; transform:translateX(-50%); background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,197,94,.92),rgba(34,197,94,.08)); z-index:4; box-shadow:0 0 18px rgba(34,197,94,.35) }
.case-pointer::before, .case-pointer::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border-left:10px solid transparent; border-right:10px solid transparent }
.case-pointer::before { top:-1px; border-top:0; border-bottom:12px solid #22c55e }
.case-pointer::after { bottom:-1px; border-bottom:0; border-top:12px solid #22c55e }
.case-item { width:150px; min-width:150px; border-radius:18px; padding:14px; background:linear-gradient(180deg,#ffffff,rgba(240,253,244,.96)); border:1px solid rgba(34,197,94,.09); position:relative; overflow:hidden; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease }
.case-item::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at top, rgba(187,247,208,.38), transparent 58%); opacity:.55 }
.case-item.is-winner { transform:translateY(-8px) scale(1.03); box-shadow:0 24px 40px rgba(22,49,30,.16), 0 0 0 1px rgba(34,197,94,.16) inset }
.case-item[data-rarity="common"] { box-shadow:inset 0 0 0 1px rgba(148,163,184,.12) }
.case-item[data-rarity="rare"] { box-shadow:0 0 24px rgba(59,130,246,.22) }
.case-item[data-rarity="epic"] { box-shadow:0 0 28px rgba(168,85,247,.26) }
.case-item[data-rarity="legendary"] { box-shadow:0 0 34px rgba(250,204,21,.32) }
.case-item-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px }
.case-rarity-tag { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; opacity:.92 }
.case-item-dot { width:13px; height:13px; border-radius:999px; box-shadow:0 0 14px currentColor }
.case-item-name { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:16px; line-height:1.2; margin-bottom:10px; min-height:38px }
.case-item-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:24px; font-weight:900 }
.case-result-panel { display:none; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-radius:20px; background:rgba(255,255,255,.7); border:1px solid rgba(34,197,94,.1); margin-bottom:16px }
.case-result-panel.open { display:flex }
.case-result-copy { display:flex; flex-direction:column; gap:4px }
.case-result-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(22,49,30,.5) }
.case-result-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800 }
.case-result-value { font-size:14px; color:rgba(22,49,30,.72) }
.case-actions { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:12px; margin-bottom:16px }
@keyframes shine { 0%{transform:translateX(-100%)} 100%{transform:translateX(220%)} }
.lottery-btn { width:100%; padding:15px 16px; border-radius:16px; border:none; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:15px; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, opacity .2s ease; position:relative; overflow:hidden }
.lottery-btn:hover { transform:translateY(-2px) }
.lottery-btn:disabled { opacity:.55; transform:none; cursor:not-allowed }
.lottery-btn-play { background:linear-gradient(135deg,#16a34a,#86efac); color:#fff; box-shadow:0 12px 26px rgba(22,163,74,.24); min-width:240px }
.lottery-btn-fast { background:rgba(255,255,255,.7); color:#166534; border:1px solid rgba(34,197,94,.14) }
.lottery-btn-play::after { content:''; position:absolute; inset:0 auto 0 -35%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:shine 2.4s infinite }
.case-history-title { font-size:12px; color:rgba(22,49,30,.55); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px }
.case-history-list { display:flex; gap:10px; overflow:auto; padding-bottom:4px }
.case-history-pill { min-width:132px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.72); border:1px solid rgba(34,197,94,.08) }
.case-history-pill strong { display:block; font-size:15px; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:4px }
.case-history-pill span { font-size:12px; color:rgba(22,49,30,.56) }
.case-celebrate { animation:case-shake .42s ease-in-out 1 }
@keyframes case-shake {
  0%,100% { transform:translateX(0) }
  20% { transform:translateX(-6px) }
  40% { transform:translateX(7px) }
  60% { transform:translateX(-4px) }
  80% { transform:translateX(4px) }
}
@media(max-width:900px) {
  .case-meta-grid { grid-template-columns:1fr }
  .case-actions { grid-template-columns:1fr }
}
@media(max-width:640px) {
  .case-card { padding:18px }
  .case-head { flex-direction:column; align-items:flex-start }
  .case-reel-shell { padding:14px 14px 18px }
  .case-item { width:132px; min-width:132px }
  .case-result-panel.open { flex-direction:column; align-items:flex-start }
  #bonus-case-modal .case-card { padding:14px; border-radius:20px; margin-bottom:0 }
  #bonus-case-modal .case-meta-grid { gap:10px; margin-bottom:12px }
  #bonus-case-modal .case-meta { padding:12px 14px; border-radius:16px }
  #bonus-case-modal .case-toolbar { gap:10px; margin-bottom:10px }
  #bonus-case-modal .lottery-chip-row { margin-bottom:12px }
  #bonus-case-modal .case-reel-track { padding:14px 10px }
  #bonus-case-modal .case-item { width:118px; min-width:118px; padding:12px }
  #bonus-case-modal .case-item-name { font-size:14px; min-height:34px }
  #bonus-case-modal .case-item-value { font-size:20px }
  #bonus-case-modal .case-actions { gap:10px; margin-bottom:12px }
  #bonus-case-modal .lottery-btn { padding:13px 14px; border-radius:14px; font-size:14px }
}

@media(max-width:480px) {
  #bank-card-modal .bank-preview-card { padding:14px 14px 16px }
  #bank-card-modal .bank-preview-number, #bank-card-modal #card-preview-number { font-size:13px; letter-spacing:1.5px }
  #bank-card-modal .bank-form-actions { flex-direction:column }
}