/*
 * RoboVerse auth pages (login, register, forgot/reset password, OAuth consent): Orbit v4.
 *
 * These pages are static HTML served by the security service (no React or Tailwind build), so this
 * file reproduces the BackTestUI Orbit look with plain CSS. Keep it in sync with
 * BackTestUI/app/styles/orbit.css (dark) and orbit-light.css (Orbit Daylight), and with the "Sign in"
 * screens on the Orbit design page.
 *
 * Dark (Orbit): near-black page with violet/magenta/blue glows, a faint star field and the orbit arc;
 * gradient words in the headline; a glass form card; white pill main button.
 * Light (Orbit Daylight, 2026-10-05): calm low-glare page (#e9ebf2) with a soft brand light at the top
 * and a faint orbit arc, near-white card lifted by shadow, gradient chip, badges and headline phrase,
 * brand gradient main button; ink about 14:1.
 *
 * Status colours: --success for good news, --destructive for errors, --warning for "needs attention".
 */

:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #07070b;
  --card: rgba(14, 14, 20, 0.72);
  --tile: rgba(255, 255, 255, 0.03);
  --field: rgba(255, 255, 255, 0.025);
  --ink: #f4f4f7;
  --ink-2: rgba(244, 244, 247, 0.66);
  --ink-3: rgba(244, 244, 247, 0.46);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --field-line: rgba(255, 255, 255, 0.12);
  --accent: #b47dfb;
  --focus: rgba(139, 30, 247, 0.22);
  --btn-bg: #ffffff;
  --btn-ink: #0a0a0f;
  --btn-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 10px 36px -8px rgba(180, 125, 251, 0.6);
  --success: #5fe0ad;
  --destructive: #ff9aa2;
  --warning: #f6c56f;
  --c-violet: #8b1ef7; --c-magenta: #e04fd4; --c-coral: #ff8a5c; --c-blue: #5b7cfa; --c-sky: #38bdf8; --c-emerald: #34c38f;
}

:root[data-theme='light'] {
  /* Orbit Daylight (light v5, 2026-10-05): calm, low-glare surfaces with Orbit's colour and symbols. */
  color-scheme: light;
  --bg: #e9ebf2;
  --card: #f7f8fb;
  --tile: #eff1f6;
  --field: #fdfdfe;
  --ink: #232836;
  --ink-2: #3a4050;
  --ink-3: #565d6d;
  --line: #dde0ea;
  --line-2: #cfd3df;
  --field-line: #d6d9e3;
  --accent: #6d3ae0;
  --focus: rgba(124, 58, 237, 0.15);
  --btn-bg: linear-gradient(135deg, #6a4ce8, #8b3ddb);
  --btn-ink: #ffffff;
  --btn-shadow: 0 1px 2px rgba(23, 20, 60, 0.12), 0 8px 20px -10px rgba(109, 58, 224, 0.65);
  --success: #127552;
  --destructive: #b8334b;
  --warning: #8f5208;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; background: var(--bg); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
}

/* Orbit backdrop (dark only): glows and a faint star field, plus the orbit arc above the form. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 30%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 82%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 8%, #fff 50%, transparent 51%),
    radial-gradient(64rem 40rem at 70% -14rem, rgba(139, 30, 247, 0.28), transparent 70%),
    radial-gradient(46rem 34rem at 104% 50%, rgba(224, 79, 212, 0.12), transparent 70%),
    radial-gradient(52rem 36rem at 10% 90%, rgba(91, 124, 250, 0.12), transparent 70%),
    radial-gradient(38rem 26rem at 60% 108%, rgba(255, 138, 92, 0.07), transparent 70%);
}
body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 34px;
  z-index: -1;
  width: 3600px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from 338deg, rgba(91, 124, 250, 0) 0deg, rgba(91, 124, 250, 0.5) 8deg, rgba(139, 30, 247, 0.85) 18deg, rgba(224, 79, 212, 0.9) 27deg, rgba(255, 138, 92, 0.8) 36deg, rgba(255, 138, 92, 0) 44deg, rgba(255, 138, 92, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
}
:root[data-theme='light'] body::before {
  background-image:
    radial-gradient(60rem 26rem at 70% -10rem, rgba(124, 58, 237, 0.12), transparent 70%),
    radial-gradient(40rem 24rem at 102% 40%, rgba(224, 79, 212, 0.07), transparent 70%),
    radial-gradient(44rem 28rem at 8% 96%, rgba(58, 91, 217, 0.06), transparent 70%);
}
:root[data-theme='light'] body::after { opacity: 0.45; }
/* Ring Engine (2026-10-05): assets/ring.js draws the arc as a drifting chart of brand candles, the same
   motif as the BackTestUI landing page and dashboard. It replaces the plain arc when JavaScript runs. */
.rv-has-ring body::after { display: none; }
.rv-ring {
  position: fixed; left: 0; right: 0; top: 0; height: 220px; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, #000 60%, transparent); mask: linear-gradient(to bottom, #000 60%, transparent);
}
.rv-ring svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 8px rgba(224, 79, 212, 0.35)); }
:root[data-theme='light'] .rv-ring { opacity: 0.6; }

h1, h2, h3 { margin: 0; font-family: inherit; }

a { color: var(--accent); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Page frame */
.wrap {
  position: relative;
  width: 100%;
  max-width: 1160px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Theme switch: glass pill. */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.toggle::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4f4f7 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.toggle:hover { color: var(--ink); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-theme='light'] .toggle { background: var(--card); box-shadow: inset 0 0 0 1px var(--field-line); }
:root[data-theme='light'] .toggle::before { background: linear-gradient(135deg, #232836 50%, transparent 50%); }
:root[data-theme='light'] .brand-mark img { filter: drop-shadow(0 4px 10px rgba(192, 38, 168, 0.3)); }

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 56px;
  padding-block: 24px;
}
.grid:has(> .panel.brand) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 27rem);
  justify-items: stretch;
}

.panel { min-width: 0; }

/* Left: brand block on the page background. */
.panel.brand { display: flex; flex-direction: column; gap: 28px; }

.brand-mark { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(224, 79, 212, 0.5)); }

.brand-copy { display: flex; flex-direction: column; gap: 14px; }

/* Chip: pill with a gradient hairline and a gradient icon disc (flat in light). */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  background: rgba(14, 14, 22, 0.85);
  font-size: 13px;
  font-weight: 500;
}
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from 200deg, var(--c-coral), var(--c-magenta), var(--c-violet), var(--c-blue), var(--c-coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.chip i { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-violet), var(--c-magenta)); }
.chip svg { width: 12px; height: 12px; color: #fff; }
:root[data-theme='light'] .chip { background: var(--card); color: var(--ink-2); box-shadow: 0 1px 2px rgba(23, 20, 60, 0.05); }
:root[data-theme='light'] .chip::before { background: conic-gradient(from 200deg, #e2541c, #c026a8, #7c3aed, #3a5bd9, #e2541c); opacity: 0.75; }
:root[data-theme='light'] .chip i { background: linear-gradient(135deg, #7c3aed, #c026a8); }
:root[data-theme='light'] .chip svg { color: #fff; }

.title {
  max-width: 16ch;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title .grad {
  background: linear-gradient(90deg, var(--c-coral), var(--c-magenta), #b47dfb, var(--c-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme='light'] .title { background: none; color: #171a26; -webkit-text-fill-color: currentColor; }
:root[data-theme='light'] .title .grad { background: linear-gradient(90deg, #e2541c, #c026a8 38%, #6d3ae0 72%, #3a5bd9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.subtitle { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 16px; line-height: 1.55; }

/* Feature rows with gradient icon badges. */
.features { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.features li { display: flex; align-items: center; gap: 14px; }
.features b { display: block; font-size: 14px; font-weight: 600; }
.features span.d { display: block; color: var(--ink-3); font-size: 13px; }
.badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -10px var(--g2);
}
.badge svg { width: 18px; height: 18px; }
.badge[data-acc='violet'] { --g1: #8b1ef7; --g2: #e04fd4; }
.badge[data-acc='blue'] { --g1: #5b7cfa; --g2: #38bdf8; }
.badge[data-acc='emerald'] { --g1: #34c38f; --g2: #38bdf8; }
.badge[data-acc='coral'] { --g1: #ff8a5c; --g2: #e04fd4; }
:root[data-theme='light'] .badge { box-shadow: 0 8px 18px -10px var(--g1), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
:root[data-theme='light'] .badge[data-acc='violet'] { --g1: #7c3aed; --g2: #c026a8; }
:root[data-theme='light'] .badge[data-acc='blue'] { --g1: #4f6ef5; --g2: #7c3aed; }
:root[data-theme='light'] .badge[data-acc='emerald'] { --g1: #12a374; --g2: #2f7fe0; }
:root[data-theme='light'] .badge[data-acc='coral'] { --g1: #f06a3a; --g2: #c026a8; }

/* Right: the glass form card. */
.panel.form {
  width: 100%;
  max-width: 27rem;
  padding: 30px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 90px -40px #000;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
:root[data-theme='light'] .panel.form { box-shadow: inset 0 0 0 1px rgba(30, 32, 80, 0.055), 0 1px 2px rgba(23, 20, 60, 0.05), 0 24px 56px -30px rgba(40, 30, 110, 0.4); backdrop-filter: none; -webkit-backdrop-filter: none; }

.form-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.form-title { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.03em; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--success);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.form-sub { margin: 6px 0 22px; color: var(--ink-3); font-size: 13.5px; }
.form-sub + .form-sub, form + .form-sub, .form-foot { margin: 18px 0 0; color: var(--ink-3); font-size: 13px; text-align: center; }
.form-sub a, .form-sub .ghost-button {
  display: inline;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  color: var(--accent);
  font-weight: 500;
}

/* Alert */
.notice {
  display: none;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 32%, transparent);
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
}
.notice[data-state='error'],
.notice[data-state='logout'],
.notice[data-state='success'] { display: block; }
.notice[data-state='error'] { background: color-mix(in srgb, var(--destructive) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 32%, transparent); color: var(--destructive); }
.notice[data-state='logout'],
.notice[data-state='success'] { background: color-mix(in srgb, var(--success) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 32%, transparent); color: var(--success); }

/* Field = label + input */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hint { margin: 0; font-size: 12px; color: var(--ink-3); }

.input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--field-line), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: box-shadow 0.15s;
}
.input::placeholder { color: var(--ink-3); }
.input:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--focus); }
:root[data-theme='light'] .input { box-shadow: inset 0 0 0 1px var(--field-line); }
:root[data-theme='light'] .input:hover { box-shadow: inset 0 0 0 1px #b9bfca; }
:root[data-theme='light'] .input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--focus); }

.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.field-hint-link { font-size: 12.5px; font-weight: 500; color: var(--accent); }

.input-with-action { position: relative; }
.input-with-action .input { padding-right: 64px; }
.input-action {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.input-action:hover { color: var(--ink); background: var(--tile); }

/* Buttons: main = white pill (dark) or flat accent pill (light); secondary = glass pill. */
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s;
}
.button:hover:not(:disabled) { opacity: 0.92; text-decoration: none; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
:root[data-theme='light'] .button:hover:not(:disabled) { opacity: 1; filter: brightness(0.94); }

.ghost-button {
  background: var(--tile);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.ghost-button:hover:not(:disabled) { opacity: 1; background: rgba(255, 255, 255, 0.06); }
:root[data-theme='light'] .ghost-button { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line); }
:root[data-theme='light'] .ghost-button:hover:not(:disabled) { background: var(--tile); }

/* Pills (OAuth consent scopes). */
.pills { display: flex; flex-direction: column; gap: 10px; }
.pill { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13px; }
.pill-dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--success); }

/* Register: two-column rows, activation stage. */
.double { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.form[data-stage='verify'] .register-fields { display: none; }
.form[data-stage='register'] .activation-panel { display: none; }

.activation-panel { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); }
.activation-title { font-size: 16px; font-weight: 600; }
.activation-sub { margin: 0; color: var(--ink-3); font-size: 13px; }
.email-preview { color: var(--ink); font-weight: 600; }

.activate-row, .resend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.activate-row .button, .resend-row .button { flex: none; }

.code-inputs { flex: 1; min-width: 220px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.code-input { padding: 0; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  justify-self: start;
}
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }

.resend-hint, .redirect-hint { font-size: 12px; color: var(--ink-3); font-weight: 500; }

/* The register card needs more room for its two-column rows. */
.grid:has(> .panel.form .double) { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
.panel.form:has(.double) { max-width: 34rem; }

@media (max-width: 920px) {
  .grid:has(> .panel.brand),
  .grid:has(> .panel.form .double) { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .panel.brand { gap: 18px; }
  .features { display: none; }
  .panel.form, .panel.form:has(.double) { max-width: none; }
  .title { max-width: 20ch; }
}

@media (max-width: 520px) {
  .wrap { padding: 16px 16px 28px; }
  .panel.form { padding: 22px; border-radius: 18px; }
  .double { grid-template-columns: minmax(0, 1fr); }
  .subtitle { font-size: 15px; }
}