:root{
    --bg:#05070d;
    --panel:#0a0d16;
    --line:rgba(255,255,255,.07);
    --line-2:rgba(255,255,255,.10);
    --ink:#ffffff;
    --muted:rgba(255,255,255,.62);
    --muted-2:rgba(255,255,255,.42);
    --muted-3:rgba(255,255,255,.28);
    --blue:#3b82f6;
    --blue-2:#2563eb;
    --neon:#60a5fa;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";overflow-x:hidden}
  body{
    min-height:100vh;
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37,99,235,.08), transparent 70%),
      radial-gradient(ellipse 40% 40% at 15% 30%, rgba(59,130,246,.06), transparent 70%),
      radial-gradient(ellipse 50% 50% at 85% 80%, rgba(96,165,250,.05), transparent 70%),
      #05070d
  }
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
  ::selection{background:rgba(59,130,246,.4);color:#fff}

  /* film grain + vignette */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
    background:radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%);
  }

  /* layout */
  .stage{
    min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;
    position:relative;z-index:1
  }
  @media(max-width:900px){.stage{grid-template-columns:1fr}}

  /* ─── LEFT: visual ─── */
  .visual{
    position:relative;overflow:hidden;
    padding:48px;display:flex;flex-direction:column;justify-content:space-between;
    border-right:1px solid var(--line);
    min-height:100vh
  }
  @media(max-width:900px){.visual{display:none}}

  /* atmospheric layers */
  .visual .atmo{position:absolute;inset:0;z-index:0;pointer-events:none}
  .visual .blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
  .visual .b1{width:50vw;height:50vw;left:-20vw;top:-10vw;background:radial-gradient(circle,rgba(59,130,246,.18),transparent 60%);animation:driftA 24s ease-in-out infinite}
  .visual .b2{width:40vw;height:40vw;right:-15vw;bottom:-10vw;background:radial-gradient(circle,rgba(96,165,250,.12),transparent 60%);animation:driftB 30s -6s ease-in-out infinite}
  @keyframes driftA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4vw,3vw,0)}}
  @keyframes driftB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-3vw,3vw,0)}}

  .visual .grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%);
  }

  .visual .eyes{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, #000 50%, rgba(0,0,0,.4) 80%, transparent 100%);
    -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9) 0%, #000 50%, rgba(0,0,0,.4) 80%, transparent 100%);
  }
  .visual .eyes img{
    width:100%;height:100%;object-fit:cover;object-position:center top;
    opacity:.75;
    mix-blend-mode:screen;
    filter:contrast(1.1) saturate(1.15) brightness(1.05);
    animation:eyeBreath 9s ease-in-out infinite;
  }
  @keyframes eyeBreath{0%,100%{opacity:.68;transform:scale(1)}50%{opacity:.8;transform:scale(1.012)}}

  /* visual top: brand */
  .visual .top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between}
  .visual .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
  .visual .brand svg{width:30px;height:30px}
  .visual .back{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 14px;border-radius:999px;
    border:1px solid var(--line);background:rgba(255,255,255,.025);
    font-size:13px;color:rgba(255,255,255,.7);
    backdrop-filter:blur(8px);transition:.2s
  }
  .visual .back:hover{background:rgba(255,255,255,.05);color:#fff}
  .visual .back svg{width:12px;height:12px}

  /* visual bottom: quote */
  .visual .quote{position:relative;z-index:3;max-width:520px}
  .visual .quote .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:5px 14px 5px 7px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    border-radius:999px;
    font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.7);font-weight:500;
    backdrop-filter:blur(6px)
  }
  .visual .quote .eyebrow .dot{width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,rgba(96,165,250,.25),rgba(59,130,246,.1));border:1px solid rgba(96,165,250,.35);display:flex;align-items:center;justify-content:center}
  .visual .quote .eyebrow .dot::after{content:"";width:6px;height:6px;border-radius:50%;background:#60a5fa;box-shadow:0 0 8px #60a5fa}
  .visual .quote h2{
    margin:24px 0 18px;
    font-size:42px;line-height:1.04;font-weight:500;letter-spacing:-.025em;
    background:linear-gradient(180deg,#ffffff 0%, rgba(255,255,255,.55) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .visual .quote p{color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.55;max-width:440px}
  .visual .quote .stats{display:flex;gap:36px;margin-top:32px}
  .visual .quote .stats .it{display:flex;flex-direction:column;gap:4px}
  .visual .quote .stats .v{font-size:26px;font-weight:500;letter-spacing:-.02em;color:#fff;font-feature-settings:"tnum"}
  .visual .quote .stats .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:500}

  /* status bar */
  .visual .status{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:2;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    opacity:.0;
  }

  /* ─── RIGHT: form ─── */
  .form-side{
    position:relative;padding:48px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    min-height:100vh;z-index:5
  }
  @media(max-width:600px){.form-side{padding:32px 24px}}

  .form-card{
    width:100%;max-width:420px;display:flex;flex-direction:column;gap:28px;
    position:relative
  }

  /* mobile brand (visible on small) */
  .mobile-brand{display:none;align-items:center;justify-content:space-between;margin-bottom:8px}
  .mobile-brand .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
  .mobile-brand .brand svg{width:28px;height:28px}
  .mobile-brand .back{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
  .mobile-brand .back svg{width:11px;height:11px}
  @media(max-width:900px){.mobile-brand{display:flex}}

  .form-head{display:flex;flex-direction:column;gap:8px}
  .form-head .lbl{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.5);text-transform:uppercase;font-weight:500;
    margin-bottom:8px;
  }
  .form-head .lbl::before{content:"";width:24px;height:1px;background:rgba(255,255,255,.18)}
  .form-head h1{
    margin:0;font-size:38px;line-height:1.04;font-weight:500;letter-spacing:-.03em;
    background:linear-gradient(180deg,#ffffff 0%, rgba(255,255,255,.65) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .form-head .sub{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}

  /* social row */
  .social-row{display:grid;grid-template-columns:1fr;gap:8px}
  .social-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px;border-radius:12px;
    background:rgba(255,255,255,.025);
    border:1px solid var(--line);
    color:#fff;font-size:13px;font-weight:500;
    transition:.2s;cursor:pointer
  }
  .social-btn:hover{background:rgba(255,255,255,.05);border-color:var(--line-2);transform:translateY(-1px)}
  .social-btn svg{width:18px;height:18px}

  .divider{display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.35);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

  /* form */
  form{display:flex;flex-direction:column;gap:14px}
  .field{display:flex;flex-direction:column;gap:8px;position:relative}
  .field label{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:500;letter-spacing:-.005em}
  .input-wrap{
    position:relative;
    display:flex;align-items:center;
    background:rgba(255,255,255,.025);
    border:1px solid var(--line);
    border-radius:12px;
    transition:.2s;
    overflow:hidden;
  }
  .input-wrap:focus-within{
    background:rgba(255,255,255,.04);
    border-color:rgba(96,165,250,.4);
    box-shadow:0 0 0 4px rgba(59,130,246,.08);
  }
  .input-wrap .icn{
    flex-shrink:0;width:42px;height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);transition:.2s
  }
  .input-wrap:focus-within .icn{color:#93c5fd}
  .input-wrap .icn svg{width:16px;height:16px}
  .input-wrap input{
    flex:1;background:transparent;border:none;outline:none;color:#fff;
    font-family:inherit;font-size:16px;font-weight:400;padding:12px 14px 12px 0;
    letter-spacing:-.005em;
    min-width:0;
  }
  .input-wrap input::placeholder{color:rgba(255,255,255,.32)}
  .input-wrap .toggle{
    flex-shrink:0;width:42px;height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);cursor:pointer;transition:.2s
  }
  .input-wrap .toggle:hover{color:#fff}
  .input-wrap .toggle svg{width:16px;height:16px}

  /* row: remember + forgot */
  .row-extras{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
  .checkbox{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
  .checkbox input{position:absolute;opacity:0;pointer-events:none}
  .checkbox .box{
    width:16px;height:16px;border-radius:5px;
    background:rgba(255,255,255,.025);border:1px solid var(--line-2);
    display:flex;align-items:center;justify-content:center;
    transition:.2s
  }
  .checkbox .box svg{width:10px;height:10px;color:#fff;opacity:0;transition:opacity .2s}
  .checkbox input:checked + .box{
    background:linear-gradient(180deg,#4f8df8,#2563eb);
    border-color:transparent;
    box-shadow:0 4px 14px -4px rgba(59,130,246,.6)
  }
  .checkbox input:checked + .box svg{opacity:1}
  .checkbox .txt{font-size:13px;color:var(--muted)}
  .forgot{font-size:13px;color:#93c5fd;transition:.2s}
  .forgot:hover{color:#bfdbfe}

  /* CTA */
  .submit{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    margin-top:8px;
    padding:15px 22px;
    font-size:14.5px;font-weight:500;letter-spacing:-.005em;
    border-radius:12px;cursor:pointer;
    background:linear-gradient(180deg,#5a96f8 0%,#3b82f6 50%,#2563eb 100%);
    color:#fff;border:1px solid rgba(96,165,250,.3);
    transition:transform .2s, box-shadow .25s;
    box-shadow:
      0 1px 0 rgba(255,255,255,.35) inset,
      0 -8px 16px -8px rgba(11,46,131,.45) inset,
      0 10px 30px -10px rgba(59,130,246,.55),
      0 0 0 1px rgba(96,165,250,.2);
  }
  .submit:hover{transform:translateY(-1px);box-shadow:
      0 1px 0 rgba(255,255,255,.4) inset,
      0 -10px 18px -8px rgba(11,46,131,.5) inset,
      0 16px 40px -10px rgba(59,130,246,.7),
      0 0 0 1px rgba(96,165,250,.3)}
  .submit:active{transform:translateY(0)}
  .submit .arr{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:transform .2s}
  .submit:hover .arr{transform:translate(2px,-2px)}
  .submit .arr svg{width:9px;height:9px}

  /* footer of form */
  .form-foot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:2px}
  .form-foot a{color:#93c5fd;font-weight:500;transition:.2s}
  .form-foot a:hover{color:#bfdbfe}

  /* trust badges below form */
  .trust{
    margin-top:36px;
    display:flex;justify-content:center;align-items:center;gap:14px;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.32);text-transform:uppercase
  }
  .trust .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18)}

  /* 2FA info pill */
  .info-pill{
    display:flex;align-items:flex-start;gap:10px;
    padding:12px 14px;border-radius:12px;
    background:rgba(91,141,239,.06);
    border:1px solid rgba(91,141,239,.18);
    font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.5;
    margin-top:8px
  }
  .info-pill svg{width:14px;height:14px;color:#93c5fd;flex-shrink:0;margin-top:2px}
  .info-pill strong{color:#fff;font-weight:500}

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:translateY(0)}
  .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.30s}.reveal.d6{transition-delay:.36s}.reveal.d7{transition-delay:.42s}

  /* ── Forgot password flow ── */
  @keyframes fpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .fp-step{display:flex;flex-direction:column;gap:20px;animation:fpIn .38s cubic-bezier(.2,.7,.2,1) both}
  .error-pill{padding:12px 14px;border-radius:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);font-size:13px;color:#f87171;line-height:1.5}
  .success-pill{padding:16px 18px;border-radius:14px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.22);display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.6}
  .success-pill svg{width:20px;height:20px;color:#4ade80;flex-shrink:0;margin-top:1px}
  /* campo OTP */
  .otp-wrap{
    background:rgba(255,255,255,.03);border:1px solid rgba(96,165,250,.35);
    border-radius:14px;display:flex;align-items:center;justify-content:center;
    padding:6px 14px;
    box-shadow:0 0 0 4px rgba(59,130,246,.07);
    transition:.2s;
  }
  .otp-wrap:focus-within{border-color:rgba(96,165,250,.6);box-shadow:0 0 0 4px rgba(59,130,246,.13)}
  #fpCode{
    background:transparent;border:none;outline:none;color:#fff;
    font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:600;
    letter-spacing:.45em;text-align:center;padding:10px 0;width:100%;
    caret-color:#60a5fa;
  }
  #fpCode::placeholder{color:rgba(255,255,255,.18);letter-spacing:.45em}
  /* breadcrumb voltar */
  .fp-back-top{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.45);transition:.2s;margin-bottom:4px;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
  .fp-back-top:hover{color:rgba(255,255,255,.8)}
  .fp-back-top svg{width:14px;height:14px}

  /* Premium Animated Error Toast - Framer Motion style */
  #loginErrToast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 16px;
    border-radius: 14px;
    overflow: hidden;
    cursor: default;
    user-select: none;
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    will-change: transform, opacity, box-shadow;
    transform-origin: top center;
    background: linear-gradient(135deg,rgba(239,68,68,.11) 0%,rgba(220,38,38,.06) 100%);
    border: 1px solid rgba(239,68,68,.3);
    color: #fca5a5;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 32px -8px rgba(239,68,68,.22);
  }
  #loginErrToast.v-rate {
    background: linear-gradient(135deg,rgba(245,158,11,.12) 0%,rgba(217,119,6,.07) 100%);
    border-color: rgba(245,158,11,.34);
    color: #fcd34d;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 4px 32px -8px rgba(245,158,11,.28);
  }
  #loginErrToast::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(108deg,transparent 30%,rgba(255,255,255,.055) 44%,rgba(255,255,255,.085) 50%,rgba(255,255,255,.055) 56%,transparent 70%);
    background-size: 280% 100%;
    animation: errScan 3s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes errScan { 0%{background-position:220% 0} 100%{background-position:-220% 0} }
  .err-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: background .35s, border-color .35s;
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.25);
  }
  .v-rate .err-icon { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.28); }
  .err-icon svg { width: 16px; height: 16px; display: block; }
  .err-icon .i-lock { display: none; }
  .v-rate .err-icon .i-warn { display: none; }
  .v-rate .err-icon .i-lock { display: block; }
  .err-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 15px;
    border: 1.5px solid rgba(239,68,68,.5);
    animation: iconRing 2s ease-out infinite;
    pointer-events: none;
  }
  .v-rate .err-icon::after { border-color: rgba(245,158,11,.52); }
  @keyframes iconRing { 0%{opacity:.85;transform:scale(1)} 100%{opacity:0;transform:scale(1.75)} }
  .err-body {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.52;
    font-weight: 450;
    position: relative;
    z-index: 1;
    padding-top: 5px;
  }
  .err-bar {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 50%;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(90deg,transparent,rgba(239,68,68,.85),transparent);
    animation: errBar 2.4s ease-in-out infinite;
    pointer-events: none;
  }
  .v-rate .err-bar {
    background: linear-gradient(90deg,transparent,rgba(245,158,11,.9),transparent);
    animation-duration: 1.8s;
  }
  @keyframes errBar { 0%{left:-50%} 100%{left:100%} }
  @keyframes errSpringIn {
    0%  {opacity:0;transform:translateY(20px) scaleY(.82) scaleX(.95);filter:blur(8px)}
    45% {opacity:1;filter:blur(0)}
    60% {transform:translateY(-6px) scaleY(1.03) scaleX(1.01)}
    73% {transform:translateY(3px) scaleY(.993) scaleX(1)}
    83% {transform:translateY(-2px) scaleY(1.006)}
    91% {transform:translateY(1px) scaleY(.998)}
    100%{opacity:1;transform:translateY(0) scaleY(1) scaleX(1);filter:blur(0)}
  }
  @keyframes errShake {
    0%,100%{transform:translateX(0)}
    8%  {transform:translateX(-12px)}
    18% {transform:translateX(11px)}
    28% {transform:translateX(-8px)}
    38% {transform:translateX(7px)}
    50% {transform:translateX(-5px)}
    62% {transform:translateX(4px)}
    74% {transform:translateX(-2.5px)}
    84% {transform:translateX(1.5px)}
    92% {transform:translateX(-1px)}
  }
  @keyframes errGlowRate {
    0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 32px -8px rgba(245,158,11,.28);border-color:rgba(245,158,11,.34)}
    50%    {box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 0 0 7px rgba(245,158,11,.1),0 10px 48px -8px rgba(245,158,11,.65);border-color:rgba(245,158,11,.68)}
  }
  #loginErrToast.a-wrong {
    animation:errSpringIn .6s cubic-bezier(.2,.85,.2,1) both,errShake .56s .05s cubic-bezier(.36,.07,.19,.97) both;
  }
  #loginErrToast.a-rate {
    animation:errSpringIn .6s cubic-bezier(.2,.85,.2,1) both,errGlowRate 2.5s .72s ease-in-out infinite;
  }
  @keyframes fieldGlow {
    0%,100%{border-color:rgba(239,68,68,.35)!important;box-shadow:0 0 0 4px rgba(239,68,68,.09)!important}
    50%    {border-color:rgba(239,68,68,.7)!important;box-shadow:0 0 0 5px rgba(239,68,68,.16)!important}
  }
  .input-wrap.has-error{animation:fieldGlow 1.6s ease-in-out 1}

  /* ── Google button ── */
  @property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
  .g-area{position:relative}
  .g-btn{
    position:relative;width:100%;height:52px;padding:0 20px;
    border-radius:14px;cursor:pointer;overflow:hidden;color:#fff;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);
    transition:background .25s,border-color .25s,box-shadow .25s,transform .15s;
    font-family:inherit;font-size:14px;font-weight:500;
  }
  .g-btn:not(:disabled):hover{
    background:rgba(255,255,255,.055);border-color:rgba(255,255,255,0);
    box-shadow:0 10px 36px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;
    transform:translateY(-1px);
  }
  .g-btn:disabled{opacity:.7;cursor:not-allowed}
  .g-btn::before{
    content:'';position:absolute;inset:-1px;border-radius:15px;padding:1px;
    background:conic-gradient(from var(--ga) at 50% 50%,
      rgba(59,130,246,1) 0deg,rgba(96,165,250,.9) 60deg,
      rgba(147,197,253,.6) 120deg,rgba(30,64,175,.4) 200deg,
      rgba(59,130,246,.8) 280deg,rgba(96,165,250,1) 340deg,
      rgba(59,130,246,1) 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;mask-composite:exclude;
    opacity:0;transition:opacity .3s;
    animation:gaBorderSpin 3.5s linear infinite;pointer-events:none;
  }
  @keyframes gaBorderSpin{to{--ga:360deg}}
  .g-btn:not(:disabled):hover::before{opacity:1}
  .g-btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);
    transform:translateX(-110%);pointer-events:none;
  }
  .g-btn:not(:disabled):hover::after{animation:gaShimmer 1.8s ease-in-out .2s infinite}
  @keyframes gaShimmer{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
  @keyframes gaShake{
    10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
    30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}
    100%{transform:translateX(0)}
  }
  .g-btn.ga-shake{animation:gaShake .5s cubic-bezier(.36,.07,.19,.97) both}
  .g-btn.ga-success{
    background:rgba(52,211,153,.08)!important;border-color:rgba(52,211,153,.28)!important;
    box-shadow:0 0 28px -6px rgba(52,211,153,.25)!important;
  }
  .g-inner{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;z-index:1}
  .g-icon-wrap{position:relative;width:22px;height:22px;flex-shrink:0}
  .g-abs-icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center}
  @keyframes gaSpin{to{transform:rotate(360deg)}}
  .g-spin{animation:gaSpin .8s linear infinite}
  .g-btn-text{font-size:14px;font-weight:500;letter-spacing:-.008em}
  .g-btn-arrow{
    position:absolute;right:18px;display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.07);
    opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;
  }
  .g-btn:not(:disabled):hover .g-btn-arrow{opacity:1;transform:translateX(0)}
  .g-btn-arrow svg{width:11px;height:11px}
  .g-ripple-ctn{position:absolute;inset:0;overflow:hidden;border-radius:14px;pointer-events:none;z-index:0}
  .g-ripple{
    position:absolute;border-radius:50%;background:rgba(255,255,255,.08);
    transform:scale(0);animation:gaRipple .55s ease-out forwards;
  }
  @keyframes gaRipple{to{transform:scale(1);opacity:0}}
  .g-feedback{display:none;flex-direction:column;margin-top:8px}
  .g-feedback.gf-vis{display:flex;animation:gfIn .3s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes gfIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
  .g-feedback-inner{
    display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:11px;
    background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.22);
    font-size:13px;color:#f87171;line-height:1.45;
  }
  .g-feedback-inner svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
  .g-feedback-inner a{color:#fca5a5;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .g-trust{
    display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;
    font-size:11px;color:rgba(255,255,255,.42);
    font-family:'JetBrains Mono',monospace;letter-spacing:.07em;text-transform:uppercase;
  }
  .g-trust svg{width:11px;height:11px;color:rgba(96,165,250,.6);flex-shrink:0}

  /* ── Google Auth Modal (popup fallback) ── */
  .gm-overlay{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;padding:20px;
    background:rgba(0,0,0,0);
    backdrop-filter:blur(0px) saturate(100%);
    -webkit-backdrop-filter:blur(0px) saturate(100%);
    transition:background .38s ease,backdrop-filter .38s ease,-webkit-backdrop-filter .38s ease;
  }
  .gm-overlay.gm-in{
    background:rgba(3,7,18,.72);
    backdrop-filter:blur(16px) saturate(170%);
    -webkit-backdrop-filter:blur(16px) saturate(170%);
  }
  .gm-overlay.gm-out{
    background:rgba(0,0,0,0);
    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
    transition-duration:.25s;
  }
  .gm-card{
    position:relative;
    width:340px;max-width:100%;
    background:linear-gradient(155deg,rgba(15,23,42,.97) 0%,rgba(9,12,22,.99) 100%);
    border:1px solid rgba(255,255,255,.11);
    border-radius:26px;
    padding:36px 32px 28px;
    display:flex;flex-direction:column;align-items:center;
    box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
               0 48px 80px -24px rgba(0,0,0,.85),
               0 0 100px -32px rgba(59,130,246,.18);
    transform:translateY(44px) scale(.92);
    opacity:0;
    transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
    will-change:transform,opacity;
  }
  .gm-overlay.gm-in .gm-card{
    transform:translateY(0) scale(1);
    opacity:1;
  }
  .gm-overlay.gm-out .gm-card{
    transform:translateY(20px) scale(.96);
    opacity:0;
    transition:transform .22s ease,opacity .2s ease;
  }
  .gm-card::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:55%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(96,165,250,.5),transparent);
    border-radius:1px;
  }
  .gm-logo-wrap{
    width:60px;height:60px;border-radius:18px;
    background:rgba(255,255,255,.04);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:22px;position:relative;flex-shrink:0;
    animation:gmLogoIn .52s cubic-bezier(.34,1.56,.64,1) .12s both;
  }
  .gm-logo-ring{
    position:absolute;inset:0;border-radius:18px;padding:1.5px;
    background:conic-gradient(from 0deg,#4285F4,#34A853,#FBBC05,#EA4335,#4285F4);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;mask-composite:exclude;
    opacity:.6;animation:gmRingRot 4s linear infinite;pointer-events:none;
  }
  @keyframes gmLogoIn{
    from{transform:scale(.65) rotate(-12deg);opacity:0}
    to{transform:scale(1) rotate(0deg);opacity:1}
  }
  @keyframes gmRingRot{to{transform:rotate(360deg)}}
  .gm-title{
    font-size:17px;font-weight:600;color:#f1f5f9;
    margin:0 0 7px;letter-spacing:-.025em;
    animation:gmFadeUp .42s ease .2s both;
  }
  .gm-sub{
    font-size:13px;color:rgba(148,163,184,.72);
    margin:0 0 26px;text-align:center;line-height:1.55;
    animation:gmFadeUp .42s ease .25s both;
  }
  @keyframes gmFadeUp{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }
  .gm-btn-ctn{
    display:flex;justify-content:center;width:100%;
    animation:gmFadeUp .42s ease .3s both;
  }
  .gm-divider{
    width:100%;height:1px;
    background:rgba(255,255,255,.07);
    margin:22px 0 18px;
    animation:gmFadeUp .42s ease .35s both;
  }
  .gm-cancel{
    background:none;border:1px solid rgba(255,255,255,.08);
    cursor:pointer;font-size:13px;font-weight:500;
    color:rgba(148,163,184,.65);padding:8px 28px;border-radius:10px;
    transition:color .2s,background .2s,border-color .2s;
    font-family:inherit;letter-spacing:-.005em;
    animation:gmFadeUp .42s ease .38s both;
  }
  .gm-cancel:hover{
    color:rgba(226,232,240,.9);
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.15);
  }
  .gm-brand{
    display:flex;align-items:center;gap:7px;margin-top:16px;
    font-size:10px;color:rgba(255,255,255,.25);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.08em;text-transform:uppercase;
    animation:gmFadeUp .42s ease .44s both;
  }
  .gm-brand-sep{color:rgba(255,255,255,.15)}