/* 

 * NearByStage Institutional Real Estate Intelligence

 * Design Protocol: Apple & Google Minimalist + International Property Consultant (IPC) Standards

 * Supports Crisp Executive Porcelain White (Default) and Midnight Dotted Architecture Mode

 */



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



:root {

  color-scheme: light;

  /* Crisp Executive Porcelain Palette (Default Light Mode) */

  --bg-canvas: #f8fafc;

  --bg-surface: #ffffff;

  --bg-card: #ffffff;

  --bg-subtle: #f1f5f9;

  --bg-input: #ffffff;

  --bg-hover: #f8fafc;

  

  --border-light: #f1f5f9;

  --border-color: #e2e8f0;

  --border-strong: #cbd5e1;

  

  --text-primary: #0f172a;

  --text-secondary: #475569;

  --text-muted: #64748b;

  --text-inverse: #ffffff;

  

  --primary: #1d4ed8;

  --primary-hover: #1e40af;

  --primary-light: #eff6ff;

  --primary-border: #bfdbfe;

  

  --emerald: #059669;

  --emerald-bg: #ecfdf5;

  --emerald-border: #a7f3d0;

  

  --blue: #2563eb;

  --blue-bg: #eff6ff;

  --blue-border: #bfdbfe;

  

  --amber: #d97706;

  --amber-bg: #fffbeb;

  --amber-border: #fde68a;

  

  --slate: #475569;

  --slate-bg: #f8fafc;

  --slate-border: #cbd5e1;

  

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);

  --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);

  

  --radius-xs: 4px;

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --radius-xl: 20px;

  

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;



  /* Architectural Grid Texture */

  --dot-color: #cbd5e1;

}



/* Midnight Dotted Architecture Theme (Dark Mode) */

body.theme-dark {

  color-scheme: dark;

  --bg-canvas: #090d16;

  --bg-surface: #101726;

  --bg-card: #141d2e;

  --bg-subtle: #1a2538;

  --bg-input: #0c121d;

  --bg-hover: #1c283e;

  

  --border-light: #1e2b40;

  --border-color: #24344d;

  --border-strong: #334766;

  

  --text-primary: #f8fafc;

  --text-secondary: #94a3b8;

  --text-muted: #64748b;

  --text-inverse: #0f172a;

  

  --primary: #3b82f6;

  --primary-hover: #60a5fa;

  --primary-light: rgba(59, 130, 246, 0.15);

  --primary-border: rgba(59, 130, 246, 0.3);

  

  --emerald: #10b981;

  --emerald-bg: rgba(16, 185, 129, 0.12);

  --emerald-border: rgba(16, 185, 129, 0.3);

  

  --blue: #3b82f6;

  --blue-bg: rgba(59, 130, 246, 0.12);

  --blue-border: rgba(59, 130, 246, 0.3);

  

  --amber: #f59e0b;

  --amber-bg: rgba(245, 158, 11, 0.12);

  --amber-border: rgba(245, 158, 11, 0.3);

  

  --slate: #94a3b8;

  --slate-bg: rgba(148, 163, 184, 0.12);

  --slate-border: rgba(148, 163, 184, 0.3);

  

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);

  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.6);

  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.7);

  

  --dot-color: #223249;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: var(--font-sans);

  background-color: var(--bg-canvas);

  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);

  background-size: 24px 24px;

  color: var(--text-primary);

  line-height: 1.5;

  -webkit-font-smoothing: antialiased;

  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';

}



/* App Header - Minimalist Editorial Bar */

.app-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background: var(--bg-surface);

  border-bottom: 1px solid var(--border-color);

  box-shadow: var(--shadow-xs);

  transition: background 0.3s, border-color 0.3s;

}



.header-container {

  max-width: 100%;

  margin: 0;

  padding: 0 32px;

  height: 68px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

}



.brand-section .brand-logo {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: inherit;

}



.brand-symbol {

  width: 38px;

  height: 38px;

  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  font-weight: 800;

  font-size: 18px;

  letter-spacing: -0.5px;

  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);

}



.brand-text {

  display: flex;

  flex-direction: column;

}



.brand-name {

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.4px;

  color: var(--text-primary);

}



.brand-meta {

  font-size: 11px;

  font-weight: 600;

  color: var(--primary);

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



/* Navigation Segmented Control */

.nav-links {

  display: flex;

  align-items: center;

  background: var(--bg-subtle);

  padding: 4px;

  border-radius: var(--radius-md);

  border: 1px solid var(--border-color);

  gap: 2px;

}



.nav-item {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px 14px;

  background: transparent;

  border: none;

  border-radius: var(--radius-sm);

  color: var(--text-secondary);

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.15s ease-in-out;

}



.nav-item:hover {

  color: var(--text-primary);

}



.nav-item.active {

  background: var(--bg-surface);

  color: var(--primary);

  box-shadow: var(--shadow-sm);

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 12px;

}



.search-box {

  display: flex;

  align-items: center;

  gap: 8px;

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  padding: 6px 12px;

  width: 240px;

  transition: all 0.2s;

}



.search-box:focus-within {

  background: var(--bg-surface);

  border-color: var(--primary);

  box-shadow: 0 0 0 3px var(--primary-light);

}



.search-box input {

  background: transparent;

  border: none;

  color: var(--text-primary);

  font-size: 12px;

  font-family: var(--font-sans);

  outline: none;

  width: 100%;

}



.search-box input::placeholder {

  color: var(--text-muted);

}



/* Theme Toggle Button */

.btn-theme-toggle {

  width: 36px;

  height: 36px;

  border-radius: var(--radius-sm);

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  color: var(--text-secondary);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 15px;

  transition: all 0.2s;

}



.btn-theme-toggle:hover {

  background: var(--bg-hover);

  color: var(--text-primary);

}



/* Main Container */

.app-main {

  width: 100%;

  max-width: 100%;

  margin: 0;

  padding: 24px 32px;

  flex: 1 0 auto;

  box-sizing: border-box;

}



.page-view {

  display: none;

}



.page-view.active {

  display: block;

}



/* Executive Hero Section with Architectural Wireframe */

.hero-executive-card {

  position: relative;

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  padding: 44px;

  margin-bottom: 36px;

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 40px;

}



/* Embedded Blueprint Vector */

.hero-executive-card::before {

  content: '';

  position: absolute;

  right: -20px;

  bottom: -30px;

  width: 520px;

  height: 320px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300' fill='none' stroke='%2394a3b8' stroke-width='1' opacity='0.22'%3E%3Cpath d='M40 280V80h100v200m0-160h120v160m0-200h100v200m0-120h80v120'/%3E%3Cpath stroke-dasharray='4 3' d='M0 80h500M0 140h500M0 200h500M0 280h500M90 80v200m160-160v160m150-200v200'/%3E%3Ccircle cx='90' cy='80' r='3' fill='%232563eb'/%3E%3Ccircle cx='210' cy='120' r='3' fill='%232563eb'/%3E%3Ccircle cx='310' cy='40' r='3' fill='%232563eb'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-size: contain;

  pointer-events: none;

}



.hero-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--primary);

  background: var(--primary-light);

  border: 1px solid var(--primary-border);

  padding: 4px 10px;

  border-radius: var(--radius-xs);

  margin-bottom: 16px;

}



.hero-headline {

  font-size: 34px;

  font-weight: 800;

  line-height: 1.25;

  letter-spacing: -0.03em;

  color: var(--text-primary);

  margin-bottom: 14px;

}



.hero-subheading {

  font-size: 15px;

  color: var(--text-secondary);

  line-height: 1.6;

  margin-bottom: 28px;

  max-width: 92%;

}



.hero-actions-bar {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px 18px;

  font-size: 13px;

  font-weight: 600;

  border-radius: var(--radius-sm);

  border: 1px solid transparent;

  cursor: pointer;

  transition: all 0.15s ease-in-out;

  text-decoration: none;

  font-family: var(--font-sans);

}



.btn-primary {

  background: var(--primary);

  color: #ffffff;

}



.btn-primary:hover {

  background: var(--primary-hover);

  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);

}



.btn-secondary {

  background: var(--bg-surface);

  border-color: var(--border-color);

  color: var(--text-primary);

}



.btn-secondary:hover {

  background: var(--bg-hover);

  border-color: var(--border-strong);

}



.btn-outline {

  background: transparent;

  border-color: var(--border-color);

  color: var(--text-secondary);

}



.btn-outline:hover {

  border-color: var(--border-strong);

  color: var(--text-primary);

}



/* Executive Scorecard Panel */

.executive-scorecard {

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.scorecard-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--border-color);

  padding-bottom: 12px;

  margin-bottom: 16px;

}



.scorecard-title {

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--text-muted);

}



.scorecard-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.scorecard-metric {

  display: flex;

  flex-direction: column;

}



.scorecard-val {

  font-size: 26px;

  font-weight: 800;

  font-family: var(--font-mono);

  color: var(--text-primary);

  letter-spacing: -0.02em;

  font-variant-numeric: tabular-nums;

}



.scorecard-lbl {

  font-size: 12px;

  color: var(--text-secondary);

  font-weight: 500;

  margin-top: 2px;

}



.scorecard-sub {

  font-size: 11px;

  color: var(--text-muted);

  margin-top: 2px;

}



.regulatory-badge-row {

  display: flex;

  gap: 10px;

  margin-top: 18px;

  padding-top: 14px;

  border-top: 1px solid var(--border-color);

}



/* IPC Institutional Metrics Ribbon */

.ipc-metrics-ribbon {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 36px;

}



.ipc-metric-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 20px;

  box-shadow: var(--shadow-xs);

  display: flex;

  flex-direction: column;

  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;

}



.ipc-metric-card:hover {

  transform: translateY(-2px);

  border-color: var(--border-strong);

  box-shadow: var(--shadow-sm);

}



.ipc-metric-eyebrow {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--text-muted);

  margin-bottom: 6px;

}



.ipc-metric-number {

  font-size: 28px;

  font-weight: 800;

  color: var(--text-primary);

  font-family: var(--font-mono);

  letter-spacing: -0.02em;

  font-variant-numeric: tabular-nums;

  margin-bottom: 4px;

}



.ipc-metric-note {

  font-size: 12px;

  color: var(--text-secondary);

  font-weight: 500;

}



/* Sections & Cards */

.section-wrapper {

  margin-bottom: 42px;

}



.section-head-bar {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 20px;

}



.section-headline {

  font-size: 22px;

  font-weight: 800;

  color: var(--text-primary);

  letter-spacing: -0.02em;

}



.section-subtext {

  font-size: 13px;

  color: var(--text-secondary);

  margin-top: 4px;

}



/* Cards & Grid */

.grid-3-col {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.grid-2-col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}



.executive-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-xs);

  transition: all 0.2s;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.executive-card:hover {

  border-color: var(--border-strong);

  box-shadow: var(--shadow-md);

}



/* Project Card Architecture */

.card-masthead {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

}



.card-dev-lead {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--primary);

}



.card-proj-name {

  font-size: 17px;

  font-weight: 800;

  color: var(--text-primary);

  line-height: 1.3;

  margin-top: 2px;

}



.card-phase-label {

  font-size: 12px;

  color: var(--text-muted);

  margin-top: 2px;

}



.card-reg-badge {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--text-muted);

  background: var(--bg-subtle);

  padding: 2px 6px;

  border-radius: var(--radius-xs);

  margin-bottom: 16px;

  display: inline-block;

  word-break: break-all;

}



.card-data-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  padding: 12px;

  background: var(--bg-subtle);

  border-radius: var(--radius-sm);

  margin-bottom: 16px;

}



.data-cell {

  display: flex;

  flex-direction: column;

}



.data-cell-lbl {

  font-size: 11px;

  font-weight: 600;

  color: var(--text-muted);

  text-transform: uppercase;

}



.data-cell-val {

  font-size: 16px;

  font-weight: 800;

  font-family: var(--font-mono);

  color: var(--text-primary);

  font-variant-numeric: tabular-nums;

}



/* Micro Meter Bar */

.meter-wrapper {

  margin-bottom: 18px;

}



.meter-header {

  display: flex;

  justify-content: space-between;

  font-size: 12px;

  font-weight: 600;

  color: var(--text-secondary);

  margin-bottom: 6px;

}



.meter-bar-track {

  width: 100%;

  height: 6px;

  background: var(--border-color);

  border-radius: 999px;

  overflow: hidden;

}



.meter-bar-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--primary) 0%, #3b82f6 100%);

  border-radius: 999px;

}



.card-bottom-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 14px;

  border-top: 1px solid var(--border-color);

}



.card-rate-display {

  font-size: 12px;

  color: var(--text-muted);

}



.card-rate-display strong {

  font-size: 13px;

  color: var(--text-primary);

  font-family: var(--font-mono);

}



/* Badges */

.badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 11px;

  font-weight: 700;

  padding: 4px 8px;

  border-radius: var(--radius-xs);

  white-space: nowrap;

}



.badge.emerald {

  background: var(--emerald-bg);

  color: var(--emerald);

  border: 1px solid var(--emerald-border);

}



.badge.blue {

  background: var(--blue-bg);

  color: var(--blue);

  border: 1px solid var(--blue-border);

}



.badge.amber {

  background: var(--amber-bg);

  color: var(--amber);

  border: 1px solid var(--amber-border);

}



.badge.slate {

  background: var(--slate-bg);

  color: var(--slate);

  border: 1px solid var(--slate-border);

}



/* IPC High-Legibility Data Tables */

.ipc-table-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  overflow: hidden;

}



.table-responsive {

  width: 100%;

  overflow-x: auto;

}



.ipc-table {

  width: 100%;

  border-collapse: collapse;

  text-align: left;

  font-size: 13px;

}



.ipc-table th {

  background: var(--bg-subtle);

  padding: 14px 18px;

  font-weight: 700;

  color: var(--text-secondary);

  border-bottom: 1px solid var(--border-color);

  text-transform: uppercase;

  font-size: 11px;

  letter-spacing: 0.05em;

  white-space: nowrap;

}



.ipc-table td {

  padding: 14px 18px;

  border-bottom: 1px solid var(--border-color);

  color: var(--text-primary);

  font-variant-numeric: tabular-nums;

}



.ipc-table tr:hover td {

  background: var(--bg-hover);

}



.mono {

  font-family: var(--font-mono);

}



/* Rank Badge */

.rank-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  font-size: 11px;

  font-weight: 800;

  font-family: var(--font-mono);

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  color: var(--text-secondary);

}



.rank-badge.top-1 {

  background: #fef3c7;

  border-color: #f59e0b;

  color: #b45309;

}



.rank-badge.top-2 {

  background: #f1f5f9;

  border-color: #94a3b8;

  color: #334155;

}



.rank-badge.top-3 {

  background: #ffedd5;

  border-color: #ea580c;

  color: #9a3412;

}



/* Charts */

.chart-box-sm {

  width: 100%;

  height: 290px;

}



.chart-box-md {

  width: 100%;

  height: 380px;

}



/* Directory Filter Strip */

.ipc-filter-strip {

  display: flex;

  align-items: center;

  gap: 16px;

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 16px 20px;

  margin-bottom: 28px;

  box-shadow: var(--shadow-xs);

  flex-wrap: wrap;

}



.ipc-filter-group {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.ipc-filter-group label {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--text-muted);

}



.ipc-filter-group select {

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  color: var(--text-primary);

  padding: 8px 12px;

  border-radius: var(--radius-xs);

  font-size: 13px;

  font-family: var(--font-sans);

  outline: none;

  cursor: pointer;

  transition: all 0.15s;

}



.ipc-filter-group select:focus {

  border-color: var(--primary);

  background: var(--bg-surface);

}



/* Project Intelligence Dossier View */

.dossier-wrapper {

  display: flex;

  flex-direction: column;

  gap: 28px;

}



.dossier-header-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-xl);

  padding: 36px;

  box-shadow: var(--shadow-sm);

  display: flex;

  flex-direction: column;

  gap: 20px;

  position: relative;

  overflow: hidden;

}



/* Architectural blueprint grid watermark */

.dossier-header-card::after {

  content: '';

  position: absolute;

  right: 0;

  top: 0;

  width: 380px;

  height: 100%;

  background-image: radial-gradient(var(--dot-color) 1.5px, transparent 1.5px);

  background-size: 16px 16px;

  opacity: 0.4;

  pointer-events: none;

}



.dossier-masthead {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

}



.dossier-title {

  font-size: 30px;

  font-weight: 800;

  color: var(--text-primary);

  letter-spacing: -0.03em;

}



.dossier-canonical {

  font-size: 14px;

  color: var(--text-secondary);

  margin-top: 4px;

}



.dossier-meta-strip {

  display: flex;

  align-items: center;

  gap: 20px;

  font-size: 13px;

  color: var(--text-secondary);

  flex-wrap: wrap;

  padding-top: 12px;

  border-top: 1px solid var(--border-color);

}



.dossier-doc-row {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}



.doc-download-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  padding: 6px 12px;

  border-radius: var(--radius-xs);

  font-size: 12px;

  color: var(--primary);

  text-decoration: none;

  font-weight: 600;

  transition: all 0.15s;

}



.doc-download-pill:hover {

  background: var(--primary);

  color: #ffffff;

  border-color: var(--primary);

}



/* Floor Unit Stack - Blueprint Elevation Mode */

.blueprint-matrix-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-xs);

  overflow-x: auto;

}



.blueprint-floor-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 8px;

}



.blueprint-floor-label {

  width: 60px;

  font-size: 12px;

  font-weight: 700;

  color: var(--text-muted);

  font-family: var(--font-mono);

}



.blueprint-unit-grid {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.unit-brick {

  width: 50px;

  height: 50px;

  border-radius: var(--radius-xs);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition: transform 0.15s, box-shadow 0.15s;

  position: relative;

}



.unit-brick:hover {

  transform: translateY(-2px);

  z-index: 10;

  box-shadow: var(--shadow-md);

}



.unit-brick.sold {

  background: var(--emerald-bg);

  border: 1px solid var(--emerald-border);

  color: var(--emerald);

}



.unit-brick.available {

  background: var(--blue-bg);

  border: 1px solid var(--blue-border);

  color: var(--blue);

}



.unit-brick-cfg {

  font-size: 9px;

  font-weight: 500;

  opacity: 0.8;

}



/* Tooltip */

.unit-brick .unit-tooltip {

  position: absolute;

  bottom: 125%;

  left: 50%;

  transform: translateX(-50%);

  background: var(--text-primary);

  color: var(--text-inverse);

  padding: 8px 12px;

  border-radius: var(--radius-xs);

  font-size: 11px;

  white-space: nowrap;

  pointer-events: none;

  z-index: 50;

  display: none;

  box-shadow: var(--shadow-lg);

}



.unit-brick:hover .unit-tooltip {

  display: block;

}



/* Footer */

.app-footer {

  border-top: 1px solid var(--border-color);

  background: var(--bg-surface);

  padding: 24px 0;

  margin-top: 50px;

}



.footer-container {

  max-width: 100%;

  margin: 0;

  padding: 0 32px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  color: var(--text-secondary);

}



.footer-sub {

  font-size: 12px;

  color: var(--text-muted);

  margin-top: 2px;

}



/* Responsive */

@media (max-width: 1100px) {

  .hero-executive-card {

    grid-template-columns: 1fr;

  }

  .grid-3-col {

    grid-template-columns: 1fr 1fr;

  }

  .ipc-metrics-ribbon {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 768px) {

  .grid-3-col, .grid-2-col {

    grid-template-columns: 1fr;

  }

  .ipc-metrics-ribbon {

    grid-template-columns: 1fr;

  }

  .nav-links {

    display: none;

  }

}



/* ==========================================================================

   DEEPMIND-STANDARD 3D BUILDING STUDIO & SLICING/DICING ANALYTICS

   ========================================================================== */



.building-studio-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  margin-bottom: 28px;

  position: relative;

}



/* Slicer Toolbar (PowerBI-grade) */

.studio-slicer-strip {

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 14px 18px;

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

  margin-bottom: 20px;

}



.slicer-group {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.slicer-label {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--text-muted);

}



.slicer-select, .slicer-input {

  background: var(--bg-input);

  border: 1px solid var(--border-color);

  color: var(--text-primary);

  border-radius: var(--radius-sm);

  padding: 6px 12px;

  font-size: 13px;

  font-weight: 500;

  outline: none;

  transition: border-color 0.15s, box-shadow 0.15s;

}



.slicer-select:focus, .slicer-input:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 2px var(--primary-light);

}



.slicer-counter-badge {

  background: var(--primary-light);

  border: 1px solid var(--primary-border);

  color: var(--primary);

  font-size: 12px;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: var(--radius-sm);

  font-family: var(--font-mono);

  margin-left: auto;

}



/* 3D Viewport Controls Bar */

.studio-controls-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  margin-bottom: 12px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--border-light);

}



.controls-group {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.control-pill {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  color: var(--text-secondary);

  font-size: 12px;

  font-weight: 600;

  padding: 6px 12px;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: all 0.15s;

}



.control-pill:hover {

  background: var(--bg-hover);

  border-color: var(--border-strong);

  color: var(--text-primary);

}



.control-pill.active {

  background: var(--primary);

  color: #ffffff;

  border-color: var(--primary);

  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);

}



.explode-slider-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

  background: var(--bg-subtle);

  padding: 4px 12px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--border-color);

}



.explode-slider-wrap label {

  font-size: 11px;

  font-weight: 700;

  color: var(--text-muted);

  white-space: nowrap;

}



.explode-slider {

  width: 100px;

  cursor: pointer;

  accent-color: var(--primary);

}



/* 3D Canvas Box */

.building-canvas-wrap {

  width: 100%;

  height: 540px;

  position: relative;

  border-radius: var(--radius-md);

  overflow: hidden;

  border: 1px solid var(--border-color);

  background: var(--bg-canvas);

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);

}



.building-canvas {

  width: 100% !important;

  height: 100% !important;

  display: block;

}



/* Floating Raycasting HUD Card */

.building-3d-tooltip {

  position: absolute;

  pointer-events: none;

  z-index: 40;

  background: rgba(255, 255, 255, 0.94);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 14px 16px;

  min-width: 240px;

  max-width: 280px;

  box-shadow: var(--shadow-lg);

  font-family: var(--font-sans);

  color: var(--text-primary);

  transition: opacity 0.15s ease, transform 0.1s ease;

}



body.theme-dark .building-3d-tooltip {

  background: rgba(15, 23, 42, 0.92);

  border-color: #334155;

  box-shadow: 0 16px 32px -4px rgba(0, 0, 0, 0.6);

}



.tooltip-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 8px;

  border-bottom: 1px solid var(--border-light);

  padding-bottom: 6px;

}



.tooltip-unit {

  font-size: 14px;

  font-weight: 800;

  color: var(--text-primary);

  font-family: var(--font-mono);

}



.tooltip-meta {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4px 8px;

  font-size: 12px;

  color: var(--text-secondary);

  margin-bottom: 8px;

}



.tooltip-price {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  padding-top: 6px;

  border-top: 1px solid var(--border-light);

}



.price-val {

  font-size: 15px;

  font-weight: 800;

  color: var(--primary);

  font-family: var(--font-mono);

}



.quarter-tag {

  font-size: 10px;

  font-weight: 600;

  color: var(--emerald);

  background: var(--emerald-bg);

  padding: 2px 6px;

  border-radius: var(--radius-xs);

}



.status-pill {

  font-size: 10px;

  font-weight: 800;

  padding: 2px 8px;

  border-radius: 9999px;

  text-transform: uppercase;

}



.status-sold {

  background: var(--emerald-bg);

  color: var(--emerald);

  border: 1px solid var(--emerald-border);

}



.status-avail {

  background: var(--blue-bg);

  color: var(--blue);

  border: 1px solid var(--blue-border);

}



/* 3D Legend Bar */

.studio-legend-bar {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

  padding: 12px 16px;

  background: var(--bg-subtle);

  border-radius: var(--radius-sm);

  border: 1px solid var(--border-color);

  margin-top: 12px;

  font-size: 12px;

  color: var(--text-secondary);

}



.legend-chip {

  display: flex;

  align-items: center;

  gap: 6px;

  font-weight: 600;

}



.legend-color-dot {

  width: 12px;

  height: 12px;

  border-radius: 3px;

}



/* Selected Unit Inspector Banner */

.selected-unit-inspector {

  margin-top: 16px;

  padding: 16px 20px;

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

}



.inspector-meta {

  display: flex;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

}



.inspector-cell {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.inspector-cell-lbl {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--text-muted);

}



.inspector-cell-val {

  font-size: 14px;

  font-weight: 700;

  color: var(--text-primary);

  font-family: var(--font-mono);

}



/* Tower-Wise Cards Grid */

.towers-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;

  margin-bottom: 28px;

}



.tower-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 18px;

  box-shadow: var(--shadow-xs);

  cursor: pointer;

  transition: all 0.2s;

  position: relative;

  overflow: hidden;

}



.tower-card:hover {

  transform: translateY(-2px);

  border-color: var(--primary);

  box-shadow: var(--shadow-md);

}



.tower-card.active-tower {

  border-color: var(--primary);

  box-shadow: 0 0 0 2px var(--primary-light), var(--shadow-sm);

  background: var(--bg-hover);

}



.tower-card-head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  margin-bottom: 12px;

}



.tower-card-title {

  font-size: 15px;

  font-weight: 800;

  color: var(--text-primary);

}



.tower-stats-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-bottom: 12px;

}



/* Sub-Typology Nested Hierarchy */

.typology-parent-row {

  background: var(--bg-surface);

  font-weight: 700;

  cursor: pointer;

  transition: background 0.15s;

}



.typology-parent-row:hover {

  background: var(--bg-subtle);

}



.typology-sub-row {

  background: var(--bg-subtle);

  font-size: 12px;

  transition: background 0.15s;

}



.typology-sub-row:hover {

  background: var(--bg-hover);

}



.sub-indent-cell {

  padding-left: 36px !important;

  position: relative;

}



.sub-indent-cell::before {

  content: "↳";

  position: absolute;

  left: 18px;

  color: var(--text-muted);

  font-weight: 700;

}



.variant-pill {

  font-size: 10px;

  font-weight: 700;

  padding: 2px 6px;

  border-radius: var(--radius-xs);

  text-transform: uppercase;

}



.variant-compact {

  background: var(--blue-bg);

  color: var(--blue);

  border: 1px solid var(--blue-border);

}



.variant-standard {

  background: var(--emerald-bg);

  color: var(--emerald);

  border: 1px solid var(--emerald-border);

}



.variant-grande {

  background: var(--amber-bg);

  color: var(--amber);

  border: 1px solid var(--amber-border);

}



/* Timeline Pricing Comparison Section */

.timeline-pricing-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  margin-bottom: 28px;

}



.timeline-controls-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 16px;

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--border-light);

}



.timeline-chart-box {

  width: 100%;

  height: 380px;

}



/* ==========================================================================

   GEOGRAPHIC VECTOR MAP & SPATIAL GIS DRAWER

   ========================================================================== */



.map-layout-grid {

  display: grid;

  grid-template-columns: 1fr 340px;

  gap: 20px;

  align-items: start;

}



@media (max-width: 1024px) {

  .map-layout-grid {

    grid-template-columns: 1fr;

  }

}



.map-viewport-wrapper {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  position: relative;

}



.gis-map-box {

  width: 100%;

  height: 680px;

  position: relative;

  background: var(--bg-canvas);

}



.map-sidebar-drawer {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  height: 680px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  box-shadow: var(--shadow-sm);

}



.drawer-header {

  padding: 16px 20px;

  border-bottom: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: var(--bg-surface);

}



.drawer-list {

  flex: 1;

  overflow-y: auto;

  padding: 14px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.map-project-card {

  padding: 14px;

  background: var(--bg-subtle);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  cursor: pointer;

  transition: all 0.15s;

}



.map-project-card:hover {

  border-color: var(--primary);

  background: var(--bg-hover);

  transform: translateX(2px);

}



.map-project-card.active-pin {

  border-color: var(--primary);

  box-shadow: 0 0 0 2px var(--primary-light);

  background: var(--bg-hover);

}



.map-card-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;

}



.map-card-name {

  font-size: 13px;

  font-weight: 700;

  color: var(--text-primary);

  line-height: 1.3;

}



.map-card-meta {

  font-size: 11px;

  color: var(--text-muted);

  margin-bottom: 8px;

}



.map-card-stats {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 11px;

  border-top: 1px solid var(--border-light);

  padding-top: 6px;

}



/* Custom Google Map Pins */

.custom-google-pin-container {

  background: transparent !important;

  border: none !important;

}



.custom-google-pin {

  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  display: block;

}



.custom-google-pin:hover {

  transform: scale(1.18) translateY(-4px);

  z-index: 999;

}



.custom-google-pin.pin-selected {

  transform: scale(1.22) translateY(-6px);

  z-index: 1000;

}



.pin-beacon {

  animation: pinPulse 2.2s infinite ease-out;

}



@keyframes pinPulse {

  0% { transform: translateX(-50%) scale(1); opacity: 0.9; }

  100% { transform: translateX(-50%) scale(3.5); opacity: 0; }

}



/* Custom Leaflet Popup Styling */

.custom-leaflet-popup .leaflet-popup-content-wrapper {

  background: var(--bg-surface) !important;

  color: var(--text-primary) !important;

  border-radius: var(--radius-md) !important;

  box-shadow: var(--shadow-lg) !important;

  border: 1px solid var(--border-color) !important;

  padding: 0 !important;

}



.custom-leaflet-popup .leaflet-popup-content {

  margin: 14px 16px !important;

  font-family: var(--font-sans) !important;

  line-height: 1.4 !important;

}



.custom-leaflet-popup .leaflet-popup-tip {

  background: var(--bg-surface) !important;

  box-shadow: none !important;

}



.custom-leaflet-popup a.leaflet-popup-close-button {

  color: var(--text-muted) !important;

  padding: 8px !important;

}



.map-popup-card {

  font-family: var(--font-sans);

}



.map-popup-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 6px;

}



.map-popup-dev {

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.map-popup-title {

  font-size: 14px;

  font-weight: 800;

  margin: 0 0 2px 0;

  color: var(--text-primary);

  line-height: 1.3;

}



.map-popup-phase {

  font-size: 11px;

  color: var(--text-muted);

  margin-bottom: 8px;

}



.map-popup-meta {

  font-size: 11px;

  color: var(--text-secondary);

  line-height: 1.5;

  margin-bottom: 8px;

}



.map-popup-metrics {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 6px;

  background: var(--bg-subtle);

  padding: 6px 8px;

  border-radius: var(--radius-xs);

  margin-bottom: 10px;

  text-align: center;

}



.map-metric-lbl {

  display: block;

  font-size: 9px;

  text-transform: uppercase;

  color: var(--text-muted);

  font-weight: 700;

}



.map-metric-val {

  font-size: 12px;

  font-weight: 800;

  color: var(--text-primary);

}



.map-popup-actions {

  display: flex;

  gap: 8px;

  justify-content: space-between;

}



/* ==========================================================================

   AMBIENT LUXURY GLOW & BADGE INDICATORS

   ========================================================================== */



body::before {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 380px;

  background: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(99, 102, 241, 0.08), transparent);

  pointer-events: none;

  z-index: 0;

}



body.theme-dark::before {

  background: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(99, 102, 241, 0.15), transparent);

}



.badge-dot {

  display: inline-block;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  margin-right: 6px;

  background-color: currentColor;

  box-shadow: 0 0 8px currentColor;

}



/* ==========================================================================

   PROJECT START DATE & STATUTORY TIMELINE PROGRESS BANNER

   ========================================================================== */



.project-timeline-banner {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 16px 20px;

  margin-bottom: 24px;

  box-shadow: var(--shadow-xs);

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.timeline-banner-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

}



.timeline-dates-group {

  display: flex;

  align-items: center;

  gap: 24px;

  flex-wrap: wrap;

}



.timeline-date-point {

  display: flex;

  flex-direction: column;

}



.timeline-date-lbl {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--text-muted);

  letter-spacing: 0.04em;

}



.timeline-date-val {

  font-family: var(--font-mono);

  font-size: 13px;

  font-weight: 700;

  color: var(--text-primary);

}



.timeline-progress-track {

  width: 100%;

  height: 8px;

  background: var(--bg-subtle);

  border-radius: 4px;

  overflow: hidden;

  position: relative;

}



.timeline-progress-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--primary), var(--emerald));

  border-radius: 4px;

  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



/* ==========================================================================

   CUSTOM CHART STUDIO ("BUILD YOUR OWN")

   ========================================================================== */



.chart-studio-layout {

  display: grid;

  grid-template-columns: 340px 1fr;

  gap: 24px;

  align-items: start;

}



@media (max-width: 1024px) {

  .chart-studio-layout {

    grid-template-columns: 1fr;

  }

}



.chart-studio-drawer {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 20px;

  box-shadow: var(--shadow-sm);

}



.drawer-section {

  margin-bottom: 20px;

  padding-bottom: 16px;

  border-bottom: 1px solid var(--border-light);

}



.drawer-section:last-child {

  border-bottom: none;

  margin-bottom: 0;

  padding-bottom: 0;

}



.drawer-section-title {

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: var(--text-muted);

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.pills-selector {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.pill-btn {

  padding: 5px 10px;

  font-size: 11px;

  font-weight: 600;

  border-radius: var(--radius-xs);

  border: 1px solid var(--border-color);

  background: var(--bg-card);

  color: var(--text-secondary);

  cursor: pointer;

  transition: all 0.15s ease;

}



.pill-btn:hover {

  background: var(--bg-hover);

  border-color: var(--border-strong);

  color: var(--text-primary);

}



.pill-btn.active {

  background: var(--primary);

  border-color: var(--primary);

  color: #fff;

  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);

}



.metric-checkbox-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.metric-check-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 500;

  color: var(--text-primary);

  cursor: pointer;

  user-select: none;

}



.metric-check-item input[type="checkbox"] {

  accent-color: var(--primary);

  width: 15px;

  height: 15px;

  cursor: pointer;

}



.metric-check-item:hover {

  color: var(--primary);

}



.chart-studio-canvas-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  display: flex;

  flex-direction: column;

  min-height: 520px;

}



.chart-canvas-box {

  width: 100%;

  height: 440px;

}



/* Forced Colors Fallback */

@media (forced-colors: active) {

  .app-header,

  .executive-card,

  .ipc-table-card,

  .chart-studio-drawer,

  .chart-studio-canvas-card,

  .project-timeline-banner {

    border: 1px solid CanvasText !important;

  }

}



/* ==========================================================================

   COMPETITOR INTELLIGENCE INTERACTIVE MATRIX & QUARTILE DISTRIBUTION STYLES

   ========================================================================== */



.matrix-toolbar {

  background: var(--bg-surface);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 16px 20px;

  margin-bottom: 20px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  box-shadow: var(--shadow-xs);

}



.matrix-toolbar-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

}



.matrix-toggles-strip {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



.toggle-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  font-size: 11px;

  font-weight: 600;

  border-radius: var(--radius-xs);

  border: 1px solid var(--border-color);

  background: var(--bg-card);

  color: var(--text-secondary);

  cursor: pointer;

  user-select: none;

  transition: all 0.15s ease;

}



.toggle-chip:hover {

  background: var(--bg-hover);

  border-color: var(--border-strong);

  color: var(--text-primary);

}



.toggle-chip.active {

  background: var(--primary-subtle, rgba(37, 99, 235, 0.1));

  border-color: var(--primary);

  color: var(--primary);

  font-weight: 700;

}



.toggle-chip.active.chip-sanctioned {

  background: rgba(99, 102, 241, 0.12);

  border-color: #6366f1;

  color: #4f46e5;

}



.toggle-chip.active.chip-sold {

  background: rgba(16, 185, 129, 0.12);

  border-color: #10b981;

  color: #059669;

}



.toggle-chip.active.chip-col {

  background: rgba(245, 158, 11, 0.12);

  border-color: #f59e0b;

  color: #d97706;

}



.toggle-chip.active.chip-inc {

  background: rgba(139, 92, 246, 0.12);

  border-color: #8b5cf6;

  color: #7c3aed;

}



.toggle-chip.active.chip-colunits {

  background: rgba(6, 182, 212, 0.12);

  border-color: #06b6d4;

  color: #0891b2;

}



.toggle-chip.active.chip-colearlier {

  background: rgba(244, 63, 94, 0.12);

  border-color: #f43f5e;

  color: #e11d48;

}





/* ==========================================================================

   INSTITUTIONAL SOLID 2-TIER FREEZE PANE (TEXT WRAPPING · 100% OPAQUE · SLEEK PILLS)

   ========================================================================== */



/* 1. Scrollable Container */

.competitor-matrix-wrapper {

  background: #ffffff !important;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  overflow-x: auto !important;

  overflow-y: auto !important;

  max-height: calc(100vh - 280px) !important;

  height: calc(100vh - 280px) !important;

  position: relative !important;

  min-width: 0 !important;

  display: block !important;

}

body.theme-dark .competitor-matrix-wrapper {

  background: #0f172a !important;

}



.competitor-matrix-wrapper::-webkit-scrollbar {

  height: 14px !important;

  width: 10px !important;

}

.competitor-matrix-wrapper::-webkit-scrollbar-track {

  background: #f1f5f9 !important;

  border-radius: 7px;

  border: 1px solid #cbd5e1;

}

.competitor-matrix-wrapper::-webkit-scrollbar-thumb {

  background: #2563eb !important;

  border-radius: 7px;

  border: 2px solid #ffffff;

}

.competitor-matrix-wrapper::-webkit-scrollbar-thumb:hover {

  background: #1d4ed8 !important;

}



/* 2. Fixed Geometry Table with Text Wrapping */

.competitor-matrix-table {

  table-layout: fixed !important;

  border-collapse: separate !important;

  border-spacing: 0 !important;

  width: max-content !important;

  font-size: 12px;

  font-variant-numeric: tabular-nums;

  margin: 0;

  background: #ffffff !important;

}

body.theme-dark .competitor-matrix-table {

  background: #0f172a !important;

}



/* 3. Universal Sticky Header (2 Tiers Only: Exactly 34px each = 68px total) */

.competitor-matrix-table thead th {

  position: sticky !important;

  border-right: 1px solid #cbd5e1 !important;

  border-bottom: 1px solid #cbd5e1 !important;

  white-space: nowrap !important;

  box-sizing: border-box !important;

  text-align: center !important;

  padding: 6px 8px !important;

}



.competitor-matrix-table tr.header-tier-1 th {

  top: 0px !important;

  height: 34px !important;

  z-index: 45 !important;

  font-weight: 700;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.competitor-matrix-table tr.header-tier-2 th {

  top: 34px !important;

  height: 34px !important;

  z-index: 44 !important;

  font-weight: 600;

  font-size: 11px;

}



/* SOLID OPAQUE COLORS (ZERO TRANSPARENCY) */

.competitor-matrix-table th.th-fixed {

  background: #f1f5f9 !important;

  color: #0f172a !important;

}

.competitor-matrix-table th.th-sanctioned {

  background: #e0e7ff !important;

  color: #312e81 !important;

  border-top: 3px solid #4338ca !important;

}

.competitor-matrix-table th.th-sanctioned-sub {

  background: #eef2ff !important;

  color: #3730a3 !important;

}

.competitor-matrix-table th.th-sold {

  background: #d1fae5 !important;

  color: #064e3b !important;

  border-top: 3px solid #059669 !important;

}

.competitor-matrix-table th.th-sold-sub {

  background: #ecfdf5 !important;

  color: #047857 !important;

}

.competitor-matrix-table th.th-collection {

  background: #fef3c7 !important;

  color: #78350f !important;

  border-top: 3px solid #d97706 !important;

}

.competitor-matrix-table th.th-collection-sub {

  background: #fffbeb !important;

  color: #b45309 !important;

}

.competitor-matrix-table th.th-incremental {

  background: #ede9fe !important;

  color: #581c87 !important;

  border-top: 3px solid #7c3aed !important;

}

.competitor-matrix-table th.th-incremental-sub {

  background: #f5f3ff !important;

  color: #6d28d9 !important;

}

.competitor-matrix-table th.th-col-units {

  background: #cffafe !important;

  color: #164e63 !important;

  border-top: 3px solid #0891b2 !important;

}

.competitor-matrix-table th.th-col-units-sub {

  background: #ecfeff !important;

  color: #0e7490 !important;

}

.competitor-matrix-table th.th-col-earlier {

  background: #ffe4e6 !important;

  color: #881337 !important;

  border-top: 3px solid #e11d48 !important;

}

.competitor-matrix-table th.th-col-earlier-sub {

  background: #fff1f2 !important;

  color: #be123c !important;

}



/* Dark Mode Solid Header Colors */

body.theme-dark .competitor-matrix-table th.th-fixed { background: #1e293b !important; color: #f8fafc !important; }

body.theme-dark .competitor-matrix-table th.th-sanctioned { background: #312e81 !important; color: #c7d2fe !important; }

body.theme-dark .competitor-matrix-table th.th-sanctioned-sub { background: #1e1b4b !important; color: #a5b4fc !important; }

body.theme-dark .competitor-matrix-table th.th-sold { background: #064e3b !important; color: #a7f3d0 !important; }

body.theme-dark .competitor-matrix-table th.th-sold-sub { background: #022c22 !important; color: #6ee7b7 !important; }

body.theme-dark .competitor-matrix-table th.th-collection { background: #78350f !important; color: #fde68a !important; }

body.theme-dark .competitor-matrix-table th.th-collection-sub { background: #451a03 !important; color: #fcd34d !important; }

body.theme-dark .competitor-matrix-table th.th-incremental { background: #581c87 !important; color: #ddd6fe !important; }

body.theme-dark .competitor-matrix-table th.th-incremental-sub { background: #3b0764 !important; color: #c4b5fd !important; }

body.theme-dark .competitor-matrix-table th.th-col-units { background: #164e63 !important; color: #a5f3fc !important; }

body.theme-dark .competitor-matrix-table th.th-col-units-sub { background: #083344 !important; color: #67e8f9 !important; }

body.theme-dark .competitor-matrix-table th.th-col-earlier { background: #881337 !important; color: #fecdd3 !important; }

body.theme-dark .competitor-matrix-table th.th-col-earlier-sub { background: #4c0519 !important; color: #fda4af !important; }



/* 4. Top-Left Intersection Double-Sticky Headers (rowspan="2", height 68px) */

.competitor-matrix-table thead th.sticky-col-1 {

  top: 0px !important;

  left: 0px !important;

  width: 120px !important;

  min-width: 120px !important;

  max-width: 120px !important;

  height: 68px !important;

  z-index: 85 !important;

  background: #e2e8f0 !important;

  color: #0f172a !important;

  vertical-align: middle !important;

}

.competitor-matrix-table thead th.sticky-col-2 {

  top: 0px !important;

  left: 120px !important;

  width: 230px !important;

  min-width: 230px !important;

  max-width: 230px !important;

  height: 68px !important;

  z-index: 84 !important;

  background: #e2e8f0 !important;

  color: #0f172a !important;

  vertical-align: middle !important;

}

.competitor-matrix-table thead th.sticky-col-3 {

  top: 0px !important;

  left: 350px !important;

  width: 160px !important;

  min-width: 160px !important;

  max-width: 160px !important;

  height: 68px !important;

  z-index: 83 !important;

  background: #e2e8f0 !important;

  color: #0f172a !important;

  vertical-align: middle !important;

}

.competitor-matrix-table thead th.sticky-col-4 {

  top: 0px !important;

  left: 510px !important;

  width: 95px !important;

  min-width: 95px !important;

  max-width: 95px !important;

  height: 68px !important;

  z-index: 82 !important;

  background: #e2e8f0 !important;

  color: #0f172a !important;

  vertical-align: middle !important;

}

.competitor-matrix-table thead th.sticky-col-5 {

  top: 0px !important;

  left: 605px !important;

  width: 55px !important;

  min-width: 55px !important;

  max-width: 55px !important;

  height: 68px !important;

  z-index: 81 !important;

  background: #e2e8f0 !important;

  color: #0f172a !important;

  border-right: 3px solid #2563eb !important;

  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15) !important;

  vertical-align: middle !important;

}



body.theme-dark .competitor-matrix-table thead th.sticky-col-1,

body.theme-dark .competitor-matrix-table thead th.sticky-col-2,

body.theme-dark .competitor-matrix-table thead th.sticky-col-3,

body.theme-dark .competitor-matrix-table thead th.sticky-col-4,

body.theme-dark .competitor-matrix-table thead th.sticky-col-5 {

  background: #1e293b !important;

  color: #f8fafc !important;

}



.th-dim-label {

  font-weight: 800;

  font-size: 11px;

  color: #0f172a;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}

.th-dim-sub {

  font-weight: 600;

  font-size: 10px;

  color: #64748b;

  margin-top: 3px;

}

body.theme-dark .th-dim-label { color: #f8fafc; }

body.theme-dark .th-dim-sub { color: #94a3b8; }



/* 5. Solid Frozen Body Cells with TEXT WRAPPING */

.competitor-matrix-table td {

  padding: 6px 8px !important;

  border-right: 1px solid #e2e8f0 !important;

  border-bottom: 1px solid #e2e8f0 !important;

  background: #ffffff !important;

  color: #0f172a !important;

  box-sizing: border-box !important;

}

body.theme-dark .competitor-matrix-table td {

  border-color: #334155 !important;

  background: #0f172a !important;

  color: #f1f5f9 !important;

}



.competitor-matrix-table td.align-left { text-align: left !important; }

.competitor-matrix-table td.align-center { text-align: center !important; }



/* Wrap Text specifically on Dimension Columns */

.competitor-matrix-table td.sticky-col-1,

.competitor-matrix-table td.sticky-col-2,

.competitor-matrix-table td.sticky-col-3,

.competitor-matrix-table td.sticky-col-4 {

  white-space: normal !important;

  word-wrap: break-word !important;

  overflow-wrap: break-word !important;

  word-break: normal !important;

  line-height: 1.35 !important;

  vertical-align: middle !important;

}



/* Data cells stay single line tabular numbers */

.competitor-matrix-table td.sticky-col-5,

.competitor-matrix-table td:not(.sticky-col-1):not(.sticky-col-2):not(.sticky-col-3):not(.sticky-col-4) {

  white-space: nowrap !important;

  vertical-align: middle !important;

  text-align: right;

}



.competitor-matrix-table .sticky-col-1 {

  position: sticky !important;

  left: 0px !important;

  width: 120px !important;

  min-width: 120px !important;

  max-width: 120px !important;

  z-index: 25 !important;

  background: #ffffff !important;

}

.competitor-matrix-table .sticky-col-2 {

  position: sticky !important;

  left: 120px !important;

  width: 230px !important;

  min-width: 230px !important;

  max-width: 230px !important;

  z-index: 24 !important;

  background: #ffffff !important;

}

.competitor-matrix-table .sticky-col-3 {

  position: sticky !important;

  left: 350px !important;

  width: 160px !important;

  min-width: 160px !important;

  max-width: 160px !important;

  z-index: 23 !important;

  background: #ffffff !important;

}

.competitor-matrix-table .sticky-col-4 {

  position: sticky !important;

  left: 510px !important;

  width: 95px !important;

  min-width: 95px !important;

  max-width: 95px !important;

  z-index: 22 !important;

  background: #ffffff !important;

}

.competitor-matrix-table .sticky-col-5 {

  position: sticky !important;

  left: 605px !important;

  width: 55px !important;

  min-width: 55px !important;

  max-width: 55px !important;

  z-index: 21 !important;

  background: #ffffff !important;

  border-right: 3px solid #2563eb !important;

  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.15) !important;

  text-align: center !important;

}



body.theme-dark .competitor-matrix-table .sticky-col-1,

body.theme-dark .competitor-matrix-table .sticky-col-2,

body.theme-dark .competitor-matrix-table .sticky-col-3,

body.theme-dark .competitor-matrix-table .sticky-col-4,

body.theme-dark .competitor-matrix-table .sticky-col-5 {

  background: #0f172a !important;

}



/* Project Name cell flex container with text wrapping */

.matrix-proj-cell {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  width: 100%;

  box-sizing: border-box;

}

.matrix-proj-name {

  white-space: normal !important;

  word-wrap: break-word !important;

  overflow-wrap: break-word !important;

  line-height: 1.35;

  font-size: 11.5px;

  flex: 1;

  min-width: 0;

}

.btn-matrix-row-chart {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 3px;

  padding: 2px 6px;

  font-size: 10px;

  font-weight: 600;

  border-radius: 4px;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  color: #1e293b;

  cursor: pointer;

  white-space: nowrap;

  transition: all 0.15s ease;

}

.btn-matrix-row-chart:hover {

  background: #2563eb;

  color: #ffffff;

  border-color: #2563eb;

}

body.theme-dark .btn-matrix-row-chart {

  background: #1e293b;

  border-color: #475569;

  color: #f1f5f9;

}

body.theme-dark .btn-matrix-row-chart:hover {

  background: #3b82f6;

  color: #ffffff;

}



/* Row Hover (Solid colors) */

.competitor-matrix-table tr:hover td {

  background: #f1f5f9 !important;

}

body.theme-dark .competitor-matrix-table tr:hover td {

  background: #1e293b !important;

}



/* Developer & Project Totals (Solid colors) */

.competitor-matrix-table tr.row-dev-total td {

  background: #eff6ff !important;

  font-weight: 800 !important;

  font-size: 13px !important;

  border-top: 2px solid #2563eb !important;

  border-bottom: 2px solid #2563eb !important;

}

.competitor-matrix-table tr.row-proj-total td {

  background: #f8fafc !important;

  font-weight: 700 !important;

  border-top: 1px dashed #94a3b8 !important;

}

body.theme-dark .competitor-matrix-table tr.row-dev-total td {

  background: #1e3a8a !important;

}

body.theme-dark .competitor-matrix-table tr.row-proj-total td {

  background: #1e293b !important;

}



/* ==========================================================================

   MODERN SEGMENTED PILL GROUPS, TOGGLE CHIPS & ICONS (SCREENSHOT 2 FIX)

   ========================================================================== */



/* Modern Segmented Control Pill Group */

.dist-pill-group {

  display: inline-flex;

  align-items: center;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 2px;

  gap: 2px;

}

body.theme-dark .dist-pill-group {

  background: #1e293b;

  border-color: #334155;

}



.dist-pill-btn {

  border: none;

  background: transparent;

  color: #475569;

  font-size: 11px;

  font-weight: 600;

  padding: 5px 10px;

  border-radius: 4px;

  cursor: pointer;

  transition: all 0.15s ease;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;

  line-height: 1.2;

}

.dist-pill-btn:hover {

  color: #0f172a;

  background: rgba(255, 255, 255, 0.6);

}

.dist-pill-btn.active {

  background: #ffffff;

  color: #2563eb;

  font-weight: 700;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

}

body.theme-dark .dist-pill-btn {

  color: #94a3b8;

}

body.theme-dark .dist-pill-btn:hover {

  color: #f8fafc;

  background: rgba(255, 255, 255, 0.05);

}

body.theme-dark .dist-pill-btn.active {

  background: #0f172a;

  color: #60a5fa;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

}



/* Toggle Chips in Toolbar Row 1 */

.matrix-toggles-strip {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}

.toggle-chip {

  border: 1px solid #cbd5e1;

  background: #ffffff;

  color: #475569;

  font-size: 11px;

  font-weight: 600;

  padding: 4px 10px;

  border-radius: 14px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: all 0.15s ease;

  white-space: nowrap;

}

body.theme-dark .toggle-chip {

  background: #1e293b;

  border-color: #334155;

  color: #94a3b8;

}

.toggle-chip:hover {

  border-color: #2563eb;

  color: #2563eb;

}

.toggle-chip.active.chip-sanctioned {

  background: #e0e7ff;

  color: #3730a3;

  border-color: #818cf8;

  font-weight: 700;

}

.toggle-chip.active.chip-sold {

  background: #d1fae5;

  color: #065f46;

  border-color: #34d399;

  font-weight: 700;

}

.toggle-chip.active.chip-col {

  background: #fef3c7;

  color: #92400e;

  border-color: #fcd34d;

  font-weight: 700;

}

.toggle-chip.active.chip-inc {

  background: #ede9fe;

  color: #5b21b6;

  border-color: #a78bfa;

  font-weight: 700;

}

.toggle-chip.active.chip-colunits {

  background: #cffafe;

  color: #155e75;

  border-color: #67e8f9;

  font-weight: 700;

}

.toggle-chip.active.chip-colearlier {

  background: #ffe4e6;

  color: #9f1239;

  border-color: #fda4af;

  font-weight: 700;

}



/* Modern Chart on Click Toggle Switch */

.btn-toggle-switch {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 5px 12px;

  font-size: 11px;

  font-weight: 600;

  border-radius: 6px;

  border: 1px solid #cbd5e1;

  background: #ffffff;

  color: #475569;

  cursor: pointer;

  transition: all 0.15s ease;

  height: 30px;

}

body.theme-dark .btn-toggle-switch {

  background: #1e293b;

  border-color: #334155;

  color: #cbd5e1;

}

.btn-toggle-switch:hover {

  border-color: #2563eb;

  color: #0f172a;

}

.btn-toggle-switch.active {

  background: #eff6ff;

  border-color: #2563eb;

  color: #2563eb;

}

body.theme-dark .btn-toggle-switch.active {

  background: #1e3a8a;

  border-color: #3b82f6;

  color: #93c5fd;

}

.toggle-switch-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #94a3b8;

  display: inline-block;

}

.btn-toggle-switch.active .toggle-switch-dot {

  background: #10b981;

  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);

}



/* Modern Matrix Left/Right Scroll Buttons */

.btn-matrix-scroll {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 5px 10px;

  font-size: 11px;

  font-weight: 600;

  border-radius: 6px;

  border: 1px solid #cbd5e1;

  background: #ffffff;

  color: #334155;

  cursor: pointer;

  transition: all 0.15s ease;

  height: 30px;

}

body.theme-dark .btn-matrix-scroll {

  background: #1e293b;

  border-color: #334155;

  color: #cbd5e1;

}

.btn-matrix-scroll:hover {

  background: #2563eb;

  color: #ffffff;

  border-color: #2563eb;

}



/* Floating Sticky Bottom Scroll Controller Dock */

.matrix-sticky-scroll-dock {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;

  position: sticky;

  bottom: 0;

  z-index: 100;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-top: 2px solid #2563eb;

  border-radius: var(--radius-md);

  padding: 8px 16px;

  margin-top: 4px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);

}

body.theme-dark .matrix-sticky-scroll-dock {

  background: #0f172a;

  border-color: #334155;

}



.dock-jump-chips {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



.dock-jump-btn {

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 12px;

  padding: 3px 10px;

  font-size: 11px;

  font-weight: 600;

  color: #334155;

  cursor: pointer;

  transition: all 0.15s ease;

  white-space: nowrap;

}

body.theme-dark .dock-jump-btn {

  background: #1e293b;

  border-color: #475569;

  color: #cbd5e1;

}

.dock-jump-btn:hover {

  background: #2563eb;

  color: #ffffff;

  border-color: #2563eb;

}



.dock-slider-row {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 260px;

}

.dock-slider {

  flex: 1;

  cursor: pointer;

  accent-color: #2563eb;

  height: 6px;

}



/* Sidebar and Layout */

.matrix-workspace-layout {

  display: grid;

  grid-template-columns: 280px minmax(0, 1fr);

  gap: 16px;

  align-items: start;

  width: 100%;

}

.matrix-workspace-layout.sidebar-collapsed {

  grid-template-columns: minmax(0, 1fr);

}

.matrix-workspace-layout > * {

  min-width: 0 !important;

}



.matrix-tree-sidebar {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xs);

  padding: 16px;

  height: calc(100vh - 280px);

  position: sticky;

  top: 80px;

  overflow-y: auto;

}

body.theme-dark .matrix-tree-sidebar {

  background: #0f172a;

  border-color: #334155;

}

.matrix-workspace-layout.sidebar-collapsed .matrix-tree-sidebar {

  display: none !important;

}



.tree-node-dev {

  margin-bottom: 10px;

}

.tree-dev-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 8px;

  border-radius: var(--radius-sm);

  cursor: pointer;

  font-weight: 700;

  font-size: 12px;

  color: #0f172a;

  background: #f1f5f9;

}

body.theme-dark .tree-dev-header {

  color: #f1f5f9;

  background: #1e293b;

}

.tree-dev-header:hover {

  background: #e2e8f0;

  color: #2563eb;

}

.tree-projects-list {

  padding-left: 12px;

  margin-top: 4px;

  display: flex;

  flex-direction: column;

  gap: 3px;

}

.tree-project-item {

  padding: 4px 8px;

  font-size: 11px;

  color: #475569;

  border-radius: var(--radius-sm);

  cursor: pointer;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

body.theme-dark .tree-project-item {

  color: #94a3b8;

}

.tree-project-item:hover, .tree-project-item.active {

  background: rgba(37, 99, 235, 0.1);

  color: #2563eb;

  font-weight: 600;

}



/* Column Chooser Panel */

.matrix-column-chooser-panel {

  display: none;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: var(--radius-md);

  padding: 16px 20px;

  margin-bottom: 16px;

  box-shadow: var(--shadow-sm);

}

body.theme-dark .matrix-column-chooser-panel {

  background: #0f172a;

  border-color: #334155;

}

.matrix-column-chooser-panel.is-open {

  display: block;

}

.chooser-preset-strip {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 14px;

  padding-bottom: 12px;

  border-bottom: 1px solid #cbd5e1;

  flex-wrap: wrap;

}

.chooser-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 12px;

}

.chooser-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  color: #0f172a;

  cursor: pointer;

  padding: 6px 10px;

  background: #f8fafc;

  border-radius: var(--radius-sm);

  border: 1px solid #cbd5e1;

  transition: all 0.15s ease;

}

body.theme-dark .chooser-item {

  background: #1e293b;

  color: #f1f5f9;

  border-color: #334155;

}

.chooser-item:hover {

  background: #e2e8f0;

  border-color: #2563eb;

}

.chooser-item input[type="checkbox"] {

  cursor: pointer;

}





/* ==========================================================================

   HALF-PAGE CHART DRAWER FOR COMPETITOR MATRIX

   ========================================================================== */

.matrix-chart-backdrop {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(15, 23, 42, 0.45);

  backdrop-filter: blur(4px);

  z-index: 1050;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s ease;

}

.matrix-chart-backdrop.is-open {

  opacity: 1;

  pointer-events: auto;

}



.matrix-chart-card {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  width: 50vw;

  min-width: 550px;

  max-width: 900px;

  background: #ffffff;

  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);

  z-index: 1060;

  transform: translateX(100%);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

  padding: 24px 28px;

  overflow-y: auto;

  box-sizing: border-box;

}

body.theme-dark .matrix-chart-card {

  background: #0f172a;

  border-left: 1px solid #334155;

  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);

}

.matrix-chart-card.is-open {

  transform: translateX(0);

}



.matrix-chart-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;

  padding-bottom: 16px;

  border-bottom: 1px solid #e2e8f0;

  margin-bottom: 16px;

}

body.theme-dark .matrix-chart-header {

  border-bottom-color: #334155;

}



.matrix-chart-box {

  width: 100%;

  height: 480px;

  min-height: 400px;

  border-radius: var(--radius-md);

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  margin-top: 8px;

}

body.theme-dark .matrix-chart-box {

  background: #1e293b;

  border-color: #334155;

}





/* ==========================================================================

   SIDE-BY-SIDE 3D BUILDING CANVAS & DOCKED UNIT DOSSIER PANEL (NO BLUR)

   ========================================================================== */

.building-studio-side-layout {

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) 380px !important;

  gap: 16px !important;

  align-items: stretch !important;

  width: 100% !important;

  margin-bottom: 24px !important;

}



@media (max-width: 1100px) {

  .building-studio-side-layout {

    grid-template-columns: 1fr !important;

  }

}



.building-studio-canvas-col {

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

}



.building-canvas-wrap {

  width: 100% !important;

  height: 560px !important;

  min-height: 500px !important;

  position: relative !important;

  border-radius: var(--radius-md) !important;

  overflow: hidden !important;

  border: 1px solid var(--border-color) !important;

  background: var(--bg-canvas) !important;

}



.building-studio-unit-dock {

  background: #ffffff !important;

  border: 1px solid var(--border-color) !important;

  border-radius: var(--radius-md) !important;

  display: flex !important;

  flex-direction: column !important;

  height: 560px !important;

  min-height: 500px !important;

  box-shadow: var(--shadow-sm) !important;

  overflow: hidden !important;

  position: relative !important;

}

body.theme-dark .building-studio-unit-dock {

  background: #0f172a !important;

  border-color: #334155 !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;

}



.unit-dock-header {

  padding: 12px 16px !important;

  border-bottom: 1px solid var(--border-color) !important;

  background: #f8fafc !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  flex-shrink: 0 !important;

}

body.theme-dark .unit-dock-header {

  background: #1e293b !important;

  border-color: #334155 !important;

}



.btn-dock-reset {

  border: 1px solid var(--border-color);

  background: transparent;

  color: var(--text-muted);

  border-radius: 4px;

  width: 22px;

  height: 22px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  cursor: pointer;

  transition: all 0.15s ease;

}

.btn-dock-reset:hover {

  background: #fee2e2;

  color: #ef4444;

  border-color: #fca5a5;

}



.unit-dock-content {

  flex: 1 !important;

  overflow-y: auto !important;

  padding: 16px !important;

}

.unit-dock-content::-webkit-scrollbar {

  width: 6px;

}

.unit-dock-content::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 3px;

}

body.theme-dark .unit-dock-content::-webkit-scrollbar-thumb {

  background: #475569;

}



.unit-specs-table {

  width: 100% !important;

  border-collapse: collapse !important;

  font-size: 12px !important;

}

.unit-specs-table th {

  text-align: left !important;

  color: var(--text-muted) !important;

  font-weight: 500 !important;

  padding: 6px 0 !important;

  border-bottom: 1px solid #f1f5f9 !important;

  width: 45% !important;

}

.unit-specs-table td {

  text-align: right !important;

  color: var(--text-primary) !important;

  font-weight: 600 !important;

  padding: 6px 0 !important;

  border-bottom: 1px solid #f1f5f9 !important;

}

body.theme-dark .unit-specs-table th,

body.theme-dark .unit-specs-table td {

  border-bottom-color: #1e293b !important;

}



/* Ensure unit drawer and backdrop NEVER display or blur */

#unit-detail-backdrop,

.unit-detail-drawer,

#unit-detail-drawer {

  display: none !important;

  opacity: 0 !important;

  pointer-events: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}





/* ==========================================================================

   STATUTORY FILING ACCORDION (DEFAULT HIDDEN · HIDE / UNHIDE LAYER)

   ========================================================================== */

.official-filings-card {

  background: #ffffff !important;

  border: 1px solid var(--border-color) !important;

  border-radius: var(--radius-md) !important;

  padding: 12px 18px !important;

  margin-top: 14px !important;

  box-shadow: var(--shadow-xs) !important;

  transition: all 0.2s ease !important;

}

body.theme-dark .official-filings-card {

  background: #0f172a !important;

  border-color: #334155 !important;

}



.official-filings-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 12px !important;

  flex-wrap: wrap !important;

}



.official-filings-grid {

  display: none; /* DEFAULT HIDDEN / COLLAPSED */

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;

  gap: 10px !important;

  margin-top: 14px !important;

  padding-top: 14px !important;

  border-top: 1px solid var(--border-light, #f1f5f9) !important;

}

body.theme-dark .official-filings-grid {

  border-top-color: #334155 !important;

}

.official-filings-grid.is-expanded {

  display: grid !important;

}



.official-doc-item {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  padding: 10px 14px !important;

  background: #f8fafc !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: var(--radius-sm) !important;

  text-decoration: none !important;

  transition: all 0.15s ease !important;

}

body.theme-dark .official-doc-item {

  background: #1e293b !important;

  border-color: #334155 !important;

}

.official-doc-item:hover {

  border-color: #2563eb !important;

  background: #eff6ff !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;

}

body.theme-dark .official-doc-item:hover {

  background: #1e3a8a !important;

  border-color: #3b82f6 !important;

}



.doc-item-icon {

  font-size: 20px !important;

  flex-shrink: 0 !important;

}

.doc-item-body {

  flex: 1 !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

}

.doc-format-badge {

  font-size: 9px !important;

  font-weight: 700 !important;

  padding: 2px 5px !important;

  border-radius: 3px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.05em !important;

}

.badge-pdf {

  background: #fee2e2 !important;

  color: #b91c1c !important;

  border: 1px solid #fca5a5 !important;

}

.badge-html {

  background: #e0e7ff !important;

  color: #3730a3 !important;

  border: 1px solid #a5b4fc !important;

}



/* ==========================================================================

   PRODUCTION ANTI-SCRAPING, ANTI-EXPORT & IP PROTECTION STYLES

   ========================================================================== */



/* Prevent text selection across sensitive tabular assets */

body.shield-active .competitor-matrix-table,

body.shield-active .competitor-matrix-wrapper,

body.shield-active .building-studio-side-layout,

body.shield-active .dossier-wrapper,

body.shield-active .ipc-table,

body.shield-active .ipc-table-card {

  -webkit-user-select: none !important;

  -moz-user-select: none !important;

  -ms-user-select: none !important;

  user-select: none !important;

}



/* Security Status Pill in Header and Toolbars */

.security-status-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 5px 12px;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 14px;

  font-size: 11px;

  font-weight: 700;

  color: #334155;

  white-space: nowrap;

  letter-spacing: 0.02em;

}

body.theme-dark .security-status-pill {

  background: #1e293b;

  border-color: #334155;

  color: #94a3b8;

}

.security-pulse-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #10b981;

  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);

  display: inline-block;

  animation: pulse-secure 2s infinite;

}

@keyframes pulse-secure {

  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }

  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



/* Floating Anti-Scraping Notification Toast */

.security-toast {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 99999;

  background: #0f172a;

  color: #f8fafc;

  border: 1px solid #e11d48;

  border-left: 4px solid #ef4444;

  border-radius: var(--radius-md);

  padding: 12px 18px;

  font-size: 12px;

  font-weight: 600;

  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);

  opacity: 0;

  transform: translateY(20px);

  pointer-events: none;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  max-width: 420px;

}

.security-toast.is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* Disable Printing to PDF / Scraping via Print Dialog */

@media print {

  body * {

    display: none !important;

  }

  html:before {

    content: "RESTRICTED INTELLECTUAL PROPERTY: Bulk printing, exporting, or scraping of India Resi Intelligence datasets is strictly prohibited under institutional licensing.";

    display: block !important;

    font-size: 20px !important;

    font-weight: bold !important;

    color: #ef4444 !important;

    padding: 60px !important;

    text-align: center !important;

    background: #ffffff !important;

  }

}





/* ==========================================================================

   ENTERPRISE ANTI-SCREENSHOT & WATERMARK SHIELD STYLES

   ========================================================================== */



/* 1. Dynamic Floating Watermark across screen */

.dynamic-institutional-watermark {

  position: fixed !important;

  bottom: 10px !important;

  left: 0 !important;

  width: 100vw !important;

  overflow: hidden !important;

  white-space: nowrap !important;

  pointer-events: none !important;

  z-index: 9999 !important;

  opacity: 0.28 !important;

  font-family: var(--font-mono, monospace) !important;

  font-size: 10.5px !important;

  font-weight: 700 !important;

  letter-spacing: 0.12em !important;

  color: #64748b !important;

  text-transform: uppercase !important;

}

body.theme-dark .dynamic-institutional-watermark {

  color: #94a3b8 !important;

  opacity: 0.22 !important;

}



/* 2. Window Blur Masking (Snipping Tool & Loss-of-Focus Defense) */

/* Neutralized window-defocus blur to prevent blank screen in Incognito & Mobile touch */
body.shield-active.window-blurred-mask .competitor-matrix-table,
body.shield-active.window-blurred-mask .building-studio-side-layout,
body.shield-active.window-blurred-mask .dossier-wrapper,
body.shield-active.window-blurred-mask .ipc-table-card,
body.shield-active.window-blurred-mask .hero-executive-card,
body.shield-active.window-blurred-mask .chart-studio-canvas-card {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* 3. Screen Capture Shield Overlay (Triggered on PrintScreen / Screenshot attempt) */

.security-screen-shield {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  background: rgba(15, 23, 42, 0.96) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  z-index: 9999999 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  opacity: 0 !important;

  pointer-events: none !important;

  transition: opacity 0.12s ease !important;

}

.security-screen-shield.is-shielded {

  opacity: 1 !important;

  pointer-events: auto !important;

}



.shield-dialog {

  background: #1e293b !important;

  border: 1px solid #ef4444 !important;

  border-radius: 12px !important;

  padding: 32px 36px !important;

  max-width: 480px !important;

  text-align: center !important;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;

  transform: scale(0.95);

  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.security-screen-shield.is-shielded .shield-dialog {

  transform: scale(1) !important;

}

.shield-badge {

  display: inline-block;

  margin-top: 10px;

  font-size: 11px;

  color: #94a3b8;

  font-family: var(--font-mono, monospace);

  font-weight: 600;

}



/* ==========================================================================
   MOBILE & TOUCH-DEVICE RESPONSIVE SUITE (< 900px)
   ========================================================================== */

/* Prevent root horizontal overflow across the entire application */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Mobile Nav Bar - Hidden on Desktop */
.mobile-nav-bar {
  display: none;
}

@media (max-width: 900px) {
  /* Header adjustments */
  .app-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1000 !important;
  }

  .header-container {
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .brand-section {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .brand-logo {
    gap: 8px !important;
  }

  .brand-symbol {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  .brand-name {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-meta {
    display: none !important;
  }

  .nav-links {
    display: none !important; /* Replaced by touch-friendly mobile-nav-bar below */
  }

  .header-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .dataset-scope-toggle-group {
    display: none !important;
  }

  .security-status-pill {
    display: none !important;
  }

  .search-box {
    display: none !important;
  }

  .btn-theme-toggle {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mobile Touch Navigation Bar */
  .mobile-nav-bar {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-color) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    position: sticky !important;
    top: 50px !important;
    z-index: 999 !important;
  }

  .mobile-nav-bar::-webkit-scrollbar {
    display: none !important;
  }

  .mobile-nav-item {
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  .mobile-nav-item.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
  }

  /* Main Container */
  .app-main {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Hero Executive Card */
  .hero-executive-card {
    grid-template-columns: 1fr !important;
    padding: 18px 14px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-executive-card::before {
    display: none !important; /* CRITICAL: Hide 520px absolute vector blueprint that stretched mobile width */
  }

  .hero-headline {
    font-size: 19px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .hero-subheading {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .hero-actions-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .hero-actions-bar .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  /* Executive Scorecard */
  .executive-scorecard {
    margin-top: 14px !important;
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .scorecard-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .scorecard-metric {
    min-width: 0 !important;
  }

  .scorecard-val {
    font-size: 17px !important;
  }

  .scorecard-lbl {
    font-size: 11px !important;
  }

  .scorecard-sub {
    font-size: 10px !important;
  }

  /* IPC Metrics Ribbon */
  .ipc-metrics-ribbon {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ipc-metric-card {
    padding: 12px 10px !important;
  }

  .ipc-metric-number {
    font-size: 18px !important;
  }

  .ipc-metric-eyebrow {
    font-size: 10px !important;
  }

  .ipc-metric-note {
    font-size: 10px !important;
  }

  /* Section Containers */
  .section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
  }

  .section-head-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .section-headline {
    font-size: 18px !important;
  }

  .section-subtext {
    font-size: 12px !important;
  }

  /* Table Horizontal Scrolling */
  .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  /* Hide sticky scroll dock on mobile */
  .matrix-sticky-scroll-dock {
    display: none !important;
  }

  /* Matrix toolbar adjustments */
  .matrix-toolbar {
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .matrix-toolbar-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .dist-pill-group {
    flex-wrap: wrap !important;
  }

  .dist-pill-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* Mobile Safety: drawer and dialog containment */
  .matrix-chart-card {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
  }

  .shield-dialog {
    width: min(480px, 90vw) !important;
    max-width: 90vw !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   LINEAR / STRIPE MODERN INSTITUTIONAL LANDING PAGE STYLING
   ========================================================================== */

.landing-hero-container {
  padding: 40px 16px 24px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

body.theme-dark .hero-live-pill {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.pulsing-emerald-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
  animation: pulse-emerald 2s infinite ease-in-out;
}

@keyframes pulse-emerald {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pill-divider {
  color: rgba(16, 185, 129, 0.5);
  font-weight: 900;
}

.pill-badge {
  background: #10b981;
  color: #ffffff;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 10px;
}

.landing-headline {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  max-width: 920px;
  margin: 0 auto 18px;
}

.headline-gradient {
  display: block;
  background: linear-gradient(135deg, #2563eb 0%, #0284c7 50%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 4px;
}

.landing-subtext {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 760px;
  margin: 0 auto 30px;
}

.landing-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn-landing-primary {
  padding: 13px 28px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-landing-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -4px rgba(37, 99, 235, 0.5) !important;
}

.btn-landing-secondary {
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}

.btn-landing-outline {
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}

/* Linear Telemetry Strip */
.landing-telemetry-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 32px;
  max-width: 980px;
  margin: 0 auto 44px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.telemetry-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.telemetry-value {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.2;
}

.telemetry-emerald {
  color: #10b981 !important;
}

.telemetry-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.telemetry-divider {
  width: 1px;
  height: 38px;
  background: var(--border-color);
}

/* Linear Floating Product Showcase Window */
.landing-product-window {
  max-width: 1100px;
  margin: 0 auto 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  text-align: left;
}

.product-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
}

.window-traffic-lights {
  display: flex;
  align-items: center;
  gap: 7px;
}

.window-traffic-lights .light {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.window-traffic-lights .light.red { background: #ef4444; }
.window-traffic-lights .light.yellow { background: #f59e0b; }
.window-traffic-lights .light.green { background: #10b981; }

.window-title-tab {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.window-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.product-window-body {
  padding: 20px 24px;
}

.product-window-preview-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.preview-mini-kpi {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mini-kpi-num {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.mini-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Three Pillars Grid */
.landing-pillars-section {
  max-width: 1120px;
  margin: 40px auto 30px;
  padding: 0 16px;
}

.pillar-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pillar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(37, 99, 235, 0.3);
}

.pillar-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.pillar-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.pillar-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
  flex: 1;
}

.pillar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pillar-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* Landing CTA Banner */
.landing-cta-banner {
  margin: 50px auto 30px;
  max-width: 1100px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 44px 36px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

.cta-banner-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #f8fafc;
}

.cta-banner-text {
  font-size: 14px;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

.cta-banner-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Mobile Responsiveness for Option B */
@media (max-width: 900px) {
  .landing-headline {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .landing-subtext {
    font-size: 13px !important;
  }
  .landing-telemetry-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  .telemetry-divider {
    display: none !important;
  }
  .telemetry-value {
    font-size: 20px !important;
  }
  .pillar-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .landing-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .landing-cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .product-window-preview-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .product-window-preview-strip button {
    width: 100% !important;
  }
}


/* ==========================================================================
   INSTITUTIONAL LEGAL FOOTER & COMPLIANCE MODAL STYLING
   ========================================================================== */

.app-footer {
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 32px 0 20px;
  margin-top: 36px;
  color: var(--text-secondary);
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

.footer-inner-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 32px;
  box-sizing: border-box;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 24px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.footer-brand-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.footer-node-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  padding: 4px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 9999px;
  width: fit-content;
}

body.theme-dark .footer-node-pill {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.footer-col-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
}

.footer-nav-list a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav-list a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.footer-nav-list span {
  color: var(--text-muted);
}

.footer-brand-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 14px;
  max-width: 640px;
}

.footer-legal-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 28px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 48px;
  box-sizing: border-box;
}

.legal-notice-item {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legal-text {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

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

.legal-text a {
  color: var(--primary);
  text-decoration: underline;
}

.footer-bottom-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright {
  font-size: 12px;
}

.footer-meta-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* Legal Disclosure Modal */
.legal-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.legal-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-subtle);
}

.legal-modal-body {
  padding: 22px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.legal-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-subtle);
  display: flex;
  justify-content: flex-end;
}

/* Responsive Adjustments for Page-Width Legal Footer */
@media (max-width: 1024px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-legal-block {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px !important;
  }
}

@media (max-width: 640px) {
  .footer-inner-container {
    padding: 0 16px !important;
  }
  .footer-top-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-legal-block {
    padding: 16px !important;
  }
  .footer-bottom-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}