:root{
  --navy:#061127;
  --navy-2:#0b1e3c;
  --blue:#087cf0;
  --blue-2:#2da7ff;
  --purple:#8b45f5;
  --text:#10213f;
  --muted:#6b7890;
  --line:#dce5f0;
  --surface:#ffffff;
  --soft:#f5f8fc;
  --success:#146b45;
  --danger:#9c1e3a;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 12%,rgba(39,112,223,.28),transparent 30%),
    radial-gradient(circle at 86% 85%,rgba(139,69,245,.20),transparent 34%),
    linear-gradient(145deg,#040b18 0%,#07142d 55%,#071a36 100%);
  display:grid;
  place-items:center;
  padding:14px;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  border-radius:999px;
  filter:blur(2px);
  pointer-events:none;
  opacity:.45;
}
body::before{width:180px;height:180px;left:-70px;top:-70px;border:1px solid rgba(77,173,255,.22)}
body::after{width:250px;height:250px;right:-115px;bottom:-120px;border:1px solid rgba(157,101,255,.18)}

.auth-shell{
  position:relative;
  width:min(100%,460px);
  margin:auto;
  background:rgba(255,255,255,.985);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
}
.auth-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--blue-2));
}

.auth-card{padding:22px 26px 20px}
.auth-logo{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:0 auto 7px;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.auth-logo img{
  display:block;
  width:132px;
  max-width:52vw;
  max-height:52px;
  object-fit:contain;
}

.eyebrow{
  margin:3px 0 4px!important;
  text-align:center;
  color:var(--blue)!important;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.auth-card h1{
  margin:0;
  text-align:center;
  color:#0d1f3c;
  font-size:clamp(1.48rem,3vw,1.88rem);
  line-height:1.08;
  letter-spacing:-.035em;
}
.auth-card>p:not(.eyebrow){
  margin:7px auto 0;
  max-width:600px;
  text-align:center;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.45;
}
.auth-card>p a{color:var(--blue);font-weight:800;text-decoration:none}
.auth-card>p a:hover{text-decoration:underline}

.auth-form{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.auth-form label{
  display:grid;
  gap:5px;
  color:#29415f;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.01em;
}
.auth-form input:not([type="checkbox"]){
  width:100%;
  height:40px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  background:#fbfdff;
  padding:8px 11px;
  color:#132744;
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-form input:not([type="checkbox"]):focus{
  border-color:#5aa6ff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(8,124,240,.10);
}
.auth-form small,
.auth-card>small{
  color:#7b8799;
  font-size:.69rem;
  line-height:1.35;
}

.auth-form .btn,
.auth-form button[type="submit"]{
  min-height:42px;
  border:0;
  border-radius:11px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  box-shadow:0 9px 22px rgba(79,80,220,.20);
  font-size:.86rem;
  font-weight:900;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.auth-form .btn:hover,
.auth-form button[type="submit"]:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
  box-shadow:0 12px 28px rgba(79,80,220,.26);
}

.or{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 9px;
  color:#99a5b7;
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.or::before,.or::after{content:"";height:1px;background:#e4eaf2;flex:1}
.or span{padding:0 2px}

.google-btn{
  min-height:40px;
  border:1px solid #dbe3ee;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#253b5d;
  background:#fff;
  text-decoration:none;
  font-size:.82rem;
  font-weight:850;
  box-shadow:0 3px 10px rgba(18,45,80,.04);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.google-btn::before{
  content:"G";
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#4285f4;
  background:#fff;
  border:1px solid #e0e6ef;
  font-weight:900;
  font-family:Arial,sans-serif;
}
.google-btn:hover{background:#f8fbff;border-color:#bfd1e8;transform:translateY(-1px)}

.flash{
  padding:9px 11px;
  border-radius:9px;
  margin:11px 0 0;
  font-size:.78rem;
  font-weight:750;
  line-height:1.4;
}
.flash-error{background:#ffedf1;color:var(--danger);border:1px solid #ffd4de}
.flash-success{background:#e9f9f1;color:var(--success);border:1px solid #ccefdc}

.username-hints{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.username-hints button{
  min-height:auto!important;
  border:1px solid #c5d8ef!important;
  border-radius:999px!important;
  padding:5px 9px!important;
  background:#f3f8ff!important;
  color:#25609d!important;
  box-shadow:none!important;
  font-size:.68rem!important;
  font-weight:800!important;
}
.username-hints button:hover{background:#e8f3ff!important;transform:none!important}

.check{
  display:flex!important;
  grid-template-columns:auto 1fr!important;
  align-items:flex-start!important;
  gap:8px!important;
  border:1px solid #e2e9f2;
  border-radius:10px;
  background:#f8fbff;
  padding:8px 10px;
  color:#5d6d82!important;
  font-size:.7rem!important;
  line-height:1.35;
  font-weight:650!important;
}
.check input{width:auto!important;margin:2px 0 0;accent-color:var(--blue)}

/* Login stays intentionally compact. */
.auth-login .auth-card{padding-top:24px}
.auth-login .auth-form{margin-top:18px}
.auth-login .auth-card>p:last-child{margin-top:11px}

/* Registration uses two columns on larger screens so it fits comfortably in one viewport. */
.auth-register .auth-shell{width:min(100%,720px)}
.auth-register .auth-card{padding:18px 24px 16px}
.auth-register .auth-logo{margin-bottom:4px}
.auth-register .auth-logo img{width:116px;max-height:44px}
.auth-register .auth-card h1{font-size:clamp(1.38rem,2.6vw,1.72rem)}
.auth-register .auth-card>p:not(.eyebrow){font-size:.76rem;margin-top:5px}
.auth-register .auth-form{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin-top:12px;
}
.auth-register .auth-form>label:nth-of-type(5),
.auth-register .auth-form>.check,
.auth-register .auth-form>button{
  grid-column:1/-1;
}
.auth-register .auth-form input:not([type="checkbox"]){height:38px;padding:7px 10px}
.auth-register .auth-form>button{margin-top:1px;min-height:40px}
.auth-register .auth-card>p:not(.eyebrow):last-of-type{margin-top:8px}
.auth-register .or{margin:8px 0 7px}
.auth-register .google-btn{min-height:38px}
.auth-register .auth-card>small{display:block;margin-top:7px;text-align:center;font-size:.64rem}

@media(max-width:620px){
  body{padding:10px;place-items:start center}
  .auth-shell{margin:8px auto;border-radius:18px}
  .auth-card{padding:18px 17px 16px}
  .auth-logo img{width:112px;max-height:44px}
  .auth-card h1{font-size:1.42rem}
  .auth-form{gap:9px;margin-top:13px}
  .auth-form input:not([type="checkbox"]){height:39px}
  .auth-register .auth-shell{width:min(100%,460px)}
  .auth-register .auth-card{padding:15px 15px 14px}
  .auth-register .auth-form{grid-template-columns:1fr;gap:7px;margin-top:10px}
  .auth-register .auth-form>label:nth-of-type(5),
  .auth-register .auth-form>.check,
  .auth-register .auth-form>button{grid-column:auto}
  .auth-register .auth-logo img{width:102px;max-height:39px}
  .auth-register .auth-card h1{font-size:1.28rem}
  .auth-register .auth-card>p:not(.eyebrow){font-size:.71rem;line-height:1.35}
  .auth-register .auth-form label{font-size:.7rem}
  .auth-register .auth-form input:not([type="checkbox"]){height:36px;padding:6px 9px;font-size:.83rem}
  .auth-register .check{padding:7px 9px;font-size:.66rem!important}
  .auth-register .or{margin:7px 0 6px}
  .auth-register .google-btn{min-height:36px}
}

@media(max-height:700px) and (min-width:621px){
  body{padding:8px}
  .auth-register .auth-card{padding:13px 22px 12px}
  .auth-register .auth-logo img{width:100px;max-height:38px}
  .auth-register .eyebrow{font-size:.62rem}
  .auth-register .auth-card h1{font-size:1.35rem}
  .auth-register .auth-card>p:not(.eyebrow){font-size:.7rem;line-height:1.3}
  .auth-register .auth-form{gap:6px 10px;margin-top:8px}
  .auth-register .auth-form input:not([type="checkbox"]){height:34px}
  .auth-register .check{padding:6px 9px}
  .auth-register .auth-form>button{min-height:36px}
  .auth-register .or{margin:6px 0 5px}
  .auth-register .google-btn{min-height:35px}
  .auth-register .auth-card>small{margin-top:5px;font-size:.6rem}
}


/* Floating cart shown only when the visitor has selected items. */
.site-cart-indicator{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#071a36;color:#fff;text-decoration:none;font-size:.78rem;font-weight:850;box-shadow:0 10px 35px rgba(0,0,0,.28)}
.site-cart-indicator[hidden]{display:none!important}.site-cart-indicator b{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;font-size:.72rem}.cart-floating{position:fixed;z-index:9999;top:14px;right:14px}.cart-toast{position:fixed;z-index:10000;right:18px;top:68px;max-width:min(360px,calc(100vw - 36px));padding:12px 15px;border-radius:12px;background:#0d6b4d;color:#fff;font-size:.84rem;font-weight:800;box-shadow:0 18px 45px rgba(0,0,0,.25);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s ease}.cart-toast.is-visible{opacity:1;transform:none}.cart-toast.is-error{background:#9c1e3a}


.forgot-row{
  display:flex;
  justify-content:flex-end;
  margin-top:-3px;
  margin-bottom:-1px;
}
.forgot-row a,
.auth-links a{
  color:var(--blue);
  font-size:.73rem;
  font-weight:850;
  text-decoration:none;
}
.forgot-row a:hover,
.auth-links a:hover{text-decoration:underline}
.auth-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid #e8edf4;
}
.recovery-action{margin-top:14px}