/* Outscoped auth screens: sign in, sign up, forgot/reset password, email
   confirmation, team invite. Values come from the Figma file "Outscoped BY Akia"
   (Design System page, 1440w and 390w frames); keep them literal so a side by
   side check against the frames stays meaningful. */
:root{
  --navy:#0F172A;--ink:#090D14;--slate-800:#1E293B;--slate-700:#334155;--slate-600:#475569;
  --slate-500:#64748B;--slate-400:#94A3B8;--slate-300:#CBD5E1;--slate-200:#E2E8F0;
  --slate-100:#F1F5F9;--slate-50:#F8FAFC;
  --emerald-500:#10B981;--emerald-600:#059669;--emerald-50:#ECFDF5;--emerald-border:#A7F3D0;--emerald-ink:#065F46;
  --sky-600:#0284C7;
  --red-500:#EF4444;--red-600:#DC2626;--red-50:#FEF2F2;--red-border:#FECACA;--red-ink:#991B1B;
  --amber-500:#F59E0B;--amber-50:#FFFBEB;--amber-border:#FDE68A;--amber-ink:#78350F;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--navy);-webkit-font-smoothing:antialiased;min-height:100dvh;
  background:
    radial-gradient(1018px 1371px at 50% 0, rgba(16,185,129,.08), rgba(16,185,129,0) 65%),
    radial-gradient(1629px 1371px at 80% 100%, rgba(2,132,199,.05), rgba(2,132,199,0) 50%),
    var(--slate-50);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.auth{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(48px + env(safe-area-inset-top,0px)) 20px calc(40px + env(safe-area-inset-bottom,0px))}

/* Top: return link + logo */
.auth-top{display:flex;flex-direction:column;align-items:center;padding-bottom:32px}
.back{display:inline-flex;align-items:center;gap:6.4px;font-size:13.1px;line-height:20.99px;font-weight:600;color:var(--slate-500);padding-bottom:16px}
.back img{width:15px;height:15px}
.back:hover{color:var(--slate-700)}
.logo{display:block;width:160px;height:37.33px;margin-bottom:20px}
.logo img{display:block;width:160px;height:37.33px}

/* Card */
.card{position:relative;width:100%;max-width:440px;background:#fff;border:1px solid var(--slate-200);border-radius:20px;padding:40px 36px;
  box-shadow:0 1px 3px rgba(15,23,42,.04),0 10px 25px -5px rgba(15,23,42,.05),0 20px 25px -5px rgba(15,23,42,.02);
  display:flex;flex-direction:column;gap:21.6px}
.card.wide{max-width:500px}
.card.center{align-items:stretch;text-align:center}
.head{display:flex;flex-direction:column;gap:7.2px;text-align:center}
h1{font-size:28px;line-height:33.6px;font-weight:800;letter-spacing:-.98px;color:var(--ink)}
.sub{font-size:14.7px;line-height:22px;color:var(--slate-500)}
.sub a{color:inherit}
.sub strong{color:var(--navy);font-weight:700}

/* Icon badge */
.badge{width:68px;height:68px;border-radius:20px;border:1px solid;display:grid;place-items:center;margin:0 auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.05))}
.badge img{width:32px;height:32px}
.badge.key{border-color:#BBF7D0;background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%)}
.badge.mint{border-color:var(--emerald-border);background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%)}
.badge.mint.glow{filter:drop-shadow(0 10px 12px rgba(16,185,129,.15))}
.badge.sky{border-color:#BAE6FD;background:linear-gradient(135deg,#F0F9FF 0%,#E0F2FE 100%)}
.badge.red{border-color:var(--red-border);background:linear-gradient(135deg,#FEF2F2 0%,#FEE2E2 100%);filter:drop-shadow(0 10px 12px rgba(220,38,38,.12))}
.badge + .head{margin-top:-8.4px}

/* Form */
form{display:flex;flex-direction:column;gap:15.2px}
.field{display:flex;flex-direction:column;gap:5.59px;min-width:0;text-align:left}
.row2{display:flex;gap:13.6px}
.row2 .field{flex:1 1 0}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
label,.label{font-size:12px;line-height:19.2px;font-weight:700;letter-spacing:.72px;text-transform:uppercase;color:var(--slate-700)}
.label-row a{font-size:12.8px;line-height:20.48px;font-weight:700;color:var(--emerald-600)}
.input{position:relative}
input.in{display:block;width:100%;height:46px;padding:12.5px 16.5px;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:11px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);font:500 15.2px/1 var(--sans);color:var(--navy);-webkit-appearance:none;appearance:none}
input.in::placeholder{color:var(--slate-400);font-weight:400}
input.in:focus{outline:none;border-color:var(--emerald-500);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.15)}
input.in[aria-invalid="true"]{border-color:var(--red-500);background:var(--red-50)}
.input.pw input.in{padding-right:46px}
.eye{position:absolute;right:13.58px;top:50%;transform:translateY(-50%);padding:5.6px;border:0;background:none;border-radius:6px;display:grid;place-items:center}
.eye img{width:18px;height:18px;display:block}
.eye:hover{background:var(--slate-100)}
.eye[aria-pressed="true"] img{opacity:.55}
.check{display:flex;align-items:center;gap:9.59px;font-size:13.4px;line-height:21.5px;font-weight:500;color:var(--slate-700);cursor:pointer;text-transform:none;letter-spacing:0}
.check input{width:17px;height:17px;margin:0;border-radius:2.5px;accent-color:var(--emerald-500);flex:none}
.ts{padding:4px 0 8px;min-height:65px}

/* Buttons and links */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;border:0;border-radius:11px;color:#fff;
  font-size:15.2px;font-weight:700;letter-spacing:-.152px;background:linear-gradient(135deg,var(--emerald-500) 0%,var(--emerald-600) 100%);
  filter:drop-shadow(0 4px 8px rgba(16,185,129,.32));transition:filter .15s,opacity .15s}
.btn img{width:18px;height:18px}
.btn:hover{filter:drop-shadow(0 6px 12px rgba(16,185,129,.4)) brightness(.97)}
.btn:disabled{opacity:.6;cursor:default}
.btn-wrap{padding-top:5.6px}
.text-link{display:block;text-align:center;font-size:12.8px;line-height:20.48px;font-weight:600;color:var(--emerald-600);padding-top:3.25px}
.text-link:hover,.label-row a:hover,.sub a:hover{text-decoration:underline}

/* Continue with Google, per Google's sign-in branding guidelines: white surface,
   #747775 1px border, #1F1F1F label in Roboto Medium, the standard four-color G
   at 20px, never recolored. 48px tall, so the tap target clears 44px. */
.google{display:flex;flex-direction:column;gap:15.2px}
.google[hidden]{display:none}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:0 16px;background:#fff;border:1px solid #747775;border-radius:11px;
  color:#1F1F1F;font:500 15px/20px Roboto,var(--sans);letter-spacing:.25px;transition:background .15s,box-shadow .15s}
.gbtn img{width:20px;height:20px;flex:none;display:block}
.gbtn:hover{background:#F7F7F7;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.gbtn:focus-visible{outline:3px solid var(--emerald-600);outline-offset:2px}
.gbtn:disabled{opacity:.6;cursor:default;box-shadow:none}
.or{display:flex;align-items:center;gap:12px;font-size:13px;line-height:20px;font-weight:600;color:var(--slate-500)}
.or::before,.or::after{content:"";flex:1 1 0;height:1px;background:var(--slate-200)}
input.in[readonly]{background:var(--slate-100);color:var(--slate-600);cursor:default}

/* Notes and alerts */
.note{display:flex;gap:10.4px;align-items:flex-start;padding:13.6px 16px;border-radius:12px;background:var(--slate-50);border:1px solid var(--slate-200);
  font-size:12.6px;line-height:18.96px;color:var(--slate-600);text-align:left}
.note img{width:18px;height:18px;flex:none;margin-top:2px}
.note strong{color:var(--navy);font-weight:700}
.note.amber{background:var(--amber-50);border-color:var(--amber-border);color:var(--amber-ink);font-size:12.8px;line-height:19.2px;justify-content:center;text-align:center}
.alert{display:none;gap:10.4px;align-items:flex-start;padding:13.6px 16px;border-radius:11px;background:var(--red-50);border:1px solid var(--red-border);
  font-size:13.4px;line-height:19.49px;font-weight:600;color:var(--red-ink);text-align:left}
.alert.on{display:flex}
.alert img{width:18px;height:18px;flex:none;margin-top:1px}
.pill{display:none;gap:8.79px;align-items:center;padding:10.4px 15.2px;border-radius:10px;background:var(--emerald-50);border:1px solid var(--emerald-border);
  font-size:13.1px;line-height:18.37px;font-weight:500;color:var(--emerald-ink);text-align:left}
.pill.on{display:flex}
.pill img{width:16px;height:16px;flex:none}
.pill strong{font-weight:700}

/* Password strength + rules */
.meter{display:flex;flex-direction:column;gap:5.6px;padding-top:5.6px}
.bars{display:flex;gap:5px}
.bars i{flex:1 1 0;height:4px;border-radius:4px;background:var(--slate-200)}
.meter[data-score="1"] .bars i:nth-child(-n+1){background:var(--red-500)}
.meter[data-score="2"] .bars i:nth-child(-n+2){background:var(--amber-500)}
.meter[data-score="3"] .bars i:nth-child(-n+3),.meter[data-score="4"] .bars i{background:var(--emerald-500)}
.meter-label{font-size:11.5px;line-height:18.43px;font-weight:700;color:var(--slate-400);min-height:18.43px}
.meter[data-score="1"] .meter-label{color:var(--red-600)}
.meter[data-score="2"] .meter-label{color:#B45309}
.meter[data-score="3"] .meter-label,.meter[data-score="4"] .meter-label{color:var(--emerald-600)}
.rules{margin-top:4px;display:flex;flex-direction:column;gap:4.8px;padding:8.05px 12.8px 8.8px;border-radius:11px;background:var(--slate-50);border:1px solid var(--slate-200);text-align:left}
.rules-title{font-size:11.5px;line-height:18.43px;font-weight:800;letter-spacing:.576px;text-transform:uppercase;color:var(--slate-700)}
.rules li{list-style:none;font-size:12.2px;line-height:19.46px;font-weight:600;color:var(--slate-400)}
.rules ul{padding:0;display:flex;flex-direction:column;gap:4.8px}
.rules li.ok{color:var(--emerald-600)}
.match{font-size:12px;line-height:19.2px;font-weight:600;padding-top:6.4px;min-height:25.6px;text-align:left}
.match.ok{color:var(--emerald-600)}
.match.bad{color:var(--red-600)}
.fine{font-size:12.5px;line-height:18.72px;color:var(--slate-500);text-align:center;padding:7.36px 0 20px}
.fine a{font-weight:600;color:var(--emerald-600)}

/* Six-digit code */
.otp{display:flex;justify-content:center;gap:8.8px;padding:16.8px 0}
.otp input{width:48px;height:56px;padding:0;text-align:center;border-radius:12px;border:1px solid var(--slate-200);background:var(--slate-50);
  box-shadow:0 1px 2px rgba(0,0,0,.03);font:500 23.2px/1 var(--mono);color:var(--navy);-webkit-appearance:none;appearance:none}
.otp input:focus{outline:none;border-color:var(--emerald-500);background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.otp.bad input{border-color:var(--red-500);background:var(--red-50)}
.resend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6.4px;padding-top:12.8px;font-size:13.1px;line-height:20.99px;color:var(--slate-500)}
.resend button{border:0;background:none;padding:0;font-size:13.1px;font-weight:700;color:var(--emerald-600)}
.resend button:disabled{font-weight:500;color:var(--slate-500);cursor:default}
.chip{display:inline-flex;align-items:center;margin-left:2px;padding:.5px 7px .95px;border-radius:6px;background:var(--slate-100);border:1px solid var(--slate-300);
  font:500 12.2px/19.46px var(--mono);letter-spacing:.243px;color:var(--slate-800)}
.chip[hidden]{display:none}

/* Below the card */
.below{padding-top:24px;font-size:14.4px;line-height:23px;color:var(--slate-500);text-align:center}
.below a{color:var(--slate-500)}
.below a:hover{color:var(--slate-700);text-decoration:underline}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:0 16px;padding-top:28px;font-size:12.8px;line-height:20.48px;color:var(--slate-500)}
.foot a:hover{color:var(--slate-700);text-decoration:underline}
.view[hidden]{display:none!important}

@media (max-width:480px){
  .card{padding:29.6px 18.4px;border-radius:16px}
  h1{font-size:24.8px;line-height:29.76px;letter-spacing:-.868px}
  .sub{font-size:13.6px;line-height:20.4px}
  .auth-top{padding-bottom:24px}
  .otp{gap:6px}
  .otp input{width:44px}
  .row2{flex-direction:column;gap:15.2px}
}

/* Phones (2026-10-17, from the App Review recording): iOS zooms in on a field under
   16px when it takes focus and stays zoomed, so text fields are 16px on touch
   screens. The top padding above adds the status bar inset, which is non-zero only
   when the page draws under it (viewport-fit=cover, as in the iOS app). */
@media (max-width:1023px), (pointer:coarse){
  input.in{font-size:16px}
}