/* Round 6A. Exact Codex color/font/spacing tokens, transcribed directly
   from app/globals.css's real `@theme` block (not approximated) and
   applied to the real class names used across login.ftl / register.ftl /
   login-reset-password.ftl / login-update-password.ftl /
   login-verify-email.ftl / template.ftl.

   Round 6 (hd-assets-typography-visual-consistency) correction: Round 6A's
   own comment above reasoned this theme needed a *live* Google Fonts load
   because it's a separate, build-step-less Freemarker deployment -- but a
   real runtime `@import url('https://fonts.googleapis.com/...')` is
   exactly the external font/network dependency this round requires zero
   of (confirmed as a real, reproducible network request during this
   round's own testing, not a hypothetical). No build step is actually
   required to vendor static font files: the exact same real
   @fontsource/@fontsource-variable packages the main Next.js app already
   uses (services/frontend-dashboard/node_modules/@fontsource*) are copied
   byte-for-byte into this theme's own resources/fonts/ (see that
   directory's own ASSET_SOURCE note) and referenced below with real
   @font-face rules -- same families, same weights, same latin subset,
   zero network access at runtime. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/sora-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/sora-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/sora-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/sora-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --color-surface: #051424;
  --color-surface-container-lowest: #010f1f;
  --color-surface-container-low: #0d1c2d;
  --color-surface-container: #122131;
  --color-surface-container-high: #1c2b3c;
  --color-surface-container-highest: #273647;
  --color-on-surface: #d4e4fa;
  --color-on-surface-variant: #b9caca;
  --color-outline: #849495;
  --color-outline-variant: #3a494a;
  --color-primary-container: #00f5ff;
  --color-on-primary: #003739;
  --color-primary-fixed-dim: #00dce5;
  --color-error: #ffb4ab;
  --color-background: #051424;
  --font-display: "Sora", sans-serif;
  --font-headline: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-label-caps: "JetBrains Mono", monospace;
  --ease-premium: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body.fomofish-auth {
  margin: 0;
  background: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
}
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible {
  outline: 2px solid #00f5ff !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(0,245,255,.12), 0 0 24px rgba(0,245,255,.34) !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Real bathymetric contour overlay, transcribed verbatim from globals.css. */
.fomofish-bathymetric {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000'%3E%3Cpath d='M0 200 Q 250 150 500 200 T 1000 200' fill='none' stroke='%2300dce5' stroke-width='1'/%3E%3Cpath d='M0 400 Q 250 350 500 400 T 1000 400' fill='none' stroke='%2300dce5' stroke-width='1'/%3E%3Cpath d='M0 600 Q 250 550 500 600 T 1000 600' fill='none' stroke='%2300dce5' stroke-width='1'/%3E%3Cpath d='M0 800 Q 250 750 500 800 T 1000 800' fill='none' stroke='%2300dce5' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---- Two-column AuthFrame shell (login / signup / reset-password /
   update-password / verify-email / account-locked) ---- */
.fomofish-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--color-background); color: var(--color-on-surface); }
@media (min-width: 1024px) { .fomofish-shell { grid-template-columns: 1.05fr .95fr; } }

.fomofish-panel--brand {
  position: relative; overflow: hidden; min-height: 360px;
  padding: 28px; display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(circle at 35% 35%, rgba(0,245,255,.09), transparent 25%),
    linear-gradient(150deg, #010f1f 4%, #051424 54%, #071c2d);
  border-right: 1px solid rgba(255,255,255,.05);
}
@media (min-width: 1024px) { .fomofish-panel--brand { min-height: 100vh; padding: 56px; } }

.fomofish-watermark {
  position: absolute; right: -180px; top: 56%; transform: translateY(-50%);
  width: min(720px, 58vw); opacity: .055; mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.fomofish-brand-lockup { position: relative; z-index: 1; }
.fomofish-logo { display: block; width: 232px; max-width: 60vw; filter: drop-shadow(0 0 11px rgba(0,245,255,.32)); }
.fomofish-logo--centered { width: 190px; margin: 0 auto 24px; display: block; filter: drop-shadow(0 0 11px rgba(0,245,255,.32)); }

.fomofish-brand-copy { position: relative; z-index: 1; max-width: 42rem; }
.fomofish-kicker { font-family: var(--font-label-caps); font-size: 9px; letter-spacing: .16em; color: var(--color-primary-fixed-dim); margin: 0; }
/* R17a: fomofish-admin theme's login.ftl -- AdminLoginPortal's "RESTRICTED
   PLATFORM SURFACE" kicker renders in the error tone, not the default
   cyan -- distinguishes the platform-admin surface at a glance. */
.fomofish-kicker--error { font-family: var(--font-label-caps); font-size: 9px; letter-spacing: .16em; color: var(--color-error); margin: 0; }
.fomofish-gateway-status { display: flex; align-items: center; gap: 10px; font-family: var(--font-label-caps); font-size: 8px; letter-spacing: .1em; color: var(--color-outline); margin-top: 28px; }
.fomofish-gateway-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-fixed-dim); box-shadow: 0 0 10px var(--color-primary-fixed-dim); animation: fomofish-pulse 1.8s ease-in-out infinite; }
@keyframes fomofish-pulse { 50% { opacity: .35; } }
.fomofish-headline {
  font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.04;
  margin: 20px 0 0;
}
.fomofish-headline .fomofish-accent, .fomofish-headline { color: var(--color-on-surface); }
@media (min-width: 1024px) { .fomofish-headline { font-size: 64px; } }
.fomofish-subcopy { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--color-on-surface-variant); max-width: 34rem; margin: 24px 0 0; }

.fomofish-orbit {
  position: relative; width: min(200px, 40vw); aspect-ratio: 1; margin: 40px 0 0;
  display: grid; place-items: center; border: 1px solid rgba(0,245,255,.11); border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(0,245,255,.025), 0 0 0 36px rgba(0,245,255,.012);
  animation: fomofish-orbit-float 6s ease-in-out infinite;
}
.fomofish-orbit span { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(0,245,255,.26); animation: fomofish-orbit-spin 23s linear infinite; }
.fomofish-orbit span:nth-child(2) { inset: 31%; border-style: solid; border-color: transparent rgba(0,245,255,.5); animation-duration: 9s; animation-direction: reverse; }
.fomofish-orbit span:nth-child(3) { inset: 45%; background: var(--color-primary-fixed-dim); border: none; box-shadow: 0 0 24px rgba(0,245,255,.7); animation: none; }
@keyframes fomofish-orbit-float { 50% { transform: translateY(-8px) scale(1.015); } }
@keyframes fomofish-orbit-spin { to { transform: rotate(360deg); } }

.fomofish-return-link {
  position: relative; z-index: 1; align-self: flex-start; margin-top: 24px;
  background: none; border: 0; color: var(--color-outline); text-decoration: none;
  font-family: var(--font-label-caps); font-size: 8px; letter-spacing: .08em;
}
.fomofish-return-link:hover { color: var(--color-primary-fixed-dim); }

.fomofish-panel--form { padding: 20px; display: grid; place-items: center; background: var(--color-surface); }
@media (min-width: 640px) { .fomofish-panel--form { padding: 32px; } }
@media (min-width: 1024px) { .fomofish-panel--form { padding: 56px; } }

.fomofish-form-card {
  width: 100%; max-width: 28rem;
  background: var(--color-surface-container-low);
  border-top: 2px solid var(--color-primary-fixed-dim);
  padding: 24px;
  animation: fomofish-card-in 560ms var(--ease-premium) both;
}
@media (min-width: 640px) { .fomofish-form-card { padding: 32px; } }

.fomofish-alert {
  padding: 12px 14px; margin-bottom: 20px; font-size: 14px; line-height: 20px;
  border: 1px solid var(--color-outline-variant); background: rgba(255,255,255,.02); color: var(--color-on-surface);
}
.fomofish-alert--error { border-color: rgba(255,180,171,.5); color: var(--color-error); background: rgba(255,180,171,.06); }
.fomofish-alert--success { border-color: rgba(0,245,255,.4); color: var(--color-primary-fixed-dim); background: rgba(0,245,255,.06); }
.fomofish-alert--warning { border-color: rgba(255,191,105,.45); color: #ffbf69; background: rgba(255,191,105,.06); }

/* ---- Single centered card shell (forgot-password) ---- */
body.fomofish-auth--centered { min-height: 100vh; display: grid; place-items: center; position: relative; padding: 24px; }
.fomofish-centered-card {
  position: relative; z-index: 1; width: 100%; max-width: 32rem;
  background: var(--color-surface-container-low);
  border: 1px solid rgba(255,255,255,.05);
  padding: 36px; text-align: left;
  animation: fomofish-card-in 560ms var(--ease-premium) both;
}
.fomofish-centered-card .fomofish-logo--centered { width: 174px; max-width: 60vw; margin: 0; }
.fomofish-centered-logo-link { display: inline-block; }
.fomofish-centered-logo-link:hover .fomofish-logo { filter: drop-shadow(0 0 16px rgba(0,245,255,.48)); }
.fomofish-reset-sent { margin-top: 40px; text-align: center; }
.fomofish-reset-sent .fomofish-btn { margin-top: 28px; }
.fomofish-mail-read { display: block; width: 54px; height: 54px; margin: 0 auto; color: var(--color-primary-fixed-dim); filter: drop-shadow(0 0 15px rgba(0,245,255,.3)); }
.fomofish-mail-read svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fomofish-card-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- Shared text/eyebrow/title/copy ---- */
.fomofish-eyebrow { font-family: var(--font-label-caps); font-size: 9px; letter-spacing: .1em; color: var(--color-primary-fixed-dim); margin: 0; }
.fomofish-eyebrow--error { color: var(--color-error); }
.fomofish-eyebrow--centered { text-align: center; margin-top: 28px; }
.fomofish-title { font-family: var(--font-headline); font-weight: 700; font-size: 30px; line-height: 1.2; margin: 12px 0 0; }
.fomofish-title--centered { text-align: center; }
.fomofish-copy { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-on-surface-variant); margin: 12px 0 0; }
.fomofish-copy--centered { text-align: center; }
.fomofish-copy strong { color: var(--color-on-surface); }
.fomofish-copy--muted { font-size: 12px; text-align: center; }
.fomofish-copy--top-spaced { margin-top: 24px; }
.fomofish-copy--muted a { color: var(--color-outline); text-decoration: underline; }
.fomofish-copy--muted a:hover { color: var(--color-primary-fixed-dim); }
.fomofish-footer-text { text-align: center; font-size: 14px; color: var(--color-on-surface-variant); margin: 24px 0 0; }
.fomofish-icon-badge {
  width: 68px; height: 68px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(0,245,255,.35);
  background: radial-gradient(circle, rgba(0,245,255,.14), transparent 66%);
  color: var(--color-primary-fixed-dim); font-size: 30px;
  box-shadow: inset 0 0 24px rgba(0,245,255,.08), 0 0 28px rgba(0,245,255,.12);
}

/* ---- Form fields ---- */
.fomofish-label { display: block; font-family: var(--font-label-caps); font-size: 8px; letter-spacing: .06em; color: var(--color-outline); margin-top: 24px; }
.fomofish-label--spaced { margin-top: 20px; }
.fomofish-input, .fomofish-input-group { display: block; width: 100%; }
.fomofish-input {
  margin-top: 8px; padding: 14px; background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant); color: var(--color-on-surface);
  font-family: var(--font-body); font-size: 14px;
}
.fomofish-input:focus { border-color: var(--color-primary-fixed-dim); }
.fomofish-input--error { border-color: var(--color-error); }
.fomofish-input-group { position: relative; margin-top: 8px; }
.fomofish-input-group .fomofish-input { margin-top: 0; padding-right: 60px; }
.fomofish-visibility-toggle {
  position: absolute; right: 6px; top: 6px; height: calc(100% - 12px); padding: 0 10px;
  background: none; border: 0; color: var(--color-outline);
  font-family: var(--font-label-caps); font-size: 8px; letter-spacing: .05em;
}
.fomofish-visibility-toggle:hover { color: var(--color-primary-fixed-dim); }
.fomofish-visibility-toggle--icon { width: 40px; padding: 0; display: grid; place-items: center; }
.fomofish-eye-icon { width: 22px; height: 22px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5.5 0-9.5 7-9.5 7s4 7 9.5 7 9.5-7 9.5-7S17.5 5 12 5Zm0 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fomofish-visibility-toggle--icon.is-visible .fomofish-eye-icon { opacity: .55; }
.fomofish-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fomofish-field-error { color: var(--color-error); font-size: 14px; margin: 8px 0 0; }

.fomofish-strength-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.fomofish-strength-meter i { display: block; height: 4px; background: var(--color-surface-container-highest); }
.fomofish-strength-meter i.is-weak { background: #ffbf69; }
.fomofish-strength-meter i.is-strong { background: var(--color-primary-fixed-dim); }

.fomofish-row-between { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.fomofish-checkbox-label { font-size: 14px; color: var(--color-on-surface-variant); display: inline-flex; align-items: center; gap: 8px; }

.fomofish-method-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.1); margin: 24px 0 20px; }
.fomofish-method { padding: 12px; border: 0; background: none; font-family: var(--font-label-caps); font-size: 8px; letter-spacing: .05em; color: var(--color-outline); text-align: center; }
.fomofish-method--active { background: rgba(0,220,229,.1); color: var(--color-primary-fixed-dim); }
.fomofish-method--pending { opacity: .55; cursor: not-allowed; }

.fomofish-locked { text-align: center; }
.fomofish-lock-clock { display: block; width: 58px; height: 58px; margin: 0 auto 20px; color: var(--color-error); filter: drop-shadow(0 0 16px rgba(255,180,171,.18)); }
.fomofish-lock-clock svg { width: 100%; height: 100%; fill: var(--color-surface-container-low); stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fomofish-locked .fomofish-btn { margin-top: 16px; }
.fomofish-locked .fomofish-btn:first-of-type { margin-top: 28px; }

/* ---- Links / buttons ---- */
.fomofish-link { color: var(--color-primary-fixed-dim); text-decoration: none; background: none; border: 0; font: inherit; font-size: 14px; }
.fomofish-link:hover { text-decoration: underline; }
.fomofish-link--pending { color: var(--color-outline); cursor: not-allowed; }

.fomofish-btn {
  display: inline-block; text-align: center; text-decoration: none; border: 0; cursor: pointer;
  padding: 13px 20px; font-family: var(--font-label-caps); font-size: 9px; letter-spacing: .1em;
  transition: filter 210ms var(--ease-premium), transform 210ms var(--ease-premium), box-shadow 210ms var(--ease-premium);
}
.fomofish-btn--primary { background: var(--color-primary-container); color: var(--color-on-primary); box-shadow: 0 0 20px rgba(0,245,255,.38); }
.fomofish-btn--primary:hover { box-shadow: 0 0 35px rgba(0,245,255,.58); transform: translateY(-1px); filter: brightness(1.06); }
.fomofish-btn--secondary { background: none; color: var(--color-primary-fixed-dim); border: 1px solid rgba(0,220,229,.25); }
.fomofish-btn--secondary:hover { border-color: rgba(0,245,255,.55); }
.fomofish-btn--block { display: block; width: 100%; }
/* ---- Customer Google/Microsoft social login ---- */
.fomofish-btn--social { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fomofish-social-icon { width: 16px; height: 16px; flex-shrink: 0; }
.fomofish-btn--top-spaced { margin-top: 24px; }
.fomofish-btn--pending { opacity: .5; cursor: not-allowed; }
.fomofish-btn--pending:hover { transform: none; filter: none; }
.fomofish-btn:active { transform: translateY(0) scale(.975); }
.fomofish-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Round 6B-2: MFA / recovery codes / invite-accept ---- */
.fomofish-shield-icon { font-size: 36px; color: var(--color-primary-fixed-dim); line-height: 1; }
.fomofish-totp-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; margin-top: 28px; }
@media (min-width: 640px) { .fomofish-totp-grid { grid-template-columns: 180px 1fr; } }
.fomofish-qr { width: 100%; max-width: 180px; background: #fff; padding: 8px; }
.fomofish-code-block { display: block; margin-top: 8px; padding: 10px 12px; background: var(--color-surface-container-lowest); border: 1px solid rgba(255,255,255,.1); color: var(--color-primary-fixed-dim); font-size: 11px; word-break: break-all; }
.fomofish-input--code { text-align: center; font-family: var(--font-label-caps); font-size: 22px; letter-spacing: .4em; }
.fomofish-recovery-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.fomofish-recovery-codes-grid .fomofish-code-block { margin-top: 0; text-align: center; }
.fomofish-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .fomofish-recovery-codes-grid, .fomofish-grid-two { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  body.fomofish-auth--centered { padding: 16px; }
  .fomofish-centered-card { padding: 28px 22px; }
  .fomofish-title { font-size: 27px; }
  .fomofish-reset-sent .fomofish-btn { display: block; width: 100%; }
}