*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pr:#38C9F0;--pr2:#1480B0;--pr3:#0D5F8A;
  --ink:#0A1628;
  --gold:#F0C040;--gold2:#D4A017;
  --g50:#F0F7FC;--g100:#EBF7FC;--g200:#C5DCF0;--g400:#5D94B5;--g500:#3A6F8F;--g700:#1A4A6E;
  --r14:14px;--r16:16px;--r20:20px;--r24:24px;
  --dur:0.75s;
  --ease:cubic-bezier(0.77,0,0.175,1);
}
html,body{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background: #06101E;
  color:var(--ink);overflow:hidden;
}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}

/* ══ ANIMATED BACKGROUND ══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(20,128,176,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(56,201,240,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 40%, rgba(240,192,64,0.07) 0%, transparent 60%),
    linear-gradient(180deg, #06101E 0%, #0A1E38 50%, #061424 100%);
  pointer-events: none;
  z-index: 0;
}

/* ══ FLOATING PARTICLES ══ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(rgba(56,201,240,0.06) 1px, transparent 1px),
    radial-gradient(rgba(240,192,64,0.04) 1px, transparent 1px);
  background-size: 40px 40px, 80px 80px;
  background-position: 0 0, 20px 20px;
  pointer-events: none;
  z-index: 0;
  animation: particleDrift 20s linear infinite;
}
@keyframes particleDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-40px, -40px); }
}

/* ══ MASTER CONTAINER ══ */
.slider-root{
  position:relative;width:100vw;height:100vh;
  display:flex;overflow:hidden;
  perspective:1200px;
  z-index:1;
}

/* ══ FORM PANELS ══ */
.panel{
  position:absolute;top:0;width:50%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background: transparent;
  will-change:transform,opacity;
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.panel-login{left:0;border-radius:0 32px 32px 0;z-index:2}
.panel-register{right:0;border-radius:32px 0 0 32px;opacity:0;transform:translateX(30px);z-index:1}

.slider-root.reg-active .panel-login{
  transform:translateX(-100%);opacity:0;z-index:1;
}
.slider-root.reg-active .panel-register{
  opacity:1;transform:translateX(0);z-index:2;
}

/* ══ OVERLAY RAIL ══ */
.overlay-rail{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  overflow:hidden;z-index:100;
  will-change:transform;
  transition:transform var(--dur) var(--ease);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.slider-root.reg-active .overlay-rail{
  transform:translateX(-100%);
}

/* ══ OVERLAY INNER ══ */
.overlay-inner{
  position:relative;height:100%;width:200%;
  display:flex;
  background: linear-gradient(160deg, #051520 0%, #0B2A4A 30%, #0D4070 55%, #1480B0 80%, #1E9FD4 100%);
  will-change:transform;
  transition:transform var(--dur) var(--ease);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow: hidden;
}
.slider-root.reg-active .overlay-inner{
  transform:translateX(50%);
}

/* Overlay mesh + glow */
.overlay-inner::before{
  content:'';position:absolute;inset:0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.overlay-inner::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(56,201,240,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ══ OVERLAY PANELS ══ */
.ov-panel{
  position:relative;width:50%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 36px;text-align:center;overflow:hidden;
}

/* floating orbs */
.orb{position:absolute;border-radius:50%;pointer-events:none;animation:orbFloat 6s ease-in-out infinite}
.orb-a{
  width:320px;height:320px;
  background:radial-gradient(circle, rgba(56,201,240,0.1), transparent 70%);
  top:-10%;left:-10%;animation-delay:0s;
}
.orb-b{
  width:200px;height:200px;
  background:radial-gradient(circle, rgba(240,192,64,0.08), transparent 70%);
  bottom:5%;right:5%;animation-delay:2.5s;
}
@keyframes orbFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.1) translateY(-16px)}}

/* ══ SHOPPING SCENE - Upgraded ══ */
.shop-scene{
  position:relative;width:180px;height:150px;margin-bottom:28px;flex-shrink:0;
  filter: drop-shadow(0 12px 32px rgba(56,201,240,0.2));
}
.s-person{position:absolute;bottom:0;left:50%;transform:translateX(-60%);display:flex;flex-direction:column;align-items:center;animation:sway 1.2s ease-in-out infinite alternate}
.s-head{width:28px;height:28px;background:linear-gradient(135deg,#FFD3A3,#F5C08A);border-radius:50%;border:3px solid rgba(255,255,255,0.9);margin-bottom:4px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.s-body{width:34px;height:48px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0.7));border-radius:16px 16px 8px 8px;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.s-cart{position:absolute;bottom:2px;left:50%;transform:translateX(10%);animation:sway 1.2s ease-in-out infinite alternate-reverse}
.s-cart-box{width:42px;height:26px;background:rgba(56,201,240,0.15);border:2px solid rgba(56,201,240,0.8);border-radius:8px;position:relative;backdrop-filter:blur(4px)}
.s-cart-box::after,.s-cart-box::before{content:'';position:absolute;bottom:-10px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.9);box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.s-cart-box::after{left:5px}.s-cart-box::before{right:5px}
@keyframes sway{0%{transform:translateX(-60%) rotate(-4deg)}100%{transform:translateX(-60%) rotate(4deg)}}

.f-item{position:absolute;font-size:1.4rem;animation:floatItem 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}
.f1{top:18px;left:12px;animation-delay:0s}
.f2{top:8px;right:14px;font-size:1.2rem;animation-delay:.8s}
.f3{top:55px;right:35px;font-size:1rem;animation-delay:1.6s}
@keyframes floatItem{0%,100%{transform:translateY(0) rotate(-6deg);opacity:.8}50%{transform:translateY(-16px) rotate(6deg);opacity:1}}

.sparkle{position:absolute;background:var(--gold);animation:twinkle 1.8s ease-in-out infinite;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sp1{width:14px;height:14px;top:22px;left:65px;animation-delay:0s}
.sp2{width:10px;height:10px;top:45px;right:28px;animation-delay:.6s}
.sp3{width:12px;height:12px;bottom:44px;left:28px;animation-delay:1.2s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}

/* ══ OVERLAY TEXT / BUTTONS ══ */
.ov-panel h1{
  font-size:2rem;font-weight:900;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height:1.15;margin-bottom:14px;letter-spacing:-.04em;
  text-shadow: none;
}
.ov-panel p{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:32px;max-width:240px}
.btn-ghost{
  border:1.5px solid rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,0.08);
  padding:13px 36px;border-radius:50px;font-weight:800;font-size:.88rem;
  transition:all .3s ease;
  letter-spacing:.5px;cursor:pointer;
  will-change:transform;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.8);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-ghost:active{transform:translateY(0) scale(.97)}

/* ══ FORM INNER - Premium Glass Card ══ */
.form-inner{
  width:100%;max-width:390px;padding:32px 36px;overflow-y:auto;max-height:100vh;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.8);
  margin: 20px;
}

/* Logo */
.form-logo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.form-logo img{
  width:40px;height:40px;border-radius:14px;object-fit:contain;
  background: linear-gradient(135deg, #0A1628, #1480B0);
  padding:6px;
  box-shadow: 0 6px 20px rgba(20,128,176,0.3);
}
.form-logo-text{
  font-size:1.5rem;font-weight:900;
  background: linear-gradient(135deg, #0A1628, var(--pr2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing:-.05em;
}

/* Titles */
.form-title{
  font-size:1.65rem;font-weight:900;color:var(--ink);
  margin-bottom:6px;letter-spacing:-.04em;
  background: linear-gradient(135deg, #0A1628 0%, #1480B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.form-sub{font-size:.83rem;color:var(--g400);margin-bottom:22px;line-height:1.65;font-weight:500}

/* inputs */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:.77rem;font-weight:700;color:#1A4A6E;margin-bottom:6px;letter-spacing:0.3px}
.form-row-link{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.form-row-link span{font-size:.77rem;font-weight:700;color:#1A4A6E}
.input-wrap{position:relative}
.input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--g400);font-size:.82rem;pointer-events:none;transition:color .2s}
.input-wrap:focus-within .input-icon{color:var(--pr2)}
.form-input{
  width:100%;padding:12px 14px 12px 40px;
  border:1.5px solid #DDE8F0;border-radius:14px;
  font-size:.88rem;font-family:inherit;color:var(--ink);
  background:#FAFCFF;outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
  font-weight:500;
}
.form-input:focus{
  border-color:var(--pr2);
  background:#fff;
  box-shadow: 0 0 0 4px rgba(20,128,176,0.1), 0 4px 12px rgba(20,128,176,0.08);
}
.form-input::placeholder{color:#A8C4D8}
.input-action{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--g400);padding:5px 7px;border-radius:8px;transition:.2s;font-size:.82rem}
.input-action:hover{color:var(--ink);background:var(--g50)}
.form-link{font-size:.77rem;font-weight:700;color:var(--pr2)}
.form-link:hover{text-decoration:underline}

/* submit */
.btn-submit{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;
  background: linear-gradient(135deg, #38C9F0 0%, #1E9FD4 40%, #1480B0 100%);
  color:#fff;border-radius:14px;font-size:.92rem;font-weight:800;
  font-family:inherit;cursor:pointer;
  transition:transform .25s, box-shadow .25s, opacity .25s;
  box-shadow: 0 8px 24px rgba(20,128,176,0.4), 0 2px 8px rgba(20,128,176,0.2);
  will-change:transform;
  margin-top:6px;
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}
.btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
}
.btn-submit:hover::before { opacity: 1; }
.btn-submit:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(20,128,176,0.45), 0 4px 12px rgba(20,128,176,0.2)}
.btn-submit:active{transform:scale(.97);box-shadow:none}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;display:none}
.btn-submit.loading .spinner{display:block}
.btn-submit.loading .btn-label{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* social */
.divider{display:flex;align-items:center;margin:16px 0 14px;color:#A8C4D8;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.divider::before,.divider::after{content:'';flex:1;border-bottom:1.5px solid #EBF3FA}
.divider span{padding:0 12px}
.social-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.btn-social{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border-radius:13px;font-size:.82rem;font-weight:700;cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
  border:1.5px solid #DDE8F0;background:#FAFCFF;color:var(--ink);
  font-family:inherit;will-change:transform;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.btn-social:hover{background:#EBF7FC;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:#C5DCF0}
.btn-facebook{background:#1877F2;color:#fff !important;border-color:#1877F2}
.btn-facebook:hover{background:#166FE5;border-color:#166FE5}

/* extras */
.info-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg, #EBF7FC, #E0F2FB);
  border:1px solid #BAE6F7;
  border-radius:13px;margin-bottom:14px;font-size:.78rem;color:var(--pr2);
  line-height:1.55;font-weight:500;
  box-shadow: 0 2px 8px rgba(20,128,176,0.06);
}
.info-note i{color:var(--pr2);margin-top:1px;flex-shrink:0}
.check-row{display:flex;gap:9px;margin-bottom:14px;align-items:flex-start}
.check-row input{accent-color:var(--pr2);width:16px;height:16px;margin-top:2px;flex-shrink:0}
.check-row label{font-size:.78rem;color:var(--g400);line-height:1.55;font-weight:500}
.check-row a{color:var(--pr2);font-weight:700}
.auth-switch{text-align:center;margin-top:14px;font-size:.8rem;color:var(--g400)}
.auth-switch a{color:var(--pr2);font-weight:700}
.auth-switch a:hover{text-decoration:underline}
.pwd-bars{display:flex;gap:4px;margin:6px 0 4px}
.pwd-bar{flex:1;height:4px;border-radius:4px;background:#DDE8F0;transition:background .25s}
.pwd-strength-text{font-size:.7rem;color:var(--g400);display:block;margin-bottom:10px;font-weight:600}
.trust-row{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:18px;padding-top:14px;
  border-top:1.5px solid #EBF3FA;
}
.trust-item{display:flex;align-items:center;gap:5px;font-size:.7rem;color:#6B96B5;font-weight:600}
.trust-item i{color:var(--pr2);font-size:.8rem}
.forgot-panel{display:none}
.forgot-panel.active{display:block}
.back-btn{display:flex;align-items:center;gap:7px;color:var(--pr2);font-weight:700;font-size:.84rem;margin-bottom:16px;border:none;background:none;cursor:pointer;padding:6px 0;transition:opacity .2s}
.back-btn:hover{opacity:.7}

/* ══ RESPONSIVE MOBILE ══ */
@media (max-width: 768px) {
  body {
    overflow: hidden;
    background: #06101E;
  }
  .slider-root {
    display: block;
    height: 100vh;
    height: 100svh;
  }

  .overlay-rail {
    display: none !important;
  }

  .panels-track {
    display: flex !important;
    flex-direction: row !important;
    width: 200vw !important;
    height: 100% !important;
    will-change: transform;
    transition: transform var(--dur) var(--ease);
  }

  .slider-root.reg-active .panels-track {
    transform: translateX(-50%) !important;
  }

  .panel {
    position: relative !important;
    width: 100vw !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  .form-inner {
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    padding: 26px 24px !important;
    max-height: calc(100% - 120px) !important;
    margin: 16px !important;
    border-radius: 20px !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,0.4),
      0 0 0 1px rgba(255,255,255,0.15),
      inset 0 1px 0 rgba(255,255,255,0.8) !important;
    background: rgba(255,255,255,0.97) !important;
  }

  /* Clean mobile header tab navigation */
  .mobile-tabs {
    display: flex;
    background: #F0F7FC;
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 22px;
    box-shadow: inset 0 2px 6px rgba(20,128,176,0.08);
  }
  
  .mobile-tab {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g400);
    text-align: center;
    cursor: pointer;
    transition: background 0.22s, color 0.22s, box-shadow 0.22s;
    border: none;
    background: transparent;
  }
  
  .mobile-tab.active {
    background: #fff;
    color: var(--pr2);
    box-shadow: 0 2px 12px rgba(20,128,176,0.15);
  }

  .mobile-tab-bar {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .panels-track {
    display: contents;
  }
  .mobile-tabs {
    display: none !important;
  }
  .mobile-tab-bar {
    display: none;
  }
}

/* ══ BOTTOM NAV ══ */
.bnav {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 440px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  display: flex;
  z-index: 999;
  padding: 10px 10px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.bnav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 0.65rem;
  font-weight: 700;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bnav-btn i { font-size: 1.25rem; transition: transform 0.3s ease; }
.bnav-btn:hover { color: rgba(255,255,255,0.7); }
.bnav-btn.active { color: var(--pr); transform: translateY(-2px); }
.bnav-btn.active i { transform: scale(1.1); }
.bnav-btn::after {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%; background: var(--pr); transition: transform 0.3s ease;
}
.bnav-btn.active::after { transform: translateX(-50%) scale(1); }
.bnav-dot {
  position: absolute; top: -2px; right: calc(50% - 16px); background: #ef4444; width: 8px; height: 8px;
  border-radius: 50%; display: none; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}
.bnav-dot.show { display: block; }
@media (min-width: 769px) { .bnav { display: none !important; } }