@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap');

:root{
  --brand-1:#e94b6e;
  --brand-2:#f3a26a;
  --brand-3:#6a63e8;
  --brand-4:#5aa3f5;
  --text:#0f172a;
  --muted:#64748b;
  --surface:#ffffff;
  --border: #0f172a1a;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.18);
  --focus: 0 0 0 .22rem rgba(233,75,110,.28);
}

*{box-sizing:border-box}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  background:
    radial-gradient(120% 70%  at 85% -10%, rgba(233,75,110,.25), transparent 60%),
    radial-gradient(90%  60%  at -10% 20%, rgba(90,163,245,.25),  transparent 60%),
    radial-gradient(110% 120% at 105% 85%, rgba(106,99,232,.22),  transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 60%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  background-size: cover, cover, cover, cover;
  background-position: center center, center center, center center, center center;
  position: relative;
}
.bg-noise{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.6'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.auth-shell{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: clamp(20px, 5vw, 48px);
  position:relative;
  z-index:1;
}
.glass-card{
  width: min(440px, 92vw);
  padding: clamp(18px, 4.6vw, 28px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}
.brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom: 6px;
}
.brand svg{ width: 72px; height:auto; }
.brand_text{
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-weight: 800; letter-spacing:.2px;
  text-align:center; margin: 2px 0 18px 0;
  font-size: clamp(22px, 3.2vw, 28px);
  padding-top:0.5rem
}