/* For The People Protect — Design System v2.0 (HIBP Dark Theme) */
/* Implementation of FORAA-640 board-approved dark theme direction */
/* Visual reference: Have I Been Pwned (haveibeenpwned.com) */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors — HIBP Dark Theme (FORAA-640) */
  /* Guardian Blue lightened for dark backgrounds */
  --color-guardian-blue: #4A7AE8;
  --color-guardian-blue-light: #6B95FF;
  --color-action-orange: #F97316;
  --color-gold-accent: #C5A572;
  --color-verified-green: #10B981;
  --color-warning-amber: #F59E0B;

  /* Dark Theme Base Colors */
  /* Dark slate/charcoal range for comfortable late-night reading */
  --color-dark-base: #1e2330;
  --color-dark-elevated: #2a2f3b;
  --color-dark-surface: #343948;
  --color-dark-border: #404654;

  /* Hero Background — Near-black with depth (Board correction #1) */
  --color-hero-base: #0d1117;
  --color-hero-glow: #1a3a5c;

  /* Neutrals */
  /* High-contrast off-white for text on dark backgrounds */
  --color-text-white: #e8eaf0;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Semantic Colors */
  --color-primary: var(--color-guardian-blue);
  --color-primary-hover: #6B95FF;
  --color-primary-active: #3A6AD5;
  --color-primary-light: rgba(74, 122, 232, 0.15);

  --color-secondary: var(--color-dark-surface);
  --color-secondary-hover: #3d4251;
  --color-secondary-active: #2d3240;

  --color-success: var(--color-verified-green);
  --color-success-light: rgba(16, 185, 129, 0.15);
  --color-success-dark: #059669;

  --color-warning: var(--color-warning-amber);
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --color-warning-dark: #D97706;

  --color-danger: #EF4444;
  --color-danger-light: rgba(239, 68, 68, 0.15);
  --color-danger-dark: #DC2626;

  --color-info: var(--color-guardian-blue);
  --color-info-light: var(--color-primary-light);

  /* Text Colors — Dark Theme */
  --color-text-primary: var(--color-text-white);
  --color-text-secondary: #b4b8c5;
  --color-text-tertiary: #8a8f9e;
  --color-text-inverse: var(--color-dark-base);
  --color-text-link: var(--color-guardian-blue);
  --color-text-link-hover: var(--color-primary-hover);

  /* Background Colors — Dark Theme */
  --color-bg-primary: var(--color-dark-base);
  --color-bg-secondary: var(--color-dark-elevated);
  --color-bg-tertiary: var(--color-dark-surface);
  --color-bg-overlay: rgba(0, 0, 0, 0.75);

  /* Accent Overlays — Dark Theme Compatible */
  --color-gold-overlay-10: rgba(197, 165, 114, 0.1);
  --color-gold-overlay-08: rgba(197, 165, 114, 0.08);
  --color-gold-overlay-20: rgba(197, 165, 114, 0.2);
  --color-gold-overlay-30: rgba(197, 165, 114, 0.3);
  --color-gold-overlay-40: rgba(197, 165, 114, 0.4);
  --color-blue-overlay-08: rgba(74, 122, 232, 0.08);
  --color-blue-overlay-10: rgba(74, 122, 232, 0.1);
  --color-blue-overlay-12: rgba(74, 122, 232, 0.12);
  --color-blue-overlay-15: rgba(74, 122, 232, 0.15);
  --color-blue-overlay-20: rgba(74, 122, 232, 0.2);
  --color-blue-overlay-25: rgba(74, 122, 232, 0.25);
  --color-blue-light-overlay-15: rgba(107, 149, 255, 0.15);
  --color-blue-light-overlay-18: rgba(107, 149, 255, 0.18);
  --color-blue-light-overlay-20: rgba(107, 149, 255, 0.20);
  --color-blue-light-overlay-22: rgba(107, 149, 255, 0.22);
  --color-blue-light-overlay-35: rgba(107, 149, 255, 0.35);
  --color-green-overlay-05: rgba(16, 185, 129, 0.05);
  --color-green-overlay-10: rgba(16, 185, 129, 0.1);
  --color-green-overlay-12: rgba(16, 185, 129, 0.12);
  --color-green-overlay-15: rgba(16, 185, 129, 0.15);
  --color-green-overlay-20: rgba(16, 185, 129, 0.2);
  --color-green-overlay-35: rgba(16, 185, 129, 0.35);
  --color-orange-overlay-10: rgba(249, 115, 22, 0.1);
  --color-orange-overlay-15: rgba(245, 158, 11, 0.15);
  --color-orange-overlay-35: rgba(245, 158, 11, 0.35);
  --color-white-overlay-90: rgba(255, 255, 255, 0.9);
  --color-white-overlay-10: rgba(255, 255, 255, 0.1);
  --color-white-overlay-05: rgba(255, 255, 255, 0.05);
  --color-dark-overlay-50: rgba(30, 35, 48, 0.5);
  --color-black-overlay-60: rgba(0, 0, 0, 0.6);
  --color-danger-overlay-30: rgba(239, 68, 68, 0.3);
  --color-warning-overlay-25: rgba(245, 158, 11, 0.25);
  --color-success-overlay-05: rgba(16, 185, 129, 0.05);

  /* Border Colors — Dark Theme */
  --color-border-default: var(--color-dark-border);
  --color-border-light: var(--color-dark-surface);
  --color-border-dark: #4d5260;
  --color-border-focus: var(--color-guardian-blue);

  /* Font Families */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 6rem;        /* 96px — Hero/Display size (Board correction #2/#4) */
  --text-9xl: 8rem;        /* 128px — Ultra Display for stats */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: 0.025em;
  --tracking-normal: 0.05em;
  --tracking-wide: 0.1em;
  --tracking-wider: 0.3em;
  --tracking-widest: 0.5em;

  /* Spacing (4px/8px Grid) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-base: 0.5rem;   /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px */
  --radius-2xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* Shadows — Dark Theme Optimized */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-glow-blue: 0 0 20px rgba(74, 122, 232, 0.3);
  --shadow-glow-green: 0 0 20px rgba(16, 185, 129, 0.3);
  --shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.3);

  /* Z-Index */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  /* Full-page radial glow emanating from top-center */
  background: radial-gradient(ellipse at top center, var(--color-hero-glow) 0%, var(--color-hero-base) 50%, var(--color-hero-base) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

strong {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-active);
  transform: translateY(0);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-border-dark);
}

.btn-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-dark);
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--color-dark-base);
}

.btn-warning:hover:not(:disabled) {
  background-color: var(--color-warning-dark);
}

.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-danger-dark);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-white-overlay-05);
  color: var(--color-text-primary);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-xl);
}

.btn-full {
  width: 100%;
}

/* Cards */
.card {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-dark);
}

.card-elevated {
  background-color: var(--color-bg-tertiary);
  box-shadow: var(--shadow-md);
}

.card-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}

.card-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.card-description {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.card-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Forms */
.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.form-label-required::after {
  content: '*';
  color: var(--color-danger);
  margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-base);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-tertiary);
}

.form-input-error {
  border-color: var(--color-danger);
}

.form-input-error:focus {
  box-shadow: 0 0 0 3px var(--color-danger-light);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23b4b8c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: var(--space-10);
}

.form-help {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}

.form-error {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin-top: var(--space-2);
}

.form-checkbox,
.form-radio {
  width: var(--space-4);
  height: var(--space-4);
  cursor: pointer;
  accent-color: var(--color-primary);
}

.form-checkbox-label,
.form-radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* Input Groups */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  border-radius: 0;
}

.input-group .form-input:first-child {
  border-top-left-radius: var(--radius-base);
  border-bottom-left-radius: var(--radius-base);
}

.input-group .form-input:last-child {
  border-top-right-radius: var(--radius-base);
  border-bottom-right-radius: var(--radius-base);
}

.input-group .btn {
  border-radius: 0;
}

.input-group .btn:last-child {
  border-top-right-radius: var(--radius-base);
  border-bottom-right-radius: var(--radius-base);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-none);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.badge-neutral {
  background-color: var(--color-white-overlay-10);
  color: var(--color-text-secondary);
}

/* Alerts */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-base);
  border: 1px solid transparent;
}

.alert-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert-description {
  font-size: var(--text-sm);
  opacity: 0.9;
}

.alert-success {
  background-color: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert-warning {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

.alert-danger {
  background-color: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.alert-info {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* Hero Section — HIBP Style with Board Corrections */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-16) var(--space-4);
  text-align: center;
  /* Transparent — sits on top of full-page body gradient */
  background: transparent;
}

.hero-title {
  /* Board correction #2: Viewport-dominating headline */
  font-size: var(--text-7xl);
  font-weight: var(--font-extrabold);
  margin-bottom: var(--space-6);
  max-width: 1000px;
  line-height: var(--leading-tight);
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 600px;
}

/* Board correction #3: Unified pill input — single component */
.hero-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  box-shadow: var(--shadow-lg);
}

.hero-input {
  flex: 1;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-lg);
  border: none;
  background: transparent;
  color: var(--color-dark-base);
  border-radius: var(--radius-full);
}

.hero-input:focus {
  outline: none;
  box-shadow: none;
}

.hero-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

.hero-button {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Trust Stats — Below Hero */
.trust-stats {
  display: flex;
  gap: var(--space-12);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-12);
  padding: var(--space-8) 0;
}

.trust-stat {
  text-align: center;
}

.trust-stat-value {
  /* Board correction #4: Display-size numbers — the number is the thing */
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-3);
  line-height: var(--leading-none);
}

.trust-stat-label {
  /* Board correction #4: Small, muted, uppercase, tracked */
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--font-medium);
}

/* Navigation — Minimal HIBP Style with Board Corrections */
.navbar {
  /* Board correction #5: Elevated dark surface with separation */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-dark-elevated);
  border-bottom: 2px solid var(--color-border-dark);
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.navbar-nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  list-style: none;
}

.navbar-link {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.navbar-link:hover {
  color: var(--color-text-primary);
}

.navbar-link-active {
  color: var(--color-primary);
}

/* Board correction #5: Prominent CTA button for Sign In */
.navbar-cta {
  margin-left: var(--space-4);
}

/* Avatar Onboarding — Conversational Style */
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-8);
}

.avatar {
  width: 120px;
  height: 120px;
  margin-bottom: var(--space-6);
}

.avatar-message {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
}

.avatar-message::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--color-border-default);
}

.avatar-question {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.avatar-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* Protection Score */
.protection-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-default);
}

.protection-score-value {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-none);
  margin-bottom: var(--space-2);
}

.protection-score-label {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.protection-score-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
}

/* Status Indicators */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-success .status-dot {
  background-color: var(--color-success);
  box-shadow: var(--shadow-glow-green);
}

.status-warning .status-dot {
  background-color: var(--color-warning);
  box-shadow: var(--shadow-glow-orange);
}

.status-danger .status-dot {
  background-color: var(--color-danger);
}

.status-info .status-dot {
  background-color: var(--color-info);
  box-shadow: var(--shadow-glow-blue);
}

/* Loading States */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-base);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--text-4xl);
  }

  .hero-subtitle {
    font-size: var(--text-lg);
  }

  .hero-input-group {
    flex-direction: column;
    padding: var(--space-2);
  }

  .hero-button {
    width: 100%;
  }

  .trust-stats {
    gap: var(--space-8);
  }

  .trust-stat-value {
    font-size: var(--text-6xl);
  }

  .navbar {
    flex-wrap: wrap;
  }

  .navbar-nav {
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--text-3xl);
  }

  .trust-stat-value {
    font-size: var(--text-5xl);
  }

  .protection-score-value {
    font-size: var(--text-5xl);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bloom v2 — Nautilus Self-Similarity Presence Indicator
   Board-approved: commit 033c1787 / FORAA-672
   ══════════════════════════════════════════════════════════════════════════ */

/* Avatar Container — Responsive Sizing (Spec: 200/170/140) */
.avatar-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  flex-shrink: 0;
}

#ftpp-avatar {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .avatar-container {
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 480px) {
  .avatar-container {
    width: 140px;
    height: 140px;
  }
}

/* ── Bloom v2 Base Variables ── */

.bloom-v2 {
  --bloom-petal: var(--color-guardian-blue);
  --bloom-core: var(--color-gold-accent);
  --bloom-gem: var(--color-gold-accent);
  --bloom-glow: var(--color-guardian-blue);
}

.bloom-v2 .petal-shape {
  fill: var(--bloom-petal);
  fill-opacity: 0.18;
  stroke: var(--bloom-petal);
  stroke-width: 2;
  stroke-opacity: 0.45;
  stroke-linejoin: round;
}

.bloom-v2 .inner-facet {
  fill: var(--bloom-petal);
  fill-opacity: 0.05;
  stroke: var(--bloom-petal);
  stroke-width: 1.5;
  stroke-opacity: 0.22;
  stroke-linejoin: round;
}

.bloom-v2 .micro-gem {
  fill: var(--bloom-petal);
  fill-opacity: 0.35;
}

.bloom-v2 .bloom-core {
  fill: var(--bloom-core);
  fill-opacity: 0.1;
  stroke: var(--bloom-core);
  stroke-width: 2.5;
  stroke-opacity: 0.6;
  stroke-linejoin: round;
}

.bloom-v2 .center-gem {
  fill: var(--bloom-gem);
  fill-opacity: 0.8;
}

.bloom-v2 .glow-ring {
  fill: none;
  stroke: var(--bloom-glow);
  stroke-width: 1.5;
  opacity: 0.1;
}

.bloom-v2 .petal-layer {
  transform-origin: 100px 100px;
}

.bloom-v2 .bloom-core,
.bloom-v2 .center-gem {
  transform-origin: 100px 100px;
}

/* ── Bloom v2 Keyframes ── */

@keyframes bloom-idle-petals {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes bloom-idle-core {
  0%, 100% { stroke-opacity: 0.55; fill-opacity: 0.1; }
  50%      { stroke-opacity: 0.7;  fill-opacity: 0.16; }
}

@keyframes bloom-idle-glow {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.18; }
}

@keyframes bloom-speak-petals {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes bloom-speak-core {
  0%, 100% { stroke-opacity: 0.6;  fill-opacity: 0.12; }
  50%      { stroke-opacity: 0.95; fill-opacity: 0.3; }
}

@keyframes bloom-speak-glow {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.35; }
}

@keyframes bloom-think-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bloom-think-core {
  0%, 100% { stroke-opacity: 0.4;  fill-opacity: 0.06; }
  50%      { stroke-opacity: 0.55; fill-opacity: 0.1; }
}

@keyframes bloom-think-glow-dash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -56; }
}

@keyframes bloom-burst-petals {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.15); }
  100% { transform: scale(1.05); }
}

@keyframes bloom-burst-core {
  0%   { stroke-opacity: 0.5;  fill-opacity: 0.1; }
  40%  { stroke-opacity: 1;    fill-opacity: 0.35; }
  100% { stroke-opacity: 0.75; fill-opacity: 0.2; }
}

@keyframes bloom-burst-glow {
  0%   { opacity: 0.12; }
  40%  { opacity: 0.5; }
  100% { opacity: 0.25; }
}

@keyframes bloom-contract-petals {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.94); }
}

@keyframes bloom-contract-core {
  0%, 100% { stroke-opacity: 0.5;  fill-opacity: 0.08; }
  50%      { stroke-opacity: 0.35; fill-opacity: 0.05; }
}

@keyframes bloom-contract-glow {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.04; }
}

@keyframes bloom-micro-gem-flash {
  0%, 35%, 100% { fill: var(--color-gold-accent); fill-opacity: 0.8; }
  15%           { fill: var(--color-verified-green); fill-opacity: 1; }
}

@keyframes bloom-micro-core-flash {
  0%, 35%, 100% {
    fill: var(--color-gold-accent); fill-opacity: 0.1;
    stroke: var(--color-gold-accent); stroke-opacity: 0.6;
  }
  15% {
    fill: var(--color-verified-green); fill-opacity: 0.25;
    stroke: var(--color-verified-green); stroke-opacity: 0.85;
  }
}

@keyframes bloom-micro-facet-flash {
  0%, 35%, 100% {
    fill: var(--color-guardian-blue); fill-opacity: 0.05;
    stroke: var(--color-guardian-blue); stroke-opacity: 0.22;
    stroke-width: 1.5;
  }
  15% {
    fill: var(--color-verified-green); fill-opacity: 0.15;
    stroke: var(--color-verified-green); stroke-opacity: 0.55;
    stroke-width: 2.5;
  }
}

@keyframes bloom-micro-microgem-flash {
  0%, 35%, 100% { fill: var(--color-guardian-blue); fill-opacity: 0.35; }
  15%           { fill: var(--color-verified-green); fill-opacity: 0.7; }
}

/* ── State: IDLE — gentle breathing ── */
.bloom-v2-idle .petal-layer { animation: bloom-idle-petals 4s ease-in-out infinite; }
.bloom-v2-idle .bloom-core  { animation: bloom-idle-core 4s ease-in-out infinite; }
.bloom-v2-idle .glow-ring   { animation: bloom-idle-glow 4s ease-in-out infinite; }

/* ── State: SPEAKING — projecting outward, brighter, core shifts blue ── */
.bloom-v2-speaking {
  --bloom-petal: var(--color-primary-hover);
  --bloom-core: var(--color-guardian-blue);
  --bloom-gem: var(--color-guardian-blue);
}
.bloom-v2-speaking .petal-shape { fill-opacity: 0.28; stroke-opacity: 0.55; }
.bloom-v2-speaking .inner-facet { fill-opacity: 0.1;  stroke-opacity: 0.35; }
.bloom-v2-speaking .micro-gem   { fill-opacity: 0.5; }
.bloom-v2-speaking .petal-layer { animation: bloom-speak-petals 0.8s ease-in-out infinite; }
.bloom-v2-speaking .bloom-core  { animation: bloom-speak-core 0.8s ease-in-out infinite; }
.bloom-v2-speaking .glow-ring   { animation: bloom-speak-glow 0.8s ease-in-out infinite; }

/* ── State: THINKING — slow rotation, contemplative ── */
.bloom-v2-thinking .petal-shape { fill-opacity: 0.14; stroke-opacity: 0.3; }
.bloom-v2-thinking .inner-facet { stroke-dasharray: 3 3; stroke-opacity: 0.15; }
.bloom-v2-thinking .petal-layer { animation: bloom-think-rotate 12s linear infinite; }
.bloom-v2-thinking .bloom-core  { animation: bloom-think-core 2s ease-in-out infinite; }
.bloom-v2-thinking .glow-ring   {
  stroke-dasharray: 8 6;
  animation: bloom-think-glow-dash 3s linear infinite;
}

/* ── State: MICRO-POSITIVE — brief green acknowledgment, inner only ── */
.bloom-v2-micro-positive .petal-layer { animation: bloom-idle-petals 4s ease-in-out infinite; }
.bloom-v2-micro-positive .center-gem  { animation: bloom-micro-gem-flash 2s ease-out infinite; }
.bloom-v2-micro-positive .bloom-core  { animation: bloom-micro-core-flash 2s ease-out infinite; }
.bloom-v2-micro-positive .inner-facet { animation: bloom-micro-facet-flash 2s ease-out infinite; }
.bloom-v2-micro-positive .micro-gem   { animation: bloom-micro-microgem-flash 2s ease-out infinite; }
.bloom-v2-micro-positive .glow-ring   { animation: bloom-idle-glow 4s ease-in-out infinite; }

/* ── State: FULL POSITIVE — green burst, expansion ── */
.bloom-v2-positive {
  --bloom-petal: var(--color-verified-green);
  --bloom-core: var(--color-verified-green);
  --bloom-gem: var(--color-verified-green);
  --bloom-glow: var(--color-verified-green);
}
.bloom-v2-positive .petal-shape { fill-opacity: 0.32; stroke-opacity: 0.65; }
.bloom-v2-positive .inner-facet { fill-opacity: 0.12; stroke-opacity: 0.4; }
.bloom-v2-positive .micro-gem   { fill-opacity: 0.6; }
.bloom-v2-positive .center-gem  { fill-opacity: 0.95; }
.bloom-v2-positive .petal-layer { animation: bloom-burst-petals 0.8s ease-out forwards; }
.bloom-v2-positive .bloom-core  { animation: bloom-burst-core 0.8s ease-out forwards; }
.bloom-v2-positive .glow-ring   { animation: bloom-burst-glow 0.8s ease-out forwards; }

/* ── State: CONCERNED — amber contraction ── */
.bloom-v2-concerned {
  --bloom-petal: var(--color-warning-amber);
  --bloom-core: var(--color-warning-amber);
  --bloom-gem: var(--color-warning-amber);
  --bloom-glow: var(--color-warning-amber);
}
.bloom-v2-concerned .petal-shape { fill-opacity: 0.2;  stroke-opacity: 0.35; }
.bloom-v2-concerned .inner-facet { fill-opacity: 0.08; stroke-opacity: 0.2; }
.bloom-v2-concerned .petal-layer { animation: bloom-contract-petals 1.2s ease-in-out infinite; }
.bloom-v2-concerned .bloom-core  { animation: bloom-contract-core 1.2s ease-in-out infinite; }
.bloom-v2-concerned .glow-ring   { animation: bloom-contract-glow 1.2s ease-in-out infinite; }

/* ── Bloom Milestone Progression — Petal visibility ── */

.bloom-v2 .petal-group { opacity: 0; transition: opacity 0.6s ease-out; }
.bloom-v2.milestone-1 .petal-group { opacity: 0; }
.bloom-v2.milestone-2 .petal-group[data-petal="0"],
.bloom-v2.milestone-2 .petal-group[data-petal="3"] { opacity: 1; }
.bloom-v2.milestone-3 .petal-group[data-petal="0"],
.bloom-v2.milestone-3 .petal-group[data-petal="1"],
.bloom-v2.milestone-3 .petal-group[data-petal="3"],
.bloom-v2.milestone-3 .petal-group[data-petal="4"] { opacity: 1; }
.bloom-v2.milestone-4 .petal-group { opacity: 1; }

/* ── Conversation Thread Scrollbar Fix ── */
.conversation-thread {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.conversation-thread::-webkit-scrollbar {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Utility Classes — Layout, Spacing, Typography, Color
   ══════════════════════════════════════════════════════════════════════════ */

/* Section Spacing */
.section { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.section-sm { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.section-lg { padding-top: var(--space-16); padding-bottom: var(--space-24); }

/* Margin Utilities */
.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

/* Padding Utilities */
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Text Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-link { color: var(--color-text-link); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-guardian-blue { color: var(--color-guardian-blue); }
.text-gold { color: var(--color-gold-accent); }
.text-white { color: var(--color-white); }

/* Font Size Utilities */
.text-size-xs { font-size: var(--text-xs); }
.text-size-sm { font-size: var(--text-sm); }
.text-size-base { font-size: var(--text-base); }
.text-size-lg { font-size: var(--text-lg); }
.text-size-xl { font-size: var(--text-xl); }
.text-size-2xl { font-size: var(--text-2xl); }
.text-size-3xl { font-size: var(--text-3xl); }
.text-size-4xl { font-size: var(--text-4xl); }
.text-size-5xl { font-size: var(--text-5xl); }
.text-size-6xl { font-size: var(--text-6xl); }
.text-size-7xl { font-size: var(--text-7xl); }
.text-size-8xl { font-size: var(--text-8xl); }

/* Font Weight Utilities */
.font-weight-normal { font-weight: var(--font-normal); }
.font-weight-medium { font-weight: var(--font-medium); }
.font-weight-semibold { font-weight: var(--font-semibold); }
.font-weight-bold { font-weight: var(--font-bold); }
.font-weight-extrabold { font-weight: var(--font-extrabold); }

/* Letter Spacing Utilities */
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* Flex Utilities */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Icon Sizing */
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-40 { width: 40px; height: 40px; }
.icon-48 { width: 48px; height: 48px; }

/* Decorative */
.text-uppercase { text-transform: uppercase; }
.text-no-decoration { text-decoration: none; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.rounded-full { border-radius: var(--radius-full); }
.border-default { border: 1px solid var(--color-border-default); }
.border-light { border: 1px solid var(--color-border-light); }

/* Page Section — Consistent container for mockup pages */
.page-section {
  padding: var(--space-8) var(--space-4);
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* Account Navigation — Shared across all account pages */
.account-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-base);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.account-nav-item:hover {
  background-color: var(--color-white-overlay-05);
  color: var(--color-text-primary);
}

.account-nav-item-active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Section Header — Title + description pattern */
.section-header {
  margin-bottom: var(--space-6);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.section-description {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Stat Display — Large number + label pattern */
.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-none);
  margin-bottom: var(--space-1);
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Detail Row — Label + value pair */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.detail-label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.detail-value {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 22px;
  background-color: var(--color-dark-surface);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.toggle-switch-active {
  background-color: var(--color-primary);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast);
}

.toggle-switch-active::after {
  transform: translateX(22px);
}

/* Delete/Danger Confirmation */
.danger-zone {
  border: 1px solid var(--color-danger-overlay-30);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* Inline SVG icon vertical alignment */
.icon-inline {
  vertical-align: middle;
  flex-shrink: 0;
}