@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/*
 * VaultProof internal flight recorder
 * Shared presentation layer for authenticated and account-support pages.
 * Page-specific styles remain responsible for layout and application behavior.
 */

html[data-app-theme="flight"] {
  color-scheme: dark;
  --flight-bg: #070a10;
  --flight-canvas: #0b111b;
  --flight-panel: #111b28;
  --flight-panel-soft: #0e1622;
  --flight-control: #09111b;
  --flight-line: rgba(170, 192, 214, 0.18);
  --flight-line-soft: rgba(170, 192, 214, 0.10);
  --flight-line-cyan: rgba(87, 220, 233, 0.46);
  --flight-cyan: #57dce9;
  --flight-cyan-bright: #81e8f0;
  --flight-white: #f4f8fc;
  --flight-copy: #c9d5e1;
  --flight-muted: #9aa6b5;
  --flight-faint: #718092;
  --flight-green: #46d6a5;
  --flight-amber: #f2bd5b;
  --flight-red: #ff7185;
  --flight-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --flight-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Compatibility tokens used by the existing pages. */
  --accent: var(--flight-cyan);
  --accent-hover: var(--flight-cyan-bright);
  --bg: var(--flight-bg);
  --bg-mid: var(--flight-canvas);
  --bg-card: var(--flight-panel);
  --surface: var(--flight-canvas);
  --surface-raised: var(--flight-panel);
  --surface-soft: var(--flight-panel-soft);
  --rule-color: var(--flight-line);
  --hair-color: var(--flight-line-soft);
  --text: var(--flight-white);
  --text-mid: var(--flight-copy);
  --text-muted: var(--flight-muted);
  --text-faint: var(--flight-faint);
  --copy: var(--flight-copy);
  --muted: var(--flight-muted);
  --cyan: var(--flight-cyan);
  --cyan-strong: var(--flight-cyan-bright);
  --green: var(--flight-green);
  --amber: var(--flight-amber);
  --red: var(--flight-red);
  --danger: var(--flight-red);
  --success: var(--flight-green);
  --ok: var(--flight-green);
  --warn: var(--flight-amber);
  --body: var(--flight-font);
  --display: var(--flight-font);
  --font-body: var(--flight-font);
  --font-display: var(--flight-font);
  --mono: var(--flight-mono);
  --font-mono: var(--flight-mono);
  --vp-cyan: var(--flight-cyan);
  --vp-green: var(--flight-green);
  --vp-orange: var(--flight-amber);
  --vp-panel: var(--flight-panel);
  --vp-panel-strong: var(--flight-canvas);
  --vp-panel-soft: var(--flight-panel-soft);
  --vp-app-surface: var(--flight-panel);
  --vp-app-surface-soft: var(--flight-panel-soft);
  --vp-app-surface-raised: #142233;
  --vp-app-control: var(--flight-control);
  --vp-app-border: var(--flight-line);
  --vp-app-border-strong: var(--flight-line-cyan);
  --vp-app-muted: var(--flight-muted);
  --vp-app-soft: var(--flight-copy);
  --vp-app-cyan: var(--flight-cyan);
  --vp-app-green: var(--flight-green);
  --vp-app-amber: var(--flight-amber);
  --vp-app-red: var(--flight-red);
  --vp-app-focus: rgba(87, 220, 233, 0.44);
  --vp-readable-size: 14px;
  --vp-readable-weight: 500;
  --vp-section-radius: 8px;
  --vp-card-radius: 6px;
  --vp-page-title-size: 30px;
  --vp-page-title-tracking: -0.03em;
  --vp-sidebar-text-size: 13px;
  --vp-sidebar-text-weight: 600;
  --vp-sidebar-text-color: var(--flight-copy);
  --vp-dashboard-text-color: var(--flight-white);
  --vp-dashboard-muted-color: var(--flight-copy);
  --vp-dashboard-soft-color: var(--flight-muted);
}

html[data-app-theme="flight"],
html[data-app-theme="flight"] body,
html[data-app-theme="flight"] body.scanner-app {
  min-width: 320px;
  background: var(--flight-bg) !important;
  background-image: none !important;
  color: var(--flight-copy) !important;
  font-family: var(--flight-font) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

html[data-app-theme="flight"] body::before,
html[data-app-theme="flight"] body::after,
html[data-app-theme="flight"] body.scanner-app::before,
html[data-app-theme="flight"] body.scanner-app::after {
  content: none !important;
  display: none !important;
}

html[data-app-theme="flight"] ::selection {
  background: rgba(87, 220, 233, 0.28) !important;
  color: var(--flight-white) !important;
}

html[data-app-theme="flight"] :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--flight-cyan) !important;
  outline-offset: 3px !important;
}

/* App shell */
html[data-app-theme="flight"] .page {
  background: transparent !important;
  background-image: none !important;
}

html[data-app-theme="flight"] :where(.topbar, body.scanner-app header) {
  border: 1px solid var(--flight-line) !important;
  border-radius: 8px !important;
  background: var(--flight-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-app-theme="flight"] :where(.topbar-root, .topbar-crumb, .topbar-email, .scanner-topbar-email) {
  color: var(--flight-copy) !important;
}

html[data-app-theme="flight"] .topbar-sep {
  color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] :where(.topbar-signout, .scanner-topbar-signout) {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel-soft) !important;
  color: var(--flight-copy) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html[data-app-theme="flight"] :where(.topbar-signout, .scanner-topbar-signout):hover {
  border-color: var(--flight-line-cyan) !important;
  background: rgba(87, 220, 233, 0.10) !important;
  color: var(--flight-cyan-bright) !important;
}

html[data-app-theme="flight"] :where(.sidebar, #sidebar.sidebar, aside[id="sidebar"].sidebar, body.scanner-app #sidebar) {
  border: 1px solid var(--flight-line) !important;
  border-radius: 8px !important;
  background: var(--flight-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .sidebar-head {
  color: var(--flight-faint) !important;
  font-family: var(--flight-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

html[data-app-theme="flight"] :where(.sidebar-item, .sidebar-nav-item, body.scanner-app .sidebar-nav-item) {
  min-height: 40px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--flight-copy) !important;
  font-family: var(--flight-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html[data-app-theme="flight"] :where(.sidebar-item, .sidebar-nav-item):hover {
  border-color: var(--flight-line) !important;
  background: var(--flight-panel-soft) !important;
  color: var(--flight-white) !important;
}

html[data-app-theme="flight"] :where(.sidebar-item, .sidebar-nav-item).active {
  border-color: var(--flight-line-cyan) !important;
  background: rgba(87, 220, 233, 0.11) !important;
  color: var(--flight-cyan-bright) !important;
  box-shadow: inset 0 -2px 0 rgba(87, 220, 233, 0.72) !important;
}

html[data-app-theme="flight"] .sidebar-icon {
  color: var(--flight-muted) !important;
}

html[data-app-theme="flight"] .active .sidebar-icon {
  color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] .sidebar-update-card {
  min-height: 76px !important;
  border: 1px solid var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .sidebar-update-card:hover {
  border-color: var(--flight-line-cyan) !important;
  background: #132232 !important;
  transform: none !important;
}

html[data-app-theme="flight"] .sidebar-update-icon::before {
  box-shadow: none !important;
}

html[data-app-theme="flight"] :where(.main, .main.keys-main, .main.marketplace-main, .main.plans-main, .main.settings-main, body.scanner-app .scanner-main) {
  border: 1px solid var(--flight-line) !important;
  border-radius: 8px !important;
  background: var(--flight-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--flight-copy) !important;
}

/* Type hierarchy */
html[data-app-theme="flight"] :where(.app-page-title, .page-title, .plans-heading .page-title) {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

html[data-app-theme="flight"] :where(.app-page-description, .page-desc, .plans-heading .page-desc) {
  color: var(--flight-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html[data-app-theme="flight"] :where(.app-eyebrow, .section-label, .keys-section-kicker, .banner-kicker, .app-kpi-label, .kpi-label, .panel-kicker) {
  color: var(--flight-cyan) !important;
  font-family: var(--flight-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html[data-app-theme="flight"] :where(.app-section-title, .panel-head h2, .panel-head h3, .keys-manager-title, .project-section-title, .section-heading h2, .usage-card-head h2) {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

html[data-app-theme="flight"] :where(.app-section-description, .keys-manager-copy, .project-section-sub, .usage-card-head p) {
  color: var(--flight-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Panels, tables, cards, and controls */
html[data-app-theme="flight"] :where(
  .app-section,
  .panel,
  .chart-panel,
  .table-wrap,
  .keys-manager-panel,
  .tokens-section,
  .plan-selection,
  .usage-card,
  .billing-assurance,
  .enterprise-callout,
  .settings-card,
  .provider-card,
  .plan-card,
  .modal-card,
  .upgrade-dialog-card,
  body.scanner-app .bg-card,
  body.scanner-app .bg-surface,
  body.scanner-app #scanHistoryTable
) {
  border-color: var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] :where(.app-section-header, .panel-head, .keys-manager-head, .project-section-head, .section-heading, .usage-card-head) {
  border-color: var(--flight-line) !important;
  background: var(--flight-panel-soft) !important;
  color: var(--flight-muted) !important;
}

html[data-app-theme="flight"] :where(.app-kpi-grid, .kpi-grid) {
  border-color: var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-line) !important;
}

html[data-app-theme="flight"] :where(.app-kpi-card, .kpi-cell) {
  min-height: 106px !important;
  background: var(--flight-panel) !important;
}

html[data-app-theme="flight"] :where(.app-kpi-value, .kpi-value, .marketplace-stat strong) {
  color: var(--flight-white) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
}

html[data-app-theme="flight"] :where(.app-kpi-note, .kpi-sub, .marketplace-stat span) {
  color: var(--flight-muted) !important;
  font-size: 11px !important;
}

html[data-app-theme="flight"] :where(.app-toolbar, .filters, .keys-manager-toolbar) {
  border-color: var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel-soft) !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] :where(input, select, textarea, .form-control, .search-input, .select-input, .org-select, .form-input, .form-select, .form-textarea) {
  min-height: 44px !important;
  border: 1px solid var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-control) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  font-size: 14px !important;
}

html[data-app-theme="flight"] :where(input, textarea)::placeholder {
  color: var(--flight-faint) !important;
}

html[data-app-theme="flight"] :where(input, select, textarea):focus {
  border-color: var(--flight-cyan) !important;
  box-shadow: 0 0 0 3px rgba(87, 220, 233, 0.11) !important;
  outline: 0 !important;
}

html[data-app-theme="flight"] :where(.app-button, .btn, .btn-outline, .btn-primary, .btn-secondary, .btn-danger, .button) {
  min-height: 40px !important;
  padding: 0 15px !important;
  border: 1px solid var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--flight-copy) !important;
  font-family: var(--flight-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[data-app-theme="flight"] :where(.filter-chip, .marketplace-filter) {
  min-height: 36px !important;
  padding-inline: 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

html[data-app-theme="flight"] :where(.app-button, .btn, .btn-outline, .btn-secondary, .button-secondary):hover {
  border-color: var(--flight-line-cyan) !important;
  background: #142233 !important;
  color: var(--flight-cyan-bright) !important;
  transform: none !important;
}

html[data-app-theme="flight"] :where(.app-button-primary, .btn-primary, .button-primary, #saveGlobalLimitsBtn) {
  border-color: var(--flight-cyan) !important;
  background: var(--flight-cyan) !important;
  color: #061116 !important;
}

html[data-app-theme="flight"] :where(.app-button-primary, .btn-primary, .button-primary, #saveGlobalLimitsBtn):hover {
  border-color: var(--flight-cyan-bright) !important;
  background: var(--flight-cyan-bright) !important;
  color: #061116 !important;
}

html[data-app-theme="flight"] :where(.btn-danger, .settings-danger-zone) {
  border-color: rgba(255, 113, 133, 0.42) !important;
}

html[data-app-theme="flight"] :where(table, .table) {
  color: var(--flight-copy) !important;
}

html[data-app-theme="flight"] :where(th, .table-head) {
  border-color: var(--flight-line) !important;
  background: var(--flight-panel-soft) !important;
  color: var(--flight-muted) !important;
  font-family: var(--flight-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

html[data-app-theme="flight"] :where(td, tr, .table-row, .keys-inventory-row) {
  border-color: var(--flight-line-soft) !important;
}

html[data-app-theme="flight"] :where(tr:hover, .table-row:hover, .keys-inventory-row:hover) {
  background: rgba(87, 220, 233, 0.045) !important;
}

html[data-app-theme="flight"] .status-band,
html[data-app-theme="flight"] .banner {
  border: 1px solid var(--flight-line-cyan) !important;
  border-radius: 6px !important;
  background: var(--flight-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] :where(.badge, .status-badge, .pill, .chip, .filter-chip, .marketplace-filter) {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Login: one dark control plane instead of a split light/dark template. */
html[data-app-theme="flight"] .login-layout {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--flight-bg) !important;
  background-image: none !important;
}

html[data-app-theme="flight"] .intro-panel {
  border-right: 1px solid var(--flight-line) !important;
  background: var(--flight-canvas) !important;
  background-image: none !important;
}

html[data-app-theme="flight"] .intro-panel::before,
html[data-app-theme="flight"] .intro-panel::after {
  content: none !important;
  display: none !important;
}

html[data-app-theme="flight"] :where(.intro-h1, .auth-title) {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  letter-spacing: -0.035em !important;
}

html[data-app-theme="flight"] .intro-h1 {
  font-size: clamp(46px, 5vw, 68px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
}

html[data-app-theme="flight"] :where(.eyebrow, .auth-kicker, .trust-num, .session-live, .log-glyph, .log-success) {
  color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] :where(.intro-sub, .auth-subtitle, .trust-copy, .reset-copy) {
  color: var(--flight-muted) !important;
}

html[data-app-theme="flight"] :where(.trust-grid, .session-log, .auth-card, .promo-block, .auth-tabs) {
  border-color: var(--flight-line) !important;
  border-radius: 2px !important;
  background: var(--flight-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-app-theme="flight"] .auth-panel {
  border-left: 0 !important;
  background: var(--flight-bg) !important;
  background-image: none !important;
}

html[data-app-theme="flight"] .auth-title {
  font-size: 32px !important;
  font-weight: 700 !important;
}

html[data-app-theme="flight"] .auth-tabs {
  border-radius: 2px !important;
}

html[data-app-theme="flight"] .auth-tabs button {
  min-height: 40px !important;
  border-radius: 1px !important;
}

html[data-app-theme="flight"] .promo-toggle {
  min-height: 40px !important;
}

html[data-app-theme="flight"] .auth-tabs #loginTab[class*="bg-"],
html[data-app-theme="flight"] .auth-tabs #registerTab[class*="bg-"] {
  background: #15313a !important;
  color: var(--flight-cyan-bright) !important;
}

html[data-app-theme="flight"] .mobile-brand-mark {
  border-color: var(--flight-line-cyan) !important;
  border-radius: 2px !important;
  background: var(--flight-panel) !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .login-layout :where(.btn, .form-input) {
  border-radius: 2px !important;
}

/* Onboarding */
html[data-app-theme="flight"] .onboarding-header {
  border-color: var(--flight-line) !important;
  background: var(--flight-canvas) !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .onboarding-shell {
  background: var(--flight-bg) !important;
}

html[data-app-theme="flight"] .onboarding-rail {
  border-color: var(--flight-line) !important;
  background: var(--flight-canvas) !important;
}

html[data-app-theme="flight"] .rail-intro h1 {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  font-size: 38px !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
}

html[data-app-theme="flight"] :where(.onboarding-step, .choice-list label) {
  border-color: var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .onboarding-step {
  background: transparent !important;
}

html[data-app-theme="flight"] :where(.request-path, .step-outcome, .model-ledger, .workspace-map, .boundary-note, .setup-summary, .next-sequence) {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .step-copy h2 {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}

html[data-app-theme="flight"] .progress-list li.is-active::before {
  box-shadow: none !important;
}

/* Guardian consent: remove the isolated purple campaign treatment. */
html[data-app-theme="flight"] body > main:not(.login-layout):only-of-type {
  width: min(760px, calc(100% - 40px));
}

html[data-app-theme="flight"] .brand {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
}

html[data-app-theme="flight"] .mark {
  border-color: var(--flight-line-cyan) !important;
  border-radius: 6px !important;
  background: var(--flight-panel) !important;
  color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] .eyebrow {
  color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] body > main:not(.login-layout) h1,
html[data-app-theme="flight"] body > main:not(.login-layout) h2 {
  color: var(--flight-white) !important;
  font-family: var(--flight-font) !important;
  letter-spacing: -0.035em !important;
}

html[data-app-theme="flight"] :where(.card, .notice, #status) {
  border: 1px solid var(--flight-line) !important;
  border-radius: 6px !important;
  background: var(--flight-panel) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-app-theme="flight"] .notice {
  border-color: var(--flight-line-cyan) !important;
  color: var(--flight-copy) !important;
}

html[data-app-theme="flight"] .choice input {
  accent-color: var(--flight-cyan) !important;
}

html[data-app-theme="flight"] #guardianForm > button {
  min-height: 46px !important;
  border: 1px solid var(--flight-cyan) !important;
  border-radius: 6px !important;
  background: var(--flight-cyan) !important;
  background-image: none !important;
  color: #061116 !important;
  font-family: var(--flight-font) !important;
  font-weight: 800 !important;
}

html[data-app-theme="flight"] :where(.lede, .foot, .choice small) {
  color: var(--flight-muted) !important;
}

html[data-app-theme="flight"] :where(a:not(.sidebar-item):not(.sidebar-update-card):not(.button):not(.btn):not(.app-button)) {
  text-decoration-color: rgba(87, 220, 233, 0.44);
}

@media (max-width: 900px) {
  html[data-app-theme="flight"] .intro-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--flight-line) !important;
  }
}

@media (max-width: 768px) {
  html[data-app-theme="flight"] .page,
  html[data-app-theme="flight"] .login-layout,
  html[data-app-theme="flight"] .auth-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-app-theme="flight"] .auth-panel {
    background: var(--flight-bg) !important;
  }

  html[data-app-theme="flight"] .rail-intro h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 640px) {
  html[data-app-theme="flight"] :where(.app-page-title, .page-title, .plans-heading .page-title) {
    font-size: 26px !important;
  }

  html[data-app-theme="flight"] :where(.app-button, .btn, .button, .filter-chip, .marketplace-filter, .auth-tabs button, .promo-toggle) {
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-app-theme="flight"] *,
  html[data-app-theme="flight"] *::before,
  html[data-app-theme="flight"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  html[data-app-theme="flight"] :where(.sidebar-item.active, .status-band, .banner, .app-section, .panel) {
    border: 1px solid CanvasText !important;
  }
}