*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#10183c;
  --navy-dark:#0b1128;
  --accent:#0866ff;
  --accent-dark:#0653cc;
  --gray:#64748B;
  --light:#f3f7ff;
  --border:#E2E8F0;
  --text:#0F172A;
  --grad-deep:linear-gradient(90deg,#2563eb,#7c3aed,#059669);
  --danger:#dc2626;
  --success:#059669;
}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f7f9fc 0%,#eef2f8 100%);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

.auth-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:68px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.auth-logo{font-size:20px;font-weight:900;color:var(--navy);letter-spacing:-0.5px;text-decoration:none;}
.auth-logo em{color:var(--navy);font-style:normal;}
.auth-logo .remix{
  background:var(--grad-deep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-style:normal;
}
.auth-nav-link{font-size:14px;font-weight:500;color:var(--gray);text-decoration:none;}
.auth-nav-link:hover{color:var(--navy);}

.auth-main{
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px 80px;
}
.auth-card{
  width:100%;max-width:420px;
  background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:40px 36px;box-shadow:0 8px 32px rgba(16,24,60,.08);
}
.auth-card-wide{max-width:520px;}
.auth-card h1{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:8px;letter-spacing:-0.5px;}
.auth-sub{font-size:15px;color:var(--gray);margin-bottom:28px;}

.btn-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:13px 20px;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  font-size:15px;font-weight:600;color:var(--text);cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.btn-google:hover{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.btn-google:disabled{opacity:.6;cursor:not-allowed;}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;background:var(--grad-deep);color:#fff;
  border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 20px;background:transparent;color:var(--gray);
  border:1px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-ghost:hover{border-color:#cbd5e1;color:var(--navy);}

.auth-error{
  margin-top:16px;padding:12px 14px;border-radius:10px;
  background:#fef2f2;border:1px solid #fecaca;color:var(--danger);
  font-size:14px;display:none;
}
.auth-error.visible{display:block;}

.auth-note{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
  font-size:13px;color:var(--gray);text-align:center;
}

.account-email{font-size:15px;color:var(--gray);margin-bottom:24px;word-break:break-all;}
.account-email strong{color:var(--navy);font-weight:600;}

.stat-grid{display:grid;gap:16px;margin-bottom:28px;}
.stat-box{
  padding:20px;border-radius:14px;background:var(--light);border:1px solid var(--border);
}
.stat-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--gray);margin-bottom:6px;}
.stat-value{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-0.5px;}
.stat-hint{font-size:13px;color:var(--gray);margin-top:6px;}

.plan-badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;background:#e0e7ff;color:#3730a3;
}

.account-actions{display:flex;gap:12px;flex-wrap:wrap;}

.auth-loading{color:var(--gray);font-size:15px;text-align:center;padding:24px 0;}

@media(max-width:480px){
  .auth-nav{padding:0 20px;}
  .auth-card{padding:32px 24px;}
}