/* سبونج لايف — sign in / sign up / password reset. Deep-sea background, one card, a promotional side on
   wide screens. CSS transforms only; motion stops with prefers-reduced-motion. */
body.au{min-height:100dvh;background:radial-gradient(70% 55% at 85% 0%,rgba(30,91,255,.32),transparent 70%),radial-gradient(60% 50% at 10% 100%,rgba(56,212,255,.18),transparent 70%),linear-gradient(180deg,#05173F 0%,#031033 55%,#020A22 100%)}
.au-sea{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.au-glow{position:absolute;top:-20%;left:50%;width:120vmax;height:70vmax;translate:-50% 0;background:radial-gradient(closest-side,rgba(56,212,255,.16),transparent);animation:au-breathe 9s ease-in-out infinite}
.au-rays{position:absolute;inset:-10% 0 auto;height:80%;background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(140,232,255,.035) 60px 90px);mask:linear-gradient(180deg,#000,transparent);-webkit-mask:linear-gradient(180deg,#000,transparent)}
.au-bub{position:absolute;bottom:-30px;width:14px;height:14px;border-radius:50%;border:1px solid rgba(140,232,255,.5);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(140,232,255,.06) 60%,transparent);animation:au-rise 16s linear infinite}
.au-bub.b1{left:6%;animation-delay:-3s}.au-bub.b2{left:18%;width:9px;height:9px;animation-delay:-9s;animation-duration:13s}.au-bub.b3{left:44%;width:18px;height:18px;animation-delay:-6s;animation-duration:19s}
.au-bub.b4{right:8%;animation-delay:-1s;animation-duration:15s}.au-bub.b5{right:22%;width:10px;height:10px;animation-delay:-11s}.au-bub.b6{right:38%;width:16px;height:16px;animation-delay:-4s;animation-duration:18s}
@keyframes au-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.85}100%{transform:translate(12px,-110vh);opacity:0}}
@keyframes au-breathe{50%{opacity:.6;scale:1.06}}

.au-main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);width:min(1180px,100%);min-height:100dvh;margin:0 auto;padding:32px clamp(16px,4vw,40px)}
.au-card{display:grid;gap:14px;padding:28px 26px 24px;border-radius:28px;background:linear-gradient(180deg,rgba(10,30,76,.82),rgba(4,16,46,.9));border:1px solid rgba(140,232,255,.26);
  box-shadow:0 0 0 1px rgba(56,212,255,.06) inset,0 30px 70px -30px #000,0 0 60px -30px rgba(56,212,255,.7);backdrop-filter:blur(10px);animation:au-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes au-in{from{opacity:0;transform:translateY(18px) scale(.98)}}
.au-brand{display:inline-flex;align-items:center;gap:10px;justify-self:center;color:#EAF8FF;text-decoration:none;font:900 24px/1 "Tajawal",system-ui,sans-serif;letter-spacing:0}
.au-brand img{width:56px;height:56px;filter:drop-shadow(0 0 16px rgba(56,212,255,.6))}
.au-brand b{color:#FFE14D;text-shadow:0 0 16px rgba(255,214,42,.5)}
.au-card h1{margin:2px 0 0;text-align:center;font-size:clamp(23px,4.6vw,28px);font-weight:900;line-height:1.3}
.au-sub{margin:0;text-align:center;color:rgba(234,248,255,.75);line-height:1.75;font-size:15px}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:16px;background:rgba(2,10,34,.62);border:1px solid rgba(140,232,255,.18)}
.au-tabs a{display:grid;place-items:center;height:42px;border-radius:12px;color:rgba(234,248,255,.75);font-weight:800;text-decoration:none}
.au-tabs a[aria-current=page]{background:linear-gradient(180deg,#123A86,#0B2A66);color:#fff;box-shadow:0 0 0 1px rgba(140,232,255,.35) inset}
body:is([data-mode=forgot],[data-mode=reset]) .au-tabs,body:is([data-mode=forgot],[data-mode=reset]) .au-google{display:none}

/* the Google button — Google's branding: white, the official four-colour G, a clear label */
.au-gbox{display:grid;gap:8px;min-height:52px}
.gbtn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 20px;border-radius:16px;background:#fff;border:1px solid #DADCE0;color:#1F1F1F;
  font:800 17px/1 "Tajawal",system-ui,sans-serif;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.25),0 0 0 0 rgba(56,212,255,0);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.gbtn:hover{background:#F8FAFF;box-shadow:0 6px 18px -6px rgba(0,0,0,.45),0 0 0 4px rgba(56,212,255,.28)}
.gbtn:active{transform:translateY(1px) scale(.99)}
.gbtn:focus-visible{outline:3px solid #FFD62A;outline-offset:3px}
.gbtn-g{width:22px;height:22px;flex:none}
.gbtn-spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid #4285F4;border-top-color:transparent;animation:au-spin .7s linear infinite}
.gbtn.is-busy{pointer-events:none;opacity:.85}.gbtn.is-busy .gbtn-spin{display:block}
.gbtn-status{margin:0;text-align:center;color:#C9F2FF;font-weight:700;font-size:14px}
.gis-holder{display:flex;justify-content:center;min-height:44px}
@keyframes au-spin{to{rotate:360deg}}
.au-or{display:flex;align-items:center;gap:12px;margin:4px 0 0;color:rgba(234,248,255,.55);font-size:13px;font-weight:700}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:rgba(140,232,255,.2)}
.au-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.au-remember{margin:0}
.au-link,.au-alt a{color:#8CE8FF;font-weight:800;text-decoration:none}
.au-link:hover,.au-alt a:hover{text-decoration:underline}
.au-alt{margin:0;text-align:center;color:rgba(234,248,255,.7);font-size:14px}
.au-submit{width:100%}
.au-submit[disabled]{opacity:.7;cursor:progress}
.au-card .pg-note{margin:0;font-size:12.5px;color:rgba(234,248,255,.55);line-height:1.7;text-align:center}

/* the promotional side */
.au-promo{display:grid;justify-items:center;gap:22px;animation:au-in .8s .1s cubic-bezier(.2,.8,.2,1) both}
.au-stage{position:relative;width:min(460px,100%);aspect-ratio:1}
.au-ring{position:absolute;inset:8%;border-radius:50%;border:1.5px solid rgba(140,232,255,.28);box-shadow:0 0 50px -10px rgba(56,212,255,.6) inset}
.au-ring.r2{inset:20%;border-color:rgba(255,214,42,.3);animation:au-spin 40s linear infinite;border-style:dashed}
.au-hero{position:absolute;inset:22%;width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 0 40px rgba(56,212,255,.55)) drop-shadow(0 20px 30px rgba(0,0,0,.5));animation:au-float 6s ease-in-out infinite}
.au-card-art{position:absolute;width:24%;height:auto;border-radius:16px;box-shadow:0 18px 30px -12px #000,0 0 0 2px rgba(140,232,255,.3);animation:au-float 7s ease-in-out infinite}
.au-card-art.c1{top:6%;right:2%;rotate:8deg;animation-delay:-1s}.au-card-art.c2{bottom:8%;right:6%;rotate:-6deg;animation-delay:-3s}.au-card-art.c3{top:30%;left:0;rotate:-9deg;animation-delay:-5s}
.au-coin{position:absolute;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:au-float 5s ease-in-out infinite}
.au-coin.k1{top:4%;left:22%;width:54px;height:54px}.au-coin.k2{bottom:16%;left:18%;width:40px;height:40px;animation-delay:-2s}
.au-plate{position:absolute;bottom:2%;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;color:#2B1A00;font-weight:900;
  background:linear-gradient(110deg,#B97A00,#FFD62A 35%,#FFF6C4 50%,#FFD62A 65%,#C98A00) 0 0/250% 100%;box-shadow:0 0 18px -3px rgba(255,214,42,.9);animation:au-shine 3.4s linear infinite}
.au-plate i{width:8px;height:8px;border-radius:50%;background:#2FD9A0;box-shadow:0 0 8px #2FD9A0}
@keyframes au-float{50%{transform:translateY(-10px)}}
@keyframes au-shine{to{background-position:-250% 0}}
.au-pitch{text-align:center}
.au-pitch h2{margin:0 0 10px;font-size:clamp(22px,2.4vw,30px);font-weight:900}
.au-pitch ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;color:rgba(234,248,255,.8)}
.au-pitch b{color:#FFE14D}

/* phones: the form first; the visual is a small banner under it */
@media (max-width:900px){
  .au-main{grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;padding:16px 16px 28px;min-height:auto}
  .au-card{width:min(480px,100%);justify-self:center;padding:22px 18px 20px}
  .au-promo{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;width:min(480px,100%);justify-self:center;padding:12px 14px;border-radius:20px;background:rgba(4,16,46,.6);border:1px solid rgba(140,232,255,.16)}
  .au-stage{width:96px}
  .au-card-art,.au-coin,.au-plate,.au-ring.r2{display:none}
  .au-ring.r1{inset:0}
  .au-hero{inset:10%;width:80%;height:80%}
  .au-pitch{text-align:start}.au-pitch h2{font-size:16px;margin-bottom:6px}.au-pitch ul{gap:2px;font-size:13px}
}
@media (max-width:360px){.au-card{padding:20px 14px 18px}.au-brand{font-size:21px}.au-brand img{width:46px;height:46px}.gbtn{font-size:16px;gap:10px;padding:0 12px}.au-promo{grid-template-columns:72px minmax(0,1fr)}.au-stage{width:72px}}
@media (prefers-reduced-motion:reduce){.au-glow,.au-bub,.au-card,.au-promo,.au-ring,.au-hero,.au-card-art,.au-coin,.au-plate,.gbtn-spin{animation:none!important}.gbtn{transition:none}}