/* ═══════════ SCREENS BASE ═══════════ */
.screen{display:none;min-height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--bg);}
.screen.active{display:block;animation:fadeIn .25s ease}

/* ═══════════ MODALS ═══════════ */
.overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(var(--bg-rgb,7,16,31),.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .18s ease;
}
.modal{
  background:linear-gradient(160deg,var(--bg2) 0%,var(--bg3,var(--bg2)) 100%);
  border:1px solid rgba(99,102,241,.2);
  border-radius:28px;padding:36px 28px 28px;width:100%;max-width:400px;
  animation:slideDown .28s cubic-bezier(.34,1.2,.64,1);max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.modal-close{
  position:absolute;top:14px;left:14px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s;
}
.modal-close:hover{background:rgba(255,255,255,.12)}
.modal-close svg{width:13px;height:13px;stroke:var(--muted);stroke-width:2.5;fill:none}
.modal-char{width:84px;height:84px;margin:0 auto 14px;filter:drop-shadow(0 4px 16px rgba(99,102,241,.3))}
.modal-char svg{width:84px;height:84px;overflow:visible}
.modal-title{font-size:22px;font-weight:900;text-align:center;margin-bottom:5px;letter-spacing:-.3px}
.modal-sub{font-size:13px;color:var(--muted);text-align:center;margin-bottom:22px}
.form-lbl{font-size:11.5px;font-weight:800;color:var(--muted);display:block;margin-bottom:6px;letter-spacing:.3px;text-transform:uppercase}
.form-inp{
  width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);
  color:var(--text);font-family:var(--font);font-size:15px;
  outline:none;transition:border-color .18s,background .18s;margin-bottom:13px;
}
.form-inp:focus{border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.05)}
.form-inp.ltr{direction:ltr}
.form-err{
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);
  border-radius:10px;padding:9px 13px;color:#f87171;font-size:12px;margin-bottom:12px;
}
.btn-form{
  width:100%;padding:13px;border-radius:13px;border:none;
  font-family:var(--font);font-size:15px;font-weight:900;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;cursor:pointer;margin-bottom:14px;
  box-shadow:0 6px 22px rgba(99,102,241,.4);transition:all .18s;
  letter-spacing:.2px;
}
.btn-form:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(99,102,241,.5)}
.btn-form:active{transform:scale(.97)}
.modal-switch{text-align:center;font-size:12.5px;color:var(--muted)}
.modal-switch a{color:#a5b4fc;cursor:pointer;font-weight:800}
.modal-divider{
  display:flex;align-items:center;gap:10px;
  margin:6px 0 16px;color:rgba(255,255,255,.3);font-size:11px;font-weight:700;letter-spacing:.5px;
}
.modal-divider::before,.modal-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.09)}

/* ── Google Button ── */
.btn-google{
  width:100%;padding:0;border-radius:12px;
  border:none;background:none;
  cursor:pointer;display:block;
  margin-bottom:16px;transition:transform .15s,box-shadow .15s;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  overflow:hidden;
  text-decoration:none;
}
.btn-google-inner{
  display:flex;align-items:center;gap:0;
  background:#fff;border-radius:12px;
  overflow:hidden;
  font-family:var(--font);
}
.btn-google-icon{
  width:54px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-left:1px solid #e8e8e8;
}
.btn-google-label{
  flex:1;text-align:center;
  font-size:15px;font-weight:700;color:#3c4043;
  letter-spacing:.15px;padding-right:8px;
}
.btn-google:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.btn-google:active{transform:scale(.97);box-shadow:0 2px 8px rgba(0,0,0,.3)}
body.light .modal{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(0,0,0,.15)}
body.light .form-inp{background:#f8faff;border-color:rgba(0,0,0,.12);color:#1a1a2e}
body.light .form-inp:focus{border-color:rgba(99,102,241,.5);background:#f0f4ff}
body.light .modal-divider{color:rgba(0,0,0,.3)}
body.light .modal-divider::before,body.light .modal-divider::after{background:rgba(0,0,0,.1)}
body.light .btn-google{box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* ═══════════ UTILITIES ═══════════ */
.hidden{display:none!important}
.xp-float{
  position:fixed;pointer-events:none;z-index:9999;
  font-size:19px;font-weight:900;color:var(--amber);
  font-family:var(--font);animation:xpFloat 1.1s ease both;
}
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:28px;padding:9px 20px;font-size:13px;font-weight:700;
  font-family:var(--font);z-index:9999;
  box-shadow:0 8px 28px rgba(0,0,0,.5);animation:slideUp .35s ease;
}

/* ═══════════ MOBILE BOTTOM NAV ═══════════ */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:900;
  background:rgba(var(--bg-rgb,7,16,31),.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:8px 0 max(8px,env(safe-area-inset-bottom));
  flex-direction:row;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.mobile-nav::-webkit-scrollbar{display:none}
@media(max-width:600px){.mobile-nav{display:flex};.screen{padding-bottom:66px};#theme-btn-mobile{display:flex!important}}
@media(max-width:600px){.navbar .theme-toggle{display:none!important}.navbar .nav-links{display:none!important}}
.mnav-btn{
  flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:9px;font-weight:700;font-family:var(--font);
  color:var(--muted);background:none;border:none;cursor:pointer;
  padding:5px 2px;transition:color .18s;
}
.mnav-btn.active,.mnav-btn:hover{color:#93C5FD}
.mnav-icon{width:22px;height:22px;margin-bottom:1px}
.mnav-icon svg{width:22px;height:22px;fill:currentColor}