/* Navy Mirage: the look of the sign-in, verification, password-reset and activation pages.
   Loaded after each page's own styles, which keep the layout; this sets colour, shape and type.
   Palette: #141E30 (deep) to #35577D (light), pale blue-white for text and the main button. */
:root {
  --navy: #141E30;
  --steel: #35577D;
  --mist: #DCE6F2;
  --hair: rgba(200, 218, 240, .38);        /* thin light outline on pills */
  --hair-soft: rgba(200, 218, 240, .16);
  --well: rgba(10, 16, 28, .42);           /* inset fields */
  --well-shadow: inset 3px 4px 10px rgba(5, 9, 18, .45);

  /* the pages' own variables, re-pointed */
  --text: #DCE6F2;
  --muted: rgba(220, 230, 242, .64);
  --accent: #DCE6F2;
  --accent-2: #DCE6F2;
  --field: rgba(10, 16, 28, .42);
  --field-line: rgba(200, 218, 240, .16);
  --glass-border: rgba(200, 218, 240, .38);
  --danger: #F2909C;
  --ok: #8FD6B8;
  --ink: #DCE6F2; --mut: rgba(220, 230, 242, .64); --faint: rgba(220, 230, 242, .42); --line: rgba(200, 218, 240, .16);
  --vio: #DCE6F2; --grad: linear-gradient(100deg, #223654, #35577D);
  --err: #F2909C; --warn: #E8C27A;
}

body {
  color: var(--mist);
  background: linear-gradient(135deg, #111A2A 0%, #141E30 22%, #24395A 62%, #35577D 100%) fixed;
  perspective: 1200px;
}
#shards { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.chart-bg { display: none; }
a { color: var(--mist); }
:focus-visible { outline: 2px solid var(--mist); outline-offset: 3px; }

/* ============ card ============ */
.card {
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: linear-gradient(100deg, #141E30 0%, #22375A 55%, #35577D 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 22px 30px 60px rgba(7, 12, 22, .55), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.card::before {
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 218, 240, .13), transparent 45%);
}
.side { background: none; }
.form-side {
  background: linear-gradient(160deg, #162238 0%, #141E30 70%);
  border-left: 1px solid var(--hair-soft);
  box-shadow: -18px 0 40px rgba(7, 12, 22, .28);
}
.card.trial .form-side { border-left: 0; border-right: 1px solid var(--hair-soft); box-shadow: 18px 0 40px rgba(7, 12, 22, .28); }

/* ============ message half ============ */
.brand img { border-radius: 10px; }
.brand-name { font-weight: 600; }
.side h1 {
  font-family: "Jost", "Inter", sans-serif; font-weight: 300; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.35; letter-spacing: .3em;
}
.side p.lead { margin-top: 18px; line-height: 1.65; }
.bar { width: 64px; height: 1px; border-radius: 0; margin-top: 24px; background: linear-gradient(90deg, var(--mist), transparent); }
.perks, .facts { color: rgba(220, 230, 242, .84); }
.perks i, .facts i { color: var(--mist); opacity: .8; }
.side-foot a { color: rgba(220, 230, 242, .82); }
.platforms { color: rgba(220, 230, 242, .42); }

/* ============ tabs ============ */
.tabs { border-radius: 10px; background: var(--well); border: 1px solid var(--hair-soft); }
.tabs button { font-weight: 500; border-radius: 10px; }
.tabs::before {
  border-radius: 8px; background: linear-gradient(100deg, #223654, #35577D); border: 1px solid var(--hair);
  box-shadow: 4px 6px 14px rgba(7, 12, 22, .45);
}

/* ============ fields ============ */
.field { position: relative; }
.field input {
  width: 100%; padding: 19px 22px 9px; border-radius: 10px; outline: none;
  background: var(--well); border: 1px solid var(--hair-soft); color: #fff; font: 15px "Inter", sans-serif;
  box-shadow: var(--well-shadow);
  transition: border-color .25s, box-shadow .25s;
}
.field input::placeholder { color: rgba(220, 230, 242, .35); }
.field input:focus { border-color: var(--hair); background: var(--well); box-shadow: var(--well-shadow), 0 0 0 4px rgba(200, 218, 240, .10); }
.field label { position: absolute; left: 22px; top: 15px; color: var(--muted); font-size: 14px; pointer-events: none; transition: all .2s ease; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label { top: 6px; font-size: 10.5px; color: rgba(220, 230, 242, .82); }
.field.plain input { padding: 14px 22px; }
.field.pw input { padding-right: 52px; }
.eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; }
.eye:hover { color: #fff; background: rgba(200, 218, 240, .10); }
.eye svg { width: 16px; height: 16px; }
.field.err input { border-color: var(--danger); box-shadow: var(--well-shadow), 0 0 0 3px rgba(242, 144, 156, .14); }
.field.err::after { background: #2A1A26; border-color: rgba(242, 144, 156, .45); right: 18px; }
.row a { color: rgba(220, 230, 242, .82); opacity: 1; }
.row a:hover { color: #fff; }
.hint { margin: 6px 22px 0; font-size: 12px; color: rgba(220, 230, 242, .42); min-height: 16px; }

/* ============ buttons ============ */
.submit {
  border-radius: 10px; color: var(--navy); font-weight: 600;
  background: linear-gradient(180deg, #F3F7FC, #C3D2E4);
  box-shadow: 8px 12px 26px rgba(7, 12, 22, .5), inset 0 1px 0 #fff;
}
.submit:hover { box-shadow: 10px 16px 30px rgba(7, 12, 22, .55), inset 0 1px 0 #fff; }
.submit.done { background: linear-gradient(180deg, #B9E9D5, #8FD6B8); color: #0E2A22; }
.divider::before, .divider::after { background: var(--hair-soft); }
.divider { color: rgba(220, 230, 242, .42); }
.btn-google { border-radius: 10px; background: transparent; border: 1px solid var(--hair); padding: 12px; }
.btn-google:hover { background: rgba(200, 218, 240, .08); }
.link-btn { color: var(--mist); }

/* Google draws its button inside its own frame. While the pointer is on it the card lies flat with no sheen over it
   (a tilted, overlaid frame can miss clicks); the ring gives it the hover and focus feedback of a button. */
.card.flat { transform: none !important; transition: none; }
.card.flat::before { display: none; }
.gbtn { position: relative; flex-direction: column; align-items: center; }
.gbtn > div { border-radius: 10px; transition: box-shadow .18s; }
/* Google draws its own button; force it to the squared radius used across the page. */
.gbtn [role="button"], .gbtn [role="button"] > div { border-radius: 10px !important; }
.gbtn:hover > div, .gbtn:focus-within > div { box-shadow: 0 0 0 3px rgba(200, 218, 240, .30); }
.gbtn iframe, .gbtn iframe:focus, .gbtn iframe:focus-visible, .gbtn div:focus-visible { outline: none; }
.gbtn.busy::after { content: "Opening Google‚6"; margin-top: 8px; font-size: 12px; color: var(--muted); animation: fadeUp .25s ease both; }

.consent { padding: 0 6px; }
.consent .box { border: 1px solid var(--hair); border-radius: 6px; background: var(--well); }
.consent .box svg { color: var(--navy); }
.consent input:checked + .box { background: var(--mist); border-color: var(--mist); }
.consent a { text-decoration-color: var(--hair); }

/* ============ messages ============ */
.alert-box { border-radius: 18px; }
.alert-danger { background: rgba(242, 144, 156, .10); border: 1px solid rgba(242, 144, 156, .38); color: #FAD3D8; }
.alert-success { background: rgba(143, 214, 184, .10); border: 1px solid rgba(143, 214, 184, .38); color: #CFEFE2; }
.bubble { background: #0E1626; box-shadow: 0 12px 26px rgba(7, 12, 22, .5), inset 0 0 0 1px var(--hair-soft); }
.bubble::after { border-top-color: #0E1626; }
.g-toast { background: #0E1626; box-shadow: 0 14px 34px rgba(7, 12, 22, .55), inset 0 0 0 1px var(--hair-soft); }
.envelope { background: rgba(200, 218, 240, .10); border: 1px solid var(--hair); color: var(--mist); }
#activationPendingCard h2 { font-family: "Jost", "Inter", sans-serif; font-weight: 400; letter-spacing: .04em; }
.email-sent-badge, .email-chip {
  border-radius: 999px; padding: 5px 14px; font-weight: 400; color: #fff;
  background: var(--well); border: 1px solid var(--hair-soft);
}

/* ============ dialogs ============ */
.modal-backdrop, .consent-dlg { background: rgba(9, 14, 24, .6); }
.modal-box, .dlg-box {
  border-radius: 28px; border: 1px solid var(--hair);
  background: linear-gradient(160deg, #1B2A42, #141E30); box-shadow: 22px 30px 60px rgba(7, 12, 22, .6);
}
.dlg-btn { border-radius: 10px; border: 1px solid var(--hair); }
.dlg-btn.go { background: linear-gradient(180deg, #F3F7FC, #C3D2E4); color: var(--navy); }

/* ============ verification code ============ */
.form-side h2 { font-family: "Jost", "Inter", sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .04em; }
.otp-box {
  border-radius: 18px; background: var(--well); border: 1px solid var(--hair-soft); box-shadow: var(--well-shadow);
  font: 500 24px "Jost", "Inter", sans-serif; caret-color: var(--mist);
}
.otp-box:focus { border-color: var(--hair); background: var(--well); box-shadow: var(--well-shadow), 0 0 0 4px rgba(200, 218, 240, .10); }
.otp-box.filled { background: linear-gradient(140deg, #1E3050, #35577D); border-color: var(--hair); box-shadow: 4px 6px 14px rgba(7, 12, 22, .45); }
.resend-link { color: var(--mist); text-decoration: underline; text-decoration-color: var(--hair); }
.resend-link:disabled { color: rgba(220, 230, 242, .42); text-decoration: none; }
.switch-account a { text-decoration: underline; text-decoration-color: var(--hair); }

/* ============ password reset and activation ============ */
.who {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 18px;
  border-radius: 22px; background: var(--well); border: 1px solid var(--hair-soft);
}
.who .name { font-weight: 600; font-size: 14px; color: #fff; }
.who .mail { font-size: 12.5px; color: var(--muted); word-break: break-all; }
.who .plan { flex: none; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--hair); color: var(--mist); }
.strength { height: 3px; margin: 8px 22px 0; border-radius: 3px; background: var(--hair-soft); overflow: hidden; }
.strength > div { height: 100%; width: 0; border-radius: 3px; transition: width .3s, background-color .3s; }
.under { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.under a { color: #fff; text-decoration: underline; text-decoration-color: var(--hair); }

@media (max-width: 820px) {
  .card { border-radius: 10px; }
  .side { padding-bottom: 22px; }
  .side h1 { letter-spacing: .22em; }
  .form-side, .card.trial .form-side { border-left: 0; border-right: 0; border-top: 1px solid var(--hair-soft); box-shadow: none; }
}