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

  :root{
    --bg:#0f0e13;
    --surface:rgba(22,21,28,0.92);
    --surface-2:rgba(32,30,40,0.95);
    --field:rgba(255,255,255,0.06);
    --field-border:rgba(255,255,255,0.1);
    --field-focus-border:rgba(255,106,26,0.7);
    --orange:#FF6A1A;
    --orange-dim:#cc5214;
    --orange-glow:rgba(255,106,26,0.22);
    --white:#f3f0ec;
    --grey:#9a96a3;
    --grey-soft:#5c5865;
    --radius:16px;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0; color-scheme:dark; height:100%;}

  body{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    overflow-x:hidden;
    position:relative;
    background:#0f0e13;
  }

  /* ---- WALLPAPER ---- */
  .wallpaper{
    position:fixed;
    inset:0;
    background-image:var(--wall-img);
    background-size:cover;
    background-position:center 40%;
    z-index:0;
    transform:scale(1.06);
    opacity:0;
    transition:transform 1.5s cubic-bezier(.16,1,.3,1), opacity 1.2s ease-out;
  }
  .wallpaper::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
      135deg,
      rgba(10,9,14,0.82) 0%,
      rgba(10,9,14,0.55) 50%,
      rgba(10,9,14,0.78) 100%
    );
  }
  body.ready .wallpaper{
    transform:scale(1);
    opacity:1;
  }

  /* ---- STAGE ---- */
  .stage{
    position:relative;
    z-index:10;
    width:100%;
    max-width:430px;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  /* ---- TOPBAR ---- */
  .topbar{
    position:absolute;
    top:0;left:0;right:0;
    padding:env(safe-area-inset-top, 18px) 22px 0;
    padding-top:max(env(safe-area-inset-top, 18px), 18px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:20;
  }
  .pill{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    color:#fff;
    background:rgba(10,9,14,0.5);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(8px);
    padding:6px 13px;
    border-radius:100px;
    text-transform:uppercase;
  }
  .gauge{
    width:36px;height:36px;
    border-radius:50%;
    background:rgba(10,9,14,0.5);
    border:1.5px solid rgba(255,255,255,0.15);
    backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
  }
  .gauge svg{width:14px;height:14px;}

  /* ---- HERO AREA ---- */
  .hero-area{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 0 0 0;
    min-height:38vh;
    position:relative;
  }

  /* Redline speed streak */
  .streaks{
    position:absolute;
    bottom:60px;right:0;
    width:65%;height:120px;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.4s ease .4s;
  }
  body.ready .streaks{opacity:1;}
  .streaks line{
    stroke:rgba(255,106,26,0.45);
    stroke-width:1.4;
    stroke-linecap:round;
  }

  /* ---- SHEET ---- */
  .sheet{
    position:relative;
    background:var(--surface);
    backdrop-filter:blur(20px) saturate(1.4);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    border-radius:28px 28px 0 0;
    border-top:1px solid rgba(255,255,255,0.08);
    padding:28px 24px max(env(safe-area-inset-bottom,20px),24px);
    z-index:15;
    box-shadow:0 -20px 60px rgba(0,0,0,0.5);
  }
  .sheet::before{
    content:"";
    display:block;
    width:40px;height:4px;
    border-radius:4px;
    background:rgba(255,255,255,0.12);
    margin:0 auto 26px;
  }

  /* ---- REVEAL ---- */
  .reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
  }
  body.ready .reveal{opacity:1;transform:translateY(0);}
  body.ready .r1{transition-delay:.04s;}
  body.ready .r2{transition-delay:.12s;}
  body.ready .r3{transition-delay:.20s;}
  body.ready .r4{transition-delay:.28s;}
  body.ready .r5{transition-delay:.36s;}
  body.ready .r6{transition-delay:.44s;}
  body.ready .r7{transition-delay:.52s;}

  /* ---- BRAND ---- */
  .brand{margin-bottom:24px;}
  .wordmark{
    font-family:'Bebas Neue';
    font-size:38px;
    letter-spacing:.06em;
    color:var(--white);
    margin:0;
    line-height:1;
  }
  .wordmark span{color:var(--orange);}
  .redline-bar{
    height:3px;
    width:0;
    background:linear-gradient(90deg, var(--orange), var(--orange-dim));
    border-radius:3px;
    margin-top:10px;
    transition:width 1s cubic-bezier(.65,0,.35,1) .7s;
  }
  body.ready .redline-bar{width:56px;}
  .tagline{
    margin:10px 0 0;
    font-size:13px;
    color:var(--grey);
    font-weight:500;
    letter-spacing:.01em;
  }

  /* ---- FORM ---- */
  form{display:flex;flex-direction:column;gap:13px;}

  .field{
    position:relative;
    background:var(--field);
    border:1.5px solid var(--field-border);
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    padding:0 14px;
    height:52px;
    transition:border-color .25s, box-shadow .25s;
    color-scheme:dark;
  }
  .field.focus{
    border-color:var(--field-focus-border);
    box-shadow:0 0 0 4px var(--orange-glow);
  }
  .field.error{
    border-color:#ff4d4d;
    animation:shake .35s;
  }
  .field svg.icon{
    width:17px;height:17px;
    flex-shrink:0;
    stroke:var(--grey-soft);
    transition:stroke .25s;
  }
  .field.focus svg.icon{stroke:var(--orange);}
  .field input{
    flex:1;
    background:none;
    background-color:transparent;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    outline:none;
    color:var(--white);
    color-scheme:dark;
    font-family:'Inter';
    font-size:15px;
    font-weight:500;
    padding:0 10px;
    height:100%;
    /* Impede fundo interno de qualquer tipo nativo */
    clip-path:none;
  }
  .field input::placeholder{color:var(--grey-soft);font-weight:400;}

  /* Autofill dark override — cor calculada do campo sobre o surface */
  .field input:-webkit-autofill,
  .field input:-webkit-autofill:hover,
  .field input:-webkit-autofill:focus,
  .field input:-webkit-autofill:active{
    -webkit-text-fill-color:#f3f0ec !important;
    caret-color:#f3f0ec;
    -webkit-box-shadow:0 0 0 1000px #23222a inset !important;
    box-shadow:0 0 0 1000px #23222a inset !important;
    background-color:#23222a !important;
    transition:background-color 9999s ease 0s, color 9999s ease 0s;
    forced-color-adjust:none;
  }

  /* Firefox autofill */
  .field input:autofill{
    -webkit-text-fill-color:#f3f0ec !important;
    background-color:#23222a !important;
  }

  .eye-btn{
    background:none;border:none;padding:4px;cursor:pointer;
    display:flex;align-items:center;
  }
  .eye-btn svg{width:17px;height:17px;stroke:var(--grey-soft);}
  .eye-btn:hover svg{stroke:var(--white);}

  .err-msg{
    font-size:11.5px;
    color:#ff6b6b;
    margin:-5px 2px 0;
    height:0;overflow:hidden;
    transition:height .2s;
  }
  .err-msg.show{height:15px;}

  .row-between{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:2px;
  }
  .remember{
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;color:var(--grey);
    cursor:pointer;user-select:none;
  }
  .checkbox{
    width:17px;height:17px;
    border-radius:5px;
    border:1.5px solid var(--field-border);
    background:var(--field);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s;
  }
  .checkbox svg{width:10px;height:10px;opacity:0;transition:opacity .15s;}
  .remember.checked .checkbox{background:var(--orange);border-color:var(--orange);}
  .remember.checked .checkbox svg{opacity:1;}
  .forgot{font-size:12.5px;color:var(--white);font-weight:600;text-decoration:none;opacity:.7;}
  .forgot:hover{opacity:1;color:var(--orange);}

  /* ---- PRIMARY BUTTON ---- */
  .btn-primary{
    margin-top:20px;
    height:52px;
    border:none;
    border-radius:var(--radius);
    background:linear-gradient(180deg,#ff7e34,var(--orange) 55%,var(--orange-dim));
    color:#fff;
    font-family:'Inter';
    font-weight:700;
    font-size:14px;
    letter-spacing:.1em;
    cursor:pointer;
    position:relative;overflow:hidden;
    box-shadow:0 10px 28px -6px rgba(255,106,26,0.45);
    transition:transform .15s,box-shadow .15s;
    display:flex;align-items:center;justify-content:center;
    gap:10px;
  }
  .btn-primary:active{transform:scale(.97);}
  .btn-primary[disabled]{cursor:default;opacity:.85;}
  .btn-primary .spinner{
    width:17px;height:17px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    display:none;
    animation:spin .7s linear infinite;
  }
  .btn-primary.loading .label{opacity:0;}
  .btn-primary.loading .spinner{display:block;position:absolute;}
  .btn-primary .check{width:18px;height:18px;display:none;}
  .btn-primary.success{background:linear-gradient(180deg,#2bbf6f,#1f9457);}
  .btn-primary.success .label{opacity:0;}
  .btn-primary.success .spinner{display:none;}
  .btn-primary.success .check{display:block;}

  /* ---- DIVIDER ---- */
  .divider{
    display:flex;align-items:center;gap:10px;
    margin:22px 0 14px;
    color:var(--grey-soft);
    font-size:11.5px;letter-spacing:.04em;
  }
  .divider::before,.divider::after{
    content:"";flex:1;height:1px;background:rgba(255,255,255,0.08);
  }

  /* ---- GOOGLE BTN ---- */
  .bio-btn{
    width:100%;height:48px;
    border-radius:var(--radius);
    border:1.5px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05);
    color:var(--white);
    font-family:'Inter';font-weight:600;font-size:13.5px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    cursor:pointer;
    transition:border-color .2s,background .2s;
    backdrop-filter:blur(4px);
  }
  .bio-btn:hover{border-color:rgba(255,106,26,0.5);background:rgba(255,106,26,0.06);}

  /* ---- SIGNUP ---- */
  .signup{
    text-align:center;
    margin:20px 0 0;
    font-size:13px;
    color:var(--grey);
  }
  .signup a{color:var(--white);font-weight:700;text-decoration:none;}
  .signup a:hover{color:var(--orange);}

  /* ---- TOAST ---- */
  .toast{
    position:fixed;
    bottom:28px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#1c1b22;
    border:1px solid rgba(255,255,255,0.1);
    color:#fff;
    padding:12px 18px;
    border-radius:12px;
    font-size:13px;font-weight:600;
    display:flex;align-items:center;gap:8px;
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
    opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s;
    z-index:100;white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .toast svg{width:16px;height:16px;stroke:#2bbf6f;}

  /* ---- DESKTOP CENTERING ---- */
  @media(min-width:520px){
    body{background:#000 url() no-repeat center/cover;}
    .wallpaper{display:block;}
    .stage{
      max-width:400px;
      min-height:auto;
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.7);
      margin:40px auto;
    }
    .hero-area{min-height:280px;}
    .sheet{border-radius:0;}
    .topbar{border-radius:24px 24px 0 0;}
  }

  /* ---- MODE TOGGLE (login / register) ---- */
  .mode-reg { display:none; }
  body.register-mode .mode-reg { display:block; }
  body.register-mode .mode-login { display:none !important; }

  /* Slot animation on mode switch */
  .anim-slot {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .38s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }
  body.register-mode .anim-slot {
    max-height:200px;
    opacity:1;
  }

  /* ---- TERMS ROW ---- */
  .terms-row {
    display:flex; align-items:flex-start; gap:10px;
    font-size:12.5px; color:var(--grey); cursor:pointer;
    user-select:none; margin-bottom:4px; line-height:1.5;
  }
  .terms-row .checkbox { margin-top:1px; flex-shrink:0; }
  .terms-row a { color:var(--white); font-weight:600; text-decoration:none; }
  .terms-row a:hover { color:var(--orange); }
  .terms-row.checked .checkbox { background:var(--orange); border-color:var(--orange); }
  .terms-row.checked .checkbox svg { opacity:1; }

  /* ---- ACTIVATION NOTICE (inside register form) ---- */
  .activation-notice {
    display:flex; align-items:flex-start; gap:10px;
    background:rgba(255,106,26,0.10);
    border:1px solid rgba(255,106,26,0.25);
    border-radius:12px; padding:11px 14px; margin-top:10px;
  }
  .activation-notice svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:var(--orange); }
  .activation-notice p { margin:0; font-size:11.5px; color:var(--grey); line-height:1.55; }
  .activation-notice strong { color:var(--white); }

  /* ---- ACTIVATION SUCCESS SCREEN ---- */
  .activation-success {
    display:none;
    flex-direction:column; align-items:center; text-align:center;
    padding:8px 0 16px;
  }
  .activation-success.show { display:flex; }
  .act-icon {
    width:64px; height:64px; border-radius:50%;
    background:rgba(255,106,26,0.12);
    border:1.5px solid rgba(255,106,26,0.3);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
  }
  .act-icon svg { width:28px; height:28px; stroke:var(--orange); }
  .activation-success h3 {
    font-size:20px; font-weight:700; color:var(--white);
    margin:0 0 8px;
  }
  .activation-success p { margin:0 0 6px; font-size:13px; color:var(--grey); line-height:1.5; }
  .act-email { font-size:14px; font-weight:700; color:var(--orange); margin-bottom:12px; display:block; }
  .act-note { font-size:11.5px !important; color:var(--grey-soft) !important; }
  .btn-back {
    margin-top:18px; width:100%; height:44px;
    border-radius:var(--radius);
    border:1.5px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
    color:var(--white); font-family:'Inter'; font-weight:600; font-size:13px;
    cursor:pointer; transition:border-color .2s, background .2s;
  }
  .btn-back:hover { border-color:rgba(255,106,26,0.5); background:rgba(255,106,26,0.06); }

  /* Hide form + divider/google when success is shown */
  body.activation-shown #loginForm,
  body.activation-shown .divider,
  body.activation-shown .bio-btn,
  body.activation-shown #signupLine { display:none; }
  body.activation-shown .activation-success { display:flex; }

  @keyframes shake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-6px);}
    75%{transform:translateX(6px);}
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  @media(prefers-reduced-motion:reduce){
    .wallpaper,.reveal,.redline-bar,.streaks{transition:none !important;}
  }