/* ==========================================================================
   MarchéPilot BDC — Premium Enterprise Design System
   Sleek Obsidian Velvet Glassmorphism, Native Mobile UX & Responsive Engine
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   1. Design Tokens: Dark Mode (:root) & Light Mode ([data-theme="light"])
   ========================================================================== */
:root {
  /* Theme Identity */
  --theme-mode: dark;

  /* Glassmorphism Navbar Parameters (Requested Dark Mode Spec) */
  --navbar-glass-bg: rgba(8, 12, 22, 0.1);          /* 10% opacity / 90% transparent obsidian velvet tint */
  --navbar-glass-blur: 18px;                         /* Apple-style frosted backdrop blur */
  --navbar-glass-saturate: 120%;                     /* subtle color enhancement of content sliding underneath */
  --navbar-border: rgba(255, 255, 255, 0.08);        /* subtle hairline specular highlight */
  --navbar-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);   /* ambient shadow */

  /* Surface & Base Colors */
  --bg-primary: #080c14;
  --bg-secondary: #0f172a;
  --bg-card: rgba(22, 33, 54, 0.75);
  --bg-card-hover: rgba(30, 45, 74, 0.85);
  --bg-glass: rgba(15, 23, 42, 0.65);
  --bg-input: rgba(15, 23, 42, 0.85);

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.09);
  --border-focus: rgba(59, 130, 246, 0.5);
  --border-accent: rgba(16, 185, 129, 0.3);

  /* Typography Colors */
  --text-main: #f8fafc;
  --text-heading: #ffffff;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Vibrant Accents */
  --accent-blue: #3b82f6;
  --accent-blue-hover: #60a5fa;
  --accent-blue-glow: rgba(59, 130, 246, 0.25);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.2);
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-purple: #8b5cf6;

  /* Geometry & Shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px -4px var(--accent-blue-glow);

  /* Fonts */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  /* Table & UI */
  --table-head-bg: rgba(15, 23, 42, 0.6);
  --table-row-hover: rgba(255, 255, 255, 0.035);
  --table-border: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] {
  /* Theme Identity */
  --theme-mode: light;

  /* Glassmorphism Navbar Parameters (Requested Light Mode Spec) */
  --navbar-glass-bg: rgba(255, 255, 255, 0.1);      /* 10% opacity / 90% transparent crisp white tint */
  --navbar-glass-blur: 18px;
  --navbar-glass-saturate: 120%;
  --navbar-border: rgba(203, 213, 225, 0.6);
  --navbar-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);

  /* Surface & Base Colors */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(248, 250, 252, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-input: #ffffff;

  /* Borders & Dividers */
  --border-subtle: rgba(226, 232, 240, 0.9);
  --border-card: rgba(226, 232, 240, 0.95);
  --border-focus: rgba(37, 99, 235, 0.5);
  --border-accent: rgba(16, 185, 129, 0.4);

  /* Typography Colors */
  --text-main: #0f172a;
  --text-heading: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* Vibrant Accents */
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-glow: rgba(37, 99, 235, 0.15);
  --accent-emerald: #059669;
  --accent-emerald-glow: rgba(5, 150, 105, 0.15);
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  --accent-purple: #7c3aed;

  /* Geometry & Shadows */
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 12px 32px -4px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 24px -4px var(--accent-blue-glow);

  /* Table & UI */
  --table-head-bg: #f1f5f9;
  --table-row-hover: rgba(241, 245, 249, 0.8);
  --table-border: #e2e8f0;
}

/* ==========================================================================
   2. Reset & Global Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(59, 130, 246, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(16, 185, 129, 0.05) 0%, transparent 45%);
  background-attachment: fixed;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

[data-theme="light"] body {
  background-image: 
    radial-gradient(circle at 12% 15%, rgba(59, 130, 246, 0.04) 0%, transparent 42%),
    radial-gradient(circle at 88% 85%, rgba(16, 185, 129, 0.03) 0%, transparent 45%);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.08rem; }

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

/* Main Container */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  flex: 1;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

/* ==========================================================================
   3. Glassmorphic Sticky Header Navbar (Desktop & Mobile Topbar)
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navbar-glass-bg);
  backdrop-filter: blur(var(--navbar-glass-blur)) saturate(var(--navbar-glass-saturate));
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(var(--navbar-glass-saturate));
  border-bottom: 1px solid var(--navbar-border);
  box-shadow: var(--navbar-shadow);
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-heading);
  text-decoration: none !important;
  letter-spacing: -0.02em;
}

.brand-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.brand-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand-logo-img {
  transform: scale(1.08) rotate(-2deg);
}

.auth-logo-img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
  margin-bottom: 0.75rem;
  transition: transform 0.3s ease;
}

.auth-logo-img:hover {
  transform: scale(1.05);
}

/* Radar & Scanner Visual Components */
.dashboard-radar-banner {
  margin-bottom: 2rem;
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.75));
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.radar-visual-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(15, 23, 42, 0.7) 80%);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.25);
}

.radar-animated-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}

.scanner-banner-card {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
}

.scanner-visual-wrap {
  width: 160px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px;
}

.scanner-animated-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}

.ai-hud-scanner-wrap {
  width: 180px;
  height: 55px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  padding: 4px 8px;
  overflow: hidden;
}

.ai-hud-scanner-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-badge {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-emerald));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.nav-link {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: var(--text-heading);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
}

.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(29, 78, 216, 0.85));
  box-shadow: 0 2px 10px var(--accent-blue-glow);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-company-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="light"] .theme-toggle-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.theme-toggle-btn:hover {
  transform: rotate(15deg) scale(1.08);
  background: rgba(255, 255, 255, 0.12);
}

.btn-icon-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
  font-size: 1.05rem;
}

/* ==========================================================================
   4. Native Mobile Sticky Bottom Navigation Bar
   ========================================================================== */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none; /* hidden on PC/desktop */
  background: var(--navbar-glass-bg);
  backdrop-filter: blur(var(--navbar-glass-blur)) saturate(var(--navbar-glass-saturate));
  -webkit-backdrop-filter: blur(var(--navbar-glass-blur)) saturate(var(--navbar-glass-saturate));
  border-top: 1px solid var(--navbar-border);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.08);
  padding-top: 0.45rem;
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.25rem 0.1rem;
  color: var(--text-muted);
  text-decoration: none !important;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.tab-item .tab-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-item:active .tab-icon {
  transform: scale(0.88);
}

.tab-item.active {
  color: var(--accent-blue);
}

.tab-item.active .tab-icon {
  transform: translateY(-2px);
}

/* ==========================================================================
   5. Mobile "Plus" Drawer Modal (Native Bottom Sheet)
   ========================================================================== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drawer-overlay.active {
  opacity: 1;
}

.mobile-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-card);
  border-radius: 22px 22px 0 0;
  padding: 0.8rem 1.25rem max(1.75rem, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: block !important;
}

.mobile-drawer.active {
  transform: translateY(0);
}

.drawer-handle {
  width: 42px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto 1rem;
}

[data-theme="light"] .drawer-handle {
  background: rgba(0, 0, 0, 0.2);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1rem;
}

.drawer-user-company {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 1rem;
}

.drawer-user-email {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  color: var(--text-main);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.drawer-link:hover, .drawer-link:active {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .drawer-link:hover, [data-theme="light"] .drawer-link:active {
  background: rgba(0, 0, 0, 0.05);
}

.drawer-link.active {
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

.drawer-link-danger {
  color: var(--accent-rose) !important;
}

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

.drawer-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.5rem 0;
}

/* ==========================================================================
   6. Buttons & Interactive Elements
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.btn-success:hover {
  background: linear-gradient(135deg, #10b981, #059669);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
}

[data-theme="light"] .btn-secondary {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-heading);
}

[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0;
}

.btn-danger {
  background: rgba(244, 63, 94, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

[data-theme="light"] .btn-danger {
  background: rgba(244, 63, 94, 0.1);
  color: #e11d48;
}

.btn-danger:hover {
  background: rgba(244, 63, 94, 0.25);
  color: #fff;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 0.85rem 1.6rem;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   6b. Button Loading States, Spinners & AI Processing Feedback HUD
   ========================================================================== */
.btn:disabled,
.btn[disabled],
.btn.is-loading {
  opacity: 0.72;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  position: relative;
}

.btn.is-loading {
  cursor: wait !important;
  animation: btn-loading-pulse 1.8s infinite ease-in-out;
}

@keyframes btn-loading-pulse {
  0% { opacity: 0.72; }
  50% { opacity: 0.95; }
  100% { opacity: 0.72; }
}

/* Elegant CSS Spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-secondary .spinner,
[data-theme="light"] .btn-secondary .spinner {
  border-color: rgba(148, 163, 184, 0.35);
  border-top-color: var(--accent-blue);
}

.spinner-sm {
  width: 0.85em;
  height: 0.85em;
  border-width: 1.5px;
}

.spinner-lg {
  width: 2.2rem;
  height: 2.2rem;
  border-width: 3px;
  border-color: rgba(59, 130, 246, 0.25);
  border-top-color: var(--accent-blue);
}

/* AI Global Processing HUD / Modal Overlay */
.ai-hud-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(4, 7, 14, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ai-hud-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-hud-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(59, 130, 246, 0.25);
  text-align: center;
  transform: scale(0.93) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
}

.ai-hud-overlay.active .ai-hud-card {
  transform: scale(1) translateY(0);
}

.ai-hud-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(15, 23, 42, 0.9) 70%);
  border: 2px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.35);
  position: relative;
}

.ai-hud-icon-wrap .ai-hud-icon {
  font-size: 2.2rem;
  animation: ai-hud-pulse 1.8s infinite ease-in-out;
}

@keyframes ai-hud-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.95)); }
}

.ai-hud-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
}

.ai-hud-desc {
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.ai-hud-progress-bar {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
  position: relative;
}

.ai-hud-progress-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #10b981);
  border-radius: 999px;
  transition: width 0.5s ease;
  animation: ai-progress-glow 2s infinite ease-in-out;
}

@keyframes ai-progress-glow {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

.ai-hud-status-text {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: #93c5fd;
  min-height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.2s ease;
}

.ai-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding: 0.4rem 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

[data-theme="light"] .ai-hud-overlay {
  background: rgba(15, 23, 42, 0.65);
}

[data-theme="light"] .ai-hud-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .ai-hud-title {
  color: #0f172a;
}

[data-theme="light"] .ai-hud-desc {
  color: #475569;
}

[data-theme="light"] .ai-hud-progress-bar {
  background: #e2e8f0;
}

[data-theme="light"] .ai-hud-status-text {
  color: #2563eb;
}

[data-theme="light"] .ai-hud-badge {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* ==========================================================================
   7. Cards & Surface Containers
   ========================================================================== */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-subtle);
  transition: all 0.25s ease;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .card:hover {
  border-color: #cbd5e1;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  line-height: 1.2;
}

.badge-blue { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-emerald { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-amber { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-rose { background: rgba(244, 63, 94, 0.15); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.3); }
.badge-purple { background: rgba(139, 92, 246, 0.15); color: #d8b4fe; border: 1px solid rgba(139, 92, 246, 0.3); }
.badge-gray { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); border: 1px solid var(--border-subtle); }

[data-theme="light"] .badge-blue { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; border-color: rgba(37, 99, 235, 0.25); }
[data-theme="light"] .badge-emerald { background: rgba(16, 185, 129, 0.1); color: #047857; border-color: rgba(16, 185, 129, 0.25); }
[data-theme="light"] .badge-amber { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
[data-theme="light"] .badge-rose { background: rgba(244, 63, 94, 0.1); color: #be123c; border-color: rgba(244, 63, 94, 0.25); }
[data-theme="light"] .badge-purple { background: rgba(139, 92, 246, 0.1); color: #6d28d9; border-color: rgba(139, 92, 246, 0.25); }
[data-theme="light"] .badge-gray { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* Live Countdown Timers */
.countdown-box {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.28rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--accent-emerald);
  font-size: 0.76rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.countdown-box.urgent {
  color: #fca5a5;
  border-color: rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.12);
  animation: pulse-border 2s infinite ease-in-out;
}

@keyframes pulse-border {
  0%, 100% { border-color: rgba(244, 63, 94, 0.4); }
  50% { border-color: rgba(244, 63, 94, 0.9); }
}

/* ==========================================================================
   8. Tables & Data Display
   ========================================================================== */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.table th {
  background: var(--table-head-bg);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
}

.table td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--table-border);
  font-size: 0.8rem;
  line-height: 1.4;
  vertical-align: top;
}

/* Column proportions.
   Browsers size columns from their content by default, which is why a column
   holding two short badges ("Avis Infructueux") could claim as much width as
   the one holding the full objet, and why the table then overflowed sideways
   on a desktop screen. Declaring the layout makes these widths authoritative
   and keeps the whole table inside the viewport. */
.table--results {
  table-layout: fixed;
  width: 100%;
}

.table--results th:nth-child(1), .table--results td:nth-child(1) { width: 16%; }
.table--results th:nth-child(2), .table--results td:nth-child(2) { width: 34%; }
.table--results th:nth-child(3), .table--results td:nth-child(3) { width: 17%; }
.table--results th:nth-child(4), .table--results td:nth-child(4) { width: 13%; }
.table--results th:nth-child(5), .table--results td:nth-child(5) { width: 10%; }
.table--results th:nth-child(6), .table--results td:nth-child(6) { width: 10%; }

/* Long unbroken buyer names and objets wrap instead of forcing the table wide. */
.table--results td { overflow-wrap: anywhere; }
.table--results td:nth-child(4) { white-space: nowrap; }

/* Tenders and shortlist open with the same three columns — countdown,
   reference, buyer — but diverge after that: the shortlist devotes two wide
   columns to competitive density and the AI's reasoning, while tenders carries
   only a short status badge. They therefore get separate proportions; sharing
   one set was what squeezed the AI motif into a ribbon and pushed the action
   button off the right edge. */
.table--listing,
.table--shortlist {
  table-layout: fixed;
  width: 100%;
}
.table--listing td,
.table--shortlist td { overflow-wrap: anywhere; }

/* Consultations: countdown | ref | buyer | articles | statut | actions */
.table--listing th:nth-child(1), .table--listing td:nth-child(1) { width: 13%; }
.table--listing th:nth-child(2), .table--listing td:nth-child(2) { width: 28%; }
.table--listing th:nth-child(3), .table--listing td:nth-child(3) { width: 24%; }
.table--listing th:nth-child(4), .table--listing td:nth-child(4) { width: 10%; }
.table--listing th:nth-child(5), .table--listing td:nth-child(5) { width: 12%; }
.table--listing th:nth-child(6), .table--listing td:nth-child(6) { width: 13%; }

/* Shortlist: countdown | ref | buyer | concurrence | motif IA | actions.
   The countdown is tightened and the actions reduced to icons, which returns
   that width to the two columns carrying the reading: the consultation itself
   and the AI's reasoning. */
.table--shortlist th:nth-child(1), .table--shortlist td:nth-child(1) { width: 9%; }
.table--shortlist th:nth-child(2), .table--shortlist td:nth-child(2) { width: 26%; }
.table--shortlist th:nth-child(3), .table--shortlist td:nth-child(3) { width: 20%; }
.table--shortlist th:nth-child(4), .table--shortlist td:nth-child(4) { width: 13%; }
.table--shortlist th:nth-child(5), .table--shortlist td:nth-child(5) { width: 23%; }
.table--shortlist th:nth-child(6), .table--shortlist td:nth-child(6) { width: 9%; }

/* Row actions as icons.
   Three labelled buttons could not fit the column, so the table scrolled
   sideways to accommodate them. The icon carries the meaning — an eye, a bulb,
   a cross — and the label stays in the markup for the tooltip, for screen
   readers, and for the phone layout below, where each row becomes a card and
   there is room for words again. */
.action-icons {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.btn-icon {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  line-height: 1;
  min-width: 0;
}

.btn-icon .action-label {
  /* Hidden from sight, still read aloud and still found by in-page search. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The action button must stay on one line and inside its column. */
.table--listing td:last-child .btn,
.table--shortlist td:last-child .btn { white-space: nowrap; }

/* my-bids: two amount columns that must not wrap mid-number. */
.table--bids {
  table-layout: fixed;
  width: 100%;
}
.table--bids td { overflow-wrap: anywhere; }
.table--bids th:nth-child(1), .table--bids td:nth-child(1) { width: 17%; }
.table--bids th:nth-child(2), .table--bids td:nth-child(2) { width: 30%; }
.table--bids th:nth-child(3), .table--bids td:nth-child(3) { width: 14%; }
.table--bids th:nth-child(4), .table--bids td:nth-child(4) { width: 17%; }
.table--bids th:nth-child(5), .table--bids td:nth-child(5) { width: 11%; }
.table--bids th:nth-child(6), .table--bids td:nth-child(6) { width: 11%; }


.table tbody tr {
  transition: background 0.15s ease;
}

.table tbody tr:hover {
  background: var(--table-row-hover);
}

/* Forms & Inputs */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 0.4rem;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.95rem;
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

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

/* Competitive Density Widget */
.density-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

[data-theme="light"] .density-card {
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border-color: rgba(59, 130, 246, 0.3);
}

.density-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.density-value {
  font-size: 2.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-heading);
}

/* Layout Grid Utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* Utilities */
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* Devis Sheet & Quote Components */
.devis-sheet {
  padding: 2.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
}

[data-theme="light"] .devis-sheet {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.devis-mentions-box {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  min-width: 280px;
}

[data-theme="light"] .devis-mentions-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.devis-tender-box {
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.02);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

[data-theme="light"] .devis-tender-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.devis-totals-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  padding: 1.5rem;
  border-radius: var(--radius-md);
}

[data-theme="light"] .devis-totals-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.devis-sig-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
  align-items: flex-start;
}

/* Responsive Filter Grids */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 110px;
  gap: 1rem;
  align-items: flex-end;
}

.results-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 1rem;
  align-items: flex-end;
}

/* Footer */
.app-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  padding: 1.75rem 0;
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ==========================================================================
   9. Responsive Breakpoints & Mobile Enhancements
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* Toggle Visibility */
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }

  /* Body & Main Padding to accommodate Bottom Nav */
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom));
  }

  .main-content {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }

  /* Responsive Grid Adjustments */
  .grid-2 { grid-template-columns: 1fr; gap: 1rem; }
  .grid-4 { grid-template-columns: 1fr; gap: 1rem; }

  /* Headings size scaling */
  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.35rem; }

  /* Container padding */
  .container {
    padding: 0 1rem;
  }

  /* Card padding on mobile */
  .card {
    padding: 1.15rem;
    border-radius: var(--radius-md);
  }

  /* Footer on mobile */
  .app-footer {
    display: none; /* Mobile users have bottom tab bar */
  }
}

@media (max-width: 600px) {
  .table td, .table th {
    padding: 0.75rem 0.65rem;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   10. Moroccan Official Devis / Print Styles
   ========================================================================== */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    padding-bottom: 0 !important;
  }
  .navbar, .btn, .no-print, .mobile-bottom-nav, .mobile-drawer, .drawer-overlay {
    display: none !important;
  }
  .card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .devis-sheet {
    border: 1px solid #000 !important;
    padding: 20mm !important;
    color: #000 !important;
    background: #fff !important;
  }
  .table th, .table td {
    border: 1px solid #000 !important;
    color: #000 !important;
  }
}

/* ==========================================================================
   11. Admin Tabs, Token Gauges & Glassmorphic Modals
   ========================================================================== */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
  overflow-x: auto;
}

.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.admin-tab-btn:hover {
  color: var(--text-heading);
}

.admin-tab-btn.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

.token-gauge-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}

[data-theme="light"] .token-gauge-bar {
  background: #e2e8f0;
}

.token-gauge-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Modals */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 8, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s ease;
  padding: 1.75rem;
}

.modal-backdrop.active .modal-dialog {
  transform: scale(1) translateY(0);
}

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

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  color: var(--text-heading);
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   11. Moroccan B2B Landing Page Styles
   ========================================================================== */
.landing-hero {
  padding: 2.5rem 0 3.5rem;
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: 3.1rem;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-heading);
}

.hero-title-gradient {
  background: linear-gradient(135deg, #60a5fa 0%, #34d399 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 2.25rem;
  max-width: 580px;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.hero-subtext {
  font-size: 0.84rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hero-subtext-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.landing-preview-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.landing-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-preview-screen {
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.landing-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 3.5rem 0;
}

.landing-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.landing-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.4);
}

.landing-stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
}

.landing-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 4.5rem auto 3rem;
}

.section-tag {
  color: #60a5fa;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Step Process Grid */
.process-step-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.process-step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.process-step-card:hover {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.step-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #93c5fd;
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

/* Comparison Table */
.comparison-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 4rem;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th, .comparison-table td {
  padding: 1.15rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
}

.comparison-table th {
  background: rgba(15, 23, 42, 0.85);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.comparison-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* CTA Bottom Banner */
.landing-cta-banner {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-xl);
  padding: 3.5rem 2.5rem;
  text-align: center;
  margin: 5rem 0 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-title {
    font-size: 2.3rem;
  }
  .landing-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-step-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Mobile refinements
   --------------------------------------------------------------------------
   Many templates carry inline styles — fixed pixel widths, `white-space:
   nowrap`, large display font sizes — which a stylesheet cannot override
   through normal cascade. The rules below use `!important` deliberately and
   only inside narrow breakpoints, so they change nothing on desktop while
   preventing horizontal scrolling on a phone.
   ========================================================================== */

@media (max-width: 768px) {
  /* Nothing may force the page wider than the viewport. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Inline `width: NNNpx` and `min-width` on layout containers become fluid.
     Tables keep their own widths — they scroll inside .table-responsive. */
  .card, .card * :not(table):not(thead):not(tbody):not(tr):not(td):not(th) {
    max-width: 100% !important;
  }
  .card { padding: 1.1rem !important; }

  /* Wide tables scroll horizontally inside their own container rather than
     stretching the page. */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-responsive table { min-width: 0; }

  /* Display headings sized for a desktop hero are unreadable on a phone. */
  h1 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Action rows wrap instead of overflowing, and buttons become tappable. */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-lg { width: 100%; }

  /* Two- and three-column grids collapse to one. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }

  /* Form controls must never be under 16px: smaller text makes iOS Safari
     zoom the whole page on focus. */
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.3rem !important; }
}

/* --------------------------------------------------------------------------
   Header on small screens

   The navbar is one flex row: brand on the left, theme toggle and two actions
   on the right. On a phone that row is wider than the viewport and the last
   button is pushed off the edge.

   It stays a single row here — wrapping it onto two lines costs vertical space
   and reads as a broken layout. Instead the row is allowed to shrink: the
   brand gives up space first, the buttons tighten their padding, and the
   longer label is abbreviated on the narrowest screens.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 640px) {
  .navbar-inner { gap: 0.5rem; }

  /* The brand is the flexible element: it shrinks and truncates so the
     actions, which the visitor came to click, always stay whole. */
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 1.05rem;
  }
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-user { flex: 0 0 auto; gap: 0.4rem; }
  .nav-user .btn {
    white-space: nowrap;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 560px) {
  /* Drop the decorative pieces before touching the buttons themselves.
     The theme toggle stays: it is the only way to switch between light and
     dark, so hiding it to save space removed a function rather than an
     ornament. It is shrunk instead. */
  .brand-badge { display: none; }
  .brand { font-size: 0.98rem; }
  .nav-user .btn { padding: 0.42rem 0.55rem; font-size: 0.75rem; }
  .theme-toggle-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.95rem;
  }
}

@media (max-width: 380px) {
  /* Last resort on very narrow phones: the logo alone identifies the site. */
  .brand-name { display: none; }
}

/* ==========================================================================
   Light mode corrections
   --------------------------------------------------------------------------
   The interface was designed dark first, so a number of elements carry a
   hardcoded white text colour in an inline `style` attribute. Those cannot be
   reached by normal cascade, and on a light background they render white on
   near-white — invisible.

   The rules below apply only under [data-theme="light"] and are scoped to the
   places that sit on a light surface. Elements that sit on a dark panel even in
   light mode — the hero mock-up, the primary buttons — keep their white text
   and are excluded.
   ========================================================================== */

[data-theme="light"] {
  /* Headings and body copy inside ordinary page surfaces. */
  --hero-mock-bg: #0f172a;
}

/* Inline `color:#fff` on text that sits on a light card or the page itself. */
[data-theme="light"] .card [style*="color: #fff"],
[data-theme="light"] .card [style*="color:#fff"],
[data-theme="light"] .table [style*="color: #fff"],
[data-theme="light"] .table [style*="color:#fff"],
[data-theme="light"] .section-header [style*="color: #fff"],
[data-theme="light"] main [style*="color: #fff"]:not(.btn):not(.badge) {
  color: var(--text-heading) !important;
}

/* The same for the slightly-off-white shades used as headings. */
[data-theme="light"] .card [style*="color: #f8fafc"],
[data-theme="light"] .card [style*="color: #e2e8f0"],
[data-theme="light"] main [style*="color: #f8fafc"],
[data-theme="light"] main [style*="color: #e2e8f0"] {
  color: var(--text-heading) !important;
}

/* Several panels keep a dark gradient background even in light mode — the
   radar banner, the scanner cards, the density panels, the landing mock-up and
   the closing call to action. They are dark surfaces sitting on a light page,
   so their light text is correct and must survive the corrections above.
   Restoring it explicitly is what keeps those panels readable. */
[data-theme="light"] .dashboard-radar-banner,
[data-theme="light"] .dashboard-radar-banner *,
[data-theme="light"] .scanner-banner-card,
[data-theme="light"] .scanner-banner-card *,
[data-theme="light"] .ai-hud-card,
[data-theme="light"] .ai-hud-card *,
[data-theme="light"] .landing-preview-card,
[data-theme="light"] .landing-preview-card *,
[data-theme="light"] .landing-cta-banner,
[data-theme="light"] .landing-cta-banner * {
  --text-heading: #ffffff;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
}

/* Inline white text inside those dark panels is restored after the blanket
   corrections above would otherwise have darkened it. */
[data-theme="light"] .dashboard-radar-banner [style*="color: #fff"],
[data-theme="light"] .scanner-banner-card [style*="color: #fff"],
[data-theme="light"] .ai-hud-card [style*="color: #fff"],
[data-theme="light"] .landing-preview-card [style*="color: #fff"],
[data-theme="light"] .landing-preview-card [style*="color:#fff"],
[data-theme="light"] .landing-preview-card [style*="color: #f8fafc"],
[data-theme="light"] .landing-preview-card [style*="color: #e2e8f0"],
[data-theme="light"] .landing-cta-banner [style*="color: #fff"] {
  color: #fff !important;
}

/* The blanket corrections must not reach inside a dark panel at all. */
[data-theme="light"] .dashboard-radar-banner [style*="color: #f8fafc"],
[data-theme="light"] .dashboard-radar-banner [style*="color: #e2e8f0"],
[data-theme="light"] .scanner-banner-card [style*="color: #e2e8f0"],
[data-theme="light"] .density-card [style*="color: #e2e8f0"] {
  color: #e2e8f0 !important;
}

/* Buttons and badges carry their own background, so their white text is
   correct in both themes. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-success,
[data-theme="light"] .brand-badge {
  color: #fff !important;
}

/* Badge variants that had no light-mode definition were inheriting a pale
   dark-mode colour and became unreadable on a light background. */
[data-theme="light"] .badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="light"] .badge-gray {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.28);
}
[data-theme="light"] .badge-purple {
  background: rgba(147, 51, 234, 0.1);
  color: #7e22ce;
  border-color: rgba(147, 51, 234, 0.25);
}

/* Inside a dark panel the badges keep their dark-mode appearance. */
[data-theme="light"] .dashboard-radar-banner .badge-warning,
[data-theme="light"] .landing-preview-card .badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}
[data-theme="light"] .dashboard-radar-banner .badge-gray,
[data-theme="light"] .landing-preview-card .badge-gray {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.3);
}
/* A secondary button sitting on one of the dark panels keeps its dark-mode
   appearance: the light-mode style is a pale grey pill with dark text, which
   disappears against a dark gradient. */
[data-theme="light"] .dashboard-radar-banner .btn-secondary,
[data-theme="light"] .scanner-banner-card .btn-secondary,
[data-theme="light"] .ai-hud-card .btn-secondary,
[data-theme="light"] .density-card .btn-secondary,
[data-theme="light"] .landing-preview-card .btn-secondary,
[data-theme="light"] .landing-cta-banner .btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
}
[data-theme="light"] .dashboard-radar-banner .btn-secondary:hover,
[data-theme="light"] .landing-cta-banner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Navbar density

   A signed-in user sees eight navigation links plus the theme toggle, an
   ADMIN badge, the company name and a sign-out button. On a laptop that row
   runs out of width and the last items are clipped, which is what the labels
   wrapping onto two lines in the screenshot showed.

   The links are allowed to shrink and the company name to truncate, so the row
   stays on one line down to tablet width, where the mobile menu takes over.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (max-width: 1500px) {
  .nav-links {
    gap: 0.15rem;
  }
  .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  /* The company name is the one element that can lose characters without
     costing the user anything — every other item is a control. */
  .nav-user > span:not(.badge) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-user { gap: 0.4rem; }
}

@media (min-width: 901px) and (max-width: 1240px) {
  .nav-link { font-size: 0.76rem; padding-left: 0.38rem; padding-right: 0.38rem; }
  .nav-user > span:not(.badge) { max-width: 0; padding: 0; margin: 0; }
  .brand-name { font-size: 1.1rem; }
}

/* A highlighted statistic card. In dark mode it is a slightly lifted panel; in
   light mode it becomes a tinted card rather than a dark one, so its text
   follows the page theme instead of needing its own light-on-dark treatment. */
.card-highlight {
  background: linear-gradient(135deg, rgba(30, 45, 74, 0.7), rgba(22, 33, 54, 0.7));
}

[data-theme="light"] .card-highlight {
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.75), rgba(239, 246, 255, 0.9));
  border-color: rgba(37, 99, 235, 0.3) !important;
}

/* --------------------------------------------------------------------------
   Dark inline backgrounds in light mode

   Several templates set a dark panel background directly in a `style`
   attribute — `rgba(15, 23, 42, …)` and similar. Those panels stay dark in
   light mode, so any text inside them must stay light. Attribute selectors
   reach them without editing every template, and they are the last word on the
   subject because the blanket light-mode corrections would otherwise darken
   their contents into invisibility.
   -------------------------------------------------------------------------- */

[data-theme="light"] [style*="background: rgba(15, 23, 42"],
[data-theme="light"] [style*="background: rgba(15,23,42"],
[data-theme="light"] [style*="background: rgba(2, 6, 23"],
[data-theme="light"] [style*="background: rgba(0, 0, 0"] {
  --text-heading: #ffffff;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  color: #e2e8f0;
}

[data-theme="light"] [style*="background: rgba(15, 23, 42"] [style*="color: #fff"],
[data-theme="light"] [style*="background: rgba(2, 6, 23"] [style*="color: #fff"],
[data-theme="light"] [style*="background: rgba(0, 0, 0"] [style*="color: #fff"] {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Navbar spacing and small-badge sizing
   -------------------------------------------------------------------------- */

/* Breathing room between the brand and the first navigation item, so the logo
   and the site name do not sit flush against the menu. */
.navbar-inner .nav-links {
  margin-left: 1.5rem;
}
.brand {
  padding-right: 0.5rem;
}

/* The company name in the top right must follow the theme: it previously
   carried a hardcoded pale colour inline, which vanished on a white page. */
[data-theme="light"] .user-company-text {
  color: #475569;
}
[data-theme="light"] .user-company-text:hover {
  color: #0f172a;
}

/* An article-count badge sits inside a narrow table column, where the default
   badge size forces the text onto two lines. */
.table .badge-blue,
.table .badge-gray {
  font-size: 0.7rem;
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Account menu

   Company settings, administration and sign-out sit behind the company name
   rather than in the navigation row. That removes three items from a row that
   could not hold them, and groups everything about *this account* in one
   place — which is also how the mobile layout already works.
   -------------------------------------------------------------------------- */

.account-menu {
  position: relative;
}

.account-trigger {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  max-width: 220px;
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-heading);
}

[data-theme="light"] .account-trigger {
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme="light"] .account-trigger:hover,
[data-theme="light"] .account-trigger[aria-expanded="true"] {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.account-avatar { font-size: 0.95rem; line-height: 1; }

.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A small coloured dot carries the account status without spending the width a
   full badge would. Its meaning is in the title attribute and repeated in the
   dropdown, so nothing depends on colour alone. */
.account-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-dot-admin   { background: #f59e0b; }
.account-dot-active  { background: #10b981; }
.account-dot-trial   { background: #f59e0b; }
.account-dot-expired { background: #ef4444; }

.account-caret { font-size: 0.7rem; opacity: 0.7; }

.account-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 250px;
  background: var(--panel-bg, #131824);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  padding: 0.4rem;
  z-index: 300;
  display: none;
}
.account-dropdown.open { display: block; }

[data-theme="light"] .account-dropdown {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.account-dropdown-head {
  padding: 0.6rem 0.7rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.35rem;
}
.account-dropdown-company {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.35rem;
  word-break: break-word;
}
.account-dropdown-status .badge { font-size: 0.68rem; }

.account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.account-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-heading);
}
[data-theme="light"] .account-dropdown-item:hover { background: #f1f5f9; }

.account-dropdown-item.active {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}
[data-theme="light"] .account-dropdown-item.active {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.account-dropdown-admin { color: #f59e0b; font-weight: 600; }
[data-theme="light"] .account-dropdown-admin { color: #b45309; }

.account-dropdown-danger { color: #fca5a5; }
.account-dropdown-danger:hover { background: rgba(239, 68, 68, 0.12); color: #fecaca; }
[data-theme="light"] .account-dropdown-danger { color: #be123c; }
[data-theme="light"] .account-dropdown-danger:hover { background: rgba(244, 63, 94, 0.08); color: #9f1239; }

.account-dropdown-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.35rem 0;
}

/* With two links moved into the menu the row fits comfortably; only a light
   tightening is needed on smaller laptops. */
@media (max-width: 1400px) {
  .nav-links { gap: 0.15rem; }
  .nav-link { font-size: 0.8rem; padding: 0.45rem 0.55rem; }
  .account-name { max-width: 110px; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-link { font-size: 0.74rem; padding: 0.4rem 0.4rem; }
  .account-name { display: none; }
  .account-trigger { padding: 0.35rem 0.5rem; }
}

/* --------------------------------------------------------------------------
   Tables on a phone

   A five-column table cannot be read on a 400px screen. Scrolling it sideways
   hides most of the data and squeezes the visible columns until words break a
   letter at a time — which is what the dashboard was doing.

   Below 768px each row is restacked as a card: the header cells are hidden and
   every cell shows its column name from a `data-label` attribute, so the table
   markup is unchanged and the same page works in both layouts.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .table-responsive { overflow-x: visible !important; }

  .table thead { display: none; }

  /* The desktop column proportions are irrelevant once each row becomes a
     card, and the per-column widths are specific enough to beat the
     `width: 100%` below — so they are released here. */
  .table--results,
  .table--listing,
  .table--shortlist,
  .table--bids { table-layout: auto; }

  .table--results td, .table--listing td, .table--shortlist td, .table--bids td,
  .table--results th, .table--listing th, .table--shortlist th, .table--bids th { width: auto !important; }

  .table--results td:nth-child(4) { white-space: normal; }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    background: var(--card-bg, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.25rem;
  }
  [data-theme="light"] .table tr {
    background: #ffffff;
    border-color: #e2e8f0;
  }

  .table td {
    border: none !important;
    padding: 0.45rem 0.85rem !important;
    text-align: left !important;
    white-space: normal;
  }

  /* The column name, taken from the cell's data-label. */
  .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 0.15rem;
  }

  /* An action button spans the card rather than sitting in a narrow column. */
  .table td .btn { width: 100%; justify-content: center; }

  /* On a card there is room for words, and three bare icons stacked in a
     column would be a guessing game — so the labels come back. */
  .action-icons { flex-direction: column; gap: 0.4rem; width: 100%; }
  .btn-icon { padding: 0.6rem 0.75rem; font-size: 0.85rem; }
  .btn-icon .action-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }

  /* Countdown pills and badges stay horizontal. */
  .table td .badge,
  .table td .countdown-pill {
    display: inline-flex;
    white-space: nowrap;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Bordereau rows

   A published article can carry several hundred words of specification. At the
   default table size one such row fills the screen, so the bordereau uses a
   smaller, tighter type scale and caps the height of a very long cell — the
   full text stays reachable by scrolling inside it.
   -------------------------------------------------------------------------- */

.article-designation {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 260px;
}

.article-specs {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  max-width: 380px;
}

/* A very long specification scrolls inside its cell instead of stretching the
   row past the height of the screen. */
.article-specs > div:first-child {
  max-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}

.article-specs > div:first-child::-webkit-scrollbar { width: 5px; }
.article-specs > div:first-child::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 3px;
}

@media (max-width: 768px) {
  /* In the stacked card layout the cell has the full width, so the height cap
     is relaxed and the text simply flows. */
  .article-designation,
  .article-specs { max-width: none; }
  .article-specs > div:first-child { max-height: 220px; }
}

/* The "conditions & garanties" column is free text the buyer writes: sometimes
   a warranty, often a deposit amount, a mandatory site visit, or a pointer back
   to the notice. It is sized like the specifications column and scrolls when
   long. */
.article-garanties {
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.5;
  max-width: 240px;
  max-height: 190px;
  overflow-y: auto;
}

/* Specification text shown beneath a designation in the devis builder. */
.article-specs-inline {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
  margin-top: 3px;
  white-space: pre-line;
  max-height: 150px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .article-garanties { max-width: none; }
}


/* --------------------------------------------------------------------------
   Legal pages (mentions légales, CGU, confidentialité)

   Long-form reading rather than dashboard density: a measured column width,
   generous line height, and headings that separate sections clearly. All
   colours are tokens, so the pages follow the viewer's theme like every
   other page.
   -------------------------------------------------------------------------- */

.footer-links {
  display: inline-flex;
  gap: 0.9rem;
  margin-right: 0.9rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: var(--text-main);
  border-bottom-color: var(--border-subtle);
}

/* On a phone the links sit above the corpus badge rather than beside it. */
@media (max-width: 640px) {
  .footer-links { display: flex; margin: 0 0 0.5rem; justify-content: center; }
}

.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 3rem;
  color: var(--text-main);
  line-height: 1.7;
}

.legal-page h1 {
  font-size: 1.9rem;
  margin-bottom: 0.75rem;
  color: var(--text-heading);
}

.legal-page h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-heading);
}

.legal-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.legal-page p,
.legal-page li { font-size: 0.92rem; }

.legal-page ul { padding-left: 1.25rem; margin: 0.75rem 0; }
.legal-page li { margin-bottom: 0.55rem; }

.legal-dl {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0;
  font-size: 0.92rem;
}

.legal-dl dt { color: var(--text-muted); font-weight: 600; }
.legal-dl dd { margin: 0; color: var(--text-main); overflow-wrap: anywhere; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.86rem;
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--table-head-bg);
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legal-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-size: 0.88rem;
}

.legal-updated {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* On a phone the definition list and the table both need to stack: two
   columns in 380px turns every value into a vertical stack of single words. */
@media (max-width: 640px) {
  .legal-dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal-dl dt { margin-top: 0.6rem; }

  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
  }
  .legal-table td { border: 0; border-bottom: 1px solid var(--border-subtle); }
  .legal-table td:last-child { border-bottom: 0; }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }
}


/* --------------------------------------------------------------------------
   Badges on the deliberately dark panels, in light mode

   A handful of panels stay dark whatever the theme — the radar banner, the
   scan banner, the density card, the landing hero. The light-mode badge rules
   above paint badge text a dark slate, which is right on a white page and
   invisible on those panels: "Article 91 Décret 2-22-431" disappeared entirely
   against the scan banner's gradient.

   Those rules set `color` on the element itself, so token inheritance cannot
   override them. The badges are restated here, scoped to the dark panels, and
   placed last so they win on order rather than on weight.
   -------------------------------------------------------------------------- */
[data-theme="light"] .dashboard-radar-banner .badge-gray,
[data-theme="light"] .scanner-banner-card .badge-gray,
[data-theme="light"] .ai-hud-card .badge-gray,
[data-theme="light"] .density-card .badge-gray,
[data-theme="light"] .landing-preview-card .badge-gray,
[data-theme="light"] .landing-cta-banner .badge-gray {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .dashboard-radar-banner .badge-emerald,
[data-theme="light"] .scanner-banner-card .badge-emerald,
[data-theme="light"] .ai-hud-card .badge-emerald,
[data-theme="light"] .density-card .badge-emerald,
[data-theme="light"] .landing-preview-card .badge-emerald,
[data-theme="light"] .landing-cta-banner .badge-emerald {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="light"] .dashboard-radar-banner .badge-warning,
[data-theme="light"] .scanner-banner-card .badge-warning,
[data-theme="light"] .ai-hud-card .badge-warning,
[data-theme="light"] .density-card .badge-warning,
[data-theme="light"] .landing-preview-card .badge-warning,
[data-theme="light"] .landing-cta-banner .badge-warning,
[data-theme="light"] .dashboard-radar-banner .badge-amber,
[data-theme="light"] .scanner-banner-card .badge-amber,
[data-theme="light"] .landing-preview-card .badge-amber,
[data-theme="light"] .landing-cta-banner .badge-amber {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .dashboard-radar-banner .badge-blue,
[data-theme="light"] .scanner-banner-card .badge-blue,
[data-theme="light"] .ai-hud-card .badge-blue,
[data-theme="light"] .density-card .badge-blue,
[data-theme="light"] .landing-preview-card .badge-blue,
[data-theme="light"] .landing-cta-banner .badge-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}


/* --------------------------------------------------------------------------
   The before/after comparison on a phone

   Three columns of prose in 360px gives each one about a hundred pixels, so
   every sentence breaks into a vertical stack of single words and the table
   still overflows. It is restacked as one card per step: the step name as a
   heading, then the two states one under the other, labelled and colour-coded
   so which is which stays obvious without the header row.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .comparison-card { background: transparent; border: 0; overflow: visible; }
  .comparison-card .table-responsive { overflow-x: visible; }

  .comparison-table,
  .comparison-table tbody,
  .comparison-table tr,
  .comparison-table td { display: block; width: 100%; }

  .comparison-table thead { display: none; }

  .comparison-table tr {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
  }

  .comparison-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .comparison-table td:last-child { border-bottom: 0; }

  /* The step name becomes the card's title. */
  .comparison-table td:first-child {
    background: rgba(148, 163, 184, 0.1);
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
  }
  .comparison-table td:first-child strong { color: var(--text-heading); }

  /* The other two cells carry their column name, which the hidden header can
     no longer supply. */
  .comparison-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
  }
  .comparison-table td:nth-child(2)::before { color: #fca5a5; }
  .comparison-table td:nth-child(3)::before { color: #6ee7b7; }

  .comparison-table td:nth-child(3) {
    background: rgba(16, 185, 129, 0.06);
    border-left: 3px solid rgba(16, 185, 129, 0.45);
  }

  .comparison-table tr:hover td { background: inherit; }
}


/* --------------------------------------------------------------------------
   Email alerts panel

   Shares the form vocabulary of the rest of the profile page. The fields here
   previously carried class="form-control", which the stylesheet has never
   defined, so they rendered as unstyled browser controls beside every other
   card's inputs.
   -------------------------------------------------------------------------- */
.form-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.form-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 0.35rem;
}

.alert-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-main);
}

.alert-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-blue);
  flex: 0 0 auto;
}

/* The address needs the full width on a phone; two columns would leave the
   hour select too narrow to read. */
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Competitive density card in light mode

   The card is deliberately light here — a pale blue gradient, not one of the
   panels that stay dark — but it had been grouped with those panels, so the
   rules that keep their text white applied to it too and every figure on it
   turned white on near-white. Its colours are restated explicitly.
   -------------------------------------------------------------------------- */
[data-theme="light"] .density-card,
[data-theme="light"] .density-card * {
  --text-heading: #0f172a;
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;
}

[data-theme="light"] .density-card .density-value { color: #1d4ed8; }

/* Inline light-on-dark colours written into the markup for the dark theme. */
[data-theme="light"] .density-card [style*="color: #fff"],
[data-theme="light"] .density-card [style*="color:#fff"],
[data-theme="light"] .density-card [style*="color: #e2e8f0"],
[data-theme="light"] .density-card [style*="color: #cbd5e1"],
[data-theme="light"] .density-card [style*="color: #f8fafc"] {
  color: #0f172a !important;
}

[data-theme="light"] .density-card [style*="color: #93c5fd"] { color: #1d4ed8 !important; }
[data-theme="light"] .density-card [style*="color: #fcd34d"] { color: #b45309 !important; }
[data-theme="light"] .density-card [style*="color: #6ee7b7"] { color: #047857 !important; }