/* 
   visual-override.css - The Paint
   🛡️ ESTILOS QUIRÚRGICOS (Deep Space UI)
   NO borra nada, solo agrega definiciones para los clases nuevas.
*/

/* =============================================================================
   0. BRAND VISUAL HIERARCHY (v9.6.3 - Prominent Logo)
   Purpose: Professional vertical brand layout with commanding presence
   ============================================================================= */

/* Brand container - Vertical centered layout */
.brand {
  display: flex !important;
  flex-direction: row !important; /* Horizontal alignment for stability */
  align-items: center !important;
  justify-content: center !important; /* Center the logo */
  padding: 0 16px !important; /* Remove vertical padding to fit in 64px */
  gap: 0 !important;
  height: 64px !important; /* MATCH THE MAIN HEADER EXACTLY */
  min-height: 64px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
}

/* Logo image - Large and prominent */
.brand > img,
.brand img {
  width: auto !important; /* Allow wide logos */
  height: 48px !important; /* Visual Protocol v9.9 */
  max-width: none !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 16px rgba(74, 222, 128, 0.5)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  transform: translateY(-2px); /* Alignment Fix */
}

.brand:hover img {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 24px rgba(74, 222, 128, 0.7)) !important;
}

/* Logo text with high contrast */
.brand > span,
.brand .brand-text {
  display: block !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
  white-space: nowrap !important;
  text-align: center !important;
}

/* =============================================================================
   TECHNICAL DATA TYPOGRAPHY (v9.9 - Architect Tech)
   Purpose: Enforce JetBrains Mono on ALL numeric/engineering data
   ============================================================================= */

.technical-data {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
    letter-spacing: -0.02em;
}

/* =============================================================================
   GLOBAL TYPOGRAPHY PATTERNS (v9.9.1 - Auto-Coverage)
   Purpose: Apply JetBrains Mono to ALL numeric/engineering data across modules
   ============================================================================= */

/* Pattern 1: Common metric/result classes used in cards */
.metric-value,
.metric-val,
.metric-unit,
.result-value,
.layer-thickness,
.layer-spec,
.dimension-label,
.kpi-value,
.stat-value,
.data-value {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
    letter-spacing: -0.02em;
}

/* Pattern 2: ID patterns for dynamic values */
[id$="Value"],
[id$="Total"],
[id$="Result"],
[id$="Rt"],
[id$="Specific"] {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
}

/* Pattern 3: Data display in glass panels and cards */
.glass-panel .text-mono,
.card .text-mono,
.glass-card .text-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
}

/* Pattern 4: Normative references */
.norm-ref,
.methodology-badge {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* Pattern 5: Table cells with numeric data */
table.data-table td:not(:first-child),
.layer-table td.numeric,
.spec-table td {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
}

/* Pattern 6: Form inputs with numeric data */
input.technical-data,
input.glass-input.technical-data,
.glass-input.technical-data {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
    letter-spacing: -0.02em;
}

/* =============================================================================
   SIZE MODIFIERS (Hierarchy System)
   ============================================================================= */

/* Specific overrides for data values */
.technical-data.value-lg,
.value-lg {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.technical-data.value-md,
.value-md {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.technical-data.value-sm,
.value-sm {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.technical-data.unit,
.unit {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    color: #888 !important;
    font-weight: 400 !important;
}

/* Critical Point Alert - Clean Layout */
.critical-alert {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    margin-top: 16px;
}

.critical-alert .alert-icon {
    flex: 0 0 auto;
    font-size: 18px;
    color: #f59e0b;
}

.critical-alert .alert-content {
    flex: 1;
    font-size: 12px;
    line-height: 1.5;
    color: #fbbf24;
}

.critical-alert .alert-content strong {
    color: #fff;
}

.critical-alert .alert-content .culprit {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 1px;
}

/* =============================================================================
   SOBRECIMIENTOS (OGUC A.6) - Sub-bloque Piso
   ============================================================================= */
.sobrecimiento-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

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

.sobrecimiento-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.sobrecimiento-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr;
  gap: 12px;
  align-items: end;
}

.sobrecimiento-field label {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.sobrecimiento-status {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #e5e7eb;
}

.sobrecimiento-status-badge,
.sobrecimiento-inline {
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}

.status-pass {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
}

.status-fail {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
}

.status-pending {
  background: rgba(234, 179, 8, 0.16);
  color: #facc15;
}

.sobrecimiento-note {
  margin-top: 10px;
  font-size: 11px;
  color: #9ca3af;
}

@media (max-width: 900px) {
  .sobrecimiento-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 1. ENVELOPE GRID SYSTEM --- */
.envelope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columnas */
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .envelope-grid {
        grid-template-columns: 1fr; /* 1 Columna en móvil */
    }
}

/* --- 2. GLASS CARDS (Envolvente) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08); /* borde sutil */
    border-radius: 12px;
    padding: 0; /* Header tiene su propio padding */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
}

.card-header-glass {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05); /* Header ligeramente más claro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header-glass h4 {
    margin: 0;
    font-size: 1rem;
    color: #e5e7eb;
    font-weight: 600;
}

.orient-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary, #4ade80);  /* Green accent */
    color: white;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

.card-body-glass {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- 3. INPUTS MODERNOS --- */
.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-row label {
    font-size: 0.85rem;
    color: #9ca3af;
}

.glass-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    padding: 6px 10px;
    width: 80px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

.glass-input:focus {
    outline: none;
    border-color: var(--primary, #4ade80);  /* Green accent */
    background: rgba(0, 0, 0, 0.5);
}

/* --- 4. ORB GLOWS (Ambiente) --- */
.orb-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.orb-glow.norte { background: #3b82f6; top: -50px; right: -50px; }
.orb-glow.sur { background: #10b981; bottom: -50px; left: -50px; }
.orb-glow.este { background: #f59e0b; top: -50px; left: -50px; }
.orb-glow.oeste { background: #ef4444; bottom: -50px; right: -50px; }

/* --- 5. LIGHT MODE OVERRIDES --- */
body.light-mode {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(0, 0, 0, 0.1);
  color: #1a1a1d;
}
body.light-mode .glass-card {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0,0,0,0.1);
}
body.light-mode .card-header-glass h4 {
  color: #111;
}
body.light-mode .glass-input {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  border-color: #ccc;
}

/* --- 6. CONSTRUCTORA LAYOUT STABILIZATION (DEFINITIVE FIX) --- */
/* Root cause: Parent containers collapse on intrinsic sizing. 
   Solution: Force absolute minimum width matching the expanded state */
.constructora-layout {
  min-width: 1100px !important;
  width: 100% !important;
}

/* Also force sections container to fill available space */
.sections-container,
#section-layers,
.section.active {
  width: 100% !important;
  min-width: 0;
}

/* =============================================================================
   6.1 LAB-BENCH WIDTH STABILIZATION (v9.9.5)
   Purpose: Force ALL sections to maintain consistent full width
   Root Cause: Configuración and Demanda collapse when content is minimal
   ============================================================================= */

/* Force .lab-bench to always take full available width */
.lab-bench {
  width: 100% !important;
  min-width: 900px;
  box-sizing: border-box;
}

/* Específico para Configuración: el grid-2-1 debe ocupar todo el ancho */
#section-config .lab-bench {
  width: 100% !important;
}

#section-config .grid-2-1 {
  width: 100% !important;
  min-width: 800px;
}

/* Específico para Demanda: forzar ancho antes y después del cálculo */
#section-demand .lab-bench {
  width: 100% !important;
}

#section-demand .grid-3 {
  width: 100% !important;
  min-width: 800px;
}

/* Empty state placeholders should also maintain width */
#section-demand .glass-panel {
  min-height: 200px;
}

/* Responsive: Remove min-width on smaller screens */
@media (max-width: 1024px) {
  .lab-bench {
    min-width: auto;
  }
  
  #section-config .grid-2-1,
  #section-demand .grid-3 {
    min-width: auto;
  }
}

/* --- 7. ANÁLISIS U: VERIFICACIÓN NORMATIVA CARDS GRID --- */
/* Purpose: Display the 3 verification cards (Muros, Techumbre, Pisos V.) 
   in a horizontal row matching the R-Breakdown section layout */
#thermal-cards-grid,
.chart-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

/* Tablet Responsive: 2 columns on medium screens */
@media (max-width: 1200px) {
  #thermal-cards-grid,
  .chart-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Mobile Responsive: Stack cards vertically on small screens */
@media (max-width: 768px) {
  #thermal-cards-grid,
  .chart-grid-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Thermal cards internal layout adjustment for mobile */
  #thermal-cards-grid .glass-panel {
    padding: 0;
  }
  
  /* Intelligence deck also stacks */
  .intelligence-deck {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce padding in info-box on mobile */
  .info-box {
    padding: 12px 14px !important;
  }
  
  /* Hide methodology guide on very small screens for cleaner UX */
  @media (max-width: 480px) {
    .info-box {
      display: none;
    }
  }
}

/* --- 8. ANÁLISIS U: BUTTON STYLING (btn-ghost refinements) --- */
/* Ghost Magic Button (Auto-Corregir Espesor) */
.btn-ghost-magic {
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-ghost-magic:hover {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

/* Ghost Button (Editar Capas) */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #9ca3af;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #e5e7eb;
}

/* --- 9. ANÁLISIS U: COMPLIANCE CARD STATES --- */
.compliance-card {
  transition: all 0.3s ease;
}

.compliance-card.status-success {
  border-left: 4px solid #10b981 !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.compliance-card.status-success .icon-area {
  color: #10b981;
}

.compliance-card.status-fail {
  border-left: 4px solid #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.compliance-card.status-fail .icon-area {
  color: #ef4444;
}

.compliance-card.status-warn {
  border-left: 4px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.compliance-card.status-warn .icon-area {
  color: #f59e0b;
}

.compliance-card.status-pending {
  border-left: 4px solid #6b7280 !important;
  background: rgba(107, 115, 128, 0.08) !important;
}

/* --- 10. THERMAL CARDS: GAUGE CONTAINER POLISH --- */
#thermal-cards-grid .glass-panel {
  border-top-width: 3px;
  border-top-style: solid;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#thermal-cards-grid .glass-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Status Badge Enhancement */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

/* Thermal badge: ventilated cavity exclusion notice */
.thermal-inline-050 {
  margin-top: 8px;
}

.thermal-inline-051 {
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
}

/* Sortable feedback for layer reordering */
.sortable-ghost {
  opacity: 0.25 !important;
}

.sortable-chosen {
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4);
}

.sortable-drag {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

/* =============================================================================
   11. HEADER ENHANCEMENT (v9.6 Polish)
   Purpose: Clean header layout with proper actions grouping and user dropdown
   ============================================================================= */

/* Header Actions Container */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* User Avatar Button */
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-2, #a1a1aa);
  transition: all 0.2s ease;
}

.user-avatar:hover {
  border-color: var(--primary, #4ade80);
  color: var(--primary, #4ade80);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.2);
}

/* User Dropdown Container */
.user-dropdown-container {
  position: relative;
  overflow: visible !important; /* Ensure dropdown isn't clipped */
}

/* User Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: rgba(18, 18, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-width: 240px;
  z-index: 99999 !important; /* Force on top of everything */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: block; /* Default state when not hidden */
}

.user-dropdown-menu.hidden {
  display: none !important;
}

/* Dropdown Header */
.dropdown-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.dropdown-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-email {
  font-weight: 600;
  color: #fff;
  margin-top: 6px;
  font-size: 14px;
}

.dropdown-plan {
  font-size: 11px;
  color: var(--primary, #4ade80);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dropdown-tokens {
  font-size: 11px;
  color: #cbd5f5;
  margin-top: 6px;
}

.badge-certified {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.badge-estimate {
  background: rgba(234, 179, 8, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(234, 179, 8, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.dropdown-plan::before {
  content: '●';
  font-size: 8px;
}

/* Dropdown Actions */
.dropdown-actions {
  padding: 12px;
}

/* Logout Button */
.btn-logout {
  width: 100%;
  padding: 10px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #ef4444;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Mobile Header Responsive */
@media (max-width: 768px) {
  .header-actions {
    gap: 8px;
  }
  
  .header-actions .btn-primary {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .header-actions .btn-primary span,
  .header-actions .btn-primary i + i {
    display: none; /* Hide text on mobile, show only icon */
  }
  
  .user-dropdown-menu {
    right: -10px;
    min-width: 200px;
  }
}

/* =============================================================================
   12. MISSING UI ELEMENTS (Audit Discovered)
   Purpose: Define styles for HTML classes that were missing CSS definitions
   ============================================================================= */

/* Tool Buttons (Toolbar Icons) */
.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-3, #888);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tool:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: var(--primary, #4ade80);
  color: var(--primary, #4ade80);
}

.btn-tool:active {
  transform: scale(0.95);
}

/* Spinning animation for refresh button */
.btn-tool.spinning i {
  animation: spin 0.6s ease-in-out;
}

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

/* Large Buttons (CTA) */
.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
}

/* Glass Card (Premium Variant) */
.card-glass {
  background: rgba(18, 18, 20, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.card-glass:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Toolbar Glass Container */
.toolbar-glass {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   13. GLOBAL BUTTON POLISH (Consistency Pass)
   Purpose: Ensure all button states are well-defined
   ============================================================================= */

/* Button Base Refinements */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

/* Button Sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.75rem;
}

/* Full Width Utility */
.w-full {
  width: 100%;
}

/* =============================================================================
   14. VENTILATION MODULE (UX Premium - v9.6.2)
   Purpose: Professional glassmorphism layout with proper hierarchy
   ============================================================================= */

#section-ventilation .lab-bench {
  max-width: 900px;
}

/* Vent Input Cards Grid - 4 columns */
#section-ventilation .card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 900px) {
  #section-ventilation .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  #section-ventilation .card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Vent Cards Enhanced Style */
#section-ventilation .card {
  background: rgba(18, 18, 20, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

#section-ventilation .card:hover {
  border-color: rgba(74, 222, 128, 0.4);
  transform: translateY(-2px);
}

#section-ventilation .card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
}

/* Compliance Banner Premium */
#ventilationCompliance {
  padding: 16px 20px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.95rem !important;
}

#ventilationCompliance.success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
}

#ventilationCompliance.error {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

/* Metric Cards Grid - 4 columns */
#section-ventilation .grid-layout {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 768px) {
  #section-ventilation .grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

#section-ventilation .metric-card {
  background: rgba(18, 18, 20, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#section-ventilation .metric-val {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary);
  font-family: var(--font-mono);
}

#section-ventilation .metric-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
}

#section-ventilation .metric-unit {
  font-size: 0.75rem;
  color: #a1a1aa;
}

/* =============================================================================
   15. CONSTITUCIÓN VISUAL v10 - LAYOUT SYSTEM
   Purpose: Unified layout classes for consistent module structure
   Reference: Condensación module pattern (methodology card + 3-card grid)
   ============================================================================= */

/* --- TASK 1.1: Layout Dashboard 3 (Muros/Techumbre/Piso) --- */
.layout-dashboard-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1024px) {
  .layout-dashboard-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --- TASK 1.2: Layout Dashboard 4 (Norte/Sur/Este/Oeste) --- */
.layout-dashboard-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1200px) {
  .layout-dashboard-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .layout-dashboard-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --- TASK 1.3: Layout Document (Centered Content) --- */
.layout-document {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* =============================================================================
   16. METHODOLOGY CARD COMPONENT
   Purpose: Unified normative explanation boxes
   Variants: --orange (Thermal), --blue (Condensation)
   ============================================================================= */

.methodology-card {
  padding: 16px 20px;
  border-radius: 8px;
  border-left: 4px solid;
  margin-bottom: 20px;
}

.methodology-card h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.methodology-card p {
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
  margin: 0 0 12px 0;
}

.methodology-card .card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 11px;
}

.methodology-card .card-grid-2 > div {
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 12px;
  border-radius: 6px;
}

.methodology-card .criteria {
  font-size: 11px;
  color: #888;
  margin: 12px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 10px;
}

/* Variant: Orange (Thermal / Análisis U) */
.methodology-card--orange {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(234, 88, 12, 0.05));
  border-left-color: #f97316;
}

.methodology-card--orange h4 {
  color: #f97316;
}

.methodology-card--orange strong.highlight-1 {
  color: #f97316;
}

.methodology-card--orange strong.highlight-2 {
  color: #22d3ee;
}

/* Variant: Blue (Condensation / Glaser) */
.methodology-card--blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.05));
  border-left-color: #3b82f6;
}

.methodology-card--blue h4 {
  color: #3b82f6;
}

.methodology-card--blue strong.highlight-1 {
  color: #22d3ee;
}

.methodology-card--blue strong.highlight-2 {
  color: #4ade80;
}

/* =============================================================================
   17. 🛡️ GUARDIAN FIX: SECTION TRANSITIONS & NAV FEEDBACK
   Purpose: Visual feedback for navigation actions
   ============================================================================= */

/* Section Fade-In Transition */
.section {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.section.active {
  opacity: 1;
}

/* Nav Item Click Feedback (Visual pulse) */
.nav-item.just-clicked {
  box-shadow: 0 0 0 2px var(--primary, #4ade80) !important;
  transition: box-shadow 0.15s ease-out;
}

/* Nav Item Active State Enhancement */
.nav-item.active {
  background: rgba(74, 222, 128, 0.1);
  border-left: 3px solid var(--primary, #4ade80);
}

/* =============================================================================
   18. 🛡️ GUARDIAN VISUAL UNIFICATION: NEW VARIANTS & GRID UTILITIES
   Purpose: Extended color system and layout grids per Visual_Unification.md v4.0
   ============================================================================= */

/* --- Methodology Card Variant: Green (Layers / Construcción) --- */
.methodology-card--green {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.05));
  border-left-color: #10b981;
}

.methodology-card--green h4 {
  color: #10b981;
}

.methodology-card--green strong.highlight-1 {
  color: #10b981;
}

.methodology-card--green strong.highlight-2 {
  color: #34d399;
}

/* --- Methodology Card Variant: Purple (Envelope / Análisis Global) --- */
.methodology-card--purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(124, 58, 237, 0.05));
  border-left-color: #8b5cf6;
}

.methodology-card--purple h4 {
  color: #8b5cf6;
}

.methodology-card--purple strong.highlight-1 {
  color: #8b5cf6;
}

.methodology-card--purple strong.highlight-2 {
  color: #a78bfa;
}

/* --- Methodology Card Variant: Red (Demand / Energía) --- */
.methodology-card--red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(220, 38, 38, 0.05));
  border-left-color: #ef4444;
}

.methodology-card--red h4 {
  color: #ef4444;
}

.methodology-card--red strong.highlight-1 {
  color: #ef4444;
}

.methodology-card--red strong.highlight-2 {
  color: #f87171;
}

/* --- Methodology Card Variant: Gray (Config / Configuración) --- */
.methodology-card--gray {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.08), rgba(75, 85, 99, 0.05));
  border-left-color: #6b7280;
}

.methodology-card--gray h4 {
  color: #9ca3af;
}

.methodology-card--gray strong.highlight-1 {
  color: #9ca3af;
}

.methodology-card--gray strong.highlight-2 {
  color: #d1d5db;
}

/* --- Grid Utility Classes (Guardian Visual System) --- */
.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* --- Drop Zone Glass (Config BIM) --- */
.drop-zone-glass {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.drop-zone-glass:hover {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.05);
}

.drop-zone-glass i {
  font-size: 40px;
  color: #444;
  margin-bottom: 16px;
}

.drop-zone-glass p {
  color: #666;
  margin: 0;
}

/* --- Responsive Grid Collapse --- */
@media (max-width: 1024px) {
  .grid-2-1,
  .grid-1-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   23. FINAL VISUAL UNIFICATION (Correcting Width Anomalies)
   Target: #section-config and #section-ventilation
   Mission: Harmonize layout width to match standard (100% of container)
   ============================================================================= */
#section-config .lab-bench,
#section-ventilation .lab-bench {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Global Safety Net for Layout Containers */
.lab-bench {
    width: 100%;
    box-sizing: border-box;
}

/* =============================================================================
   25. TYPOGRAPHY GOVERNANCE (Design Constitution v1.1)
   Enforcement of "Architectural" vs "UI" voices
   ============================================================================= */

/* A. UI Voice (Inter) - Default for clarity */
body {
    font-family: var(--font-ui);
}

/* B. Architectural Voice (JetBrains Mono) - Technical Precision */

/* 1. Header & Metadata (OGUC/DITEC) */
.header-subtitle {
    font-family: var(--font-mono) !important;
    letter-spacing: 0.5px;
}

/* 2. Technical Schematics (SVG Text - ESCALA/TOTAL) */
#schematic2dContainer text {
    font-family: var(--font-mono) !important;
}

/* 3. Condensation Diagnosis (Conditions Footer) */
/* Overrides inline 'Consolas' style injected by JS */
div[id^="glaserDiagnosis_"] > div[style*="Consolas"] {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    opacity: 0.8;
}

/* 4. Common Technical Elements */
.layer-thickness,
.metric-val,
.stat-value,
.text-mono,
.status-badge,
.dimension-label,
/* =============================================================================
   26. BUTTON GOVERNANCE PROTOCOL (v1.2)
   Theme: Architect Tech (Option B)
   ============================================================================= */

:root {
    /* --- ACTION BUTTONS (.btn-primary) --- */
    --btn-tech-bg: #262626;              /* Gris Grafito Mate */
    --btn-tech-text: #E5E5E5;            /* Blanco Técnico */
    --btn-tech-border: 1px solid #404040; /* Borde sutil */
    --btn-tech-hover: #333333;           /* Lighter grey */
    --btn-tech-active: #404040;
    --btn-tech-radius: 4px;              /* Bordes más rectos */
    
    /* --- TOGGLES (.tab-btn) --- */
    --tab-tech-inactive-bg: transparent;
    --tab-tech-inactive-text: #888888;
    --tab-tech-active-bg: #404040;       /* Highlight sutil */
    --tab-tech-active-text: #FFFFFF;
    --tab-tech-active-border: 1px solid #555;
}

/* --- Action Button Override --- */
.btn-primary {
    background: var(--btn-tech-bg) !important;
    color: var(--btn-tech-text) !important;
    border: var(--btn-tech-border) !important;
    border-radius: var(--btn-tech-radius) !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important; /* Tech shadow */
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--btn-tech-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-primary:active {
    background: var(--btn-tech-active) !important;
    transform: translateY(0);
}

/* --- Toggle / Tab Override --- */
.tab-btn {
    background: var(--tab-tech-inactive-bg) !important;
    color: var(--tab-tech-inactive-text) !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
}

.tab-btn:hover {
    color: var(--tab-tech-active-text) !important;
    background: rgba(255,255,255,0.05) !important;
}

.tab-btn.active {
    background: var(--tab-tech-active-bg) !important;
    color: var(--tab-tech-active-text) !important;
    border: var(--tab-tech-active-border) !important;
    box-shadow: none !important; /* Flat technical look */
}

/* =============================================================================
   SMART BUILDER COMPONENTS (v10.0 - Clean Governance)
   Purpose: Estilos para el panel de Smart Builder sin inline styles
   ============================================================================= */

/* System Selector Container */
.sb-system-selector {
    margin-bottom: 12px;
}

.sb-system-selector label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.sb-system-selector select {
    width: 100%;
}

.sb-system-note {
    display: block;
    margin-top: 4px;
    color: var(--accent-sub);
    font-style: italic;
}

/* Carbon Score Preview */
.carbon-score-preview {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.carbon-score-preview__label {
    font-size: 0.8rem;
    color: #9ca3af;
    display: block;
    margin-bottom: 4px;
}

.carbon-score-preview__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.carbon-score-preview__icon {
    font-size: 1.2rem;
}

.carbon-score-preview__value {
    font-size: 1.1rem;
    font-weight: 700;
}

.carbon-score-preview__unit {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Layer Visualization - Note: .sb-layer-thickness defined in overlay section (L1852) */
.sb-layer-thickness--insulation {
    background: rgba(74, 222, 128, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    color: #4ade80;
}

/* Status Messages */
.sb-status-icon {
    margin-right: 6px;
}

.sb-status-icon--target {
    font-size: 1.3em;
}

.sb-status-icon--warning {
    font-size: 1.1em;
}

.sb-status-icon--condensation {
    font-size: 1.2em;
}

.sb-condensation-text {
    font-size: 0.85em;
}

/* Generative Layer Highlight */
.sb-layer--generative {
    background: #818cf8 !important;
    color: white;
}

.sb-layer--optimized {
    background: #818cf8 !important;
}

/* =============================================================================
   SMART BUILDER MODAL (v10.0 - Design Standards Compliant)
   Purpose: CSS classes for #smartBuilderPanel to eliminate inline styles
   ============================================================================= */

/* Modal Overlay */
.sb-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sb-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Content Box */
.sb-modal-content {
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-panel, #1a1a1a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Header */
.sb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.sb-modal-header h3 {
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 1.1rem;
}

.sb-modal-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.2em;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.sb-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Status Bar (3 column grid) */
.sb-status-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sb-status-item {
    text-align: center;
}

.sb-status-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sb-status-label {
    display: block;
    font-size: 0.7em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.sb-status-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2em;
    font-weight: 600;
}

.sb-status-value--zone {
    color: #fff;
}

.sb-status-value--actual {
    color: #f87171;
}

.sb-status-value--target {
    color: #4ade80;
}

/* Dynamic Containers */
.sb-selector-container,
.sb-ai-container {
    margin-bottom: 20px;
}

/* Preview Header */
.sb-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.9em;
}

.sb-preview-label {
    font-weight: 600;
    color: #ccc;
}

.sb-preview-result {
    color: #666;
}

.sb-preview-result strong {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
}

/* Preview Container */
/* Preview Container */
.sb-preview {
    margin-bottom: 12px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Action Buttons */
.sb-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
}

/* =============================================================================
   SMART BUILDER MODAL v2.1 (Guardian Reengineering)
   Purpose: Glassmorphism floating modal for AI construction assistant
   Compliance: DESIGN_STANDARDS.md
   ============================================================================= */

/* --- OVERLAY (Backdrop) --- */
.sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sb-overlay:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.sb-overlay[hidden] {
  display: none;
}

/* --- MODAL CONTAINER (v3.3 Compact) --- */
.sb-modal {
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(14, 14, 16, 0.96);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
}

.sb-overlay:not([hidden]) .sb-modal {
  transform: scale(1) translateY(0);
}

/* --- HEADER (v3.3 Compact) --- */
.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sb-header__text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  letter-spacing: 0.04em;
}

/* --- BADGES (v3.3 Compact) --- */
.sb-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.sb-badge--element {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.sb-badge--zone {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
}

/* --- CLOSE BUTTON (v3.3) --- */
.sb-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  font-size: 1rem;
}

.sb-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* --- BODY (v3.3 Compact) --- */
.sb-body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 768px) {
  .sb-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
    align-items: start;
    padding: 10px 12px;
  }

  /* Selector: Full Width */
  .sb-section:nth-child(1) {
    grid-column: 1 / -1;
  }

  /* Preview: Full Width */
  .sb-section:nth-child(2) {
    grid-column: 1 / -1;
  }

  /* Compliance & Risk: Side by side */
  .sb-compliance, .sb-hygro {
    grid-column: span 1;
    height: 100%;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Carbon: Full Width */
  .sb-carbon {
    grid-column: 1 / -1;
  }
}

.sb-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.sb-subtitle {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.sb-note {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.sb-select {
  width: 100%;
  padding: 6px 8px;
  background: rgba(17, 24, 39, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
  color-scheme: dark;
}

.sb-select:focus {
  outline: none;
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.1);
}

/* Dark theme for dropdown options */
.sb-select option {
  background: #1f2937;
  color: #ffffff;
  padding: 8px;
}

.sb-select option:hover,
.sb-select option:checked {
  background: #374151;
  color: #4ade80;
}

/* --- PREVIEW (v3.3 Compact) --- */
.sb-preview {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 50px;
  align-items: stretch;
  overflow-x: auto;
}

.sb-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
  border-radius: 4px;
  font-size: 0.65rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 48px;
  flex: 1 1 auto;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: transform 0.15s ease, background 0.15s ease;
}

.sb-layer:hover {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.12);
  z-index: 1;
}

.sb-layer-name {
  font-size: 0.55rem;
  opacity: 0.7;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sb-preview-empty {
  color: rgba(255, 255, 255, 0.4);
  padding: 20px;
  width: 100%;
  text-align: center;
  font-style: italic;
}

.sb-layer--insulation {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

.sb-layer--optimized {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.3);
  animation: pulse-optimize 1.5s ease-in-out infinite;
}

@keyframes pulse-optimize {
  0%, 100% { box-shadow: 0 0 8px rgba(96, 165, 250, 0.3); }
  50% { box-shadow: 0 0 16px rgba(96, 165, 250, 0.5); }
}

.sb-layer-thickness {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #4ade80;
  font-size: 0.65rem;
  white-space: nowrap;
}

/* --- RESULT (v3.3 Compact Technical) --- */
.sb-result {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  font-size: 0.75rem;
}

.sb-result__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.sb-result__unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* --- COMPLIANCE & HYGRO GRID (v3.3 Compact) --- */
.sb-compliance-hygro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

/* --- COMPLIANCE (v3.3 Compact Technical) --- */
.sb-compliance--pass,
.sb-compliance--fail {
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.sb-compliance--pass {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #4ade80;
}

.sb-compliance--fail {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: #f87171;
}

.sb-compliance--pass span:first-child,
.sb-compliance--fail span:first-child {
  font-size: 0.75rem;
}

.sb-compliance--pass strong,
.sb-compliance--fail strong {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sb-compliance--pass .sb-compliance__formula,
.sb-compliance--fail .sb-compliance__formula {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

/* --- HYGROTHERMAL RISK (v3.3 Compact) --- */
.sb-hygro {
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.sb-hygro--warning {
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

.sb-hygro--ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.sb-hygro span:first-child {
  font-size: 0.7rem;
}

.sb-hygro strong {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sb-hygro small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  opacity: 0.85;
}

.sb-hygro .sb-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  opacity: 0.7;
}

/* --- CARBON SCORE (v3.3 Minimal) --- */
.sb-carbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.01);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.sb-carbon:hover {
  opacity: 0.8;
}

.sb-carbon__icon {
  font-size: 0.7rem;
}

.sb-carbon__label {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.sb-carbon__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.sb-carbon__unit {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.35);
}

/* --- FOOTER (v3.3 Compact) --- */
.sb-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sb-btn {
  min-width: 100px;
  padding: 8px 12px;
  font-size: 0.8rem;
}

.sb-btn--apply {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}

.sb-btn--apply:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* --- ANIMATIONS --- */
@keyframes sb-pulse-success {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
  50% { box-shadow: 0 0 20px 5px rgba(74, 222, 128, 0.2); }
}

.sb-compliance--pass {
  animation: sb-pulse-success 2s infinite;
}

/* =============================================================================
   27. GRID STABILITY PATCH (v9.9.8)
   Purpose: Prevent "Infinite Growth" on 3D/Schematic Panels
   Root Cause: Grid items with flex children can expand indefinitely if min-size is auto.
   ============================================================================= */

/* Force Grid Items to respect containers */
.grid-1-2 > .glass-panel,
.grid-2-1 > .glass-panel,
.grid-2-1 > .drop-zone-glass {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important; /* Force clip */
}

/* Ensure visual stage doesn't push bounds */
#visual-stage-container,
.visual-stage {
    min-width: 0 !important;
    min-height: 250px; /* Keep minimum but allow flex shrink/grow logic to work constraint-bounded */
    flex: 1 1 auto !important; /* Allow shrinking */
    overflow: hidden !important;
}

/* Schematic stage stability */
.schematic-stage {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

/* =============================================================================
   17. DASHBOARD "LETHAL FIDELITY" (v9.9.5)
   Purpose: High Precision Engineering Interface for Project Management
   ============================================================================= */

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.dashboard-title {
    margin: 0;
}

.dashboard-subtitle {
    margin: 0;
    opacity: 0.7;
}

.dashboard-stats {
    margin-bottom: 32px;
}

.dashboard-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -18px;
    margin-bottom: 20px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}

.dashboard-legend .legend-label {
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.dashboard-legend .legend-scale {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Smart Toolbar */
.dashboard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.search-box-glass {
    position: relative;
    flex: 1;
    min-width: 300px;
}

.search-box-glass i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    font-size: 0.9rem;
}

.search-box-glass input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 10px 10px 40px;
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-ui);
    transition: all 0.2s;
}

.search-box-glass input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.1);
}

/* Filter Tags */
.filter-group {
    display: flex;
    gap: 8px;
}

.filter-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-tag:hover, .filter-tag.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: var(--primary);
}

.stat-card {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card__label {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-card__value {
    font-size: 28px;
    font-weight: bold;
}

.stat-card__icon {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.2);
    opacity: 0.5;
}

.stat-card--success .stat-card__label,
.stat-card--success .stat-card__value,
.stat-card--success .stat-card__icon {
    color: #4ade80;
    opacity: 1;
}

.stat-card--danger .stat-card__label,
.stat-card--danger .stat-card__value,
.stat-card--danger .stat-card__icon {
    color: #ef4444;
    opacity: 1;
}

.storage-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6em;
    vertical-align: middle;
    border: 1px solid transparent;
    margin-left: 8px;
}

.storage-badge--cloud {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.2);
}

.storage-badge--local {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.2);
}

.empty-state--panel {
    text-align: center;
    padding: 60px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.empty-state--search {
    text-align: center;
    padding: 60px;
    color: #71717a;
}

.empty-state-icon--xl {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.empty-state-text--muted {
    color: #a1a1aa;
    margin-bottom: 20px;
}

.pro-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-stat-unit {
    font-size: 0.7em;
    opacity: 0.5;
}

.project-status {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-status.is-pass { color: #4ade80; }
.project-status.is-fail { color: #ef4444; }
.project-status.is-warn { color: #f59e0b; }

/* Dashboard Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    perspective: 1000px;
}

/* Premium Card - "The Monolith" */
.project-card-pro {
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.9), rgba(10, 10, 12, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08); /* Fallback */
    border-left-width: 4px; /* Semantic Indicator placeholder */
    border-radius: 12px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card-pro:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

/* Health Glow States */
.project-card-pro.status-pass {
    border-left-color: #4ade80; /* Green */
}
.project-card-pro.status-pass:hover {
    box-shadow: 0 16px 40px -10px rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
}

.project-card-pro.status-warn {
    border-left-color: #fbbf24; /* Amber */
}
.project-card-pro.status-warn:hover {
    box-shadow: 0 16px 40px -10px rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

.project-card-pro.status-fail {
    border-left-color: #ef4444; /* Red */
}
.project-card-pro.status-fail:hover {
    box-shadow: 0 16px 40px -10px rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Card Header */
.card-pro-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
}

.pro-title h3 {
    margin: 0;
    font-size: 1rem;
    color: #f4f4f5;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.pro-meta {
    font-size: 0.7rem;
    color: #71717a;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Card Body - Blueprint Area */
.card-pro-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Mini Blueprint Visualization */
.mini-blueprint {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    position: relative;
}

.mini-layer {
    height: 6px;
    width: 100%;
    border-radius: 1px;
    opacity: 0.8;
}

/* Material Colors for Mini Blueprint */
.bg-gypsum { background: #e5e5e5; }
.bg-insulation { background: #fbbf24; } /* Wool/Yellow */
.bg-steel { background: #94a3b8; }
.bg-siding { background: #c4b5fd; }
.bg-concrete { background: #525252; }
.bg-brick { background: #7f1d1d; }

.blueprint-label {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Stats Row */
.pro-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pro-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.pro-stat-label {
    font-size: 0.65rem;
    color: #52525b;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.pro-stat-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: #e4e4e7;
    font-weight: 500;
}

/* Card Footer */
.card-pro-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zone-badge-mini {
    background: rgba(255, 255, 255, 0.05);
    color: #a1a1aa;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.energy-badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
}

.pro-actions {
    display: flex;
    gap: 4px;
}

.btn-icon-ghost {
    background: transparent;
    border: none;
    color: #71717a;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-icon-ghost.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* =============================================================================
   18. REPORT FOUNDRY (v9.9.6)
   Purpose: Secure Document Generation Center
   ============================================================================= */

/* Foundry Layout */
.foundry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    height: 100%;
    min-height: 500px;
}

/* Card Styles (Premium) */
.report-card-premium {
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.9), rgba(10, 10, 12, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08); /* Fallback */
    border-radius: 12px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.report-card-premium:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.report-card-premium.locked {
    opacity: 0.6;
    pointer-events: none; /* Soft lock, JS can override for interaction if needed */
    filter: grayscale(0.8);
    border: 1px dashed rgba(239, 68, 68, 0.3);
}

.report-card-premium.locked::after {
    content: "NO CONFORME";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 2rem;
    font-weight: 800;
    color: rgba(239, 68, 68, 0.2);
    border: 4px solid rgba(239, 68, 68, 0.2);
    padding: 10px 20px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 10;
}

/* Icons & Typography */
.report-icon-lg {
    font-size: 2.5rem;
    margin-bottom: 16px;
    background: linear-gradient(to bottom right, #fff, #71717a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.report-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.report-desc {
    font-size: 0.85rem;
    color: #a1a1aa;
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Feature List */
.report-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.report-feature-list li {
    font-size: 0.8rem;
    color: #d4d4d8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-feature-list li i {
    color: #4ade80; /* Green check implicit */
    font-size: 0.7rem;
}

/* Compliance Gate (Pre-Flight) */
.compliance-gate {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gate-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.gate-item:last-child {
    border-bottom: none;
}

.gate-label {
    font-size: 0.85rem;
    color: #d4d4d8;
}

.gate-status {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.gate-status.pass { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.gate-status.fail { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* Buttons */
.btn-foundry {
    width: 100%;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.btn-foundry.primary {
    background: var(--primary);
    color: #000;
}

.btn-foundry.primary:hover {
    background: #5eead4; /* Slightly lighter teal */
}

.btn-foundry.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-foundry.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   15. SYSTEM CRITICAL OVERLAYS (The Guardian Protocol)
   Purpose: Standardized error reporting without inline styles.
   ============================================================================= */
.system-overlay--error {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(220, 38, 38, 0.95); /* Red-600 */
    color: white;
    padding: 16px;
    z-index: 99999;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =============================================================================
   16. PURGE UTILITIES (Replacing Inline Styles)
   Purpose: Classes extracted from index.html inline styles.
   ============================================================================= */
.sidebar-label {
    font-size: 11px;
    color: #555;
    padding: 16px 12px 8px;
    text-transform: uppercase;
    font-weight: 700;
}
.sidebar-label.compact {
    padding-top: 8px;
}

.panel-inputs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 24px;
}

.mb-24 { margin-bottom: 24px !important; }
.mt-24 { margin-top: 24px !important; }
.justify-center { justify-content: center !important; }
.hidden { display: none !important; }
.btn-full { width: 100% !important; }
.btn-space-y { margin: 10px 0 !important; }
.status-badge--center { justify-content: center; }

.save-status-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 15px;
  font-size: 12px;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.5s;
  opacity: 0.5;
}

.save-status-indicator.is-visible {
  opacity: 1;
}

/* Admin Modal (Real Admin Features) */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.admin-modal-backdrop.active {
  display: flex;
}

.admin-modal {
  width: min(1100px, 92vw);
  max-height: 85vh;
  overflow: auto;
  background: var(--bg-primary, #0b0f19);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.admin-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-modal__header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary, #fff);
}

.admin-modal__content {
  display: block;
}

.admin-modal__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-stat-card {
  background: var(--bg-elevated);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.admin-stat-value {
  margin: 0;
  font-size: 2rem;
}

.admin-stat-label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.admin-stat--primary { color: var(--accent-primary); }
.admin-stat--secondary { color: var(--accent-secondary); }
.admin-stat--tertiary { color: var(--accent-tertiary); }

.admin-section {
  margin-bottom: 1.5rem;
}

.admin-section__title {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.admin-plan-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.plan-badge {
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 4px;
  font-size: 0.8rem;
}

.plan-badge--trial { background: #f59e0b; }
.plan-badge--pro { background: #3b82f6; }
.plan-badge--advanced { background: #8b5cf6; }
.plan-badge--team { background: #10b981; }
.plan-badge--enterprise { background: #ec4899; }
.plan-badge--expired { background: #6b7280; }
.plan-badge--default { background: #6b7280; }

.plan-pill {
  background: #6b7280;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8em;
  display: inline-block;
}

.plan-pill--trial { background: #f59e0b; }
.plan-pill--pro { background: #3b82f6; }
.plan-pill--advanced { background: #8b5cf6; }
.plan-pill--team { background: #10b981; }
.plan-pill--enterprise { background: #ec4899; }
.plan-pill--expired { background: #6b7280; }
.plan-pill--default { background: #6b7280; }

.admin-crown {
  color: #f59e0b;
  margin-right: 4px;
}

.admin-table-wrap {
  max-height: 300px;
  overflow-y: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 8px;
  text-align: left;
}

.admin-table thead tr {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.admin-table tbody {
  color: var(--text-primary);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0b0f19;
}

.status-pill--active { background: #10b981; }
.status-pill--inactive { background: #ef4444; }

.admin-controls {
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 16px;
}

.admin-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.admin-input {
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: var(--font-ui);
}

.admin-input--sm {
  padding: 8px 10px;
}

.admin-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(46, 255, 170, 0.18);
}

.admin-toggle-btn {
  align-self: flex-start;
  margin-top: 6px;
}

.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-action-btn {
  font-size: 0.8rem;
  padding: 8px 14px;
}

.admin-action-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.admin-feedback {
  min-height: 24px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.admin-feedback.is-success {
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.12);
}

.admin-feedback.is-error {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
}

.admin-feedback__secret {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}

.admin-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.admin-audit-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.admin-audit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.admin-audit-meta {
  margin: 8px 0 12px;
  color: var(--text-muted);
}

.admin-table-wrap--audit {
  max-height: 360px;
}

.admin-audit-table th,
.admin-audit-table td {
  vertical-align: top;
}

.admin-audit-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

.audit-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  font-size: 0.7rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-control-grid {
    grid-template-columns: 1fr;
  }

  .admin-audit-controls {
    grid-template-columns: 1fr;
  }
}

/* Password Reset Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  background: var(--bg-primary, #1a1a2e);
  padding: 32px;
  border-radius: 16px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: var(--text-primary, #fff);
}

.modal-title {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

.modal-subtitle {
  color: var(--text-muted, #888);
  margin: 0 0 24px 0;
  font-size: 0.9rem;
}

.modal-field {
  margin-bottom: 16px;
}

.modal-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary, #aaa);
  font-size: 0.85rem;
}

.modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  background: var(--bg-secondary, #16213e);
  color: var(--text-primary, #fff);
  font-size: 1rem;
  box-sizing: border-box;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  font-size: 1rem;
  border-radius: 8px;
}

.modal-btn--submit {
  font-weight: 600;
}

.modal-btn--block {
  width: 100%;
  margin-top: 8px;
}

/* Inline styles extracted from index.html */
.inline-style-001 { display: none; }
.inline-style-002 { font-size: 11px; color: #555; margin-top: 8px; }
.inline-style-003 { margin-bottom: 24px; }
.inline-style-004 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.inline-style-005 { margin: 0; }
.inline-style-006 { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.inline-style-007 { flex: 1; position: relative; min-height: 250px; }
.inline-style-008 { width: 100%; height: 100%; }
.inline-style-009 { position: absolute; bottom: 12px; right: 12px; }
.inline-style-010 { flex: 1; background: #0a0a0a; border-top: 1px solid #333; padding: 12px; position: relative; min-height: 200px; }
.inline-style-011 { position: absolute; top: 8px; left: 8px; font-size: 10px; color: #666; font-family: 'JetBrains Mono', monospace; z-index: 10; }
.inline-style-012 { width: 100%; height: 100%; }
.inline-style-013 { padding: 16px; }
.inline-style-014 { display: flex; width: 100%; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.inline-style-015 { flex-shrink: 0; }
.inline-style-016 { flex-shrink: 0; white-space: nowrap; }
.inline-style-017 { flex: 1; white-space: nowrap; }
.inline-style-018 { color: #fff; }
.inline-style-019 { color: #fff; }
.inline-style-020 { color: #fff; }
.inline-style-021 { color: #888; }
.inline-style-022 { color: #888; }
.inline-style-023 { color: #10b981; }
.inline-style-024 { color: #ccc; }
.inline-style-025 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.inline-style-026 { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.inline-style-027 { font-size: 28px; opacity: 0.6; }
.inline-style-028 { margin: 0 0 4px 0; font-size: 14px; color: #aaa; }
.inline-style-029 { margin: 0; font-size: 11px; color: #666; }
.inline-style-030 { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.inline-style-031 { font-size: 10px; color: #888; text-transform: uppercase; }
.inline-style-032 { font-size: 24px; font-weight: 700; }
.inline-style-033 { font-size: 10px; color: #666; }
.inline-style-034 { justify-content: space-between; align-items: center; margin-bottom: 24px; }
.inline-style-035 { margin-bottom: 16px; }
.inline-style-036 { margin-top:24px; gap:20px; }
.inline-style-037 { min-height:300px; display:flex; align-items:center; justify-content:center; }
.inline-style-038 { color:#666; }
.inline-style-039 { margin-top: 32px; }
.inline-style-040 { font-size: 11px; color: #888; margin: 8px 0 16px 0; }
.inline-style-041 { display: grid; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) ); gap: 24px; margin-top: 16px; }
.inline-style-042 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-043 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-044 { height: 120px; width: 100%; }
.inline-style-045 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-046 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-047 { height: 120px; width: 100%; }
.inline-style-048 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-049 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-050 { height: 120px; width: 100%; }
.inline-style-051 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.inline-style-052 { margin: 0; }
.inline-style-053 { align-items: center; gap: 12px; }
.inline-style-054 { font-size: 11px; color: #666; }
.inline-style-055 { width: 60px; padding: 4px; }
.inline-style-056 { color: #fff; }
.inline-style-057 { color: #fff; }
.inline-style-058 { color: #888; }
.inline-style-059 { color: #888; }
.inline-style-060 { color: #10b981; }
.inline-style-061 { color: #ccc; }
.inline-style-062 { margin-top: 16px; }
.inline-style-063 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-064 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-065 { height: 300px; width: 100%; }
.inline-style-066 { margin-top: 12px; font-size: 12px; line-height: 1.4; padding: 8px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; min-height: 60px; }
.inline-style-067 { opacity: 0.5; }
.inline-style-068 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-069 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-070 { height: 300px; width: 100%; }
.inline-style-071 { margin-top: 12px; font-size: 12px; line-height: 1.4; padding: 8px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; min-height: 60px; }
.inline-style-072 { opacity: 0.5; }
.inline-style-073 { padding: 16px; border-radius: 12px; position: relative; }
.inline-style-074 { margin: 0 0 12px 0; font-size: 14px; opacity: 0.8; }
.inline-style-075 { height: 300px; width: 100%; }
.inline-style-076 { margin-top: 12px; font-size: 12px; line-height: 1.4; padding: 8px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; min-height: 60px; }
.inline-style-077 { opacity: 0.5; }
.inline-style-078 { margin-bottom: 24px; }
.inline-style-079 { margin-top: 24px; min-height: 200px; }
.inline-style-080 { margin-top: 24px; }
.inline-style-081 { height: 300px; margin-top: 24px; display:none; }
.inline-style-082 { margin-bottom: 24px; }
.inline-style-083 { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.inline-style-084 { margin: 0; }
.inline-style-085 { display: flex; gap: 10px; align-items: center; }
.inline-style-086 { width: auto; padding: 6px 10px; font-size: 12px; }
.inline-style-087 { padding: 6px 12px; font-size: 12px; }
.inline-style-088 { margin-top: 12px; }
.inline-style-089 { margin-bottom: 20px; }
.inline-style-090 { padding: 16px; }
.inline-style-091 { width: 100%; }
.inline-style-092 { padding: 16px; }
.inline-style-093 { width: 100%; }
.inline-style-094 { padding: 16px; }
.inline-style-095 { width: 100%; }
.inline-style-096 { padding: 16px; }
.inline-style-097 { width: 100%; }
.inline-style-098 { margin-bottom: 16px; }
.inline-style-099 { height: 100%; display: flex; align-items: center; gap: 16px; padding: 20px; }
.inline-style-100 { font-size: 24px; opacity: 0.5; }
.inline-style-101 { margin: 0; }
.inline-style-102 { font-size: 11px; opacity: 0.7; }
.inline-style-103 { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.inline-style-104 { margin-bottom: 24px; }
.inline-style-105 { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.inline-style-106 { margin: 0; }
.inline-style-107 { padding: 6px 12px; font-size: 12px; }
.inline-style-108 { margin-top: 12px; }
.inline-style-109 { color: #f59e0b; font-size: 12px; margin-top: 8px; }
.inline-style-110 { margin-bottom: 24px; align-items: stretch; }
.inline-style-111 { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.inline-style-112 { padding: 20px; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2); }
.inline-style-113 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.inline-style-114 { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; color: #fff; background: #333; box-shadow: 0 0 25px rgba(0,0,0,0.5); margin: 12px 0 8px 0; border: 2px solid rgba(255,255,255,0.05); }
.inline-style-115 { font-size: 13px; font-weight: 600; color: #ccc; }
.inline-style-116 { padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.inline-style-117 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.inline-style-118 { font-size: 11px; color: #666; margin-bottom: 8px; }
.inline-style-119 { margin-bottom: 4px; }
.inline-style-120 { color: #ef4444; }
.inline-style-121 { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; margin-top: 14px; }
.inline-style-122 { font-size: 11px; color: #666; margin-bottom: 6px; }
.inline-style-123 { display: flex; align-items: baseline; gap: 8px; }
.inline-style-124 { padding: 14px 20px; background: rgba(0,0,0,0.3); font-size: 11px; color: #888; border-top: 1px solid rgba(255,255,255,0.05); line-height: 1.5; }
.inline-style-125 { color: #ccc; }
.inline-style-126 { font-size: 11px; }
.inline-style-127 { font-size: 11px; }
.inline-style-128 { padding: 20px; display: flex; flex-direction: column; }
.inline-style-129 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.inline-style-130 { font-size: 11px; color: #666; margin-bottom: 12px; }
.inline-style-131 { flex: 1; position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.inline-style-132 { font-size: 11px; color: #888; margin-top: 14px; text-align: center; line-height: 1.4; }
.inline-style-133 { font-size: 11px; color: #ccc; }
.inline-style-134 { font-size: 11px; color: #ccc; }
.inline-style-135 { padding: 20px; display: flex; flex-direction: column; }
.inline-style-136 { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.inline-style-137 { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.inline-style-138 { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-139 { font-size: 10px; color: #666; display: block; margin-bottom: 4px; }
.inline-style-140 { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-141 { font-size: 10px; color: #666; display: block; margin-bottom: 4px; }
.inline-style-142 { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-143 { font-size: 10px; color: #666; display: block; margin-bottom: 4px; }
.inline-style-144 { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
.inline-style-145 { font-size: 10px; color: #666; display: block; margin-bottom: 4px; }
.inline-style-146 { width: 100%; background: transparent; border: none; padding: 0; color: #fff; outline: none; }
.inline-style-147 { height: 100%; }
.inline-style-148 { display:flex; justify-content:center; align-items:center; height:400px; }

/* Inline styles extracted from thermal-ui.js */
.thermal-inline-001 { padding:20px; display:flex; flex-direction:column; gap:16px; opacity:0.6; }
.thermal-inline-002 { display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:10px; }
.thermal-inline-003 { margin:0; }
.thermal-inline-004 { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.thermal-inline-005 { font-size:24px; color:#444; }
.thermal-inline-006 { font-size:12px; color:#666; }
.thermal-inline-007 { background:rgba(255,255,255,0.1); color:#ccc; font-weight:400; font-size:10px; }
.thermal-inline-008 { font-size:10px; color:#10b981; margin-top:4px; }
.thermal-inline-009 { font-size:10px; color:#ef4444; margin-top:4px; }
.thermal-inline-010 { color:#10b981; }
.thermal-inline-011 { color:#ef4444; font-weight:bold; }
.thermal-inline-012 { color:#666; }
.thermal-inline-013 { width:100%; margin-top:10px; }
.thermal-inline-014 { padding:0; overflow:hidden; display:flex; flex-direction:column; border-top: 3px solid var(--glass-border); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.thermal-inline-015 { padding:14px 20px; background:linear-gradient(to right, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-bottom:1px solid rgba(255,255,255,0.05); display:flex; justify-content:space-between; align-items:center; }
.thermal-inline-016 { display:flex; flex-direction:column; gap:4px; }
.thermal-inline-017 { display:flex; align-items:center; gap:8px; }
.thermal-inline-018 { width:8px; height:8px; border-radius:50%; }
.thermal-inline-019 { margin:0; font-size:15px; font-weight:600; letter-spacing:0.5px; }
.thermal-inline-020 { padding:24px 20px; display:grid; grid-template-columns: 130px 1fr; gap:16px; align-items:center; }
.thermal-inline-021 { position:relative; height:130px; width:100%; display:flex; align-items:center; justify-content:center; }
.thermal-inline-022 { position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); text-align:center; }
.thermal-inline-023 { font-weight:300; color:#fff; letter-spacing:-1px; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.thermal-inline-024 { text-transform:uppercase; letter-spacing:1px; margin-top:-2px; }
.thermal-inline-025 { font-size:12px; display:flex; flex-direction:column; gap:8px; padding-left:10px; border-left:1px solid rgba(255,255,255,0.05); min-width:0; }
.thermal-inline-026 { display:flex; justify-content:space-between; gap:8px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.05); }
.thermal-inline-027 { color:#aaa; white-space:nowrap; }
.thermal-inline-028 { color:#fff; }
.thermal-inline-029 { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.thermal-inline-030 { color:#aaa; white-space:nowrap; cursor:help; border-bottom:1px dotted #666; }
.thermal-inline-031 { display:flex; justify-content:space-between; gap:8px; }
.thermal-inline-032 { color:#aaa; white-space:nowrap; }
.thermal-inline-033 { color: inherit; }
.thermal-inline-034 { display:flex; justify-content:space-between; gap:8px; margin-top:4px; }
.thermal-inline-035 { color:#aaa; white-space:nowrap; }
.thermal-inline-036 { font-weight:600; }
.thermal-inline-037 { padding:12px 20px; background:rgba(0,0,0,0.2); margin-top:auto; }
.thermal-inline-038 { width:100%; font-size:11px; opacity:0.7; }
.thermal-inline-039 { margin:0 0 4px 0; font-size: 14px; color: #aaa; }
.thermal-inline-040 { margin:0; font-size: 11px; color: #666; }
.thermal-inline-041 { margin:0 0 4px 0; font-size: 14px; }
.thermal-inline-042 { margin:0; font-size: 11px; color: #10b981; }
.thermal-inline-043 { margin:0 0 4px 0; font-size: 14px; }
.thermal-inline-044 { margin:4px 0 0 0; padding-left: 16px; font-size: 11px; color: #aaa; }
.thermal-inline-045 { font-size: 0.9em; }
.thermal-inline-046 { color: #666; margin-top: 2px; }
.thermal-inline-047 { font-size: 0.8em; }
.thermal-inline-048 { font-size: 0.9em; }
.thermal-inline-049 { color: #666; }

/* Inline styles extracted from results-ui.js */
.results-inline-001 { border-bottom: 2px solid var(--glass-border); padding-bottom: 10px; margin-bottom: 15px; }
.results-inline-002 { margin:0; display:flex; align-items:center; gap:10px; }
.results-inline-003 { font-size:1.5rem; }
.results-inline-004 { color: #666; }
.results-inline-005 { display:grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.results-inline-006 { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; text-align: center; }
.results-inline-007 { display:block; font-size: 0.8rem; color: #aaa; }
.results-inline-008 { display:block; font-size: 1.8rem; color: #fff; }
.results-inline-009 { font-size: 0.8rem; color: #666; }
.results-inline-010 { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; text-align: center; }
.results-inline-011 { display:block; font-size: 0.8rem; color: #aaa; }
.results-inline-012 { display:block; font-size: 1.4rem; color: #ccc; }
.results-inline-013 { font-size: 0.8rem; color: #666; }
.results-inline-014 { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.08); }
.results-inline-015 { display:block; font-size: 0.8rem; color: #aaa; }
.results-inline-016 { display:block; font-size: 1.4rem; }
.results-inline-017 { font-size: 0.8rem; }
.results-inline-018 { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; text-align: center; border: 1px solid var(--accent-main); }
.results-inline-019 { display:block; font-size: 0.8rem; color: #aaa; }
.results-inline-020 { display:block; font-size: 1.4rem; color: #fff; }
.results-inline-021 { font-size: 0.8rem; color: #888; }
.results-inline-022 { margin-top: 15px; font-size: 0.9rem; color: #aaa; text-align: center; }
.results-inline-023 { margin-top: 20px; text-align: center; }
.results-inline-024 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4); }
.results-inline-025 { margin-top: 15px; text-align: left; font-size: 0.9rem; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; display: none; white-space: pre-wrap; line-height: 1.5; }

/* Inline styles extracted from report-ui.js */
.report-inline-001 { padding: 24px; max-width: 1200px; margin: 0 auto; }
.report-inline-002 { margin-bottom: 32px; text-align: left; }
.report-inline-003 { display:flex; justify-content:space-between; align-items:center; }
.report-inline-004 { margin:0; }
.report-inline-005 { margin-top:8px; }
.report-inline-006 { text-align:right; }
.report-inline-007 { font-size:10px; opacity:0.6; }
.report-inline-008 { font-size:10px; }
.report-inline-009 { display:flex; flex-direction:column; gap:24px; }
.report-inline-010 { background: linear-gradient(to right, #60a5fa, #3b82f6); -webkit-background-clip: text; }
.report-inline-011 { background: linear-gradient(to right, #f59e0b, #fbbf24); -webkit-background-clip: text; }
.report-inline-012 { padding:24px; border:1px solid rgba(255,255,255,0.1); }
.report-inline-013 { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.report-inline-014 { margin:0; color:#fff; }
.report-inline-015 { margin-bottom:24px; }
.report-inline-016 { color:#a1a1aa; margin-bottom:16px; }
.report-inline-017 { display:grid; gap:12px; }
.report-inline-018 { font-size:0.85rem; display:flex; align-items:center; gap:8px; }
.report-inline-019 { font-size:0.85rem; display:flex; align-items:center; gap:8px; }
.report-inline-020 { font-size:0.85rem; display:flex; align-items:center; gap:8px; }
.report-inline-021 { margin-top:32px; padding:16px; background:rgba(0,0,0,0.2); border-radius:6px; font-size:0.75rem; color:#71717a; line-height:1.4; }

/* Thermal UI dynamic states */
.thermal-card.is-pass { border-top-color: #10b981; }
.thermal-card.is-fail { border-top-color: #ef4444; }
.thermal-card.is-warn { border-top-color: #f59e0b; }

.thermal-dot { width: 8px; height: 8px; border-radius: 50%; }
.thermal-dot--wall { background: #3b82f6; }
.thermal-dot--roof { background: #f59e0b; }
.thermal-dot--floor { background: #10b981; }

.thermal-carbon--low { color: #10b981; }
.thermal-carbon--high { color: #f59e0b; }

.thermal-status.is-pass { color: #10b981; }
.thermal-status.is-fail { color: #ef4444; }
.thermal-status.is-warn { color: #f59e0b; }

.thermal-inline-052 {
  font-size: 0.7rem;
  color: #a1a1aa;
  line-height: 1.3;
  margin-top: 6px;
}

/* Results UI dynamic states */
.result-card-header.is-pass { border-bottom-color: var(--success-color); }
.result-card-header.is-fail { border-bottom-color: var(--error-color); }
.results-inline-002.is-pass { color: var(--success-color); }
.results-inline-002.is-fail { color: var(--error-color); }

.impact-low { border-color: rgba(76, 175, 80, 0.4); }
.impact-medium { border-color: rgba(255, 152, 0, 0.4); }
.impact-high { border-color: rgba(244, 67, 54, 0.4); }

.impact-low .results-inline-016,
.impact-low .results-inline-017 { color: #4caf50; }
.impact-medium .results-inline-016,
.impact-medium .results-inline-017 { color: #ff9800; }
.impact-high .results-inline-016,
.impact-high .results-inline-017 { color: #f44336; }

/* Report UI status */
.report-status--locked { color: #ef4444; }
.report-status--ready { color: #4ade80; }

/* Utility animations */
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========================================================================== */
/* Core UI no-inline styles (auth/admin/error-guard/feedback)                  */
/* ========================================================================== */

.is-hidden { display: none !important; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-backdrop.visible { display: flex; }
.modal-backdrop.modal-admin { z-index: 100000; }

.auth-modal { max-width: 400px; text-align: center; }
.auth-input { width: 100%; margin: 10px 0; }
.auth-help { margin-top: 10px; font-size: 12px; opacity: 0.7; }

.admin-modal { max-width: 90vw; height: 80vh; overflow: auto; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-metric-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.admin-metric-card { text-align: center; padding: 20px; }
.admin-metric-value { font-size: 40px; font-weight: bold; }
.admin-metric-value--primary { color: var(--accent-primary); }
.admin-metric-value--secondary { color: var(--accent-secondary); }
.admin-metric-value--success { color: #10b981; }
.admin-logs { background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 8px; font-family: monospace; height: 200px; overflow: auto; }
.admin-log { display: block; }
.admin-log--ok { color: #10b981; }
.admin-log--warn { color: #ef4444; }
.admin-log--info { color: #aaa; }

.error-guard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.error-guard-card {
  background: #1e1e1e;
  border: 1px solid #ff4444;
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  color: #fff;
  font-family: sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.error-guard-title { margin-top: 0; color: #ff4444; font-size: 24px; }
.error-guard-text { color: #ccc; line-height: 1.5; }
.error-guard-details {
  background: #000;
  padding: 15px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 12px;
  color: #ff8888;
  margin: 20px 0;
  max-height: 100px;
  overflow: auto;
}

.error-guard-actions { display: flex; gap: 10px; justify-content: flex-end; }
.error-guard-btn { padding: 10px 20px; border-radius: 6px; cursor: pointer; }
.error-guard-btn.is-secondary { background: transparent; border: 1px solid #666; color: #ccc; box-shadow: none; }
.error-guard-btn.is-primary { background: #ff4444; border: none; color: #fff; font-weight: bold; box-shadow: none; }

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.toast-notification {
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideIn 0.3s ease;
  cursor: pointer;
}

.toast--success { background: #10b981; }
.toast--error { background: #ef4444; }
.toast--warning { background: #f59e0b; }
.toast--info { background: #3b82f6; }

.toast-icon { font-size: 1.2em; }
.toast-message { flex: 1; }
.toast-close { opacity: 0.7; font-size: 1.2em; }
.toast-exit { animation: toastSlideOut 0.3s ease forwards; }

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.ui-loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ui-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: uiSpin 0.8s linear infinite;
}

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

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.confirm-dialog {
  background: var(--bg-primary, #1a1a2e);
  padding: 24px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  color: var(--text-primary, #fff);
}

.confirm-title { margin: 0 0 12px 0; font-size: 1.2rem; }
.confirm-message { margin: 0 0 20px 0; color: var(--text-muted, #aaa); }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-btn { padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.confirm-cancel {
  background: transparent;
  border: 1px solid var(--border-color, #333);
  color: var(--text-secondary, #ccc);
  box-shadow: none;
}

.confirm-ok--warning { background: #f59e0b; border: none; color: #fff; box-shadow: none; }
.confirm-ok--danger { background: #ef4444; border: none; color: #fff; box-shadow: none; }
.confirm-ok--info { background: #3b82f6; border: none; color: #fff; box-shadow: none; }


/* Visual stack bucketed heights (auto-generated) */
.visual-layer--pattern { background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px); }
.visual-layer-h-8 { height: 8px; }
.visual-layer-h-12 { height: 12px; }
.visual-layer-h-16 { height: 16px; }
.visual-layer-h-20 { height: 20px; }
.visual-layer-h-24 { height: 24px; }
.visual-layer-h-28 { height: 28px; }
.visual-layer-h-32 { height: 32px; }
.visual-layer-h-36 { height: 36px; }
.visual-layer-h-40 { height: 40px; }
.visual-layer-h-44 { height: 44px; }
.visual-layer-h-48 { height: 48px; }
.visual-layer-h-52 { height: 52px; }
.visual-layer-h-56 { height: 56px; }
.visual-layer-h-60 { height: 60px; }
.visual-layer-h-64 { height: 64px; }
.visual-layer-h-68 { height: 68px; }
.visual-layer-h-72 { height: 72px; }
.visual-layer-h-76 { height: 76px; }
.visual-layer-h-80 { height: 80px; }
.visual-layer-h-84 { height: 84px; }
.visual-layer-h-88 { height: 88px; }
.visual-layer-h-92 { height: 92px; }
.visual-layer-h-96 { height: 96px; }
.visual-layer-h-100 { height: 100px; }
.visual-layer-h-104 { height: 104px; }
.visual-layer-h-108 { height: 108px; }
.visual-layer-h-112 { height: 112px; }
.visual-layer-h-116 { height: 116px; }
.visual-layer-h-120 { height: 120px; }
.visual-layer-h-124 { height: 124px; }
.visual-layer-h-128 { height: 128px; }
.visual-layer-h-132 { height: 132px; }
.visual-layer-h-136 { height: 136px; }
.visual-layer-h-140 { height: 140px; }
.visual-layer-h-144 { height: 144px; }
.visual-layer-h-148 { height: 148px; }
.visual-layer-h-152 { height: 152px; }
.visual-layer-h-156 { height: 156px; }
.visual-layer-h-160 { height: 160px; }
.visual-layer-h-164 { height: 164px; }
.visual-layer-h-168 { height: 168px; }
.visual-layer-h-172 { height: 172px; }
.visual-layer-h-176 { height: 176px; }
.visual-layer-h-180 { height: 180px; }
.visual-layer-h-184 { height: 184px; }
.visual-layer-h-188 { height: 188px; }
.visual-layer-h-192 { height: 192px; }
.visual-layer-h-196 { height: 196px; }
.visual-layer-h-200 { height: 200px; }
.visual-layer-h-204 { height: 204px; }
.visual-layer-h-208 { height: 208px; }
.visual-layer-h-212 { height: 212px; }
.visual-layer-h-216 { height: 216px; }
.visual-layer-h-220 { height: 220px; }
.visual-layer-h-224 { height: 224px; }
.visual-layer-h-228 { height: 228px; }
.visual-layer-h-232 { height: 232px; }
.visual-layer-h-236 { height: 236px; }
.visual-layer-h-240 { height: 240px; }
.visual-layer-h-244 { height: 244px; }
.visual-layer-h-248 { height: 248px; }
.visual-layer-h-252 { height: 252px; }
.visual-layer-h-256 { height: 256px; }
.visual-layer-h-260 { height: 260px; }
.visual-layer-h-264 { height: 264px; }
.visual-layer-h-268 { height: 268px; }
.visual-layer-h-272 { height: 272px; }
.visual-layer-h-276 { height: 276px; }
.visual-layer-h-280 { height: 280px; }
.visual-layer-h-284 { height: 284px; }
.visual-layer-h-288 { height: 288px; }
.visual-layer-h-292 { height: 292px; }
.visual-layer-h-296 { height: 296px; }
.visual-layer-h-300 { height: 300px; }
.visual-layer-h-304 { height: 304px; }
.visual-layer-h-308 { height: 308px; }
.visual-layer-h-312 { height: 312px; }
.visual-layer-h-316 { height: 316px; }
.visual-layer-h-320 { height: 320px; }
.visual-layer-h-324 { height: 324px; }
.visual-layer-h-328 { height: 328px; }
.visual-layer-h-332 { height: 332px; }
.visual-layer-h-336 { height: 336px; }
.visual-layer-h-340 { height: 340px; }
.visual-layer-h-344 { height: 344px; }
.visual-layer-h-348 { height: 348px; }
.visual-layer-h-352 { height: 352px; }
.visual-layer-h-356 { height: 356px; }
.visual-layer-h-360 { height: 360px; }
.visual-layer-h-364 { height: 364px; }
.visual-layer-h-368 { height: 368px; }
.visual-layer-h-372 { height: 372px; }
.visual-layer-h-376 { height: 376px; }
.visual-layer-h-380 { height: 380px; }
.visual-layer-h-384 { height: 384px; }
.visual-layer-h-388 { height: 388px; }
.visual-layer-h-392 { height: 392px; }
.visual-layer-h-396 { height: 396px; }
.visual-layer-h-400 { height: 400px; }
.visual-layer-h-404 { height: 404px; }
.visual-layer-h-408 { height: 408px; }
.visual-layer-h-412 { height: 412px; }
.visual-layer-h-416 { height: 416px; }
.visual-layer-h-420 { height: 420px; }
.visual-layer-h-424 { height: 424px; }
.visual-layer-h-428 { height: 428px; }
.visual-layer-h-432 { height: 432px; }
.visual-layer-h-436 { height: 436px; }
.visual-layer-h-440 { height: 440px; }
.visual-layer-h-444 { height: 444px; }
.visual-layer-h-448 { height: 448px; }
.visual-layer-h-452 { height: 452px; }
.visual-layer-h-456 { height: 456px; }
.visual-layer-h-460 { height: 460px; }
.visual-layer-h-464 { height: 464px; }
.visual-layer-h-468 { height: 468px; }
.visual-layer-h-472 { height: 472px; }
.visual-layer-h-476 { height: 476px; }
.visual-layer-h-480 { height: 480px; }
.visual-layer-h-484 { height: 484px; }
.visual-layer-h-488 { height: 488px; }
.visual-layer-h-492 { height: 492px; }
.visual-layer-h-496 { height: 496px; }
.visual-layer-h-500 { height: 500px; }
.visual-layer-h-504 { height: 504px; }
.visual-layer-h-508 { height: 508px; }
.visual-layer-h-512 { height: 512px; }
.visual-layer-h-516 { height: 516px; }
.visual-layer-h-520 { height: 520px; }
.visual-layer-h-524 { height: 524px; }
.visual-layer-h-528 { height: 528px; }
.visual-layer-h-532 { height: 532px; }
.visual-layer-h-536 { height: 536px; }
.visual-layer-h-540 { height: 540px; }
.visual-layer-h-544 { height: 544px; }
.visual-layer-h-548 { height: 548px; }
.visual-layer-h-552 { height: 552px; }
.visual-layer-h-556 { height: 556px; }
.visual-layer-h-560 { height: 560px; }
.visual-layer-h-564 { height: 564px; }
.visual-layer-h-568 { height: 568px; }
.visual-layer-h-572 { height: 572px; }
.visual-layer-h-576 { height: 576px; }
.visual-layer-h-580 { height: 580px; }
.visual-layer-h-584 { height: 584px; }
.visual-layer-h-588 { height: 588px; }
.visual-layer-h-592 { height: 592px; }
.visual-layer-h-596 { height: 596px; }
.visual-layer-h-600 { height: 600px; }

/* ========================================================================== */
/* BIM, perf monitor, schematic, 3D helpers                                   */
/* ========================================================================== */

.badge.info { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge.success { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge.warning { background: rgba(251, 146, 60, 0.2); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.4); }

.bim-demo-warning {
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.5);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85em;
  color: #fb923c;
}

.bim-demo-icon { font-size: 1.1em; }
.bim-demo-badge { background: rgba(251, 146, 60, 0.3); color: #fb923c; }
.bim-error { color: #c0392b; }

.perf-monitor {
  position: fixed;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.8);
  color: #0f0;
  font-family: monospace;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  gap: 10px;
}

.perf-fps--low { color: #f00; }
.perf-fps--med { color: #ff0; }
.perf-fps--high { color: #0f0; }
.perf-mem { color: #aaf; }

.schematic-container { position: relative; overflow: hidden; }
.schematic-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: #666;
  font-size: 11px;
  font-family: JetBrains Mono, monospace;
}

.schematic-svg { position: absolute; top: 0; left: 0; }

.visual-3d-container { position: relative; overflow: hidden; }
.visual-3d-canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.visual-3d-offline { display: flex; align-items: center; justify-content: center; height: 100%; color: #666; }

/* ========================================================================== */
/* Project templates + optimizer                                              */
/* ========================================================================== */

.template-modal { max-width: 600px; }
.template-modal-desc { margin-bottom: 20px; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.template-card {
  border: 1px solid var(--border);
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
}

.template-card:hover { border-color: var(--accent-main); }
.template-card-icon { font-size: 2rem; margin-bottom: 10px; }
.template-card-title { margin: 0 0 5px 0; font-size: 1rem; }
.template-card-desc { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

.optimizer-card { background: #111; padding: 10px; border-radius: 8px; border: 1px solid #333; }
.optimizer-list { font-size: 12px; padding-left: 20px; color: #aaa; }
.optimizer-apply { width: 100%; margin-top: 8px; }

/* ========================================================================== */
/* Condensation UI                                                            */
/* ========================================================================== */

.cond-diagnosis {
  padding: 12px;
  border-radius: 0 6px 6px 0;
}

.cond-diagnosis--pass {
  border-left: 4px solid #27ae60;
  background: linear-gradient(90deg, rgba(39, 174, 96, 0.07), transparent);
}

.cond-diagnosis--fail {
  border-left: 4px solid #e74c3c;
  background: linear-gradient(90deg, rgba(231, 76, 60, 0.07), transparent);
}

.cond-diagnosis--empty {
  border-left: 4px solid #666;
  background: rgba(255, 255, 255, 0.05);
}

.cond-empty-text { opacity: 0.6; font-style: italic; }

.cond-header {
  font-weight: 700;
  padding-bottom: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cond-header.is-pass { color: #27ae60; border-bottom: 1px solid rgba(39, 174, 96, 0.2); }
.cond-header.is-fail { color: #e74c3c; border-bottom: 1px solid rgba(231, 76, 60, 0.2); }

.cond-type { font-size: 0.8em; opacity: 0.7; font-weight: 400; }

.cond-status { font-weight: 600; }
.cond-status--pass { color: #27ae60; }
.cond-status--fail { color: #e74c3c; }

.cond-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 11px;
  color: #ddd;
  margin-bottom: 10px;
}

.cond-section { background: rgba(255, 255, 255, 0.03); padding: 8px; border-radius: 6px; }
.cond-section-title { font-weight: bold; margin-bottom: 4px; color: #fff; }
.cond-line { margin-bottom: 2px; }
.cond-muted { opacity: 0.7; }

.cond-footer {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 4px;
  display: flex;
  gap: 12px;
}

/* Condensation Guidance Recommendations */
.cond-guidance {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
}
.cond-guidance__title {
  font-size: 11px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cond-guidance__list {
  margin: 0;
  padding-left: 18px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.cond-guidance__list li {
  margin-bottom: 3px;
}

/* Condensation - Norm Reference Tags */
.cond-norm-ref {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.55;
}
.cond-limit {
  opacity: 0.5;
  font-size: 0.9em;
}

/* Condensation - Micro Educational Text */
.cond-edu-micro {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  line-height: 1.4;
}

/* Condensation - Ventilation Inline Note */
.cond-edu-inline {
  font-size: 10px;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.07);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cond-edu-inline i { font-size: 11px; flex-shrink: 0; }

/* Condensation - HRi Scenario Badges */
.cond-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.cond-scenario {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
}
.cond-scenario.cond-status--pass {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.cond-scenario.cond-status--fail {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.cond-scenario.cond-status--info {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}

/* ========================================================================== */
/* Educational Expandable Panels (Global Reusable)                            */
/* ========================================================================== */

.edu-expandable {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}
.edu-expandable[open] {
  border-color: rgba(99, 102, 241, 0.25);
}

.edu-expandable__toggle {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
  transition: background 0.2s;
}
.edu-expandable__toggle:hover {
  background: rgba(99, 102, 241, 0.12);
}
.edu-expandable__toggle::-webkit-details-marker { display: none; }
.edu-expandable__toggle::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.2s;
}
.edu-expandable[open] > .edu-expandable__toggle::before {
  transform: rotate(90deg);
}

.edu-expandable__body {
  padding: 14px;
  background: rgba(0,0,0,0.15);
}

/* Step Grid */
.edu-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .edu-step-grid { grid-template-columns: 1fr; }
}

.edu-step {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.04);
}
.edu-step__number {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.edu-step__content {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.edu-step__content strong {
  display: block;
  color: #fff;
  margin-bottom: 3px;
  font-size: 11.5px;
}
.edu-step__content p {
  margin: 3px 0;
}

/* Formula display */
.edu-formula {
  display: block;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 4px;
  padding: 5px 8px;
  margin: 4px 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10.5px;
  color: #c4b5fd;
  letter-spacing: 0.3px;
}

/* Normative Note */
.edu-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.edu-note i {
  color: #a5b4fc;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}
.edu-note strong {
  color: rgba(255,255,255,0.75);
}
.edu-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.edu-list li {
  margin: 2px 0;
}

/* ========================================================================== */
/* Dashboard UI (no-inline styles)                                             */
/* ========================================================================== */

.dashboard-stats { margin-bottom: 32px; }
.empty-state-icon--sm { font-size: 32px; margin-bottom: 16px; opacity: 0.5; }
.project-status--pass { color: #4ade80; }
.project-status--fail { color: #ef4444; }

/* ========================================================================== */
/* Demand UI                                                                  */
/* ========================================================================== */

.demand-meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.demand-mode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.demand-mode-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #f8fafc !important; }
.demand-mode-btn--active { border-color: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,0.4); color: #fff !important; background: rgba(239,68,68,0.12); }
.demand-mode-hint { color: #9ca3af; font-size: 12px; }
.demand-warning { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); color: #fbbf24; font-size: 12px; display: flex; align-items: flex-start; gap: 8px; }
.demand-warning__label { font-weight: 700; letter-spacing: 0.04em; color: #fbbf24; }
.demand-warning__text { color: #fef3c7; }
.demand-badge-row { margin-top: 6px; }
.demand-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); }
.demand-badge--strict { color: #fff; background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); }
.demand-badge--estimate { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.4); }
.demand-dd-line { margin-top: 6px; color: #9ca3af; font-size: 11px; }
.demand-placeholder { margin-top: 10px; padding: 12px; border-radius: 10px; border: 1px dashed rgba(239,68,68,0.4); color: #fecaca; background: rgba(239,68,68,0.08); font-size: 12px; text-align: center; }
.demand-legend { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12px; color: #cbd5f5; }
.demand-legend-item { display: flex; align-items: center; gap: 8px; }
.demand-legend-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.demand-legend-value { margin-left: auto; color: #e5e7eb; font-family: monospace; }
.demand-assumptions { margin-top: 8px; font-size: 11px; color: #9ca3af; }

.demand-spec-panel { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.demand-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.demand-table-header { background: rgba(255, 255, 255, 0.05); text-align: left; color: #888; }
.demand-th { padding: 10px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.demand-th--title { display: flex; align-items: center; justify-content: space-between; }
.demand-td { padding: 8px 15px; }
.demand-td--muted { color: #ccc; }
.demand-td--unit { color: #666; }
.demand-td--mono { font-family: monospace; }
.demand-value--wall { color: #3b82f6; }
.demand-value--roof { color: #8b5cf6; }
.demand-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  color: #fff;
  width: 60px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

.demand-input-note { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.demand-input-note--warn { color: #f59e0b; }
.demand-input-note--ok { color: #22c55e; }
.demand-input-value--estimated { color: #f59e0b; }
.demand-input-value--missing { color: #ef4444; }

.demand-percent { font-weight: 700; }
.demand-success { color: #10b981; }
.alert-icon--success { color: #10b981; }
.alert-content--success { color: #6ee7b7; }

/* ========================================================================== */
/* Intelligence UI                                                            */
/* ========================================================================== */

.intel-card--carbon { border-left: 3px solid #10b981; }
.intel-badge--carbon { background: var(--accent-main); color: #fff; }
.intel-rating { margin-top: 10px; text-align: center; }
.intel-rating-score { font-size: 3rem; font-weight: 800; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.intel-rating--a { color: #10b981; }
.intel-rating--b { color: #f59e0b; }
.intel-rating--c { color: #ef4444; }
.intel-rating-label { color: #6b7280; text-transform: uppercase; letter-spacing: 1px; font-size: 0.7rem; }

/* CLIMA-LAB: INLINE STYLE PURGE START */
/* Layers UI */
.header-col--w24 { width: 24px; }
.header-col--w20 { width: 20px; }
.header-col--w32 { width: 32px; }
.input--full { width: 100%; }
.layer-primary-row--structure { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--glass-border); background: transparent; }
.input-wrapper--flex { display: flex; align-items: center; }
.structure-toggle--full { width: 100%; justify-content: flex-start; }
.structure-pill { display: flex; align-items: center; gap: 8px; background: rgba(74, 222, 128, 0.1); padding: 6px 10px; border-radius: 6px; border: 1px solid rgba(74, 222, 128, 0.2); width: 100%; }
.structure-checkbox { accent-color: var(--primary); }
.structure-label { font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.layer-structure-empty { font-size: 0.75rem; color: var(--text-3); font-style: italic; padding: 8px; }
.option-create { font-weight: 700; color: var(--accent-primary); }

/* Library Modal */
.library-modal { max-width: 600px; background: rgba(16, 18, 27, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; }
.library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.library-header--doc { margin-bottom: 16px; flex-shrink: 0; }
.library-header-left { display: flex; align-items: center; gap: 12px; }
.library-title { margin: 0; font-size: 1.4em; }
.library-title--doc { font-size: 1.2em; }
.library-lead { color: #9ca3af; margin-bottom: 20px; font-size: 0.9em; }
.library-docs { display: flex; flex-direction: column; gap: 12px; }
.library-doc-btn { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; cursor: pointer; text-align: left; transition: all 0.2s ease; width: 100%; }
.library-doc-btn:hover { background: rgba(59, 130, 246, 0.15); }
.library-doc-icon { font-size: 1.4em; min-width: 2.5em; text-align: center; }
.library-doc-text { display: flex; flex-direction: column; gap: 2px; }
.library-doc-title { font-weight: 600; color: #fff; }
.library-doc-subtitle { font-size: 0.85em; color: #9ca3af; }
.library-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.library-footer-text { font-size: 0.75em; color: #6b7280; }

/* Library Document Viewer */
.library-doc-viewer { max-width: 900px; max-height: 85vh; background: rgba(16, 18, 27, 0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.library-doc-content { flex: 1; overflow-y: auto; padding: 16px; background: rgba(0, 0, 0, 0.3); border-radius: 8px; font-size: 0.85em; line-height: 1.6; white-space: pre-wrap; color: #e5e7eb; }
.library-doc-loading { text-align: center; padding: 40px; color: #6b7280; }
.library-doc-footer { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.library-doc-tip { font-size: 0.75em; color: #6b7280; }
.library-doc-error { text-align: center; padding: 40px; color: #ef4444; }
.library-doc-error-title { font-weight: 600; margin-bottom: 8px; }
.library-doc-error-body { font-size: 0.85em; color: #9ca3af; }

/* Library Markdown */
.lib-h1 { color: #f472b6; margin: 24px 0 16px; font-size: 1.4em; }
.lib-h2 { color: #34d399; margin: 20px 0 12px; font-size: 1.2em; }
.lib-h3 { color: #60a5fa; margin: 16px 0 8px; }
.lib-strong { color: #fbbf24; }
.lib-code { background: rgba(59, 130, 246, 0.2); padding: 2px 6px; border-radius: 4px; color: #93c5fd; }
.lib-table-row { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 4px 0; }
.lib-list-item { position: relative; padding-left: 12px; margin: 2px 0; }
.lib-list-item::before { content: "-"; position: absolute; left: 0; color: #9ca3af; }
.lib-blockquote { border-left: 3px solid #3b82f6; padding-left: 12px; margin: 8px 0; color: #9ca3af; }

/* Envelope UI */
.facade-card { position: relative; }
.facade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.facade-title { margin: 0; }
.facade-desc { margin: 5px 0 0 0; }
.wwr-label { font-size: 0.9em; }
.card--muted { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); }
.sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 10px; }
.slider-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: #9ca3af; margin-bottom: 5px; }
.slider-value { font-weight: 600; }
.wwr-slider { width: 100%; accent-color: var(--accent-main); }
.envelope-header-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.envelope-header-title { margin: 0; font-size: 1.1em; color: #fff; display: flex; align-items: center; gap: 8px; }
.envelope-card { position: relative; overflow: hidden; padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; }
.envelope-card-header { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 8px; }
.envelope-card-title { margin: 0; font-weight: 500; letter-spacing: 0.5px; }
.orient-icon { background: rgba(255, 255, 255, 0.1); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-family: monospace; }
.envelope-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.envelope-grid-2--spaced { margin-bottom: 12px; }
.envelope-label { font-size: 0.75em; color: rgba(255, 255, 255, 0.5); display: block; margin-bottom: 4px; }
.envelope-input { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; padding: 6px; border-radius: 4px; }
.envelope-input--synced { opacity: 0.7; cursor: default; border-style: dashed; }
.envelope-sync-badge { font-size: 0.65em; background: rgba(99,102,241,0.25); color: #a5b4fc; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.orb-glow { position: absolute; bottom: -30px; right: -30px; width: 80px; height: 80px; border-radius: 50%; filter: blur(40px); opacity: 0.15; pointer-events: none; }
.orb-glow.norte { background: #facc15; }
.orb-glow.sur { background: #4ade80; }
.orb-glow.este { background: #60a5fa; }
.orb-glow.oeste { background: #f97316; }
@media (max-width: 768px) {
  .envelope-grid { grid-template-columns: 1fr; }
  .sliders-grid { grid-template-columns: 1fr; }
}
.envelope-report { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
.envelope-report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.envelope-report-title { margin: 0; color: #fff; display: flex; align-items: center; gap: 10px; }
.envelope-report-subtitle { font-size: 0.8em; color: rgba(255, 255, 255, 0.4); }
.envelope-report-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.envelope-report-head { color: rgba(255, 255, 255, 0.5); font-size: 0.85em; text-align: left; }
.envelope-report-head .envelope-cell { padding: 0 10px; }
.envelope-report-row .envelope-cell { padding: 12px 10px; }
.envelope-report-row td:first-child { border-radius: 8px 0 0 8px; font-weight: 600; }
.envelope-report-row td:last-child { border-radius: 0 8px 8px 0; }
.envelope-report-row--pass { background: rgba(74, 222, 128, 0.05); }
.envelope-report-row--fail { background: rgba(239, 68, 68, 0.1); }
.envelope-cell--center { text-align: center; }
.envelope-cell--lead { font-weight: 600; }
.wwr-bar { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); margin-top: 4px; border-radius: 2px; }
.wwr-bar-fill { height: 100%; border-radius: 2px; }
.wwr-bar-fill--pass { background: #4ade80; }
.wwr-bar-fill--fail { background: #ef4444; }
.status-chip { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; font-weight: bold; }
.status-chip--pass { background: #4ade80; color: #000; }
.status-chip--fail { background: #ef4444; color: #fff; }
.buffer { font-weight: 600; }
.buffer--na { color: #666; font-weight: 500; }
.buffer--invalid { color: #888; font-size: 0.85em; font-style: italic; }
.buffer--warn { color: #fbbf24; font-size: 0.9em; }
.buffer--ok { color: #4ade80; }
.buffer--fail { color: #ef4444; }
.method-badge { font-size: 0.7em; opacity: 0.7; margin-left: 6px; }
.envelope-report-note { margin-top: 15px; font-size: 0.8em; color: rgba(255, 255, 255, 0.4); text-align: right; }
.envelope-report-glow { position: absolute; top: 0; left: 20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%); pointer-events: none; }
.envelope-results--fade { animation: envelopeFadeIn 0.5s ease; }
@keyframes envelopeFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Demand UI */
.btn-disabled { opacity: 0.5; }
.energy-label-badge { transition: all 0.2s ease; }
.energy-label--A { background: #059669; box-shadow: 0 0 20px rgba(5, 150, 105, 0.4); }
.energy-label--B { background: #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
.energy-label--C { background: #84cc16; box-shadow: 0 0 20px rgba(132, 204, 22, 0.4); }
.energy-label--D { background: #facc15; box-shadow: 0 0 20px rgba(250, 204, 21, 0.4); }
.energy-label--E { background: #f97316; box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); }
.energy-label--F { background: #ef4444; box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
.energy-label--G { background: #991b1b; box-shadow: 0 0 20px rgba(153, 27, 27, 0.4); }
.energy-label--unknown { background: #333; box-shadow: 0 0 20px rgba(51, 51, 51, 0.4); }

/* Smart Builder */
.sb-note { opacity: 0.7; }
.sb-complies--pass { background: rgba(74, 222, 128, 0.2); color: var(--accent-main); }
.sb-complies--fail { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.btn-apply--success { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* BIM UI */
.bim-drop-zone--success { border: 2px solid #27ae60; background: rgba(39, 174, 96, 0.1); }

/* PDF Engine */
.foundry-shadow-studio { position: fixed; left: -9999px; top: 0; width: 1200px; height: 1200px; background: #fff; z-index: -9999; font-family: Inter, sans-serif; }

/* WWR percent width classes */
.wwr-pct-0 { width: 0%; }
.wwr-pct-1 { width: 1%; }
.wwr-pct-2 { width: 2%; }
.wwr-pct-3 { width: 3%; }
.wwr-pct-4 { width: 4%; }
.wwr-pct-5 { width: 5%; }
.wwr-pct-6 { width: 6%; }
.wwr-pct-7 { width: 7%; }
.wwr-pct-8 { width: 8%; }
.wwr-pct-9 { width: 9%; }
.wwr-pct-10 { width: 10%; }
.wwr-pct-11 { width: 11%; }
.wwr-pct-12 { width: 12%; }
.wwr-pct-13 { width: 13%; }
.wwr-pct-14 { width: 14%; }
.wwr-pct-15 { width: 15%; }
.wwr-pct-16 { width: 16%; }
.wwr-pct-17 { width: 17%; }
.wwr-pct-18 { width: 18%; }
.wwr-pct-19 { width: 19%; }
.wwr-pct-20 { width: 20%; }
.wwr-pct-21 { width: 21%; }
.wwr-pct-22 { width: 22%; }
.wwr-pct-23 { width: 23%; }
.wwr-pct-24 { width: 24%; }
.wwr-pct-25 { width: 25%; }
.wwr-pct-26 { width: 26%; }
.wwr-pct-27 { width: 27%; }
.wwr-pct-28 { width: 28%; }
.wwr-pct-29 { width: 29%; }
.wwr-pct-30 { width: 30%; }
.wwr-pct-31 { width: 31%; }
.wwr-pct-32 { width: 32%; }
.wwr-pct-33 { width: 33%; }
.wwr-pct-34 { width: 34%; }
.wwr-pct-35 { width: 35%; }
.wwr-pct-36 { width: 36%; }
.wwr-pct-37 { width: 37%; }
.wwr-pct-38 { width: 38%; }
.wwr-pct-39 { width: 39%; }
.wwr-pct-40 { width: 40%; }
.wwr-pct-41 { width: 41%; }
.wwr-pct-42 { width: 42%; }
.wwr-pct-43 { width: 43%; }
.wwr-pct-44 { width: 44%; }
.wwr-pct-45 { width: 45%; }
.wwr-pct-46 { width: 46%; }
.wwr-pct-47 { width: 47%; }
.wwr-pct-48 { width: 48%; }
.wwr-pct-49 { width: 49%; }
.wwr-pct-50 { width: 50%; }
.wwr-pct-51 { width: 51%; }
.wwr-pct-52 { width: 52%; }
.wwr-pct-53 { width: 53%; }
.wwr-pct-54 { width: 54%; }
.wwr-pct-55 { width: 55%; }
.wwr-pct-56 { width: 56%; }
.wwr-pct-57 { width: 57%; }
.wwr-pct-58 { width: 58%; }
.wwr-pct-59 { width: 59%; }
.wwr-pct-60 { width: 60%; }
.wwr-pct-61 { width: 61%; }
.wwr-pct-62 { width: 62%; }
.wwr-pct-63 { width: 63%; }
.wwr-pct-64 { width: 64%; }
.wwr-pct-65 { width: 65%; }
.wwr-pct-66 { width: 66%; }
.wwr-pct-67 { width: 67%; }
.wwr-pct-68 { width: 68%; }
.wwr-pct-69 { width: 69%; }
.wwr-pct-70 { width: 70%; }
.wwr-pct-71 { width: 71%; }
.wwr-pct-72 { width: 72%; }
.wwr-pct-73 { width: 73%; }
.wwr-pct-74 { width: 74%; }
.wwr-pct-75 { width: 75%; }
.wwr-pct-76 { width: 76%; }
.wwr-pct-77 { width: 77%; }
.wwr-pct-78 { width: 78%; }
.wwr-pct-79 { width: 79%; }
.wwr-pct-80 { width: 80%; }
.wwr-pct-81 { width: 81%; }
.wwr-pct-82 { width: 82%; }
.wwr-pct-83 { width: 83%; }
.wwr-pct-84 { width: 84%; }
.wwr-pct-85 { width: 85%; }
.wwr-pct-86 { width: 86%; }
.wwr-pct-87 { width: 87%; }
.wwr-pct-88 { width: 88%; }
.wwr-pct-89 { width: 89%; }
.wwr-pct-90 { width: 90%; }
.wwr-pct-91 { width: 91%; }
.wwr-pct-92 { width: 92%; }
.wwr-pct-93 { width: 93%; }
.wwr-pct-94 { width: 94%; }
.wwr-pct-95 { width: 95%; }
.wwr-pct-96 { width: 96%; }
.wwr-pct-97 { width: 97%; }
.wwr-pct-98 { width: 98%; }
.wwr-pct-99 { width: 99%; }
.wwr-pct-100 { width: 100%; }

/* Smart Builder flex classes */
.sb-flex-5 { flex: 5; }
.sb-flex-10 { flex: 10; }
.sb-flex-15 { flex: 15; }
.sb-flex-20 { flex: 20; }
.sb-flex-25 { flex: 25; }
.sb-flex-30 { flex: 30; }
.sb-flex-35 { flex: 35; }
.sb-flex-40 { flex: 40; }
.sb-flex-45 { flex: 45; }
.sb-flex-50 { flex: 50; }
.sb-flex-55 { flex: 55; }
.sb-flex-60 { flex: 60; }
.sb-flex-65 { flex: 65; }
.sb-flex-70 { flex: 70; }
.sb-flex-75 { flex: 75; }
.sb-flex-80 { flex: 80; }
.sb-flex-85 { flex: 85; }
.sb-flex-90 { flex: 90; }
.sb-flex-95 { flex: 95; }
.sb-flex-100 { flex: 100; }
.sb-flex-105 { flex: 105; }
.sb-flex-110 { flex: 110; }
.sb-flex-115 { flex: 115; }
.sb-flex-120 { flex: 120; }
.sb-flex-125 { flex: 125; }
.sb-flex-130 { flex: 130; }
.sb-flex-135 { flex: 135; }
.sb-flex-140 { flex: 140; }
.sb-flex-145 { flex: 145; }
.sb-flex-150 { flex: 150; }
.sb-flex-155 { flex: 155; }
.sb-flex-160 { flex: 160; }
.sb-flex-165 { flex: 165; }
.sb-flex-170 { flex: 170; }
.sb-flex-175 { flex: 175; }
.sb-flex-180 { flex: 180; }
.sb-flex-185 { flex: 185; }
.sb-flex-190 { flex: 190; }
.sb-flex-195 { flex: 195; }
.sb-flex-200 { flex: 200; }
.sb-flex-205 { flex: 205; }
.sb-flex-210 { flex: 210; }
.sb-flex-215 { flex: 215; }
.sb-flex-220 { flex: 220; }
.sb-flex-225 { flex: 225; }
.sb-flex-230 { flex: 230; }
.sb-flex-235 { flex: 235; }
.sb-flex-240 { flex: 240; }
.sb-flex-245 { flex: 245; }
.sb-flex-250 { flex: 250; }
.sb-flex-255 { flex: 255; }
.sb-flex-260 { flex: 260; }
.sb-flex-265 { flex: 265; }
.sb-flex-270 { flex: 270; }
.sb-flex-275 { flex: 275; }
.sb-flex-280 { flex: 280; }
.sb-flex-285 { flex: 285; }
.sb-flex-290 { flex: 290; }
.sb-flex-295 { flex: 295; }
.sb-flex-300 { flex: 300; }
/* CLIMA-LAB: INLINE STYLE PURGE END */



/* =============================================================================
   15. DASHBOARD EMPTY STATES (FIX v9.9.5)
   Purpose: Professional empty states for Cloud/Local modes
   ============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-top: 32px;
  min-height: 300px;
}

.empty-state--panel {
  background: radial-gradient(circle at center, rgba(74, 222, 128, 0.05) 0%, transparent 70%);
  border-color: rgba(74, 222, 128, 0.2);
}

.empty-state-icon--xl {
  font-size: 64px;
  color: rgba(74, 222, 128, 0.4);
  margin-bottom: 24px;
  filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.2));
}

.empty-state-icon--sm {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 16px;
}

.empty-state h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.empty-state-text--muted {
  font-size: 16px;
  color: #9ca3af;
  margin-bottom: 32px;
  max-width: 400px;
}

.empty-state .btn-secondary {
    padding: 12px 32px;
    font-size: 16px;
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state .btn-secondary:hover {
    background: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}

/* =============================================================================
   16. ROUTER VIEW SWITCHING (Refix v9.9.5)
   Purpose: Ensure views show/hide correctly
   ============================================================================= */

.view-section {
  display: none; /* Hide by default */
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

.view-section.active {
  display: block;
  opacity: 1;
}

.view-section.is-hidden {
  display: none !important;
}

/* Ensure Dashboard View takes full width */
#view-dashboard {
    width: 100%;
    min-height: 80vh;
}


/* =============================================================================
   15. DASHBOARD CARD TECHNICAL MATRIX (v9.10)
   Purpose: Replace generic single value with 3-element thermal breakdown
   ============================================================================= */

.tech-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.matrix-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 4px;
    position: relative;
    transition: all 0.2s ease;
}

.matrix-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
}

/* Status Colors */
.matrix-item.status-pass {
    border-bottom: 2px solid #10b981; /* Green */
}

.matrix-item.status-fail {
    border-bottom: 2px solid #ef4444; /* Red */
}

.matrix-item.status-neutral {
    border-bottom: 2px solid #6b7280; /* Gray */
    opacity: 0.7;
}

/* Typography */
.matrix-label {
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matrix-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.matrix-unit {
    font-size: 9px;
    color: #6b7280;
    font-weight: normal;
}

.matrix-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 8px;
}

.status-pass .matrix-icon { color: #10b981; }
.status-fail .matrix-icon { color: #ef4444; }



/* ========================================
   VENTILATION v2.0 - NCh 3309 Room-Based UI
   ======================================== */

/* Controls Bar: Presets + Add Room */
.vent-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.vent-presets, .vent-add-room {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vent-add-room select { max-width: 180px; }

.vent-height-row {
    max-width: 250px;
    margin-bottom: 16px;
}

/* Room List */
.vent-room-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Room Card */
.vent-room-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 4px solid;
    background: rgba(255,255,255,0.03);
    transition: background 0.2s;
}
.vent-room-card:hover { background: rgba(255,255,255,0.06); }
.vent-room--dry { border-left-color: #3b82f6; }
.vent-room--wet { border-left-color: #f59e0b; }

.vent-room-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vent-room-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    font-size: 16px;
    color: #94a3b8;
}
.vent-room--dry .vent-room-icon { color: #60a5fa; }
.vent-room--wet .vent-room-icon { color: #fbbf24; }

.vent-room-info { flex: 1; }
.vent-room-name {
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #e2e8f0;
    padding: 2px 4px;
    width: 100%;
    max-width: 280px;
}
.vent-room-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
}
.vent-mode-label { color: #94a3b8; }

/* Badges */
.vent-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.vent-badge--dry { background: rgba(59,130,246,0.2); color: #60a5fa; }
.vent-badge--wet { background: rgba(245,158,11,0.2); color: #fbbf24; }

/* Room Inputs Row */
.vent-room-inputs {
    display: flex;
    gap: 12px;
    padding-left: 48px;
}
.vent-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vent-input-group .glass-input {
    width: 100px;
    font-size: 13px;
}

/* Delete button */
.btn-icon--danger {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-icon--danger:hover { background: rgba(239,68,68,0.25); }

/* Compliance banner v2 */
.vent-compliance {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
}
.vent-compliance h4 { margin: 0; font-size: 15px; }
.vent-compliance div { font-size: 12px; color: #94a3b8; }
.vent-compliance--pass { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: #22c55e; }
.vent-compliance--fail { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }
.vent-compliance--pass h4 { color: #22c55e; }
.vent-compliance--fail h4 { color: #ef4444; }

/* Flow Summary (3-block horizontal) */
.vent-flow-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.vent-flow-block {
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.vent-flow-block--supply { border-top: 3px solid #3b82f6; }
.vent-flow-block--extract { border-top: 3px solid #f59e0b; }
.vent-flow-block--balance { display: flex; flex-direction: column; justify-content: center; }
.vent-flow-block--ok { border-top: 3px solid #22c55e; color: #22c55e; }
.vent-flow-block--fail { border-top: 3px solid #ef4444; color: #ef4444; }

.vent-flow-label { font-size: 11px; color: #94a3b8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.vent-flow-value { font-size: 22px; font-weight: 700; color: #e2e8f0; }
.vent-flow-value span { font-size: 12px; font-weight: 400; color: #94a3b8; }
.vent-flow-sub { font-size: 11px; color: #64748b; margin-top: 2px; }

/* Results Panel */
.vent-results-panel { margin-top: 16px; }
.vent-results-title {
    font-size: 14px;
    color: #e2e8f0;
    margin-bottom: 16px;
}

/* Detail Table */
.vent-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.vent-detail-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.vent-detail-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #cbd5e1;
}
.vent-cell--dry { color: #60a5fa; font-weight: 600; }
.vent-cell--wet { color: #fbbf24; font-weight: 600; }

.vent-empty {
    padding: 24px;
    text-align: center;
    color: #64748b;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .vent-controls-bar { flex-direction: column; }
    .vent-flow-summary { grid-template-columns: 1fr; }
    .vent-room-inputs { padding-left: 0; flex-wrap: wrap; }
}

/* Report Form (Municipal Pack) */
.report-form-panel {
    margin-top: 28px;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.55));
}
.report-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.report-form-title {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.05rem;
}
.report-form-subtitle {
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 0.82rem;
}
.report-form-badge {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(56, 189, 248, 0.85);
}
.report-accordion {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    background: rgba(2, 6, 23, 0.5);
}
.report-accordion > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.report-accordion > summary::-webkit-details-marker { display: none; }
.report-accordion > .report-form-grid {
    padding: 16px;
}
.report-routing-panel {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.6));
}
.report-route-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.report-route-card {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-route-title {
    color: #e2e8f0;
    font-weight: 600;
}
.report-route-status {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    width: fit-content;
}
.report-route-status.pass {
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.16);
}
.report-route-status.fail {
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.16);
}
.report-route-note {
    margin-top: 12px;
    color: #94a3b8;
    font-size: 0.8rem;
}
.report-accordion > .report-table {
    margin: 0 16px 8px;
}
.report-accordion > .report-add-btn {
    margin-left: 16px;
    margin-bottom: 16px;
}
.report-accordion-body {
    padding: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.report-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.report-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.76rem;
    color: #94a3b8;
}
.report-field--span {
    grid-column: span 2;
}
.report-input,
.report-select {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #e2e8f0;
    padding: 8px 10px;
    font-size: 0.85rem;
}
.report-input:focus,
.report-select:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.8);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}
.report-table {
    margin-top: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    overflow: hidden;
}
.report-table-head,
.report-table-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
}
.report-table--attachments .report-table-head,
.report-table--attachments .report-table-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-table-head {
    background: rgba(15, 23, 42, 0.8);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.report-table-row {
    background: rgba(2, 6, 23, 0.6);
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}
.report-table-row--empty {
    padding: 14px 16px;
    font-size: 0.8rem;
    color: #64748b;
}
.report-table .report-input {
    width: 100%;
}
.report-add-btn {
    margin-top: 12px;
}
.report-inline-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #e2e8f0;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}
.report-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .report-field--span { grid-column: span 1; }
    .report-table-head,
    .report-table-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ventilation Device Section */
.vent-device-section {
    border-top: 1px dashed rgba(255,255,255,0.1);
    padding: 8px 16px 12px;
    background: rgba(0,0,0,0.15);
}
.vent-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vent-device-icon {
    font-size: 1.1em;
    color: rgba(255,255,255,0.4);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.vent-device-input {
    max-width: 140px;
}
.vent-device-flow {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 60px;
}
.vent-device-flow-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1em;
    color: #a5b4fc;
}
.vent-device-flow-unit {
    font-size: 0.75em;
    color: rgba(255,255,255,0.4);
}
.vent-cell--pass { color: #10b981; }
.vent-cell--fail { color: #ef4444; }
.vent-compliance--warn {
    border-color: rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.08);
}