:root{
    --bg-0:#05070c;
    --bg-1:#0a0f18;
    --bg-2:#0d1420;
    --cyan:#3fd8ff;
    --cyan-dim:#1c7fa0;
    --cyan-glow:rgba(63,216,255,.55);
    --gold:#f0b84c;
    --gold-dim:#c8933a;
    --gold-glow:rgba(240,184,76,.45);
    --text:#eaf6ff;
    --text-mute:#7fa0b8;
    --border:rgba(63,216,255,.28);
    --danger:#ff6b6b;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{
    margin:0;
    min-height:100vh;
    min-height:100svh; /* mobile browser chrome-safe viewport height */
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(63,216,255,.10), transparent 55%),
      radial-gradient(ellipse at 15% 110%, rgba(240,184,76,.06), transparent 45%),
      linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-0));
    color:var(--text);
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x:hidden;
    position:relative;
    padding:clamp(16px, 5vw, 32px);
    padding-top:calc(clamp(16px, 5vw, 32px) + env(safe-area-inset-top, 0px));
    padding-bottom:calc(clamp(16px, 5vw, 32px) + env(safe-area-inset-bottom, 0px));
    padding-left:calc(clamp(16px, 5vw, 32px) + env(safe-area-inset-left, 0px));
    padding-right:calc(clamp(16px, 5vw, 32px) + env(safe-area-inset-right, 0px));
  }

  /* Scanline / grid overlay for a HUD feel */
  body::before{
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(63,216,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(63,216,255,.035) 1px, transparent 1px);
    background-size:38px 38px;
    mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 75%);
    pointer-events:none;
    z-index:0;
  }
  body::after{
    content:'';
    position:fixed; inset:0;
    background:repeating-linear-gradient(
      0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 3px
    );
    pointer-events:none;
    z-index:1;
    opacity:.5;
  }

  /* Drifting radar ring, echoing the shield/rings in the logo — sized off
     vmin so it scales smoothly from phones up to ultra-wide desktops. */
  .radar{
    position:fixed;
    top:50%; left:50%;
    width:min(1100px, 140vmin); height:min(1100px, 140vmin);
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(63,216,255,.08);
    pointer-events:none;
    z-index:0;
  }
  .radar::before, .radar::after{
    content:'';
    position:absolute; inset:8%;
    border-radius:50%;
    border:1px solid rgba(63,216,255,.06);
  }
  .radar::after{ inset:16%; border-color:rgba(240,184,76,.05); }
  .sweep{
    position:fixed;
    top:50%; left:50%;
    width:min(1100px, 140vmin); height:min(1100px, 140vmin);
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:conic-gradient(from 0deg, rgba(63,216,255,.12), transparent 18%);
    animation:spin 9s linear infinite;
    pointer-events:none;
    z-index:0;
  }
  @keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .sweep{ animation:none; }
    .logo-ring{ animation:none; }
  }

  .stage{
    position:relative;
    z-index:2;
    width:100%;
    max-width:min(420px, 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(18px, 4vw, 26px);
    margin:auto;
  }

  /* Logo */
  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
  }
  .logo-ring{
    position:relative;
    width:clamp(96px, 26vw, 148px); height:clamp(96px, 26vw, 148px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 50% 45%, #0c1420 0%, #060a10 70%);
    box-shadow:
      0 0 0 1px rgba(63,216,255,.35),
      0 0 30px var(--cyan-glow),
      inset 0 0 24px rgba(63,216,255,.15);
    animation:pulse-ring 3.2s ease-in-out infinite;
    flex:none;
  }
  .logo-ring img{
    width:76%; height:76%;
    border-radius:50%;
    object-fit:cover;
    filter:saturate(1.08) contrast(1.05);
  }
  @keyframes pulse-ring{
    0%, 100%{ box-shadow:0 0 0 1px rgba(63,216,255,.35), 0 0 30px var(--cyan-glow), inset 0 0 24px rgba(63,216,255,.15); }
    50%{ box-shadow:0 0 0 1px rgba(63,216,255,.55), 0 0 46px var(--cyan-glow), inset 0 0 30px rgba(63,216,255,.25); }
  }

  .brand h1{
    margin:0;
    font-size:clamp(21px, 5.5vw, 26px);
    letter-spacing:.06em;
    font-weight:700;
    color:var(--gold);
    text-shadow:0 0 18px var(--gold-glow);
  }
  .brand h1 span{ color:var(--text); font-weight:400; }
  .brand .tag{
    margin:0;
    font-size:clamp(10px, 2.6vw, 11.5px);
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--cyan);
    text-shadow:0 0 12px var(--cyan-glow);
  }
  .brand .sub{
    margin:2px 0 0;
    font-size:clamp(10.5px, 2.6vw, 12px);
    color:var(--text-mute);
    font-family:'Consolas','Courier New',monospace;
    letter-spacing:.04em;
    text-align:center;
  }

  /* Card */
  .card{
    position:relative;
    width:100%;
    background:linear-gradient(160deg, rgba(13,20,32,.9), rgba(6,10,16,.92));
    border:1px solid var(--border);
    border-radius:16px;
    padding:clamp(22px, 5vw, 32px) clamp(18px, 5vw, 30px) clamp(20px, 4.5vw, 28px);
    box-shadow:
      0 0 0 1px rgba(63,216,255,.06),
      0 24px 60px -20px rgba(0,0,0,.75),
      0 0 40px -10px rgba(63,216,255,.12);
    backdrop-filter:blur(6px);
  }
  .card::before{
    content:'';
    position:absolute; inset:-1px;
    border-radius:16px;
    padding:1px;
    background:linear-gradient(135deg, rgba(63,216,255,.5), rgba(240,184,76,.25), transparent 60%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
  }
  .corner{
    position:absolute;
    width:16px; height:16px;
    border:2px solid var(--cyan);
    opacity:.7;
  }
  .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
  .corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
  .corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; border-radius:0 0 0 6px; }
  .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 6px 0; }

  .card h2{
    margin:0 0 4px;
    font-size:15px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--text);
    font-weight:600;
  }
  .card .desc{
    margin:0 0 22px;
    font-size:12px;
    color:var(--text-mute);
  }

  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:7px;
  }
  .field .input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .field .input-wrap svg{
    position:absolute;
    left:13px;
    width:16px; height:16px;
    stroke:var(--cyan-dim);
    pointer-events:none;
  }
  .field input{
    width:100%;
    padding:12px 14px 12px 38px;
    background:rgba(5,8,13,.75);
    border:1px solid rgba(63,216,255,.22);
    border-radius:9px;
    color:var(--text);
    font-size:16px; /* 16px+ keeps iOS Safari from auto-zooming on focus */
    font-family:inherit;
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    -webkit-appearance:none;
    appearance:none;
  }
  .field input::placeholder{ color:#3d5266; }
  .field input:focus{
    border-color:var(--cyan);
    background:rgba(9,15,24,.9);
    box-shadow:0 0 0 3px rgba(63,216,255,.12), 0 0 18px rgba(63,216,255,.18);
  }

  .row-between{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:-6px 0 22px;
    font-size:11.5px;
  }
  .row-between a{ color:var(--cyan-dim); text-decoration:none; }
  .row-between a:hover{ color:var(--cyan); text-decoration:underline; }

  .error-box{
    display:flex;
    gap:8px;
    align-items:flex-start;
    background:rgba(255,107,107,.08);
    border:1px solid rgba(255,107,107,.35);
    color:var(--danger);
    font-size:12px;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:18px;
  }
  .error-box svg{ flex:none; width:15px; height:15px; margin-top:1px; }

  button.submit{
    width:100%;
    padding:13px 16px;
    border:none;
    border-radius:9px;
    background:linear-gradient(135deg, var(--cyan), #1690b8);
    color:#04141c;
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 26px -10px rgba(63,216,255,.55), 0 0 0 1px rgba(63,216,255,.25);
    transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
  }
  button.submit:hover{ filter:brightness(1.08); box-shadow:0 12px 30px -8px rgba(63,216,255,.7), 0 0 0 1px rgba(63,216,255,.4); }
  button.submit:active{ transform:translateY(1px) scale(.995); }

  .foot{
    margin-top:22px;
    text-align:center;
    font-size:10.5px;
    letter-spacing:.06em;
    color:var(--text-mute);
    font-family:'Consolas','Courier New',monospace;
  }
  .foot .dot{ color:var(--gold); }

  /* Small phones */
  @media (max-width:380px){
    .brand .sub{ display:none; }
    .foot{ font-size:9.5px; letter-spacing:.03em; }
  }

  /* Short / landscape viewports (phones rotated, small laptops in a
     split view) — tighten vertical rhythm so the card never gets clipped. */
  @media (max-height:640px) and (orientation:landscape){
    .stage{ gap:12px; }
    .logo-ring{ width:72px; height:72px; }
    .brand .sub{ display:none; }
    .card{ padding:18px 22px 16px; }
    .field{ margin-bottom:12px; }
    .foot{ margin-top:10px; }
  }

  /* Large / ultra-wide desktop displays — scale the card up slightly
     rather than leaving it stranded in a sea of empty space. */
  @media (min-width:1600px){
    .stage{ max-width:460px; }
    .brand h1{ font-size:29px; }
  }

  /* Respect a coarse pointer (touch) by keeping tap targets comfortable. */
  @media (pointer:coarse){
    .field input{ padding-top:13px; padding-bottom:13px; }
    button.submit{ padding:15px 16px; }
    .row-between a{ padding:4px 0; display:inline-block; }
  }