@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

    :root {
      --bg: #050A16; --navy-2: #0E1C3A; --navy-3: #14264E;
      --white: #F7F5F0; --dim: rgba(247,245,240,0.62); --dimmer: rgba(247,245,240,0.38);
      --gold: #FFD700; --amber: #FFA928; --gold-deep: #B8860B; --green: #7CE38B;
      --glass: rgba(150,180,255,0.05); --glass-2: rgba(150,180,255,0.09);
      --stroke: rgba(170,200,255,0.15); --stroke-soft: rgba(170,200,255,0.08);
      --gold-stroke: rgba(255,215,0,0.28);
      --g-blue: #4285F4; --g-red: #EA4335; --g-yellow: #FBBC05; --g-green: #34A853;
      --g-link: #1a0dab; --g-text: #202124; --g-sub: #4d5156; --g-grey: #70757a;
      --g-line: #ebecf0; --g-purple: #9B72CB;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Instrument Sans', sans-serif;
      background:
        radial-gradient(ellipse 120% 60% at 50% -10%, var(--navy-2), transparent 60%),
        radial-gradient(ellipse 80% 50% at 100% 110%, rgba(20,38,78,0.6), transparent 65%),
        var(--bg);
      background-attachment: fixed;
      color: var(--white); line-height: 1.6; min-height: 100vh;
      display: flex; flex-direction: column;
      overflow-x: hidden;
    }
    ::selection { background: var(--gold); color: #000; }
    @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    @keyframes spin { to { --angle: 360deg; } }
    @keyframes gradShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

    /* Backdrop */
    .bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .bg-fx::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(170,200,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170,200,255,0.04) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, black, transparent 82%);
    }
    .orb { position: absolute; border-radius: 50%; filter: blur(120px); }
    .orb-1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,215,0,0.14), transparent 70%); top: -220px; left: 50%; transform: translateX(-50%); }
    .orb-2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(41,98,255,0.12), transparent 70%); bottom: -160px; left: -140px; }
    .orb-3 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(155,114,203,0.10), transparent 70%); bottom: -180px; right: -160px; }
    /* Ghosted product screenshot behind everything (never behind the card) */
    .auth-bg {
      position: fixed; inset: -60px; z-index: 0; pointer-events: none;
      background-image: url('https://nickquirk.com/seoapp2/bgsignin.jpg');
      background-size: cover; background-position: center;
      filter: blur(10px) brightness(0.55) saturate(1.2);
      opacity: 0.8;
      -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 20%, transparent 78%);
      mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 20%, transparent 78%);
    }

    /* Top brand bar */
    .auth-top {
      position: relative; z-index: 2;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.6rem 6%;
    }
    .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
    .brand-logo { height: 34px; width: auto; display: block; }
    .brand-fallback { display: none; align-items: center; gap: 0.5rem; font-family: 'Bricolage Grotesque'; font-weight: 700; color: var(--white); }
    .brand-icon { width: 28px; height: 28px; border-radius: 30%; background: linear-gradient(135deg, var(--gold), var(--amber)); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 800; color: #1a1400; font-family: 'Bricolage Grotesque'; }
    .top-link { color: var(--dim); font-size: 0.92rem; text-decoration: none; }
    .top-link a { color: var(--gold); font-weight: 700; text-decoration: none; }
    .top-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Center stage */
    .auth-stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 5% 4rem; }

    .sheet-stack { position: relative; width: 100%; max-width: 470px; }
    .sheet-stack::before {
      content: ''; position: absolute; inset: -45px; border-radius: 60px;
      background: conic-gradient(from var(--angle), rgba(255,215,0,0.35), rgba(66,133,244,0.22), rgba(155,114,203,0.22), rgba(255,169,40,0.3), rgba(255,215,0,0.35));
      animation: spin 9s linear infinite; filter: blur(72px); z-index: 0; pointer-events: none;
    }

    .auth-card {
      position: relative; z-index: 1; isolation: isolate;
      background: #fff; color: var(--g-text);
      border-radius: 30px;
      padding: 2.6rem clamp(1.6rem, 5vw, 2.8rem) 2.4rem;
      box-shadow: 0 50px 110px -35px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.07), 0 0 90px -30px rgba(255,215,0,0.3);
    }
    .auth-card ::selection { background: var(--g-blue); color: #fff; }

    .auth-eyebrow { font-family: 'JetBrains Mono'; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-grey); margin-bottom: 0.6rem; }
    .auth-title { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--g-text); line-height: 1.1; }
    .auth-sub { color: var(--g-sub); font-size: 0.98rem; margin-top: 0.5rem; margin-bottom: 1.7rem; }

    /* Google sign-in button */
    .g-btn {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.7rem;
      background: #fff; border: 1px solid #dadce0; border-radius: 100px;
      padding: 0.85rem 1rem; cursor: pointer;
      font-family: 'Instrument Sans'; font-weight: 600; font-size: 0.96rem; color: var(--g-text);
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .g-btn:hover { background: #f8f9fa; box-shadow: 0 1px 6px rgba(32,33,36,0.18); }
    .g-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    .divider-or { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--g-grey); font-size: 0.82rem; }
    .divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--g-line); }

    .field { margin-bottom: 1.15rem; }
    .field label { display: block; font-family: 'JetBrains Mono'; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-grey); margin-bottom: 0.5rem; }
    .input-wrap { position: relative; }
    .input-wrap > i { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--g-grey); font-size: 0.92rem; }
    .field input {
      width: 100%; font-family: 'Instrument Sans'; font-size: 1rem; color: var(--g-text);
      background: #fff; border: 1.5px solid #dadce0; border-radius: 14px;
      padding: 0.9rem 1rem 0.9rem 2.7rem; outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .field input::placeholder { color: #9aa0a6; }
    .field input:focus { border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(66,133,244,0.15); }
    .toggle-pw { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--g-grey); cursor: pointer; padding: 0.5rem; font-size: 0.92rem; }
    .toggle-pw:hover { color: var(--g-text); }

    .field-row { display: flex; align-items: center; justify-content: space-between; margin: -0.3rem 0 1.4rem; }
    .remember { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--g-sub); cursor: pointer; user-select: none; }
    .remember input { width: 16px; height: 16px; accent-color: var(--g-blue); cursor: pointer; }
    .forgot { font-size: 0.88rem; color: var(--g-link); text-decoration: none; font-weight: 600; }
    .forgot:hover { text-decoration: underline; }

    /* Primary gold submit — homepage pill language */
    .submit {
      width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
      font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1rem;
      padding: 1rem 1.5rem; border-radius: 16px; border: 2px solid transparent; cursor: pointer;
      color: #1a1400;
      background:
        linear-gradient(115deg, #FFE968, var(--gold), var(--amber), var(--gold), #FFE968) padding-box,
        conic-gradient(from var(--angle), #fff, var(--gold), var(--gold-deep), var(--amber), #fff) border-box;
      background-size: 300% 100%, 100% 100%;
      animation: gradShift 3.5s linear infinite alternate, spin 3s linear infinite;
      box-shadow: 0 0 20px -2px rgba(255,215,0,0.45), 0 4px 14px rgba(2,6,18,0.4);
      transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
      text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    }
    .submit i { font-size: 0.85em; transition: transform 0.2s ease; }
    .submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 34px 0 rgba(255,215,0,0.6), 0 6px 18px rgba(2,6,18,0.4); }
    .submit:hover i { transform: translateX(4px); }
    .submit:active { transform: translateY(1px) scale(0.99); }

    .auth-foot { text-align: center; margin-top: 1.6rem; font-size: 0.94rem; color: var(--g-sub); }
    .auth-foot a { color: var(--g-link); font-weight: 700; text-decoration: none; }
    .auth-foot a:hover { text-decoration: underline; }

    /* trust strip below card */
    .auth-trust { position: relative; z-index: 1; text-align: center; padding: 0 5% 2.5rem; }
    .auth-trust p { font-family: 'JetBrains Mono'; font-size: 0.74rem; color: var(--dimmer); letter-spacing: 0.04em; }
    .auth-trust i { color: var(--green); margin-right: 0.4rem; }

    a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
    @media (max-width: 520px) {
      .auth-top { padding: 1.2rem 5%; }
      .top-link span { display: none; }
      .auth-title { font-size: 1.6rem; }
    }