@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');/* ============================================
   BADGE COMPONENT - Premium Badge Styles
   Uses Julia Design System tokens
   ============================================ */

.universal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: all var(--duration-fast) var(--ease-default);
  border: 1px solid transparent;
}

/* Size Variants */
.universal-badge.badge-sm {
  font-size: var(--text-tiny);
  padding: 1px 6px;
}

/* ========== COLOR VARIANTS ========== */

/* Default (Gray/Neutral) */
.universal-badge.badge-default {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  border-color: var(--border-default);
}

/* Primary (Violet) */
.universal-badge.badge-primary {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-400);
  border-color: rgba(168, 85, 247, 0.3);
}

/* Secondary (Gray with emphasis) */
.universal-badge.badge-secondary {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

/* Beta (Blue) - For beta features */
.universal-badge.badge-beta {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* Pro (Green) - For pro tier */
.universal-badge.badge-pro {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

/* Enterprise (Gold) - For enterprise tier */
.universal-badge.badge-enterprise {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

/* Starter (Gray) - For starter tier */
.universal-badge.badge-starter {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  border-color: var(--border-default);
}

/* Success (Green) */
.universal-badge.badge-success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

/* Warning (Amber) */
.universal-badge.badge-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

/* Error/Danger (Red) */
.universal-badge.badge-error {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

/* Info (Blue) */
.universal-badge.badge-info {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* New (Purple gradient feel) - For new features */
.universal-badge.badge-new {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-400);
  border-color: rgba(168, 85, 247, 0.3);
}

/* ========== ACTIVE NAV ITEM STATES ========== */
/* When badge is inside an active nav item, adjust colors for contrast */

.nav-item.active .universal-badge.badge-beta,
.nav-item.active .universal-badge.badge-info {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-item.active .universal-badge.badge-pro,
.nav-item.active .universal-badge.badge-success {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-item.active .universal-badge.badge-enterprise,
.nav-item.active .universal-badge.badge-warning {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-item.active .universal-badge.badge-starter,
.nav-item.active .universal-badge.badge-default {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-item.active .universal-badge.badge-primary,
.nav-item.active .universal-badge.badge-new {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-item.active .universal-badge.badge-error {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
/* ============================================
   LAYOUT COMPONENT - Premium Dashboard Shell
   ============================================ */

/* App Layout Container - Natural page scroll */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-base);
  /* CRITICAL: Layout flows naturally, no hidden overflow */
}

/* ========== SIDEBAR ========== */

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-fixed);
  overflow: hidden;
}

/* Sidebar Header */
.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default);
}

.logo-link:hover {
  background: var(--bg-muted);
}

.logo-icon {
  font-size: 24px;
  line-height: 1;
}

.logo-text {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

/* Sidebar Navigation */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-section-title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

/* Nav Items */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25);
}

.nav-item.active:hover {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
}

.nav-item.active .badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.nav-icon {
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.nav-label {
  flex: 1;
}

/* Sidebar Footer */
.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Credits Card */
.credits-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.credits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

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

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

.credits-value.unlimited {
  color: var(--warning-text);
}

.credits-progress {
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.credits-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}

/* User Card */
.user-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
}

.user-card:hover {
  background: var(--bg-muted);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-plan {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Logout Button */
.logout-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}

.logout-btn:hover {
  background: var(--error-bg);
  color: var(--error-text);
}

/* ========== MAIN CONTENT ========== */

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  /* CRITICAL: Remove overflow hidden - let page scroll naturally */
}

.page-container {
  flex: 1;
  padding: var(--space-6);
  /* CRITICAL: Remove overflow-y auto - use natural page scroll */
  width: 100%;
  /* Full width responsive layout */
  max-width: 100%;
  box-sizing: border-box;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
  .page-container {
    padding: var(--space-5);
  }
}

@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }

  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-2);
    gap: var(--space-1);
    -webkit-overflow-scrolling: touch;
  }

  .nav-section {
    flex-direction: row;
    gap: var(--space-1);
    flex-shrink: 0;
  }

  .nav-section-title {
    display: none;
  }

  .nav-item {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-label {
    display: none;
  }

  .nav-icon {
    margin: 0;
  }

  .sidebar-footer {
    display: none;
  }

  .main-content {
    margin-left: 0;
    min-height: calc(100vh - 120px);
  }

  .page-container {
    padding: var(--space-4);
  }
}

@media (max-width: 480px) {
  .nav-item {
    padding: var(--space-2);
  }

  .page-container {
    padding: var(--space-3);
  }
}
/* ============================================
   LOGIN PAGE - Premium Auth Experience
   ============================================ */

.login-page {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background: var(--bg-base);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: auto;
}

/* Subtle background pattern */
.login-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.login-container {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
  margin: var(--space-6);
  overflow: hidden;
}

.login-header {
  background: linear-gradient(135deg, var(--accent-4) 0%, var(--accent-3) 100%);
  color: white;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.login-header h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

.login-header p {
  margin: 0;
  opacity: 0.9;
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  color: rgba(255, 255, 255, 0.9);
}

.login-form-container {
  padding: var(--space-6);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login-form .form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.login-form .form-group input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.login-form .form-group input::placeholder {
  color: var(--text-muted);
}

.login-form .form-group input:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.login-form .form-group input:focus {
  outline: none;
  border-color: var(--accent-6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.login-form .form-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-muted);
}

.submit-button {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-5);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.submit-button:hover:not(:disabled) {
  background: var(--accent-6);
  transform: translateY(-1px);
}

.submit-button:active:not(:disabled) {
  transform: translateY(0);
}

.submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.login-footer {
  text-align: center;
  margin-top: var(--space-2);
}

.login-footer p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.link {
  color: var(--accent-6);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: color var(--duration-fast) var(--ease-default);
}

.link:hover {
  color: var(--accent-7);
  text-decoration: underline;
}

/* Override any body styles */
body:has(.login-page) {
  overflow: visible !important;
}

@media (max-width: 480px) {
  .login-container {
    margin: var(--space-4);
    border-radius: var(--radius-lg);
  }
  
  .login-header {
    padding: var(--space-6) var(--space-5);
  }
  
  .login-header h1 {
    font-size: var(--text-3xl);
  }
  
  .login-form-container {
    padding: var(--space-5);
  }
}
/* ============================================
   SIGNUP PAGE - Premium Registration Experience
   ============================================ */

.signup-page {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background: var(--bg-base);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: auto;
}

/* Subtle background pattern */
.signup-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.signup-container {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
  margin: var(--space-6);
  overflow: hidden;
}

.signup-header {
  background: linear-gradient(135deg, var(--accent-4) 0%, var(--accent-3) 100%);
  color: white;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.signup-header h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

.signup-header p {
  margin: 0;
  opacity: 0.9;
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  color: rgba(255, 255, 255, 0.9);
}

.signup-form-container {
  padding: var(--space-6);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.signup-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.signup-form .form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.signup-form .form-group input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.signup-form .form-group input::placeholder {
  color: var(--text-muted);
}

.signup-form .form-group input:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.signup-form .form-group input:focus {
  outline: none;
  border-color: var(--accent-6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.signup-form .form-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-muted);
}

.signup-submit-button {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-5);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.signup-submit-button:hover:not(:disabled) {
  background: var(--accent-6);
  transform: translateY(-1px);
}

.signup-submit-button:active:not(:disabled) {
  transform: translateY(0);
}

.signup-submit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.signup-footer {
  text-align: center;
  margin-top: var(--space-2);
}

.signup-footer p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Override any body styles */
body:has(.signup-page) {
  overflow: visible !important;
}

@media (max-width: 480px) {
  .signup-container {
    margin: var(--space-4);
    border-radius: var(--radius-lg);
  }
  
  .signup-header {
    padding: var(--space-6) var(--space-5);
  }
  
  .signup-header h1 {
    font-size: var(--text-3xl);
  }
  
  .signup-form-container {
    padding: var(--space-5);
  }
}
/* ============================================================
   JULIA LANDING PAGE — Premium Dark Theme
   Inspired by Linear, Vercel, Anthropic, Stripe
   Namespace: lp-*
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
.lp {
  min-height: 100vh;
  background: #09090b;
  color: #fafafa;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp *,
.lp *::before,
.lp *::after {
  box-sizing: border-box;
}

/* ── Shared layout helpers ────────────────────────────────── */
.lp-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.lp-section {
  padding: 128px 0;
}

.lp-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a855f7;
  margin-bottom: 20px;
}

.lp-section-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fafafa;
  margin: 0 0 20px;
}

.lp-section-sub {
  font-size: 17px;
  line-height: 1.7;
  color: #71717a;
  max-width: 560px;
  margin: 0 0 72px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #a855f7;
  color: #ffffff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lp-btn-primary:hover {
  background: #9333ea;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22);
  transform: translateY(-1px);
}

.lp-btn-primary.lp-btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 10px;
}

.lp-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #a1a1aa;
  border: 1px solid #27272a;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.lp-btn-ghost:hover {
  border-color: #52525b;
  color: #fafafa;
  background: rgba(255, 255, 255, 0.04);
}

.lp-btn-ghost.lp-btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 10px;
}

.lp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #a1a1aa;
  border: 1px solid #27272a;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.lp-btn-outline:hover {
  border-color: #52525b;
  color: #fafafa;
}

/* ── Navigation ───────────────────────────────────────────── */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.lp-brand-mark {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.lp-brand-name {
  font-size: 17px;
  font-weight: 700;
  color: #fafafa;
  letter-spacing: -0.01em;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.lp-nav-link {
  color: #71717a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 450;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.lp-nav-link:hover {
  color: #fafafa;
  background: rgba(255, 255, 255, 0.05);
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Hero Section ─────────────────────────────────────────── */
.lp-hero {
  position: relative;
  padding: 100px 32px 80px;
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 64px;
  overflow: hidden;
}

.lp-hero-bg-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.lp-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 800px;
}

.lp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a855f7;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  padding: 5px 14px;
  border-radius: 999px;
}

.lp-hero-title {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fafafa;
  margin: 0;
}

.lp-hero-accent {
  background: linear-gradient(135deg, #c084fc 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-hero-sub {
  font-size: 19px;
  line-height: 1.68;
  color: #71717a;
  max-width: 600px;
  margin: 0;
}

.lp-hero-ctas {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.lp-hero-note {
  font-size: 12px;
  color: #52525b;
  margin: 0;
  letter-spacing: 0.02em;
}

/* Hero visual */
.lp-hero-visual {
  position: relative;
  width: 100%;
  max-width: 720px;
  z-index: 1;
}

.lp-hero-glow-ring {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.lp-hero-graphic-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.1),
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 4px 20px rgba(168, 85, 247, 0.08);
  z-index: 1;
}

.lp-hero-svg {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.lp-hero-screenshot {
  width: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

.lp-hero-screenshot-fallback {
  width: 100%;
}

.lp-demo-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lp-demo-btn:hover {
  background: rgba(30, 30, 35, 0.9);
  border-color: rgba(168, 85, 247, 0.4);
}

.lp-demo-play {
  width: 26px;
  height: 26px;
  background: #a855f7;
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding-left: 2px;
}

/* ── Stats Band ───────────────────────────────────────────── */
.lp-stats-band {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  padding: 48px 32px;
}

.lp-stats-inner {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

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

.lp-stat-val {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fafafa;
  line-height: 1;
  margin-bottom: 8px;
}

.lp-stat-label {
  font-size: 13px;
  color: #52525b;
  font-weight: 500;
}

/* ── Value Props ──────────────────────────────────────────── */
.lp-value-section {
  background: #09090b;
}

.lp-value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
}

.lp-value-card {
  background: #0e0e11;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s ease;
}

.lp-value-card:hover {
  background: #111116;
}

.lp-value-icon {
  width: 44px;
  height: 44px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
}

.lp-value-title {
  font-size: 17px;
  font-weight: 700;
  color: #fafafa;
  margin: 0;
  letter-spacing: -0.01em;
}

.lp-value-body {
  font-size: 14px;
  line-height: 1.7;
  color: #71717a;
  margin: 0;
}

/* ── Feature Grid ─────────────────────────────────────────── */
.lp-feat-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lp-feat-card {
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  cursor: default;
}

.lp-feat-card:hover {
  border-color: rgba(168, 85, 247, 0.3);
  background: #111116;
  transform: translateY(-2px);
}

.lp-feat-icon {
  width: 40px;
  height: 40px;
  background: rgba(168, 85, 247, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
  flex-shrink: 0;
}

.lp-feat-title {
  font-size: 14px;
  font-weight: 600;
  color: #e4e4e7;
  letter-spacing: -0.01em;
}

/* ── How It Works ─────────────────────────────────────────── */
.lp-how-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 0;
  position: relative;
}

/* connector line between steps */
.lp-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.67% + 28px);
  right: calc(16.67% + 28px);
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.4), rgba(99, 102, 241, 0.4));
}

.lp-step {
  position: relative;
  padding: 0 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  overflow: visible;
}

.lp-step:last-child {
  padding-right: 0;
}

.lp-step-num {
  width: 56px;
  height: 56px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #a855f7;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.lp-step-title {
  font-size: 18px;
  font-weight: 700;
  color: #fafafa;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
  height: auto;
  overflow: visible;
}

.lp-step-body {
  font-size: 14px;
  line-height: 1.7;
  color: #71717a;
  margin: 0;
  height: auto;
  overflow: visible;
  white-space: normal;
}

/* ── Use Cases ────────────────────────────────────────────── */
.lp-use-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-use-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.lp-use-card {
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lp-use-card:hover {
  border-color: rgba(168, 85, 247, 0.25);
  background: #111116;
}

.lp-use-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a855f7;
}

.lp-use-title {
  font-size: 18px;
  font-weight: 700;
  color: #fafafa;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lp-use-body {
  font-size: 14px;
  line-height: 1.7;
  color: #71717a;
  margin: 0;
}

/* ── Product Screenshots ──────────────────────────────────── */
.lp-screens-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-screens-frame {
  position: relative;
}

.lp-browser-chrome {
  background: #111116;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(168, 85, 247, 0.08);
}

.lp-browser-bar {
  background: #0e0e12;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-traffic {
  display: flex;
  gap: 6px;
  align-items: center;
}

.lp-t-red,
.lp-t-yellow,
.lp-t-green {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.lp-t-red    { background: #ef4444; opacity: 0.8; }
.lp-t-yellow { background: #f59e0b; opacity: 0.8; }
.lp-t-green  { background: #22c55e; opacity: 0.8; }

.lp-browser-url {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: #52525b;
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
}

.lp-browser-body {
  position: relative;
  overflow: hidden;
}

.lp-screen-btn {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.lp-screen-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 360px;
  background: #111116;
}

.lp-screen-fallback {
  display: none;
  width: 100%;
}

.lp-screen-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease;
}

.lp-screen-btn:hover .lp-screen-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.lp-play-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fafafa;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.lp-screens-glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Trust / Credibility ──────────────────────────────────── */
.lp-trust-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.lp-trust-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fafafa;
  margin: 0 0 16px;
}

.lp-trust-body {
  font-size: 16px;
  line-height: 1.7;
  color: #71717a;
  margin: 0 0 32px;
}

.lp-trust-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-trust-logos-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #52525b;
  margin-bottom: 20px;
}

.lp-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}

.lp-logo-placeholder {
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 18px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #3f3f46;
  text-align: center;
  letter-spacing: 0.01em;
}

.lp-testimonial {
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 28px;
}

.lp-testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: #a1a1aa;
  margin: 0 0 20px;
  font-style: italic;
}

.lp-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-author-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.lp-author-name {
  font-size: 13px;
  font-weight: 600;
  color: #fafafa;
}

.lp-author-role {
  font-size: 12px;
  color: #52525b;
}

/* ── Pricing ──────────────────────────────────────────────── */
.lp-pricing-section {
  background: #09090b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.lp-plan {
  position: relative;
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.2s ease;
}

.lp-plan:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.lp-plan--popular {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15), 0 8px 32px rgba(168, 85, 247, 0.08);
}

.lp-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.lp-plan-header {
  margin-bottom: 28px;
}

.lp-plan-name {
  font-size: 16px;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 12px;
}

.lp-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}

.lp-plan-price {
  font-size: 40px;
  font-weight: 800;
  color: #fafafa;
  letter-spacing: -0.03em;
}

.lp-plan-period {
  font-size: 14px;
  color: #52525b;
}

.lp-plan-credits {
  font-size: 13px;
  color: #71717a;
}

.lp-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #a1a1aa;
  line-height: 1.5;
}

.lp-feat-check {
  width: 18px;
  height: 18px;
  background: rgba(168, 85, 247, 0.12);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
  flex-shrink: 0;
  margin-top: 1px;
}

.lp-plan-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.lp-pricing-note {
  text-align: center;
  font-size: 13px;
  color: #52525b;
  line-height: 1.7;
}

.lp-pricing-note a {
  color: #a855f7;
  text-decoration: none;
}

.lp-pricing-note a:hover {
  text-decoration: underline;
}

/* ── Footer ───────────────────────────────────────────────── */
.lp-footer {
  background: #06060a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 64px 0 0;
}

.lp-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.lp-footer-top {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lp-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: #52525b;
  margin: 0;
}

.lp-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}

.lp-footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-footer-col-head {
  font-size: 12px;
  font-weight: 600;
  color: #fafafa;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.lp-footer-link {
  font-size: 13px;
  color: #52525b;
  text-decoration: none;
  transition: color 0.15s ease;
  line-height: 1.5;
}

.lp-footer-link:hover {
  color: #a1a1aa;
}

.lp-footer-link--btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-family: inherit;
}

.lp-footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #3f3f46;
}

/* ── Video Modal ──────────────────────────────────────────── */
.lp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lp-modal {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7);
}

.lp-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lp-modal-close:hover {
  background: rgba(0, 0, 0, 0.85);
}

.lp-modal-video {
  position: absolute;
  inset: 0;
}

.lp-video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-section-title {
    font-size: 40px;
  }

  .lp-hero-title {
    font-size: 56px;
  }

  .lp-value-grid {
    grid-template-columns: 1fr;
  }

  .lp-trust-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .lp-trust-title {
    font-size: 36px;
  }

  .lp-footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lp-footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }

  .lp-stats-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .lp-section {
    padding: 88px 0;
  }

  .lp-hero {
    padding: 72px 24px 64px;
  }

  .lp-hero-title {
    font-size: 42px;
  }

  .lp-section-title {
    font-size: 34px;
  }

  .lp-container {
    padding: 0 24px;
  }

  .lp-nav-links {
    display: none;
  }

  .lp-nav-actions .lp-btn-ghost {
    display: none;
  }

  .lp-feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lp-steps::before {
    display: none;
  }

  .lp-step {
    padding-right: 0;
  }

  .lp-use-grid {
    grid-template-columns: 1fr;
  }

  .lp-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .lp-btn-primary.lp-btn-lg,
  .lp-btn-ghost.lp-btn-lg {
    width: 100%;
    justify-content: center;
  }

  .lp-footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .lp-hero-title {
    font-size: 32px;
  }

  .lp-section-title {
    font-size: 28px;
  }

  .lp-feat-grid {
    grid-template-columns: 1fr;
  }

  .lp-value-grid {
    gap: 1px;
  }

  .lp-stats-inner {
    grid-template-columns: 1fr 1fr;
  }

  .lp-footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .lp-pricing-grid {
    max-width: 100%;
  }
}
/* ============================================
   ADDRESS INPUT - Premium Address Autocomplete
   ============================================ */

.address-input-container {
  width: 100%;
  overflow: visible; /* Ensure dropdown is not clipped */
}

.address-input-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; /* Ensure dropdown is not clipped */
}

.address-input-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.address-input-label .required {
  color: var(--error-500);
  font-weight: var(--font-bold);
}

.address-input-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.address-input {
  width: 100%;
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.address-input:focus {
  outline: none;
  border-color: var(--accent-6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.address-input.error {
  border-color: var(--error-solid);
}

.address-input.validating {
  border-color: var(--warning-solid);
}

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

.address-input::placeholder {
  color: var(--text-muted);
}

.address-input-spinner {
  position: absolute;
  right: var(--space-3);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.address-input-spinner .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-6);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

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

.address-input-check {
  position: absolute;
  right: var(--space-3);
  color: var(--success-text);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  pointer-events: none;
}

.address-input-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--error-text);
}

/* Suggestions Dropdown */
.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.address-suggestion {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.address-suggestion::before {
  content: '📍';
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.address-suggestion:last-child {
  border-bottom: none;
}

.address-suggestion:hover,
.address-suggestion.selected {
  background: var(--primary-900);
}

.address-suggestion.selected {
  border-left: 3px solid var(--primary-500);
  padding-left: calc(var(--space-4) - 3px);
}

.suggestion-content {
  flex: 1;
  min-width: 0;
}

.suggestion-main {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggestion-details {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Empty state for suggestions */
.address-no-results {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Preview Map */
.address-preview-map {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.preview-map-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.preview-map-container {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--bg-muted);
}

.preview-static-map-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.preview-map-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.preview-info-item {
  display: flex;
  gap: var(--space-2);
}

.preview-info-item strong {
  color: var(--text-primary);
  min-width: 90px;
}

/* Responsive */
@media (max-width: 768px) {
  .preview-map-container {
    height: 140px;
  }
  
  .preview-static-map-image {
    height: 140px;
  }
  
  .preview-info-item {
    flex-direction: column;
    gap: 2px;
  }
  
  .preview-info-item strong {
    min-width: auto;
  }
}
/* ============================================
   PROPERTY METADATA FORM
   Enterprise-grade property input form
   ============================================ */

.property-metadata-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Form Sections */
.form-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* NOTE: overflow must be visible for address dropdown to appear */
  overflow: visible;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.form-section:hover {
  border-color: var(--border-default);
}

.form-section.expanded {
  border-color: var(--primary-800);
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-primary);
  transition: background var(--duration-fast) var(--ease-default);
}

.section-toggle:hover {
  background: var(--bg-muted);
}

.toggle-icon {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  width: 16px;
}

.section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  flex: 1;
}

.section-status {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

.section-status.valid {
  background: var(--success-bg);
  color: var(--success-text);
}

.section-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-normal);
}

.section-content {
  padding: var(--space-4);
  padding-top: 0;
  border-top: 1px solid var(--border-subtle);
  animation: slideDown var(--duration-fast) var(--ease-default);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Layout */
.form-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field.small {
  flex: 0 0 120px;
}

.form-field.full-width {
  flex: 1 1 100%;
}

.form-field label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.form-field input,
.form-field select {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: all var(--duration-fast) var(--ease-default);
}

.form-field input::placeholder {
  color: var(--text-muted);
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.form-field input:disabled,
.form-field select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-field select {
  cursor: pointer;
}

/* Address Field Wrapper - uses AddressInput's own label */
.address-field-wrapper {
  /* Override form-field label styles for AddressInput */
}

.address-field-wrapper .address-input-label {
  /* AddressInput handles its own label styling */
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-sm);
}

/* Address Validation Badge */
.address-validation {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.validation-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success-text);
}

.validation-coords {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

/* Responsive */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .form-field.small {
    flex: 1;
  }
}
/* ============================================
   MEDIA INGESTION COMPONENT
   Enterprise-grade media upload
   ============================================ */

.media-ingestion {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Drop Zone */
.drop-zone {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  background: var(--bg-elevated);
}

.drop-zone:hover {
  border-color: var(--primary-600);
  background: var(--bg-muted);
}

.drop-zone.drag-active {
  border-color: var(--primary-500);
  background: rgba(168, 85, 247, 0.1);
  border-style: solid;
}

.drop-zone.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.drop-zone-icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
}

.drop-zone-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.drop-zone-subtitle {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.drop-zone-formats {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.drop-zone-formats span {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

/* Coverage Hint */
.coverage-hint {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid var(--primary-900);
  border-radius: var(--radius-md);
}

.hint-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.hint-content {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.hint-content strong {
  color: var(--text-primary);
}

/* Preview Section */
.preview-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.preview-stats {
  display: flex;
  gap: var(--space-4);
}

.preview-stats .stat {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.preview-stats .stat-value {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.clear-btn {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

.clear-btn:hover {
  color: var(--error-text);
  background: var(--error-bg);
}

/* Preview Grid */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-muted));
}

.video-icon {
  font-size: 2rem;
}

.video-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.preview-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-name {
  font-size: var(--text-xs);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-size {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.remove-btn {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.preview-item:hover .remove-btn {
  opacity: 1;
}

.remove-btn:hover {
  background: var(--error-500);
}

.preview-number {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  font-size: 10px;
  font-weight: var(--font-bold);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Upload Progress */
.upload-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progress-bar {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}

.progress-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .drop-zone {
    padding: var(--space-6);
  }
}
.image-with-detections {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  overflow: hidden;
  border-radius: 8px;
}

.image-with-detections .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

.image-with-detections .image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  z-index: 1;
}

.image-with-detections .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.image-with-detections .image-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 14px;
  z-index: 1;
}

.image-with-detections .image-error small {
  font-size: 11px;
  opacity: 0.7;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* ============================================
   DETECTION VIEWER COMPONENT
   Visual detection review interface
   ============================================ */

.detection-viewer {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-title h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.detection-count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--bg-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.view-controls {
  display: flex;
  gap: var(--space-1);
  background: var(--bg-muted);
  padding: 2px;
  border-radius: var(--radius-md);
}

.view-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.view-btn:hover {
  color: var(--text-secondary);
}

.view-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Grid View */
.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}

.image-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.image-card:hover {
  border-color: var(--primary-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.image-card.has-critical {
  border-color: var(--error-500);
}

.image-card.selected {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-200);
}

.image-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.detection-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Canvas-based image with bounding boxes */
.image-with-boxes {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  position: relative;
  overflow: hidden;
}

.image-with-boxes .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.image-with-boxes .image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--bg-muted);
  z-index: 1;
}

.image-with-boxes .image-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-default);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.image-with-boxes .image-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-muted);
}

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

.detection-image-canvas {
  width: 100%;
  height: 100%;
}

/* Full-size modal image container */
.full-image-container {
  flex: 1;
  min-height: 400px;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.full-image-canvas {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.full-image-canvas .detection-canvas {
  max-width: 100%;
  max-height: 60vh;
}

/* Expanded grid for more images */
.images-grid.expanded {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.detection-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: var(--radius-sm);
}

.detection-badge.has-detections {
  background: var(--warning-500);
  color: var(--warning-950);
}

.image-number {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: var(--radius-sm);
}

.detection-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.detection-tag {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.detection-tag.critical {
  background: var(--error-bg);
  color: var(--error-text);
}

.detection-tag.high {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.detection-tag.moderate {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary-400);
}

.more-tag {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 2px 8px;
}

.image-actions {
  display: flex;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.action-btn {
  flex: 1;
  padding: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  background: var(--bg-muted);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.action-btn:hover {
  background: var(--primary-900);
  color: var(--primary-400);
}

/* Component View */
.component-view {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.component-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.component-group.has-detections {
  border-color: var(--warning-900);
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

.group-header:hover {
  background: var(--bg-muted);
}

.group-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.group-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.group-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.group-count.active {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.expand-icon {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.group-detections {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.group-detection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.detection-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.severity-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
}

.severity-indicator.critical { background: var(--error-500); }
.severity-indicator.high { background: var(--warning-500); }
.severity-indicator.moderate { background: var(--primary-500); }
.severity-indicator.low { background: var(--success-500); }

.detection-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.detection-confidence {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.detection-image-ref {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Image Modal */
.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.image-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  max-width: 900px;
  max-height: 90vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-default);
}

.close-btn:hover {
  background: var(--error-bg);
  color: var(--error-text);
}

.modal-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  overflow: hidden;
}

.full-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg-base);
}

.modal-detections {
  padding: var(--space-4);
  border-left: 1px solid var(--border-subtle);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.modal-detections h4 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.no-detections {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.detection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.detection-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}

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

.severity-dot.critical { background: var(--error-500); }
.severity-dot.high { background: var(--warning-500); }
.severity-dot.moderate { background: var(--primary-500); }
.severity-dot.low { background: var(--success-500); }

.det-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  flex: 1;
}

.det-confidence {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.det-severity {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
}

.det-severity.critical { background: var(--error-bg); color: var(--error-text); }
.det-severity.high { background: var(--warning-bg); color: var(--warning-text); }

.full-width {
  width: 100%;
  margin-top: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .images-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .modal-content {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  
  .modal-detections {
    border-left: none;
    border-top: 1px solid var(--border-subtle);
    max-height: 200px;
  }
}
/* ============================================
   CONDITION INTELLIGENCE / SEVERITY TAB
   Premium enterprise-grade styling
   ============================================ */

.condition-intelligence.severity-tab {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.condition-intelligence .section-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.condition-intelligence .section-header h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  letter-spacing: -0.02em;
}

.section-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  font-weight: 400;
}

.intelligence-content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================
   PREMIUM SEVERITY SCORE CARD
   ============================================ */

.severity-score-card-premium {
  display: flex;
  gap: 40px;
  padding: 40px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 20px;
  border: 1px solid var(--border-subtle, #e2e8f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.severity-score-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
}

.score-visual-premium {
  position: relative;
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.score-ring-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.score-ring-premium {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.ring-bg-premium {
  stroke: #f1f5f9;
  opacity: 0.6;
}

.ring-value-premium {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 4px currentColor);
}

.ring-value-premium.excellent { 
  --ring-color: #10b981;
}

.ring-value-premium.good { 
  --ring-color: #22c55e;
}

.ring-value-premium.fair { 
  --ring-color: #f59e0b;
}

.ring-value-premium.poor { 
  --ring-color: #f97316;
}

.ring-value-premium.critical { 
  --ring-color: #ef4444;
}

.score-content-premium {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.score-value-premium {
  display: block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
  cursor: help;
}

.score-value-premium:hover {
  transform: scale(1.05);
}

.score-value-premium.excellent { color: #10b981; }
.score-value-premium.good { color: #22c55e; }
.score-value-premium.fair { color: #f59e0b; }
.score-value-premium.poor { color: #f97316; }
.score-value-premium.critical { color: #ef4444; }

.score-label-premium {
  font-size: 13px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-tooltip {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  pointer-events: none;
}

.score-tooltip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #1e293b;
}

.score-details-premium {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.category-badge-premium {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
}

.category-badge-premium.excellent {
  background: #d1fae5;
  color: #065f46;
}

.category-badge-premium.good {
  background: #dcfce7;
  color: #166534;
}

.category-badge-premium.fair {
  background: #fef3c7;
  color: #92400e;
}

.category-badge-premium.poor {
  background: #fed7aa;
  color: #9a3412;
}

.category-badge-premium.critical {
  background: #fee2e2;
  color: #991b1b;
}

.score-description-premium {
  font-size: 15px;
  color: var(--text-secondary, #64748b);
  margin: 0;
  line-height: 1.6;
  font-weight: 400;
}

.score-metrics-premium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg-elevated, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--border-subtle, #e2e8f0);
}

.metric-item.critical {
  border-color: #fecaca;
  background: #fef2f2;
}

.metric-label {
  font-size: 12px;
  color: var(--text-tertiary, #94a3b8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  letter-spacing: -0.02em;
}

.metric-item.critical .metric-value {
  color: #dc2626;
}

/* ============================================
   COMPONENT BREAKDOWN
   ============================================ */

.component-breakdown h3,
.top-issues-section h3,
.defect-summary h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--text-primary, #1e293b);
  letter-spacing: -0.01em;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.component-item {
  padding: 16px;
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.component-item:hover {
  border-color: var(--primary-300, #c7d2fe);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.component-item.has-issues {
  border-color: #fecaca;
  background: #fef2f2;
}

.component-item.healthy {
  border-color: #d1fae5;
  background: #f0fdf4;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.component-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  flex: 1;
}

.component-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.component-status.success {
  background: #d1fae5;
  color: #065f46;
}

.component-status.warning {
  background: #fee2e2;
  color: #991b1b;
}

.component-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.severity-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.severity-badge.critical { 
  background: #fee2e2; 
  color: #991b1b; 
}

.severity-badge.high { 
  background: #fed7aa; 
  color: #9a3412; 
}

.severity-badge.moderate { 
  background: #fef3c7; 
  color: #92400e; 
}

.severity-badge.low { 
  background: #dcfce7; 
  color: #166534; 
}

.severity-badge.minimal { 
  background: #d1fae5; 
  color: #065f46; 
}

.component-score {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
}

/* ============================================
   TOP ISSUES
   ============================================ */

.issues-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.issue-item {
  padding: 16px;
  background: var(--bg-elevated, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.issue-item:hover {
  border-color: var(--primary-300, #c7d2fe);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.issue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.issue-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  flex: 1;
}

.issue-severity-badge {
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  min-width: 50px;
  text-align: center;
}

.issue-severity-badge.critical {
  background: #fee2e2;
  color: #991b1b;
}

.issue-severity-badge.high {
  background: #fed7aa;
  color: #9a3412;
}

.issue-severity-badge.moderate {
  background: #fef3c7;
  color: #92400e;
}

.issue-severity-badge.low {
  background: #dcfce7;
  color: #166534;
}

.issue-meta {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  margin-top: 4px;
}

/* ============================================
   DEFECT SUMMARY (FALLBACK)
   ============================================ */

.defect-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.defect-item {
  padding: 12px;
}

.defect-bar-container {
  display: grid;
  grid-template-columns: 1fr 120px 50px;
  align-items: center;
  gap: 16px;
}

.defect-label {
  font-size: 14px;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.defect-bar {
  height: 8px;
  background: var(--bg-muted, #f1f5f9);
  border-radius: 4px;
  overflow: hidden;
}

.defect-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.defect-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1e293b);
  text-align: right;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .severity-score-card-premium {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
  }
  
  .score-visual-premium {
    width: 140px;
    height: 140px;
  }
  
  .score-value-premium {
    font-size: 40px;
  }
  
  .score-metrics-premium {
    grid-template-columns: 1fr;
  }
  
  .component-grid {
    grid-template-columns: 1fr;
  }
  
  .defect-bar-container {
    grid-template-columns: 1fr 80px 40px;
  }
}
/* ============================================
   RISK ACTIONS PREVIEW COMPONENT
   Risk assessment and action panel
   ============================================ */

.risk-actions-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
}

/* Section styling */
.risk-snapshot,
.report-customization,
.actions-section,
.risk-drivers {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.section-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.section-header h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Risk Snapshot */
.risk-snapshot {
  padding-bottom: var(--space-4);
}

.snapshot-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.risk-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  margin: var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.risk-band.critical {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  color: var(--error-text);
  border: 1px solid var(--error-500);
}

.risk-band.high {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.1));
  color: #f97316;
  border: 1px solid #f97316;
}

.risk-band.medium {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(234, 179, 8, 0.1));
  color: var(--warning-text);
  border: 1px solid var(--warning-500);
}

.risk-band.low {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
  color: var(--success-text);
  border: 1px solid var(--success-500);
}

.band-icon {
  font-size: var(--text-xl);
}

.risk-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.metric-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.metric-value.urgency-low { color: var(--success-500); }
.metric-value.urgency-moderate { color: var(--warning-500); }
.metric-value.urgency-high { color: #f97316; }
.metric-value.urgency-critical { color: var(--error-500); }

.cost-estimate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  margin: 0 var(--space-3);
  border-radius: var(--radius-md);
}

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

.cost-range {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--primary-400);
}

.recommendation-box {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  margin: var(--space-3) var(--space-3) 0;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid var(--primary-900);
  border-radius: var(--radius-md);
}

.rec-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.rec-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* Report Customization */
.report-customization {
  padding-bottom: var(--space-4);
}

.form-group {
  padding: var(--space-3) var(--space-4);
}

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.form-group textarea,
.form-group input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  resize: vertical;
  transition: all var(--duration-fast) var(--ease-default);
}

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

.form-group textarea:focus,
.form-group input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 var(--space-4);
  gap: var(--space-3);
}

.form-row .form-group {
  padding: 0;
}

/* Actions Section */
.actions-section {
  padding-bottom: var(--space-4);
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-6));
  margin: var(--space-3) auto 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.action-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

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

.action-btn.secondary:hover {
  background: var(--bg-muted);
  border-color: var(--primary-600);
}

.downstream-actions {
  padding: var(--space-3) var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.downstream-actions .action-btn {
  width: 100%;
  margin: 0;
}

.actions-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: var(--space-2) 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Confidence Badge */
.confidence-badge {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* Time Horizon Section */
.time-horizon-section {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.time-horizon-section h4 {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--space-2) 0;
}

.horizon-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.horizon-item {
  display: grid;
  grid-template-columns: 70px 1fr 50px;
  align-items: center;
  gap: var(--space-2);
}

.horizon-period {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.horizon-bar-container {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.horizon-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--warning-500), var(--error-500));
  border-radius: var(--radius-sm);
  transition: width 0.5s var(--ease-default);
}

.horizon-value {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: right;
}

/* Time-to-Failure Section */
.ttf-section {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  margin: 0 var(--space-3);
  border-radius: var(--radius-md);
}

.ttf-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.ttf-value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--primary-400);
}

.ttf-range {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

/* Scenario Analysis */
.scenario-analysis {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.scenario-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.scenario-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.scenario-tab:hover {
  color: var(--text-primary);
  background: var(--bg-muted);
}

.scenario-tab.active {
  color: var(--primary-400);
  border-bottom-color: var(--primary-500);
  background: var(--bg-surface);
}

.scenario-detail {
  padding: var(--space-3) var(--space-4);
}

.scenario-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.scenario-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.scenario-metric .label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--font-medium);
}

.scenario-metric .value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* Risk level styling with readable colors */
/* FIX: Removed background highlight for readability */
.scenario-metric .value.risk-low { 
  color: #16a34a;
  font-weight: var(--font-semibold);
}

.scenario-metric .value.risk-medium { 
  color: #ca8a04;
  font-weight: var(--font-semibold);
}

.scenario-metric .value.risk-high { 
  color: #dc2626;
  font-weight: var(--font-semibold);
}

.scenario-metric .value.positive { 
  color: #16a34a;
  background: rgba(22, 163, 74, 0.15);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.scenario-cost {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.scenario-cost .label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.scenario-cost .value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--primary-400);
}

.scenario-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* Enhanced Risk Drivers */
.risk-drivers {
  padding-bottom: var(--space-3);
}

.drivers-list {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.driver-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border-default);
  transition: all var(--duration-fast) var(--ease-default);
}

.driver-item:hover {
  background: var(--bg-muted);
}

.driver-item.severity-critical {
  border-left-color: var(--error-500);
  background: rgba(239, 68, 68, 0.08);
}

.driver-item.severity-high {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, 0.08);
}

.driver-item.severity-moderate {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.06);
}

.driver-item.severity-low {
  border-left-color: var(--success-500);
  background: rgba(34, 197, 94, 0.06);
}

.driver-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.driver-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: capitalize;
  line-height: 1.3;
}

.driver-contribution {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--neutral-900);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

.driver-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.driver-cost {
  font-size: var(--text-xs);
  color: var(--primary-400);
  font-weight: var(--font-medium);
}

.driver-probability {
  font-size: var(--text-xs);
  color: var(--warning-text);
  background: var(--warning-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Severity Summary Section */
.severity-summary-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.severity-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.sev-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sev-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.sev-stat-value.critical {
  color: var(--error-400);
}

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

.sev-ttf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
}

.sev-ttf-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.sev-ttf-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--warning-400);
  font-family: var(--font-mono);
}

/* Action Grid */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.action-btn.secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
}

.action-icon {
  font-size: var(--text-xl);
}

.action-text {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* Spinner */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Responsive */
@media (max-width: 1024px) {
  .risk-actions-preview {
    position: static;
  }
}

@media (max-width: 480px) {
  .severity-quick-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
  }
  
  .sev-stat-value {
    font-size: var(--text-lg);
  }
  
  .action-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ============================================
   DETECTION EDITOR - Premium Annotation UI
   ============================================ */

.detection-editor {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-5);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
}

.editor-header {
  margin-bottom: var(--space-5);
}

.editor-header h3 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.editor-instructions {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.editor-instructions p {
  margin: 0;
}

.canvas-container {
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: var(--space-5);
}

.detection-canvas {
  display: block;
  max-width: 100%;
  cursor: crosshair;
}

/* Label Menu Modal */
.label-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  min-width: 320px;
  max-width: 500px;
}

.label-menu h4 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.label-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-height: 300px;
  overflow-y: auto;
}

.label-option {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

.label-option:hover {
  background: var(--accent-5);
  color: white;
  border-color: var(--accent-5);
}

.custom-label {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.custom-label input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.custom-label input:focus {
  outline: none;
  border-color: var(--accent-6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.custom-label button {
  padding: var(--space-2) var(--space-4);
  background: var(--accent-5);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.custom-label button:hover:not(:disabled) {
  background: var(--accent-6);
}

.custom-label button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cancel-btn {
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--duration-fast) var(--ease-default);
}

.cancel-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Detection Controls */
.detection-controls {
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.detection-controls h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.btn-remove {
  padding: var(--space-2) var(--space-4);
  background: var(--error-solid);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--duration-fast) var(--ease-default);
}

.btn-remove:hover {
  background: #dc2626;
}

.relabel-controls {
  display: flex;
  gap: var(--space-2);
}

.relabel-controls select,
.relabel-controls input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.relabel-controls select:focus,
.relabel-controls input:focus {
  outline: none;
  border-color: var(--accent-6);
}

/* Editor Actions */
.editor-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Unified Submit Feedback Button */
.btn-submit-unified {
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--success-solid) 0%, var(--accent-5) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 180px;
  justify-content: center;
}

.btn-submit-unified:hover:not(:disabled) {
  background: linear-gradient(135deg, #16a34a 0%, var(--accent-6) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn-submit-unified:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

/* Loading spinner for submit button */
.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.feedback-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  align-items: flex-end;
}

.summary-count {
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.summary-item {
  padding: var(--space-1) var(--space-2);
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
}

.summary-item.added {
  background: rgba(34, 197, 94, 0.1);
  color: var(--success-solid);
}

.summary-item.removed {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error-solid);
}

.summary-item.relabeled {
  background: rgba(139, 92, 246, 0.1);
  color: var(--accent-5);
}

.feedback-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: var(--space-2) 0 0 0;
  text-align: center;
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .detection-editor {
    padding: var(--space-4);
  }

  .editor-instructions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .label-menu {
    width: 90%;
    max-width: none;
    padding: var(--space-5);
  }

  .control-buttons {
    gap: var(--space-2);
  }

  .relabel-controls {
    flex-direction: column;
  }

  .editor-actions {
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }
  
  .btn-submit-unified {
    margin: 0;
    width: 100%;
  }
  
  .feedback-summary {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* ============================================================
   Condition Graph Viewer - Premium Enterprise Styling
   ============================================================ */

.condition-graph-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
}

.condition-graph-viewer.compact {
  padding: var(--space-12);
  gap: var(--space-12);
}

/* ============================================================
   Summary Card
   ============================================================ */

.graph-summary-card {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-elevated) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  border: 1px solid var(--border-subtle);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}

.summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.summary-title h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.summary-icon {
  font-size: 1.25rem;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-12);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

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

/* Summary Metrics */
.summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.metric-item.primary {
  flex-basis: 100%;
  margin-bottom: var(--space-8);
}

.metric-value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.metric-value.warning {
  color: var(--color-error);
}

.metric-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Condition Badge */
.condition-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-md);
  font-weight: 700;
  border-radius: var(--radius-md);
  letter-spacing: 0.05em;
}

.condition-badge.excellent {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.condition-badge.good {
  background: rgba(132, 204, 22, 0.15);
  color: #84cc16;
  border: 1px solid rgba(132, 204, 22, 0.3);
}

.condition-badge.fair {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.condition-badge.poor {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.condition-badge.critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.condition-badge.unknown {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Environmental Factors */
.environmental-factors {
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-subtle);
}

.factors-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  display: block;
}

.factor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.factor-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.factor-tag.high {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.factor-tag.moderate {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.factor-tag.low {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* ============================================================
   View Tabs
   ============================================================ */

.view-tabs {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.view-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-16);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.view-tab.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.tab-icon {
  font-size: 1rem;
}

/* ============================================================
   Components Section
   ============================================================ */

.components-section {
  min-height: 200px;
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-12);
}

.component-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.component-card:hover {
  border-color: var(--border-emphasis);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.component-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.component-card.critical {
  border-left: 3px solid #ef4444;
}

.component-card.high {
  border-left: 3px solid #f97316;
}

.component-card.medium {
  border-left: 3px solid #eab308;
}

.component-card.low {
  border-left: 3px solid #22c55e;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.component-type {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.anomaly-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-sm);
}

.component-name {
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.component-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.component-metric {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-sm);
}

.condition-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.component-metric .metric-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.component-metric .metric-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.component-metric .metric-value.critical {
  color: #ef4444;
}

.component-metric .metric-value.high {
  color: #f97316;
}

.component-metric .metric-value.medium {
  color: #eab308;
}

.component-metric .metric-value.low {
  color: #22c55e;
}

/* ============================================================
   Failure Modes Section
   ============================================================ */

.failure-modes-section {
  min-height: 200px;
}

.failure-modes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.failure-mode-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
}

.failure-mode-card.critical {
  border-left: 3px solid #ef4444;
}

.failure-mode-card.high {
  border-left: 3px solid #f97316;
}

.failure-mode-card.medium {
  border-left: 3px solid #eab308;
}

.failure-mode-card.low {
  border-left: 3px solid #22c55e;
}

.fm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-12);
  gap: var(--space-12);
}

.fm-name {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.fm-badges {
  display: flex;
  gap: var(--space-8);
}

.risk-badge,
.severity-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.risk-badge.critical,
.severity-badge.critical {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.risk-badge.high,
.severity-badge.high {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.risk-badge.medium,
.severity-badge.medium {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.risk-badge.low,
.severity-badge.low {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

/* Probability Bar */
.fm-probability {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.prob-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-muted);
  min-width: 80px;
}

.prob-bar-container {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.prob-bar {
  height: 100%;
  background: linear-gradient(90deg, #eab308, #f97316, #ef4444);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.prob-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 40px;
  text-align: right;
}

/* FM Details */
.fm-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.fm-causes,
.fm-propagation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.detail-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-muted);
  min-width: 80px;
  padding-top: var(--space-4);
}

.cause-tags,
.propagation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.cause-tag {
  display: inline-flex;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.propagation-tag {
  display: inline-flex;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  border-radius: var(--radius-sm);
}

/* ============================================================
   Graph View Section
   ============================================================ */

.graph-view-section {
  min-height: 200px;
}

.graph-stats {
  display: flex;
  gap: var(--space-20);
  padding: var(--space-12);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-16);
}

.stat-item {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.stat-item strong {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: var(--space-4);
}

/* Graph Nodes List */
.graph-nodes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-20);
}

.graph-node-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.graph-node-item:hover {
  border-color: var(--border-emphasis);
  background: var(--bg-tertiary);
}

.graph-node-item.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.node-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.node-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.node-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.node-type {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.node-metrics {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.node-severity {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-sm);
}

.node-severity.critical {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.node-severity.high {
  background: rgba(249, 115, 22, 0.1);
  color: #f97316;
}

.node-severity.medium {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.node-severity.low {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.node-detections {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Propagation Section */
.propagation-section {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.section-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.subtitle-icon {
  font-size: 1rem;
}

.propagation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.propagation-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.prop-source {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 120px;
}

.prop-arrow {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
}

.prop-targets {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.prop-target {
  display: inline-flex;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  border-radius: var(--radius-sm);
}

.prop-metrics {
  display: flex;
  gap: var(--space-12);
}

.prop-risk {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #ef4444;
}

.prop-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ============================================================
   Legend
   ============================================================ */

.graph-legend {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.legend-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.legend-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* ============================================================
   States
   ============================================================ */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-32);
  color: var(--text-muted);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-32);
  text-align: center;
}

.empty-icon {
  font-size: 2.5rem;
  opacity: 0.5;
}

.empty-state h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.empty-state p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ============================================================
   Responsive Design
   ============================================================ */

@media (max-width: 768px) {
  .condition-graph-viewer {
    padding: var(--space-12);
  }
  
  .summary-metrics {
    flex-direction: column;
    gap: var(--space-12);
  }
  
  .view-tabs {
    flex-direction: column;
  }
  
  .components-grid {
    grid-template-columns: 1fr;
  }
  
  .fm-header {
    flex-direction: column;
    gap: var(--space-8);
  }
  
  .fm-badges {
    flex-wrap: wrap;
  }
  
  .propagation-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .prop-arrow {
    display: none;
  }
}
/* ============================================
   INSPECT PAGE - Enterprise Inspection Cockpit V2
   Premium redesign with premium visual language
   ============================================ */

.inspect-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

/* ==================== HERO HEADER ==================== */

.inspect-hero {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-8) var(--space-8) var(--space-6);
  position: relative;
}

.inspect-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-text {
  flex: 1;
}

.hero-title {
  font-size: var(--text-h1);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin: 0;
  max-width: 500px;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Progress Tracker */
.progress-tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 600px;
  margin: 0 auto;
}

.progress-tracker-item {
  display: flex;
  align-items: center;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  transition: all var(--duration-normal) var(--ease-out);
}

.progress-step.active {
  background: var(--primary-900);
  border-color: var(--primary-500);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.progress-step.completed {
  background: var(--success-900);
  border-color: var(--success-500);
}

.progress-step.completed .step-icon {
  color: var(--success-400);
}

.step-icon {
  font-size: var(--text-lg);
}

.step-text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.progress-step.active .step-text {
  color: var(--text-primary);
}

.step-connector {
  width: 40px;
  height: 2px;
  background: var(--border-default);
  margin: 0 var(--space-1);
  transition: background var(--duration-normal) var(--ease-default);
}

.step-connector.completed {
  background: var(--success-500);
}

/* ==================== ALERT ==================== */

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.alert-error {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
  border-color: var(--error-500);
  color: var(--error-400);
}

.alert-icon {
  font-size: var(--text-xl);
}

.alert-text {
  flex: 1;
  font-size: var(--text-sm);
}

.alert-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-default);
}

.alert-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ==================== MAIN CONTENT ==================== */

.inspect-content {
  flex: 1;
  padding: var(--space-8);
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

/* ==================== SETUP CONTAINER ==================== */

.setup-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* ==================== CARDS ==================== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: visible; /* Changed from hidden to allow address dropdown to appear */
  transition: border-color var(--duration-fast) var(--ease-default);
}

.card:hover {
  border-color: var(--border-default);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.card-title-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-icon {
  font-size: var(--text-2xl);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

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

.card-body {
  padding: var(--space-6);
}

/* ==================== 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);
  border-radius: var(--radius-full);
  text-transform: capitalize;
}

.badge-muted {
  background: var(--bg-muted);
  color: var(--text-tertiary);
}

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

.badge-info {
  background: var(--primary-900);
  color: var(--primary-400);
}

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

.badge-error, .badge-critical {
  background: var(--error-900);
  color: var(--error-400);
}

.badge-high {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

.badge-moderate {
  background: var(--warning-900);
  color: var(--warning-400);
}

.badge-low, .badge-minimal {
  background: var(--success-900);
  color: var(--success-400);
}

/* ==================== CTA SECTION ==================== */

.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10);
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
}

.cta-helper {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ==================== BUTTONS ==================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-icon {
  font-size: var(--text-lg);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

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

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--primary-600);
}

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

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ==================== REVIEW CONTAINER ==================== */

.review-container {
  max-width: 1200px;
  margin: 0 auto;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.image-preview-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  transition: all var(--duration-fast) var(--ease-default);
}

.image-preview-card:hover {
  border-color: var(--primary-500);
  transform: scale(1.02);
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: var(--text-xs);
  z-index: 2;
}

.preview-detection-count {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--warning-600);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
  z-index: 2;
}

.preview-img-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.preview-img-container .image-with-boxes {
  width: 100%;
  height: 100%;
}

.preview-img-container .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==================== THUMBNAIL GRID ==================== */
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.thumbnail-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.thumbnail-item:hover {
  border-color: var(--primary-500);
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
}

.thumbnail-item.has-detections {
  border-color: var(--warning-600);
}

.thumbnail-item.has-detections:hover {
  border-color: var(--warning-400);
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-muted);
}

.thumbnail-img-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.thumbnail-img-container .image-with-boxes {
  width: 100%;
  height: 100%;
}

.thumbnail-img-container .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.thumbnail-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.thumbnail-number {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: white;
}

.thumbnail-detections {
  font-size: 10px;
  font-weight: var(--font-medium);
}

/* AI intelligence hover preview */
.thumbnail-ai-preview {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 10;
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}
.thumbnail-ai-line {
  margin: 2px 0;
}
.thumbnail-ai-none {
  color: var(--text-tertiary);
  font-style: italic;
  color: var(--warning-300);
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
}

/* Analysis Loader */
.analysis-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-16);
  text-align: center;
}

.loader-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--bg-muted);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.loader-progress {
  width: 100%;
  max-width: 400px;
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.loader-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ==================== RESULTS CONTAINER ==================== */

.results-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Stats Row */
.stats-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  flex: 1;
  min-width: 150px;
  transition: all var(--duration-fast) var(--ease-default);
}

.stat-tile:hover {
  border-color: var(--primary-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  font-size: var(--text-2xl);
}

/* FIX: Removed background highlight for readability - icon wraps no longer have risk-based backgrounds */
.stat-icon-wrap.risk-critical { /* Background removed - text color only */ }
.stat-icon-wrap.risk-high { /* Background removed - text color only */ }
.stat-icon-wrap.risk-medium { /* Background removed - text color only */ }
.stat-icon-wrap.risk-low { /* Background removed - text color only */ }

.stat-info {
  display: flex;
  flex-direction: column;
}

/* FIX: Removed background highlight for readability */
.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-value.risk-critical { color: var(--error-400); }
.stat-value.risk-high { color: #fb923c; }
.stat-value.risk-medium { color: var(--warning-400); }
.stat-value.risk-low { color: var(--success-400); }

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

/* Results Tabs */
.results-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.tab-btn:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.tab-btn.active {
  background: var(--primary-900);
  color: var(--primary-400);
}

.tab-icon {
  font-size: var(--text-lg);
}

/* Results Grid */
.results-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-6);
}

.results-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.results-sidebar {
  position: sticky;
  top: var(--space-6);
  align-self: start;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
}

/* ==================== SEVERITY SUMMARY ==================== */

.severity-overview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8);
  align-items: start;
}

.severity-score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.score-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.score-bg {
  stroke: var(--bg-muted);
}

.score-fill {
  transition: stroke-dasharray 1s ease-out;
}

.score-fill.severity-critical { stroke: var(--error-500); }
.score-fill.severity-high { stroke: #f97316; }
.score-fill.severity-moderate { stroke: var(--warning-500); }
.score-fill.severity-low { stroke: var(--success-500); }
.score-fill.severity-minimal { stroke: var(--success-400); }

.score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

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

.severity-breakdown {
  flex: 1;
}

.severity-breakdown h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.breakdown-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.breakdown-item {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: var(--space-3);
}

.breakdown-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.breakdown-bar {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
}

.breakdown-fill.severity-critical { background: var(--error-500); }
.breakdown-fill.severity-high { background: #f97316; }
.breakdown-fill.severity-moderate { background: var(--warning-500); }
.breakdown-fill.severity-low { background: var(--success-500); }

.breakdown-count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: right;
}

.severity-cost {
  text-align: right;
}

.severity-cost h4 {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.cost-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
}

.cost-min, .cost-max {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.cost-separator {
  color: var(--text-tertiary);
}

/* Component Severities */
.component-severities {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.component-severities h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.components-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.component-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid;
  font-size: var(--text-sm);
}

.component-chip.severity-critical {
  background: var(--error-900);
  border-color: var(--error-600);
  color: var(--error-300);
}

.component-chip.severity-high {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fb923c;
}

.component-chip.severity-moderate {
  background: var(--warning-900);
  border-color: var(--warning-600);
  color: var(--warning-300);
}

.component-chip.severity-low,
.component-chip.severity-minimal {
  background: var(--success-900);
  border-color: var(--success-600);
  color: var(--success-300);
}

.chip-name {
  font-weight: var(--font-medium);
}

.chip-score {
  font-weight: var(--font-bold);
  font-family: var(--font-mono);
}

.chip-count {
  font-size: var(--text-xs);
  color: inherit;
  opacity: 0.7;
}

/* ==================== MODAL ==================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-8);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-lg {
  width: 100%;
  max-width: 1000px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  border: none;
  font-size: var(--text-2xl);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-default);
}

.modal-close:hover {
  background: var(--error-900);
  color: var(--error-400);
}

.modal-body {
  flex: 1;
  overflow: auto;
}

/* AI Image Intelligence (Editable) section in modal */
.ai-intelligence-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.ai-intelligence-title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.ai-intelligence-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ai-intelligence-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ai-intelligence-group > label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}
.ai-intelligence-row,
.ai-intelligence-rec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ai-intelligence-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
}
.ai-intelligence-input {
  flex: 1;
  min-width: 120px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.ai-intelligence-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-base);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.ai-intelligence-remove:hover {
  background: var(--error-100);
  color: var(--error-700);
}
.ai-intelligence-add {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  align-self: flex-start;
}
.ai-intelligence-add:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
}
.ai-intelligence-risk-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ai-intelligence-risk-row > span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ai-intelligence-select {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.ai-intelligence-number {
  width: 80px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-base);
  color: var(--text-primary);
}
.ai-intelligence-save {
  margin-top: var(--space-4);
}
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1400px) {
  .results-grid {
    grid-template-columns: 1fr 360px;
  }
}

@media (max-width: 1200px) {
  .results-grid {
    grid-template-columns: 1fr;
  }
  
  .results-sidebar {
    position: static;
    max-height: none;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .severity-overview {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }
  
  .severity-score-display {
    margin: 0 auto;
  }
  
  .severity-cost {
    text-align: center;
  }
}

@media (max-width: 1024px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  .inspect-hero {
    padding: var(--space-6);
  }
  
  .hero-content {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .hero-title {
    font-size: var(--text-h2);
  }
  
  .hero-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .hero-actions .btn {
    flex: 1;
  }
  
  .progress-tracker {
    overflow-x: auto;
    justify-content: flex-start;
    padding: var(--space-2) 0;
  }
  
  .step-text {
    display: none;
  }
  
  .inspect-content {
    padding: var(--space-4);
  }
  
  .results-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .tab-btn {
    flex-shrink: 0;
  }
  
  .breakdown-item {
    grid-template-columns: 60px 1fr 30px;
  }
}

@media (max-width: 480px) {
  .stat-tile {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
  
  .cta-section {
    padding: var(--space-6);
  }
  
  .btn-xl {
    width: 100%;
  }
}

/* Two-pane inspector (replaces modal) */
.inspector-two-pane {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  min-height: 480px;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface, #fff);
}

.inspector-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inspector-pane-left {
  border-right: 1px solid var(--border-subtle, #e5e7eb);
}

.inspector-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--bg-base, #f9fafb);
}

.inspector-pane-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.inspector-left-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.inspector-image-canvas {
  max-height: 320px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-base, #f9fafb);
}

.inspector-pane-right {
  padding: var(--space-4);
  overflow: auto;
}

@media (max-width: 900px) {
  .inspector-two-pane {
    flex-direction: column;
  }
  .inspector-pane-left {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
  }
}
.history-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: #0f172a;
  color: #e2e8f0;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid #334155;
  background-color: #1e293b;
  flex-shrink: 0;
}

.history-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.refresh-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.refresh-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Two-column layout matching Properties tab */
.history-content-layout {
  display: flex;
  height: calc(100vh - 80px);
  gap: 24px;
  padding: 24px;
  overflow: hidden;
}

/* Left Column: Inspection List */
.history-left-column {
  flex: 0 0 400px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.history-search-section {
  padding: 20px;
  border-bottom: 1px solid #334155;
}

.history-search-section h3 {
  margin: 0 0 16px 0;
  color: #e2e8f0;
  font-size: 20px;
  font-weight: 600;
}

.history-search-input {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 14px;
  transition: border-color 0.2s;
}

.history-search-input:focus {
  outline: none;
  border-color: #8b5cf6;
}

.history-search-input::placeholder {
  color: #64748b;
}

.history-list-container {
  flex: 1;
  overflow-y: auto;
  background: #0f172a;
}

.history-loading,
.history-error,
.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.history-error {
  color: #ef4444;
}

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-list-item {
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
  cursor: pointer;
  transition: background-color 0.2s, border-left 0.2s;
}

.history-list-item:hover {
  background-color: #1e293b;
}

.history-list-item.selected {
  background-color: #1e293b;
  border-left: 4px solid #8b5cf6;
  padding-left: 16px;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-item-id {
  font-size: 14px;
  font-weight: 600;
  color: #8b5cf6;
}

.history-item-date {
  font-size: 12px;
  color: #94a3b8;
}

.history-item-address {
  font-size: 16px;
  font-weight: 500;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.history-item-status {
  font-size: 12px;
  color: #94a3b8;
  text-transform: capitalize;
}

/* Right Column: Inspection Details */
.history-right-column {
  flex: 1;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  overflow-y: auto;
  padding: 24px;
}

.history-details-empty,
.history-details-loading,
.history-details-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: #94a3b8;
}

.history-details-empty h3,
.history-details-error h3 {
  margin: 16px 0 8px 0;
  color: #e2e8f0;
}

.history-details-error {
  color: #ef4444;
}

.empty-state-icon,
.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #334155;
  border-top: 4px solid #8b5cf6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.history-details-content {
  max-width: 100%;
}

.history-details-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
}

.history-details-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #e2e8f0;
}

.history-details-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #334155;
}

.detail-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #e2e8f0;
}

.detail-date {
  font-size: 16px;
  color: #94a3b8;
  margin: 0;
}

.severity-badge-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 12px;
  border: 2px solid;
  min-width: 100px;
}

.severity-score {
  font-size: 32px;
  font-weight: 700;
}

.severity-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-section {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
}

.detail-section h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #e2e8f0;
}

.inspection-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #334155;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #94a3b8;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #e2e8f0;
  font-weight: 600;
}

.damage-types-container {
  margin-top: 16px;
}

.damage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.damage-tag {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #475569;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #e2e8f0;
  transition: all 0.2s;
}

.damage-tag:hover {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #312e81 0%, #1e293b 100%);
}

.no-damage-types {
  color: #94a3b8;
  font-style: italic;
  margin: 0;
}

.report-content {
  color: #cbd5e1;
  line-height: 1.6;
}

.report-summary {
  margin: 0 0 16px 0;
}

.recommendation {
  margin-top: 16px;
  padding: 16px;
  background-color: #1e293b;
  border-radius: 8px;
  border-left: 4px solid #8b5cf6;
}

.recommendation strong {
  display: block;
  margin-bottom: 8px;
  color: #e2e8f0;
}

.recommendation p {
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .history-content-layout {
    flex-direction: column;
    height: auto;
  }

  .history-left-column {
    flex: 1;
    min-height: 300px;
  }

  .history-right-column {
    flex: 1;
    min-height: 400px;
  }

  .detail-header {
    flex-direction: column;
    gap: 16px;
  }
}
/* ============================================
   BILLING PAGE - Premium Pricing Cards
   ============================================ */

.billing-header {
  margin-bottom: var(--space-8);
}

.billing-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.billing-description {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-2) 0 0 0;
}

/* Message Banner */
.billing-message {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.billing-message.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.billing-message.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.billing-message.info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

/* Plans Grid */
.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.billing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: all var(--duration-fast) var(--ease-default);
  position: relative;
}

.billing-card:hover {
  border-color: var(--border-default);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.billing-card.current-plan {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-glow);
}

.billing-card.current-plan::before {
  content: 'Current';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--primary-500);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Plan Header */
.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.plan-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.plan-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.plan-badge.blue {
  background: var(--info-bg);
  color: var(--info-text);
}

.plan-badge.purple {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-400);
}

.plan-badge.gold {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* Pricing */
.plan-pricing {
  margin-bottom: var(--space-5);
}

.price {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.price-period {
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  color: var(--text-tertiary);
}

.price-description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: var(--space-1) 0 0 0;
}

/* Features */
.plan-features {
  flex: 1;
  margin-bottom: var(--space-6);
}

.plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features li {
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-snug);
}

/* Actions */
.plan-actions {
  margin-top: auto;
}

.current-plan-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.current-plan-indicator span {
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--primary-400);
}

.btn-subscribe,
.btn-manage,
.btn-contact-sales {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-align: center;
  border: none;
}

.btn-subscribe {
  background: var(--primary-500);
  color: white;
}

.btn-subscribe:hover:not(:disabled) {
  background: var(--primary-400);
}

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

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

.btn-manage:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

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

.btn-contact-sales:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

/* Help Section */
.billing-info {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}

.billing-info h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.billing-info p {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .billing-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .billing-plans-grid {
    grid-template-columns: 1fr;
  }
  
  .billing-card {
    padding: var(--space-5);
  }
}
/* ============================================
   ACCOUNT SETTINGS PAGE - Premium Settings UI
   ============================================ */

.account-settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--text-tertiary);
  font-size: var(--text-md);
}

.account-settings-header {
  margin-bottom: var(--space-8);
}

.account-settings-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.account-settings-subtitle {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-2) 0 0 0;
}

/* Sections */
.account-settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.account-settings-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-5) 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

/* Forms */
.account-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}

.account-settings-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.account-settings-form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.account-settings-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.account-settings-input::placeholder {
  color: var(--text-muted);
}

.account-settings-input:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.account-settings-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.account-settings-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-muted);
}

/* Messages */
.account-settings-error {
  padding: var(--space-3) var(--space-4);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  color: var(--error-text);
  font-size: var(--text-sm);
}

.account-settings-success {
  padding: var(--space-3) var(--space-4);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  color: var(--success-text);
  font-size: var(--text-sm);
}

/* Buttons */
.account-settings-button {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  border: 1px solid transparent;
  width: fit-content;
}

.account-settings-button.primary {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}

.account-settings-button.primary:hover:not(:disabled) {
  background: var(--primary-400);
  border-color: var(--primary-400);
}

.account-settings-button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.account-settings-button.secondary {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.account-settings-button.secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

/* Subscription Section */
.account-settings-subscription {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-settings-subscription-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-settings-subscription-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.account-settings-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.account-settings-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.account-settings-badge.free {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.account-settings-badge.starter {
  background: var(--info-bg);
  color: var(--info-text);
}

.account-settings-badge.enterprise {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.account-settings-badge.canceled {
  background: var(--error-bg);
  color: var(--error-text);
}

.account-settings-subscription-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.account-settings-subscription-actions {
  display: flex;
  gap: var(--space-3);
}

/* Account Actions */
.account-settings-actions {
  display: flex;
  gap: var(--space-3);
}

/* Responsive */
@media (max-width: 768px) {
  .account-settings-section {
    padding: var(--space-5);
  }
  
  .account-settings-form {
    max-width: 100%;
  }
}
/* ============================================
   BLURRED PREVIEW - Premium Paywall Overlay
   ============================================ */

.blurred-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.blurred-preview-content {
  filter: blur(6px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  width: 100%;
  height: 100%;
}

.blurred-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(4px);
  z-index: 10;
}

.blurred-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-width: 480px;
  gap: var(--space-4);
  box-shadow: var(--shadow-xl);
}

.blurred-preview-icon {
  font-size: 56px;
  margin-bottom: var(--space-2);
  opacity: 0.9;
}

.blurred-preview-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.blurred-preview-description {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 360px;
}

.blurred-preview-button {
  padding: var(--space-3) var(--space-6);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  margin-top: var(--space-2);
}

.blurred-preview-button:hover {
  background: var(--primary-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Enterprise variant - gold button */
.blurred-preview-card.enterprise .blurred-preview-button {
  background: linear-gradient(135deg, var(--warning-solid) 0%, #d97706 100%);
  color: white;
}

.blurred-preview-card.enterprise .blurred-preview-button:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

/* Responsive */
@media (max-width: 480px) {
  .blurred-preview-card {
    padding: var(--space-6);
    margin: var(--space-4);
  }
  
  .blurred-preview-title {
    font-size: var(--text-xl);
  }
  
  .blurred-preview-description {
    font-size: var(--text-sm);
  }
}
/* Insurance dashboard now uses inline flex classes */

.insurance-header {
  margin-bottom: var(--spacing-2xl);
}

.insurance-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--spacing-sm);
}

.insurance-header p {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-md);
}

.insurance-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.insurance-content-layout {
  display: grid;
  grid-template-columns: 300px 1fr 400px;
  gap: var(--spacing-xl);
  align-items: start;
  flex-grow: 1;
  width: 100%;
  overflow-y: auto;
}

.insurance-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.insurance-middle-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.insurance-right-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  position: sticky;
  top: var(--spacing-xl);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.underwriting-preview-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.underwriting-preview-card p {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0;
}

.insurance-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  transition: all var(--transition-base);
}

.insurance-section:hover {
  border-color: var(--color-border-secondary);
}

.insurance-section h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-primary);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
}

.form-group input,
.form-group select {
  padding: 10px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.form-group input::placeholder {
  color: #64748b;
  opacity: 0.6;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #8b5cf6;
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
}

.decision-card {
  border-radius: 8px;
  padding: 20px;
  border: 2px solid;
}

.decision-approved {
  background-color: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
}

.decision-conditional {
  background-color: rgba(251, 191, 36, 0.1);
  border-color: #fbbf24;
}

.decision-declined {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.decision-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.decision-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.risk-tier {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.risk-low {
  background-color: #22c55e;
  color: white;
}

.risk-medium {
  background-color: #fbbf24;
  color: white;
}

.risk-high {
  background-color: #f97316;
  color: white;
}

.risk-very_high {
  background-color: #ef4444;
  color: white;
}

.premium-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.premium-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #334155;
}

.premium-item label {
  color: #94a3b8;
  font-size: 14px;
}

.premium-item span {
  font-weight: 600;
  color: #e2e8f0;
}

.premium-total {
  border-bottom: 2px solid #8b5cf6;
  padding-top: 12px;
  margin-top: 4px;
}

.premium-total label,
.premium-total span {
  font-size: 16px;
  font-weight: 700;
}

.conditions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #334155;
}

.conditions h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fbbf24;
}

.conditions ul {
  list-style: disc;
  padding-left: 20px;
  color: #cbd5e1;
}

.reasoning {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #334155;
  color: #94a3b8;
  font-size: 14px;
}

.risk-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 20px;
}

.risk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #334155;
}

.risk-score h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.risk-category {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.risk-minimal {
  background-color: #22c55e;
  color: white;
}

.risk-low {
  background-color: #84cc16;
  color: white;
}

.risk-moderate {
  background-color: #fbbf24;
  color: white;
}

.risk-high {
  background-color: #f97316;
  color: white;
}

.risk-severe {
  background-color: #ef4444;
  color: white;
}

.insurability-score {
  text-align: right;
}

.insurability-score label {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.insurability-score span {
  font-size: 24px;
  font-weight: 700;
}

.score-good {
  color: #22c55e;
}

.score-warning {
  color: #fbbf24;
}

.risk-factors {
  margin-bottom: 20px;
}

.risk-factors h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.risk-factor {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border-left: 4px solid;
}

.risk-factor.risk-low {
  background-color: rgba(34, 197, 94, 0.1);
  border-left-color: #22c55e;
}

.risk-factor.risk-medium {
  background-color: rgba(251, 191, 36, 0.1);
  border-left-color: #fbbf24;
}

.risk-factor.risk-high {
  background-color: rgba(249, 115, 22, 0.1);
  border-left-color: #f97316;
}

.risk-factor.risk-critical {
  background-color: rgba(239, 68, 68, 0.1);
  border-left-color: #ef4444;
}

.factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.factor-name {
  font-weight: 600;
  font-size: 14px;
}

.factor-severity {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.severity-low {
  background-color: #22c55e;
  color: white;
}

.severity-medium {
  background-color: #fbbf24;
  color: white;
}

.severity-high {
  background-color: #f97316;
  color: white;
}

.severity-critical {
  background-color: #ef4444;
  color: white;
}

.factor-impact {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

.recommendations {
  padding-top: 16px;
  border-top: 1px solid #334155;
}

.recommendations h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.recommendations ul {
  list-style: disc;
  padding-left: 20px;
  color: #cbd5e1;
}

.recommendations li {
  margin-bottom: 8px;
}

.report-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 20px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #334155;
}

.report-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.report-header p {
  font-size: 12px;
  color: #94a3b8;
}

.export-buttons {
  display: flex;
  gap: 8px;
}

/* Buttons use global .btn styles from globals.css */

.report-summary {
  margin-bottom: 24px;
}

.report-summary h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

.status-approved {
  background-color: #22c55e;
  color: white;
}

.status-conditional {
  background-color: #fbbf24;
  color: white;
}

.status-declined {
  background-color: #ef4444;
  color: white;
}

.summary-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.summary-content h5 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #cbd5e1;
}

.summary-content ul {
  list-style: disc;
  padding-left: 20px;
  color: #94a3b8;
}

.summary-content li {
  margin-bottom: 6px;
  font-size: 14px;
}

.report-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #334155;
}

.detail-section h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #e2e8f0;
}

.detail-section p {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.recommendation {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border-left: 4px solid;
  background-color: rgba(59, 130, 246, 0.1);
}

.recommendation.priority-high {
  border-left-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.recommendation.priority-medium {
  border-left-color: #fbbf24;
  background-color: rgba(251, 191, 36, 0.1);
}

.recommendation.priority-low {
  border-left-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
}

.rec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rec-category {
  font-weight: 600;
  font-size: 14px;
}

.rec-priority {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.priority-high {
  background-color: #ef4444;
  color: white;
}

.priority-medium {
  background-color: #fbbf24;
  color: white;
}

.priority-low {
  background-color: #3b82f6;
  color: white;
}

.rec-action {
  margin-top: 8px;
  font-size: 13px;
  color: #cbd5e1;
}

/* Underwriting Form Styles */
.underwriting-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.underwriting-output-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 20px;
}

.output-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #334155;
}

.output-item:last-child {
  border-bottom: none;
}

.output-item label {
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
}

.output-value {
  font-weight: 600;
  color: #e2e8f0;
  font-size: 16px;
}

.premium-value {
  font-size: 20px;
  color: #8b5cf6;
  font-weight: 700;
}

.risk-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* FIX: Removed background highlight for readability */
.risk-badge.risk-low {
  color: #16a34a;
  font-weight: var(--font-semibold);
}

.risk-badge.risk-medium {
  color: #ca8a04;
  font-weight: var(--font-semibold);
}

.risk-badge.risk-high {
  color: #dc2626;
  font-weight: var(--font-semibold);
}

.output-notes {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #334155;
}

.output-notes h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fbbf24;
}

.output-notes ul {
  list-style: disc;
  padding-left: 20px;
  color: #cbd5e1;
}

.output-notes li {
  margin-bottom: 8px;
  font-size: 14px;
}

.job-selection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-selection label {
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
}

.job-selection select {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 14px;
}

.job-selection select:focus {
  outline: none;
  border-color: #8b5cf6;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item span {
  font-size: 16px;
  color: #e2e8f0;
  font-weight: 600;
}

.defects-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 20px;
}

.defects-summary {
  margin-bottom: 16px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-item label {
  color: #94a3b8;
  font-size: 14px;
}

.defect-count {
  font-size: 24px;
  font-weight: 700;
  color: #8b5cf6;
}

.defects-by-type h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #cbd5e1;
}

.defects-by-type ul {
  list-style: disc;
  padding-left: 20px;
  color: #94a3b8;
}

.defects-by-type li {
  margin-bottom: 4px;
}

.error-card {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 8px;
  padding: 16px;
}

.error-card h3 {
  color: #ef4444;
  margin-bottom: 8px;
}

.error-card p {
  color: #cbd5e1;
}

.loading-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.loading-card p {
  color: #94a3b8;
}

.empty-state {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
}

.empty-state p {
  color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .insurance-content-layout {
    grid-template-columns: 1fr;
  }

  .insurance-left-column,
  .insurance-middle-column,
  .insurance-right-column {
    position: static;
    max-height: none;
  }
}

@media (min-width: 1401px) {
  .insurance-content-layout {
    grid-template-columns: 300px 1fr 400px;
  }
}

.admin-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: #0f172a;
  color: #e2e8f0;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #334155;
  background-color: transparent;
  flex-shrink: 0;
  margin-bottom: 24px;
}

.admin-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.refresh-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.refresh-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.admin-content {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: #475569;
}

.stat-label {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #e2e8f0;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
}

.chart-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
}

.chart-card h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #e2e8f0;
}

.chart-container {
  height: 300px;
  position: relative;
}

@media (max-width: 768px) {
  .admin-header {
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .admin-content {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }

  .chart-container {
    height: 250px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    padding: 16px 20px;
  }
  
  .section-content {
    padding: 20px;
  }
  
  .section-title {
    font-size: 20px;
  }
}

/* New metrics sections */
.metrics-section {
  margin-bottom: 48px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px 0;
  color: #e2e8f0;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.metric-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: #475569;
}

.metric-label {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-value {
  font-size: 28px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}

.metric-detail {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.chart-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #e2e8f0;
}

/* Collapsible sections */
.collapsible-section {
  margin-bottom: 32px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #334155;
}

.section-header:hover {
  background-color: rgba(51, 65, 85, 0.3);
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #e2e8f0;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-toggle {
  font-size: 16px;
  color: #94a3b8;
  transition: transform 0.2s;
}

.section-content {
  padding: 24px;
}
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top{left:50%;top:0;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-right{right:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{left:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;overflow:hidden;padding:0;width:29px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#0000000d}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-buildings-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3.3335 11.6666C3.3335 12.5871 4.07969 13.3333 5.00016 13.3333C5.92064 13.3333 6.66683 12.5871 6.66683 11.6666L6.66683 6.66659L11.6668 6.66659C12.5873 6.66659 13.3335 5.92039 13.3335 4.99992C13.3335 4.07944 12.5873 3.33325 11.6668 3.33325H3.3335V11.6666Z' fill='currentColor'/%3E%3Cpath d='M26.6668 11.6666C26.6668 12.5871 25.9206 13.3333 25.0002 13.3333C24.0797 13.3333 23.3335 12.5871 23.3335 11.6666L23.3335 6.66659L18.3335 6.66659C17.413 6.66659 16.6668 5.92039 16.6668 4.99992C16.6668 4.07944 17.413 3.33325 18.3335 3.33325H26.6668L26.6668 11.6666Z' fill='currentColor'/%3E%3Cpath d='M13.3335 24.9999C13.3335 25.9204 12.5873 26.6666 11.6668 26.6666H3.3335V18.3333C3.3335 17.4128 4.07969 16.6666 5.00016 16.6666C5.92064 16.6666 6.66683 17.4128 6.66683 18.3333V23.3333H11.6668C12.5873 23.3333 13.3335 24.0794 13.3335 24.9999Z' fill='currentColor'/%3E%3Cpath d='M18.3335 26.6666C17.413 26.6666 16.6668 25.9204 16.6668 24.9999C16.6668 24.0794 17.413 23.3333 18.3335 23.3333H23.3335V18.3333C23.3335 17.4128 24.0797 16.6666 25.0002 16.6666C25.9206 16.6666 26.6668 17.4128 26.6668 18.3333V26.6666H18.3335Z' fill='currentColor'/%3E%3C/svg%3E");background-size:26px 26px}.mapboxgl-ctrl button.mapboxgl-ctrl-buildings-toggle.mapboxgl-ctrl-level-button-selected .mapboxgl-ctrl-icon{filter:invert(1) brightness(1)}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23000'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:#ffffff80;margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:initial;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:#ffffff80;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid #0000;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:initial;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:#0000000d}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px #00000059;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:#000000b3;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl-separator{background-color:#e0e0e0;height:1px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{color:#333;font-size:18px;font-weight:700;height:50px;width:50px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:hover{background-color:#f5f5f5}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#4a5568;color:#fff}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#2d3748}/* ============================================
   PORTFOLIO MAP - Premium Map Component
   ============================================ */

.portfolio-map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio-map-container {
  width: 100%;
  height: 380px;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-subtle);
}

.mapbox-error {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  color: var(--warning-text);
  padding: var(--space-5);
  text-align: center;
  border: 1px solid var(--border-subtle);
}

.mapbox-error p {
  margin: 0;
  font-size: var(--text-sm);
}

/* FIX: Force Mapbox popup text to black for readability on Portfolio tab */
.portfolio-map-wrapper .mapboxgl-popup-content,
.portfolio-map-wrapper .mapboxgl-popup-content * {
  color: #000 !important;
}/* ============================================
   PORTFOLIO PAGE - Premium Analytics Dashboard
   ============================================ */

.portfolio-loading,
.portfolio-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  text-align: center;
  color: var(--text-tertiary);
}

.portfolio-error .error-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
}

.portfolio-error h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--error-text);
  margin-bottom: var(--space-2);
}

/* Header */
.portfolio-header {
  margin-bottom: var(--space-6);
}

.portfolio-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.portfolio-header p {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-1) 0 0 0;
}

/* Summary Panel */
.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.summary-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Map Section */
.portfolio-map-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.portfolio-map-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* Filters */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 180px;
}

.filter-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.filter-input {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.risk-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-input-small {
  width: 80px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.filter-input-small:focus {
  outline: none;
  border-color: var(--primary-500);
}

.risk-range-inputs span {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.filter-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-500);
  cursor: pointer;
}

.toggle-label span {
  white-space: nowrap;
}

.clear-filters-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.clear-filters-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Grid Section */
.portfolio-grid-section {
  flex: 1;
}

.portfolio-grid-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.pagination-info {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.portfolio-empty {
  padding: var(--space-10);
  text-align: center;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* Property Grid */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.property-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-default);
}

.property-card:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.property-card-image-wrapper {
  position: relative;
  height: 160px;
  background: var(--bg-muted);
  overflow: hidden;
}

.property-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  font-size: 48px;
  opacity: 0.3;
}

.property-card-content {
  padding: var(--space-4);
}

.property-card-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card-location {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.property-card-location span:not(:last-child)::after {
  content: ',';
}

.property-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.meta-item label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.meta-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.feedback-badge {
  background: var(--info-bg);
  color: var(--info-text);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* FIX: Remove background highlight so risk score is readable */
.risk-score {
  font-weight: var(--font-bold);
  /* No background color - text color only for readability */
}

/* Pagination */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
}

.pagination-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-muted);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

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

.pagination-page-info {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-summary {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .property-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .portfolio-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .portfolio-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .portfolio-summary {
    grid-template-columns: 1fr;
  }
  
  .property-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   ANALYTICS PAGE - Premium Data Visualization
   ============================================ */

.analytics-container {
  width: 100%;
  /* CRITICAL: Removed height and overflow - use natural page scroll */
  padding: var(--space-6);
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Page Container */
.analytics-page {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow-x: visible; /* Allow horizontal scroll in child containers */
}

/* Header */
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

/* AI Insights Banner */
.ai-insights-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 1px solid var(--primary-900);
  border-radius: var(--radius-lg);
}

.ai-insights-icon {
  font-size: var(--text-3xl);
  line-height: 1;
  flex-shrink: 0;
}

.ai-insights-content {
  flex: 1;
}

.ai-insights-content h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.ai-insights-content p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ai-insights-content strong {
  color: var(--primary-400);
  font-weight: var(--font-semibold);
}

.analytics-header h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.analytics-header p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-md);
}

/* Analytics Content Wrapper - Enables horizontal scrolling */
.analytics-content-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Analytics Sections Grid */
.analytics-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  min-width: fit-content; /* Allow grid to expand beyond viewport */
}

/* Analytics Card */
.analytics-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  flex-direction: column;
}

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

.analytics-card-large {
  grid-column: span 2;
}

.analytics-card-title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.analytics-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Loading and Error States */
.analytics-loading,
.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  gap: var(--space-4);
}

.analytics-error {
  color: var(--error-text);
}

/* Metric Cards */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.metric-card-large {
  padding: var(--space-5);
}

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

.metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.metric-value-large {
  font-size: var(--text-4xl);
  color: var(--primary-400);
}

.metric-subtitle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

/* Chart Wrapper */
.chart-wrapper {
  position: relative;
  height: 280px;
  width: 100%;
  min-width: 0; /* Allow chart to shrink if needed */
  overflow: visible; /* Ensure chart content is visible */
}

.chart-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chart-section h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* Risk Overview */
.risk-overview-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.risk-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  min-width: 0; /* Allow grid to shrink if needed */
}

/* Ensure flex containers don't cause overflow */
.analytics-sections-grid > .flex {
  min-width: 0; /* Allow flex children to shrink */
  width: 100%;
}

.risk-chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.risk-chart-container h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.top-risky-properties {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.top-risky-properties h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.properties-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 380px;
  overflow-y: auto;
}

.property-item {
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--duration-fast) var(--ease-default);
}

.property-item:hover {
  border-color: var(--border-default);
}

.property-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.property-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-sm);
  flex: 1;
}

.property-risk {
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.property-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Operations Content */
.operations-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Financial Content */
.financial-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.trend-summary {
  padding: var(--space-3);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  color: var(--info-text);
  font-size: var(--text-sm);
  text-align: center;
}

/* Geo Mix Content */
.geo-mix-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.maintenance-backlog-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.maintenance-backlog-section h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.backlog-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 280px;
  overflow-y: auto;
}

.backlog-item {
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.backlog-item:hover {
  border-color: var(--border-default);
}

.backlog-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.backlog-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-sm);
  flex: 1;
}

.backlog-defects {
  font-weight: var(--font-semibold);
  color: var(--warning-text);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.backlog-age {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* No Data State */
.no-data {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Placeholder */
.analytics-placeholder {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
  .analytics-card-large {
    grid-column: span 1;
  }

  .risk-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analytics-container {
    padding: var(--space-4);
  }

  .analytics-header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .analytics-sections-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .analytics-card {
    padding: var(--space-4);
  }

  .metrics-row {
    grid-template-columns: 1fr;
  }

  .chart-wrapper {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .analytics-header h1 {
    font-size: var(--text-2xl);
  }

  .metric-value-large {
    font-size: var(--text-3xl);
  }

  .chart-wrapper {
    height: 200px;
  }
}
/* Marketplace Styles */

.marketplace-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem;
}

.marketplace-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.marketplace-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.marketplace-section-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
}

.marketplace-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.marketplace-filter-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  min-width: 150px;
}

.marketplace-filter-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.marketplace-refresh-btn {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}

.marketplace-refresh-btn:hover {
  background: #2563eb;
}

.marketplace-loading,
.marketplace-error,
.marketplace-empty {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.marketplace-error {
  color: #ef4444;
}

.marketplace-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.marketplace-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.25rem;
  background: white;
  transition: box-shadow 0.2s;
}

.marketplace-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.marketplace-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.marketplace-card-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.status-badge.pending {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.open {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.assigned {
  background: #e0e7ff;
  color: #3730a3;
}

.status-badge.in-progress {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.completed {
  background: #d1fae5;
  color: #065f46;
}

.status-badge.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.marketplace-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.marketplace-card-field {
  font-size: 0.875rem;
  color: #4b5563;
}

.marketplace-card-field strong {
  color: #1f2937;
  margin-right: 0.5rem;
}

.specializations-list {
  color: #3b82f6;
  font-weight: 500;
}

.marketplace-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.marketplace-card-actions-left {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.marketplace-card-actions-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.marketplace-dropdown {
  position: relative;
  display: inline-block;
}

.marketplace-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.marketplace-dropdown:hover .marketplace-dropdown-content {
  display: block;
}

.marketplace-dropdown-content button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: white;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
}

.marketplace-dropdown-content button:hover {
  background: #f3f4f6;
}

.marketplace-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.marketplace-btn.primary {
  background: #9333ea; /* bg-purple-600 */
  color: #ffffff;
  font-weight: 500;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.marketplace-btn.primary:hover:not(:disabled) {
  background: #7e22ce; /* bg-purple-700 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.marketplace-btn.primary:active:not(:disabled) {
  background: #6b21a8; /* bg-purple-800 */
  transform: translateY(0);
}

.marketplace-btn.secondary {
  background: #f3f4f6; /* bg-gray-200 */
  color: #1f2937; /* text-gray-800 - high contrast */
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid #e5e7eb; /* border-gray-200 */
}

.marketplace-btn.secondary:hover:not(:disabled) {
  background: #e5e7eb; /* bg-gray-300 */
  color: #111827; /* text-gray-900 */
  border-color: #d1d5db; /* border-gray-300 */
}

.marketplace-btn.secondary:active:not(:disabled) {
  background: #d1d5db; /* bg-gray-400 */
}

.marketplace-btn.danger {
  background: #fee2e2; /* bg-red-100 */
  color: #991b1b; /* text-red-800 - high contrast */
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid #fecaca; /* border-red-200 */
}

.marketplace-btn.danger:hover:not(:disabled) {
  background: #fecaca; /* bg-red-200 */
  color: #7f1d1d; /* text-red-900 */
  border-color: #fca5a5; /* border-red-300 */
}

.marketplace-btn.danger:active:not(:disabled) {
  background: #fca5a5; /* bg-red-300 */
}

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

.marketplace-status-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  cursor: pointer;
}

.marketplace-status-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Status badge classes */
.marketplace-status-pending {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #fef3c7;
  color: #92400e;
}

.marketplace-status-open {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #dbeafe;
  color: #1e40af;
}

.marketplace-status-assigned {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #f3f4f6;
  color: #4b5563;
}

.marketplace-status-in-progress {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #dbeafe;
  color: #1e40af;
}

.marketplace-status-completed {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #d1fae5;
  color: #065f46;
}

.marketplace-status-cancelled {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  background: #fee2e2;
  color: #991b1b;
}

/* Marketplace Modal Styles - Scoped to Marketplace modals only */
/* OUTER OVERLAY: Fixed, full-screen, flex-centered */
/* This must break out of any parent container - rendered via React Portal at document.body */
.marketplace-modal.modal-overlay {
  /* Fixed positioning to break out of all containers */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  
  /* Full viewport coverage */
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  
  /* Flexbox centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  
  /* Ensure overlay doesn't constrain child width */
  min-width: 0 !important;
  max-width: none !important;
  
  /* Visual styling */
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  
  /* Stacking and isolation */
  z-index: 9999 !important;
  isolation: isolate !important;
  
  /* Reset all positioning and layout properties */
  margin: 0 !important;
  transform: none !important;
  float: none !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  
  /* Prevent any text alignment or direction issues */
  text-align: initial !important;
  direction: ltr !important;
  
  /* Ensure no overflow or clipping */
  overflow: visible !important;
  clip: unset !important;
  clip-path: none !important;
}

/* INNER CONTENT: White background, black text, no positioning */
/* This is centered by the parent flexbox - no positioning needed */
.marketplace-modal .modal-content {
  /* Visual styling */
  background: #ffffff !important; /* bg-white */
  color: #000000 !important; /* text-black */
  border-radius: 12px; /* rounded-xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  
  /* Sizing - ensure full width up to max-width, not constrained by parent */
  max-width: 800px !important; /* max-w-[800px] */
  width: 100% !important;
  min-width: 320px !important; /* Minimum width to prevent squishing */
  max-height: 90vh !important;
  overflow-y: auto;
  
  /* Ensure width is not constrained by parent flex/grid */
  flex-basis: auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  
  /* Layout */
  display: flex !important;
  flex-direction: column;
  padding: 1.5rem 2rem; /* px-8 py-6 equivalent */
  
  /* Positioning - let parent flexbox handle centering */
  position: relative !important;
  margin: 0 !important; /* No margins - centering handled by parent flexbox */
  float: none !important;
  
  /* Alignment - ensure centered by parent */
  align-self: center !important;
  justify-self: center !important;
  
  /* Reset all positioning properties */
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  
  /* Text alignment */
  text-align: left;
  
  /* Prevent any width constraints from parent */
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .marketplace-modal.modal-overlay {
    padding: 1rem; /* Edge spacing on mobile */
  }
  
  .marketplace-modal .modal-content {
    max-width: calc(100vw - 2rem) !important; /* Account for parent padding */
    width: calc(100vw - 2rem) !important; /* Full width minus padding */
    min-width: calc(100vw - 2rem) !important; /* Prevent squishing on mobile */
    margin: 0 !important; /* Keep centered - padding handled by parent */
    padding: 1.25rem 1.5rem; /* Slightly reduced padding on mobile */
  }
}

.marketplace-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 1.5rem 0; /* Remove top/left/right padding, only bottom */
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
  flex-shrink: 0;
  background: #ffffff; /* bg-white - explicit white background */
  margin-bottom: 1.5rem; /* mb-6 equivalent */
}

.marketplace-modal .modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #000000; /* text-black */
  letter-spacing: -0.025em;
}

.marketplace-modal .modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #000000; /* text-black */
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.marketplace-modal .modal-close:hover {
  background: transparent; /* No background - clean white modal surface */
  color: #000000; /* text-black */
}

.marketplace-modal .modal-form {
  padding: 0; /* Remove padding - handled by modal-content */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 equivalent */
  flex: 1;
  overflow-y: visible; /* Let modal-content handle scrolling */
  background: #ffffff; /* bg-white - explicit white background */
}

/* Form Section Headers - Claude-inspired - Scoped to Marketplace modals */
.marketplace-modal .form-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 equivalent */
  padding: 0;
  margin-bottom: 1.5rem; /* mb-6 - spacious section spacing */
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .form-section:not(:last-child) {
  margin-bottom: 1.5rem; /* mb-6 */
  padding-bottom: 1.5rem; /* pb-6 */
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 - minimal divider */
}

.marketplace-modal .form-section:last-child {
  margin-bottom: 0;
}

.marketplace-modal .form-section-header {
  margin: 0 0 1rem 0; /* mb-4 equivalent */
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: #000000; /* text-black */
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem; /* pb-2 */
  border-bottom: 1px solid #e5e7eb; /* border-gray-200 - minimal divider */
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .modal-error {
  padding: 0.875rem 1rem;
  background: #fee2e2; /* bg-red-100 */
  color: #991b1b; /* text-red-800 - high contrast */
  border: 1px solid #fecaca; /* border-red-200 */
  border-radius: 6px; /* rounded-md */
  margin-bottom: 1.5rem; /* mb-6 - spacious */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
}

.marketplace-modal .form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .form-group label {
  display: block;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #000000; /* text-black */
  margin-bottom: 0.375rem;
  letter-spacing: 0;
}

.marketplace-modal .form-group small {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: #6b7280; /* text-gray-500 - Claude-inspired: readable but secondary */
  font-weight: 400;
  line-height: 1.4;
}

.marketplace-modal .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  color: #000000; /* text-black */
  font-weight: 500; /* font-medium */
  font-size: 0.875rem; /* text-sm */
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .checkbox-label:hover {
  color: #000000; /* text-black */
}

.marketplace-modal .form-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  cursor: pointer;
  accent-color: #9333ea; /* purple-600 - matches primary button */
  border-radius: 4px;
}

.marketplace-modal .form-checkbox:focus {
  outline: 2px solid #9333ea;
  outline-offset: 2px;
}

/* Textarea styling - inherit from form-input - Scoped to Marketplace modals */
.marketplace-modal textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Select element styling - match form-input - Scoped to Marketplace modals */
.marketplace-modal select.form-input {
  cursor: pointer;
  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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  appearance: none;
}

.marketplace-modal select.form-input:focus {
  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='%239333ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* View Job Modal Styles - Scoped to Marketplace modals */
.marketplace-modal .view-job-modal {
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .view-job-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .view-job-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .view-job-section h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #000000; /* text-black */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.marketplace-modal .view-job-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #ffffff; /* bg-white - explicit white background */
}

.marketplace-modal .view-job-field label {
  font-weight: 600;
  color: #000000; /* text-black */
  font-size: 0.875rem;
}

.marketplace-modal .view-job-field span {
  color: #000000; /* text-black */
  font-size: 0.9375rem;
}

.marketplace-modal .required {
  color: #dc2626; /* text-red-600 - high contrast for required indicator */
  font-weight: 600;
  margin-left: 0.125rem;
}

.marketplace-modal .form-input {
  width: 100%;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border: 1px solid #d1d5db; /* border-gray-300 - subtle border */
  border-radius: 6px; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-family: inherit;
  color: #000000; /* text-black */
  background-color: #ffffff; /* bg-white - clean white background */
  transition: all 0.15s ease;
}

.marketplace-modal .form-input::placeholder {
  color: #9ca3af; /* placeholder-gray-400 */
  opacity: 1;
}

.marketplace-modal .form-input:hover {
  border-color: #9ca3af; /* border-gray-400 */
}

.marketplace-modal .form-input:focus {
  outline: none;
  border-color: #9333ea; /* focus:border-purple-500 */
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.1); /* focus:ring-2 focus:ring-purple-100 */
}

.marketplace-modal .form-input:disabled {
  background-color: #ffffff; /* bg-white - clean white background */
  color: #9ca3af; /* text-gray-400 - lighter gray for disabled text */
  cursor: not-allowed;
  border-color: #e5e7eb; /* border-gray-200 */
  opacity: 0.6; /* Visual indicator for disabled state */
}

.marketplace-modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
  gap: 1.5rem; /* gap-6 */
  background: #ffffff; /* bg-white - explicit white background */
}

@media (max-width: 768px) {
  .marketplace-modal .form-row {
    grid-template-columns: 1fr; /* grid-cols-1 on mobile */
    gap: 1.5rem; /* gap-6 - maintain spacing */
  }
}

.marketplace-modal .form-loading,
.marketplace-modal .form-empty {
  padding: 0.5rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.marketplace-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem; /* mt-6 - spacious */
  padding-top: 1.5rem; /* pt-6 */
  border-top: 1px solid #e5e7eb; /* border-gray-200 - minimal divider */
  flex-shrink: 0;
  background: #ffffff; /* bg-white - explicit white background */
}


.modal-actions .marketplace-btn {
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  min-width: 100px;
}

/* BOM Item Card Styles - Clean white background - Scoped to Marketplace modals */
.marketplace-modal .bom-item-card {
  padding: 1.5rem;
  border: 1px solid #e5e7eb; /* border-gray-200 - minimal border */
  border-radius: 8px; /* rounded-md */
  background: #ffffff; /* bg-white - clean white background */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 - spacious */
  margin-bottom: 1.5rem; /* mb-6 */
  transition: all 0.15s ease;
}

.marketplace-modal .bom-item-card:hover {
  border-color: #d1d5db; /* border-gray-300 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow - minimal */
}

.marketplace-modal .bom-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #000000; /* text-black */
}

.marketplace-modal .bom-item-total {
  margin-top: 0;
  padding: 0.875rem 1rem;
  background: #ffffff; /* bg-white - clean white background */
  border: 1px solid #e5e7eb; /* border-gray-200 - minimal border */
  border-radius: 6px; /* rounded-md */
  font-size: 0.9375rem;
  font-weight: 600;
  color: #000000; /* text-black */
}

/* Responsive */
@media (max-width: 768px) {
  .marketplace-list {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .marketplace-section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================
   MARKETPLACE PAGE - Premium Contractor Hub
   ============================================ */

.marketplace-page {
  width: 100%;
  min-height: 100%;
}

.marketplace-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.marketplace-page-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.marketplace-page-actions {
  display: flex;
  gap: var(--space-2);
}

.marketplace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  border: 1px solid transparent;
}

.marketplace-btn.primary {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}

.marketplace-btn.primary:hover {
  background: var(--primary-400);
  border-color: var(--primary-400);
}

.marketplace-btn.secondary {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.marketplace-btn.secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.marketplace-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Job and Contractor List Cards */
.marketplace-list-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.marketplace-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.marketplace-list-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.marketplace-list-count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  background: var(--bg-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.marketplace-list-content {
  max-height: 600px;
  overflow-y: auto;
}

.marketplace-list-empty {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
}

.marketplace-list-empty-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

/* Job Item */
.marketplace-job-item,
.marketplace-contractor-item {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-default);
}

.marketplace-job-item:hover,
.marketplace-contractor-item:hover {
  background: var(--bg-muted);
}

.marketplace-job-item:last-child,
.marketplace-contractor-item:last-child {
  border-bottom: none;
}

.marketplace-job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.marketplace-job-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.marketplace-job-status {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.marketplace-job-status.open {
  background: var(--success-bg);
  color: var(--success-text);
}

.marketplace-job-status.assigned {
  background: var(--info-bg);
  color: var(--info-text);
}

.marketplace-job-status.completed {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

.marketplace-job-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.marketplace-job-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.marketplace-job-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Contractor Item */
.marketplace-contractor-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.marketplace-contractor-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: white;
  flex-shrink: 0;
}

.marketplace-contractor-name {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.marketplace-contractor-company {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.marketplace-contractor-specialty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.marketplace-contractor-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--warning-text);
}

/* Modal Overlay */
.marketplace-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-6);
}

.marketplace-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.marketplace-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.marketplace-modal-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.marketplace-modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.marketplace-modal-close:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

.marketplace-modal-body {
  padding: var(--space-5);
  overflow-y: auto;
}

.marketplace-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* Form in Modal */
.marketplace-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.marketplace-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.marketplace-form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.marketplace-form-group input,
.marketplace-form-group select,
.marketplace-form-group textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.marketplace-form-group input:focus,
.marketplace-form-group select:focus,
.marketplace-form-group textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

/* Responsive */
@media (max-width: 1024px) {
  .marketplace-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .marketplace-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .marketplace-page-actions {
    width: 100%;
  }
  
  .marketplace-btn {
    flex: 1;
  }
}
/* ============================================
   JULIA PAGE - Premium AI Chat Interface
   ============================================ */

.julia-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Full width - remove max-width constraint for modern layout */
  max-width: 1000px;
  margin: 0 auto;
}

.julia-page-header {
  margin-bottom: var(--space-5);
}

.julia-page-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.julia-page-subtitle {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-1) 0 0 0;
}

.julia-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 500px; /* Ensure usable chat height */
}

/* Example Queries */
.julia-chat-examples {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.julia-examples-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.julia-examples-icon {
  font-size: var(--text-lg);
}

.julia-examples-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.julia-examples-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.julia-example-query {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.julia-example-query:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.julia-example-query:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chat Messages */
.julia-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.julia-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-tertiary);
}

.julia-chat-empty p {
  margin: 0;
}

.julia-chat-empty-hint {
  font-size: var(--text-sm);
  margin-top: var(--space-2) !important;
  color: var(--text-muted);
}

.julia-message {
  display: flex;
  max-width: 85%;
}

.julia-message-user {
  align-self: flex-end;
}

.julia-message-assistant {
  align-self: flex-start;
}

.julia-message-content {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.julia-message-user .julia-message-content {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  border-bottom-right-radius: var(--radius-sm);
}

.julia-message-assistant .julia-message-content {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-bottom-left-radius: var(--radius-sm);
}

/* Typing Indicator */
.julia-typing-indicator {
  display: flex;
  gap: 4px;
  padding: var(--space-1) 0;
}

.julia-typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: var(--radius-full);
  animation: typing-bounce 1.4s infinite;
}

.julia-typing-indicator span:nth-child(1) { animation-delay: 0s; }
.julia-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.julia-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Chat Error */
.julia-chat-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--error-text);
}

/* Input Form */
.julia-chat-input-form {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.julia-chat-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-default);
}

.julia-chat-input::placeholder {
  color: var(--text-muted);
}

.julia-chat-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.julia-chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.julia-chat-send-btn {
  padding: var(--space-3) var(--space-5);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

.julia-chat-send-btn:hover:not(:disabled) {
  background: var(--primary-400);
}

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

/* Responsive */
@media (max-width: 768px) {
  .julia-page {
    padding: var(--space-4);
  }
  
  .julia-message {
    max-width: 90%;
  }
  
  .julia-examples-list {
    flex-direction: column;
  }
  
  .julia-example-query {
    width: 100%;
    text-align: left;
  }
}


/* ============================================
   JULIA DESIGN SYSTEM v2.0
   Premium Enterprise SaaS
   ============================================
   
   Table of Contents:
   1. DESIGN TOKENS
      1.1 Spacing Scale
      1.2 Typography
      1.3 Color Palette
      1.4 Border Radius
      1.5 Shadows & Elevation
      1.6 Transitions
      1.7 Z-Index Scale
      1.8 Layout
   2. BASE RESET & DEFAULTS
   3. TYPOGRAPHY STYLES
   4. COMPONENT LIBRARY
      4.1 Buttons
      4.2 Form Elements
      4.3 Cards
      4.4 Tables
      4.5 Badges
      4.6 Modals
      4.7 Alerts & Messages
      4.8 Tabs & Navigation
   5. SIDEBAR NAVIGATION
   6. MAIN CONTENT AREA
   7. LOADING STATES
   8. UTILITY CLASSES
   9. RESPONSIVE BREAKPOINTS
   
   ============================================ */
/* ============================================
   1. DESIGN TOKENS
   ============================================ */
/* Import premium fonts */
:root {
  /* ========== 1.1 SPACING SCALE (4px base) ========== */
  --space-0: 0;
  --space-1: 4px;    /* xs */
  --space-2: 8px;    /* sm */
  --space-3: 12px;   /* md */
  --space-4: 16px;   /* base */
  --space-5: 20px;   /* lg */
  --space-6: 24px;   /* xl */
  --space-7: 28px;
  --space-8: 32px;   /* 2xl */
  --space-10: 40px;  /* 3xl */
  --space-12: 48px;  /* 4xl */
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========== 1.2 TYPOGRAPHY ========== */
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  
  /* Font Sizes - H1 through Caption */
  --text-h1: 36px;     /* H1 - Page titles */
  --text-h2: 28px;     /* H2 - Section headers */
  --text-h3: 24px;     /* H3 - Card headers */
  --text-h4: 20px;     /* H4 - Subsection headers */
  --text-h5: 18px;     /* H5 - Minor headers */
  --text-h6: 16px;     /* H6 - Small headers */
  --text-body: 14px;   /* Body text */
  --text-body-lg: 16px;/* Large body text */
  --text-caption: 12px;/* Captions, labels */
  --text-tiny: 11px;   /* Badges, tiny labels */
  
  /* Legacy aliases for backward compatibility */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  --text-5xl: 36px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* 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-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ========== 1.3 COLOR PALETTE ========== */
  
  /* Neutrals - Dark Theme Base */
  --neutral-50: #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;
  --neutral-950: #0a0a0b;
  
  /* Background Colors */
  --bg-base: var(--neutral-950);
  --bg-surface: #111113;
  --bg-elevated: var(--neutral-900);
  --bg-muted: #1f1f23;
  --bg-subtle: var(--neutral-800);
  --bg-hover: #2e2e33;
  --bg-active: var(--neutral-700);
  
  /* Text Colors */
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-400);
  --text-tertiary: var(--neutral-500);
  --text-muted: var(--neutral-600);
  --text-disabled: var(--neutral-700);
  
  /* Border Colors */
  --border-subtle: var(--neutral-800);
  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-600);
  --border-focus: var(--primary-500);
  
  /* Primary Color - Violet */
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  
  /* Secondary Color - Indigo */
  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;
  
  /* Accent colors - Legacy aliases */
  --accent-1: #2e1065;
  --accent-2: #4c1d95;
  --accent-3: #5b21b6;
  --accent-4: #6d28d9;
  --accent-5: #7c3aed;
  --accent-6: #8b5cf6;
  --accent-7: #a78bfa;
  --accent-8: #c4b5fd;
  --accent-9: #ddd6fe;
  
  /* Success - Green */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;
  
  --success-bg: rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.3);
  --success-text: #4ade80;
  --success-solid: #22c55e;
  
  /* Warning - Amber */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;
  
  --warning-bg: rgba(251, 191, 36, 0.1);
  --warning-border: rgba(251, 191, 36, 0.3);
  --warning-text: #fbbf24;
  --warning-solid: #f59e0b;
  
  /* Error - Red */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;
  
  --error-bg: rgba(239, 68, 68, 0.1);
  --error-border: rgba(239, 68, 68, 0.3);
  --error-text: #f87171;
  --error-solid: #ef4444;
  
  /* Info - Blue */
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;
  
  --info-bg: rgba(59, 130, 246, 0.1);
  --info-border: rgba(59, 130, 246, 0.3);
  --info-text: #60a5fa;
  --info-solid: #3b82f6;

  /* ========== 1.4 BORDER RADIUS ========== */
  --radius-none: 0;
  --radius-xs: 4px;      /* Small elements */
  --radius-sm: 6px;      /* Buttons, inputs */
  --radius-md: 8px;      /* Cards, modals */
  --radius-lg: 12px;     /* Large cards */
  --radius-xl: 16px;     /* Extra large */
  --radius-2xl: 20px;    /* Huge containers */
  --radius-full: 9999px; /* Pills, circles */

  /* ========== 1.5 SHADOWS & ELEVATION ========== */
  /* Subtle - Barely visible, for layering */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  
  /* Medium - Standard cards, dropdowns */
  --shadow-sm: 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);
  
  /* Strong - Modals, popovers */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  
  /* Glow effects */
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);
  --shadow-glow-strong: 0 0 30px rgba(139, 92, 246, 0.25);
  --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.15);
  --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.15);

  /* ========== 1.6 TRANSITIONS ========== */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-slower: 300ms;
  --duration-slowest: 500ms;
  
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== 1.7 Z-INDEX SCALE ========== */
  --z-base: 0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* ========== 1.8 LAYOUT ========== */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;
  --max-content-width: 1440px;
  --content-width-sm: 640px;
  --content-width-md: 768px;
  --content-width-lg: 1024px;
  --content-width-xl: 1280px;
  
  /* Gutters */
  --gutter-xs: var(--space-2);
  --gutter-sm: var(--space-4);
  --gutter-md: var(--space-6);
  --gutter-lg: var(--space-8);
  --gutter-xl: var(--space-12);
}
/* ============================================
   2. BASE RESET & DEFAULTS
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* CRITICAL: Allow body to scroll naturally - single scrollbar on the right */
  overflow-x: hidden;
  overflow-y: auto;
}
#root {
  width: 100%;
  min-height: 100%;
}
/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}
/* Selection */
::selection {
  background: var(--primary-500);
  color: white;
}
/* ============================================
   3. TYPOGRAPHY STYLES
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
h1 { 
  font-size: var(--text-h1); 
  margin-bottom: var(--space-6); 
}
h2 { 
  font-size: var(--text-h2); 
  margin-bottom: var(--space-5); 
}
h3 { 
  font-size: var(--text-h3); 
  margin-bottom: var(--space-4); 
}
h4 { 
  font-size: var(--text-h4); 
  margin-bottom: var(--space-3); 
}
h5 { 
  font-size: var(--text-h5); 
  margin-bottom: var(--space-3); 
}
h6 { 
  font-size: var(--text-h6); 
  margin-bottom: var(--space-2); 
}
p {
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
a {
  color: var(--primary-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
  color: var(--primary-300);
}
small, .text-caption {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}
code, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-elevated);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
/* ============================================
   4. COMPONENT LIBRARY
   ============================================ */
/* ========== 4.1 BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
/* Button - Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* Button - Primary */
.btn-primary {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-400);
  border-color: var(--primary-400);
}
.btn-primary:active:not(:disabled) {
  background: var(--primary-600);
  border-color: var(--primary-600);
}
/* Button - Secondary */
.btn-secondary {
  background: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.btn-secondary:active:not(:disabled) {
  background: var(--bg-active);
}
/* Button - Success */
.btn-success {
  background: var(--success-500);
  color: white;
  border-color: var(--success-500);
}
.btn-success:hover:not(:disabled) {
  background: var(--success-400);
  border-color: var(--success-400);
}
.btn-success:active:not(:disabled) {
  background: var(--success-600);
  border-color: var(--success-600);
}
/* Button - Warning */
.btn-warning {
  background: var(--warning-500);
  color: var(--neutral-900);
  border-color: var(--warning-500);
}
.btn-warning:hover:not(:disabled) {
  background: var(--warning-400);
  border-color: var(--warning-400);
}
.btn-warning:active:not(:disabled) {
  background: var(--warning-600);
  border-color: var(--warning-600);
}
/* Button - Danger */
.btn-danger {
  background: var(--error-500);
  color: white;
  border-color: var(--error-500);
}
.btn-danger:hover:not(:disabled) {
  background: var(--error-400);
  border-color: var(--error-400);
}
.btn-danger:active:not(:disabled) {
  background: var(--error-600);
  border-color: var(--error-600);
}
/* Button - Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.btn-ghost:active:not(:disabled) {
  background: var(--bg-subtle);
}
/* Button - Outline */
.btn-outline {
  background: transparent;
  color: var(--primary-400);
  border-color: var(--primary-500);
}
.btn-outline:hover:not(:disabled) {
  background: var(--primary-500);
  color: white;
}
/* Button Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}
.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}
.btn-xl {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
}
/* Button - Full Width */
.btn-full {
  width: 100%;
}
/* Button - Icon Only */
.btn-icon {
  padding: var(--space-2);
  width: 36px;
  height: 36px;
}
.btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  padding: var(--space-1);
}
.btn-icon.btn-lg {
  width: 44px;
  height: 44px;
  padding: var(--space-3);
}
/* ========== 4.2 FORM ELEMENTS ========== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}
.form-label.required::after {
  content: ' *';
  color: var(--error-text);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}
/* Input - Hover */
.form-input:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus),
.form-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}
/* Input - Focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
/* Input - Disabled */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-muted);
}
/* Input - Error */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--error-solid);
}
.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
/* Input - Success */
.form-input.success,
.form-select.success,
.form-textarea.success {
  border-color: var(--success-solid);
}
.form-input.success:focus,
.form-select.success:focus,
.form-textarea.success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}
/* Select */
.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}
/* Checkbox & Radio */
.form-checkbox,
.form-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-500);
  cursor: pointer;
}
/* Form Helper Text */
.form-helper {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}
.form-error {
  font-size: var(--text-xs);
  color: var(--error-text);
  margin-top: var(--space-1);
}
/* Input Sizes */
.form-input-sm,
.form-select-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}
.form-input-lg,
.form-select-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
}
/* ========== 4.3 CARDS ========== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--duration-fast) var(--ease-default);
}
.card:hover {
  border-color: var(--border-default);
}
.card-interactive:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.card-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.card-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}
.card-change {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.card-change.positive { color: var(--success-text); }
.card-change.negative { color: var(--error-text); }
.card-body {
  flex: 1;
}
.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
/* Summary Cards Grid */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--duration-fast) var(--ease-default);
}
.summary-card:hover {
  border-color: var(--border-default);
  transform: translateY(-1px);
}
/* Chart Cards */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.chart-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}
.chart-container {
  position: relative;
  height: 280px;
}
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
/* ========== 4.4 TABLES ========== */
.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  background: var(--bg-elevated);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.table td {
  color: var(--text-primary);
}
.table tbody tr:hover {
  background: var(--bg-muted);
}
.table tbody tr:last-child td {
  border-bottom: none;
}
/* Table Striped */
.table-striped tbody tr:nth-child(even) {
  background: var(--bg-elevated);
}
/* Table Compact */
.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}
/* ========== 4.5 BADGES ========== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  white-space: nowrap;
}
/* Badge Variants */
.badge-default {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
.badge-primary {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-400);
}
.badge-secondary {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}
.badge-success {
  background: var(--success-bg);
  color: var(--success-text);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}
.badge-danger,
.badge-error {
  background: var(--error-bg);
  color: var(--error-text);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info-text);
}
/* Legacy badges */
.beta-badge,
.enterprise-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.beta-badge {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}
.enterprise-badge {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}
.nav-item.active .beta-badge,
.nav-item.active .enterprise-badge {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}
.status-excellent { background: var(--success-bg); color: var(--success-text); }
.status-good { background: var(--info-bg); color: var(--info-text); }
.status-fair { background: var(--warning-bg); color: var(--warning-text); }
.status-poor { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.status-critical { background: var(--error-bg); color: var(--error-text); }
/* ========== 4.6 MODALS ========== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-6);
  animation: fadeIn var(--duration-normal) var(--ease-default);
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
  animation: slideUp var(--duration-slow) var(--ease-spring);
}
.modal-sm { max-width: 400px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1000px; }
.modal-full { max-width: 95vw; max-height: 95vh; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}
.modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}
.modal-close:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.modal-body {
  padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ========== 4.7 ALERTS & MESSAGES ========== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  animation: slideDown var(--duration-normal) var(--ease-default);
}
.alert-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
.alert-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}
.alert-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}
.alert-info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}
/* Legacy aliases */
.error-message { 
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.success-message {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.info-message {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.warning-message {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.alert-icon,
.error-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.alert-content,
.error-text {
  flex: 1;
  line-height: var(--leading-normal);
}
.alert-close,
.error-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--text-xl);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  transition: opacity var(--duration-fast);
}
.alert-close:hover,
.error-close:hover {
  opacity: 1;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ========== 4.8 TABS & NAVIGATION ========== */
.tabs-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tabs-list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}
.tab-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  margin-bottom: -1px;
}
.tab-button:hover:not(.active) {
  color: var(--text-secondary);
  background: var(--bg-muted);
}
.tab-button.active {
  color: var(--primary-400);
  border-bottom-color: var(--primary-500);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
/* ============================================
   5. SIDEBAR NAVIGATION
   ============================================ */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-fixed);
  transition: width var(--duration-slow) var(--ease-default);
}
.logo {
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: var(--tracking-tight);
  border-bottom: 1px solid var(--border-subtle);
}
.tabs {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  flex: 1;
  overflow-y: auto;
  gap: var(--space-1);
}
.nav-item,
.sidebar .tab-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}
.nav-item:hover,
.sidebar .tab-button:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}
.nav-item.active,
.sidebar .tab-button.active {
  background: var(--primary-900);
  color: var(--text-primary);
}
.nav-item.active:hover,
.sidebar .tab-button.active:hover {
  background: var(--primary-800);
}
/* User Profile Section */
.user-profile {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3);
  margin-top: auto;
}
.user-credits-bar {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.credits-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.credits-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: block;
  margin-top: var(--space-1);
}
.credits-value.unlimited {
  color: var(--warning-text);
}
.credits-progress-mini {
  width: 100%;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  overflow: hidden;
}
.credits-progress-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}
.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default);
}
.user-info:hover {
  background: var(--bg-muted);
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: white;
  flex-shrink: 0;
}
.user-details {
    flex: 1;
  min-width: 0;
}
.user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
/* Plan Badges */
.user-role.plan-badge-blue,
.user-role.plan-badge-purple,
.user-role.plan-badge-gold,
.user-role.plan-badge-gray {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.user-role.plan-badge-blue {
  background: var(--info-bg);
  color: var(--info-text);
}
.user-role.plan-badge-purple {
  background: rgba(168, 85, 247, 0.15);
  color: var(--primary-400);
}
.user-role.plan-badge-gold {
  background: var(--warning-bg);
  color: var(--warning-text);
}
.user-role.plan-badge-gray {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
/* ============================================
   6. MAIN CONTENT AREA
   ============================================ */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-base);
  /* CRITICAL: No overflow - let body scroll naturally */
}
.content-area {
  padding: var(--space-6);
    width: 100%;
  /* CRITICAL: Full width layout - remove max-width constraint for flexibility */
  }
/* Page Header */
.header {
  margin-bottom: var(--space-6);
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  }
.welcome-text h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.welcome-text p {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-1) 0 0 0;
}
.user-info-text {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
  margin-top: var(--space-2) !important;
}
.user-role-badge {
  color: var(--primary-400);
  font-weight: var(--font-medium);
  }
.header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* ============================================
   7. LOADING STATES
   ============================================ */
.spinner,
.loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-top-color: var(--primary-500);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
.spinner-xs { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-md { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-xl { width: 40px; height: 40px; border-width: 3px; }
@keyframes spin {
  to { transform: rotate(360deg); }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text {
  height: 1em;
  margin: var(--space-2) 0;
}
.skeleton-title {
  height: 1.5em;
  width: 60%;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}
.skeleton-button {
  height: 36px;
  width: 100px;
}
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}
.empty-state-icon {
  font-size: 56px;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.empty-state-description {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  max-width: 400px;
  margin: 0 auto;
}
/* ============================================
   8. UTILITY CLASSES
   ============================================ */
/* Flexbox */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }
/* Grid */
.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); }
/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
/* Spacing - Gaps */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* Spacing - Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.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-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
/* Spacing - Margin */
.m-0 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.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); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* Text */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-error { color: var(--error-text); }
.text-info { color: var(--info-text); }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Visibility */
.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Borders */
.border { border: 1px solid var(--border-default); }
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.border-l { border-left: 1px solid var(--border-subtle); }
.border-r { border-right: 1px solid var(--border-subtle); }
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
/* Background */
.bg-base { background-color: var(--bg-base); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-muted { background-color: var(--bg-muted); }
/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
/* Transitions */
.transition { transition: all var(--duration-fast) var(--ease-default); }
.transition-colors { transition: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default); }
/* ============================================
   9. RESPONSIVE BREAKPOINTS
   ============================================ */
/* 
   Breakpoints:
   - sm: 640px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1536px
*/
@media (max-width: 1280px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }
  
  body {
    flex-direction: column;
    overflow-y: auto;
  }
  
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-2);
    gap: var(--space-1);
  }
  
  .nav-item,
  .sidebar .tab-button {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .user-profile {
    display: none;
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .content-area {
    padding: var(--space-4);
  }
  
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .header-top {
  flex-direction: column;
    align-items: stretch;
}

  .header-actions {
  width: 100%;
}

  .header-actions .btn {
    flex: 1;
  }
  
  /* Modal responsive */
  .modal {
    max-width: 100%;
    margin: var(--space-4);
    max-height: calc(100vh - var(--space-8));
  }
  
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .welcome-text h1 {
    font-size: var(--text-2xl);
  }
  
  .content-area {
    padding: var(--space-3);
  }
  
  .card,
  .summary-card,
  .chart-card {
    padding: var(--space-4);
  }
  
  .card-value {
    font-size: var(--text-2xl);
  }
  
  .btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}
/* ============================================
   LAYOUT - Dashboard & Page Specific Styles
   Uses Julia Design System tokens
   ============================================ */

/* ========== PAGE SECTIONS ========== */

.page-section,
.job-info-section,
.upload-section,
.results-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.page-section h2,
.job-info-section h2,
.upload-section h2,
.results-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ========== FORM ROW ========== */

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* ========== UPLOAD AREA ========== */

.upload-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-default);
}

.upload-area:hover {
  border-color: var(--primary-500);
  background: var(--bg-muted);
}

.upload-area.dragging {
  border-color: var(--primary-400);
  background: rgba(168, 85, 247, 0.05);
}

.upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.upload-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.analyze-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.analyze-button {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-semibold);
}

.analyze-hint {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ========== PROCESSING INDICATOR ========== */

.processing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--info-text);
  font-size: var(--text-sm);
}

/* ========== FILE INPUT ========== */

.file-input-wrapper {
  flex: 1;
}

.file-input {
  display: none;
}

.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-500);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--duration-fast) var(--ease-default);
}

.file-label:hover {
  background: var(--primary-400);
}

.file-label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.file-name {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-left: var(--space-3);
}

/* ========== RISK SUMMARY CARD ========== */

.risk-summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.risk-summary-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.risk-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.risk-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.metric-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.urgency-low { color: var(--success-text); }
.urgency-moderate { color: var(--warning-text); }
.urgency-high { color: #fb923c; }
.urgency-critical { color: var(--error-text); }

/* ========== IMAGES GRID ========== */

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: var(--space-5);
}

.image-result-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-default);
}

.image-result-card:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
}

/* ========== RESULT IMAGE ========== */

.image-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: none;
}

.image-section.active {
  display: block;
}

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

.result-image {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

/* ========== DEFECT LIST ========== */

.defect-list-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.defect-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.defect-item:hover {
  border-color: var(--primary-500);
  background: var(--bg-muted);
}

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

.defect-count {
  background: var(--primary-500);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

/* ========== EDITOR MODAL ========== */

.editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-6);
}

.editor-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-width: 95vw;
  max-height: 95vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.editor-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.editor-modal-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.close-button {
  background: none;
  border: none;
  font-size: var(--text-3xl);
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.close-button:hover {
  background: var(--bg-muted);
  color: var(--text-primary);
}

/* ========== PROPERTY DETAILS ========== */

.property-details-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.property-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.property-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.property-detail-value {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* ========== AUTOCOMPLETE DROPDOWN ========== */

.address-search-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
  box-shadow: var(--shadow-lg);
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-default);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background: var(--bg-muted);
}

.autocomplete-item.selected {
  background: var(--bg-subtle);
}

.autocomplete-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.autocomplete-details {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.autocomplete-loading,
.autocomplete-empty {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ========== TAB CONTENT ========== */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ========== DIVIDERS ========== */

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-5) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--border-subtle);
  margin: 0 var(--space-4);
}

/* ========== DATA LIST ========== */

.data-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.data-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.data-list-item:last-child {
  border-bottom: none;
}

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

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

/* ========== RESPONSIVE ========== */

@media (max-width: 1024px) {
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .images-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .risk-metrics {
    grid-template-columns: 1fr;
  }
  
  .upload-row {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .upload-row .form-group {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-section,
  .job-info-section,
  .upload-section,
  .results-section,
  .risk-summary-card {
    padding: var(--space-4);
  }
  
  .property-details-grid {
    grid-template-columns: 1fr;
  }
}