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

.universal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  line-height: 1.3;
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
}

.universal-badge.badge-sm {
  font-size: 10px;
  padding: 1px 6px;
}

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

.universal-badge.badge-default,
.universal-badge.badge-starter,
.universal-badge.badge-secondary {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* Brand family: beta / new / primary are soft blue, pro is solid blue */
.universal-badge.badge-primary,
.universal-badge.badge-beta,
.universal-badge.badge-new {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--brand-100);
}

.universal-badge.badge-pro {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Enterprise: premium ink */
.universal-badge.badge-enterprise {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

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

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

.universal-badge.badge-error {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

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

/* Inside an active nav pill, lift soft badges onto white */
.nav-item.active .universal-badge.badge-beta,
.nav-item.active .universal-badge.badge-new,
.nav-item.active .universal-badge.badge-primary,
.nav-item.active .universal-badge.badge-default {
  background: var(--bg-surface);
  border-color: var(--accent-border);
}
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: inherit;
}

.ui-icon-spin {
  animation: ui-icon-spin 0.9s linear infinite;
}

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

/* ---------- Icon tile ---------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}

.icon-tile-sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-tile-md { width: 36px; height: 36px; }
.icon-tile-lg { width: 44px; height: 44px; border-radius: 12px; }
.icon-tile-xl { width: 56px; height: 56px; border-radius: 16px; }

.icon-tile-accent  { background: var(--accent-soft);  color: var(--accent);       border-color: var(--brand-100); }
.icon-tile-neutral { background: var(--bg-muted);     color: var(--text-secondary); border-color: var(--border-subtle); }
.icon-tile-success { background: var(--success-bg);   color: var(--success-text); border-color: var(--success-border); }
.icon-tile-warning { background: var(--warning-bg);   color: var(--warning-text); border-color: var(--warning-border); }
.icon-tile-error   { background: var(--error-bg);     color: var(--error-text);   border-color: var(--error-border); }
.icon-tile-info    { background: var(--info-bg);      color: var(--info-text);    border-color: var(--info-border); }
.icon-tile-solid   { background: var(--accent);       color: #fff;                box-shadow: var(--shadow-glow-strong); }

/* ---------- Status dot ---------- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  vertical-align: middle;
  background: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

.status-dot-critical,
.status-dot-urgent,
.status-dot-high       { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.status-dot-elevated,
.status-dot-medium,
.status-dot-moderate   { background: #ea8a0c; box-shadow: 0 0 0 3px rgba(234, 138, 12, 0.16); }
.status-dot-fair,
.status-dot-watch      { background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.18); }
.status-dot-low,
.status-dot-minimal,
.status-dot-good       { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
/* ============================================
   LAYOUT COMPONENT - Dashboard Shell
   ============================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-base);
}

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

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

.sidebar-header {
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration-normal) var(--ease-out);
}

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

.brand-mark {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.logo-text {
  font-size: 17px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

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

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

.nav-section-title {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-3) 6px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

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

.nav-item .nav-icon {
  color: var(--text-tertiary);
  transition: color var(--duration-normal) var(--ease-out);
}

.nav-item:hover .nav-icon {
  color: var(--text-secondary);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--font-semibold);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

.nav-item.active:hover {
  background: var(--accent-soft-hover);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.units-card {
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.units-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.units-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.units-value {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.units-value.unlimited {
  color: var(--accent-text);
}

.units-progress {
  height: 6px;
  margin-top: var(--space-2);
  background: var(--bg-active);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.units-progress-fill {
  height: 100%;
  min-width: 6px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: var(--radius-full);
  transition: width var(--duration-slower) var(--ease-out);
}

.units-progress-fill.is-high {
  background: linear-gradient(90deg, #f59e0b, #dc2626);
}

/* User Card */
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out);
}

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

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: white;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--brand-100);
}

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

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

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

.user-plan-badge.universal-badge {
  margin-left: 0;
}

.user-card-chevron {
  color: var(--text-muted);
}

/* Logout Button */
.logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}

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

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

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  min-width: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
}

.page-container {
  flex: 1;
  padding: var(--space-8) var(--space-8) var(--space-12);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  animation: page-enter var(--duration-slower) var(--ease-out);
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-container { animation: none; }
}

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

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

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

  .sidebar {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
    flex-direction: row;
    align-items: center;
  }

  .sidebar-header {
    padding: var(--space-2);
  }

  .logo-text {
    display: none;
  }

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

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

  .nav-section-title,
  .nav-label,
  .nav-item .universal-badge {
    display: none;
  }

  .nav-item {
    width: 40px;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
  }

  .nav-item.active::before {
    display: none;
  }

  .sidebar-footer {
    display: none;
  }

  .main-content {
    margin-left: 0;
  }

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

@media (max-width: 480px) {
  .page-container {
    padding: var(--space-3);
  }
}
/* ============================================
   AUTH (Login / Signup) - split brand panel + form
   Scoped under .auth-page
   ============================================ */

.auth-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid !important;
  grid-template-columns: minmax(420px, 44%) 1fr;
  min-height: 100vh;
  width: 100vw;
  overflow: auto;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

body:has(.auth-page) {
  overflow: visible !important;
}

/* Brand panel */
.auth-page .auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  overflow: hidden;
  color: #fff;
  background: #172554;
}

.auth-page .auth-aside-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(129, 140, 248, 0.55) 0%, transparent 60%),
    radial-gradient(55% 45% at 100% 30%, rgba(99, 102, 241, 0.5) 0%, transparent 65%),
    radial-gradient(70% 60% at 30% 100%, rgba(67, 56, 202, 0.9) 0%, transparent 70%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 100%);
}

.auth-page .auth-aside-mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}

.auth-page .auth-aside > *:not(.auth-aside-mesh) {
  position: relative;
}

.auth-page .auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
}

.auth-page .auth-brand .brand-mark {
  object-fit: contain;
}

.auth-page .auth-aside-body h2 {
  margin: 0 0 var(--space-8);
  max-width: 420px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  color: #fff;
}

.auth-page .auth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 420px;
}

.auth-page .auth-points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.auth-page .auth-point-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

.auth-page .auth-points strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #fff;
}

.auth-page .auth-points li span:not(.auth-point-icon) {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(224, 231, 255, 0.78);
}

.auth-page .auth-aside-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: rgba(224, 231, 255, 0.7);
}

/* Form side */
.auth-page .auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(99, 102, 241, 0.06), transparent 70%),
    var(--bg-surface);
}

.auth-page .auth-card {
  width: 100%;
  max-width: 400px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.auth-page .auth-header {
  padding: 0;
  margin-bottom: var(--space-8);
  text-align: left;
  color: var(--text-primary);
  background: none;
}

.auth-page .auth-header-brand {
  display: none;
  margin-bottom: var(--space-6);
}

.auth-page .auth-header h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.auth-page .auth-header p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  opacity: 1;
}

.auth-page .login-form-container,
.auth-page .signup-form-container {
  padding: 0;
}

.auth-page .login-form,
.auth-page .signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.auth-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-page .form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.auth-page .form-group input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

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

.auth-page .form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

.auth-page .error-message,
.auth-page .success-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.auth-page .error-message {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.auth-page .success-message {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.auth-page .error-icon,
.auth-page .success-icon {
  display: inline-flex;
  margin-top: 1px;
  flex-shrink: 0;
}

.auth-page .submit-button {
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px -10px rgba(79, 70, 229, 0.7);
  transition: background-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.auth-page .submit-button:hover:not(:disabled) {
  background: var(--accent-hover);
}

.auth-page .submit-button:active:not(:disabled) {
  background: var(--accent-pressed);
}

.auth-page .submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.auth-page .submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.auth-page .submit-button .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

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

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

.auth-page .link {
  color: var(--accent-text);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.auth-page .link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive: drop the brand panel, keep a centered form */
@media (max-width: 960px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-page .auth-aside {
    display: none;
  }

  .auth-page .auth-header-brand {
    display: inline-flex;
  }
}
/* Login layout and form styles live in styles/auth.css (scoped under .auth-page). */
/* Signup layout and form styles live in styles/auth.css (scoped under .auth-page). */
.landing-page {
  min-height: 100vh;
  background: #fff;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.landing-page .section-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.landing-page .landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.landing-page .nav-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-page .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}

.landing-page .brand-name {
  font-size: 18px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
}

.landing-page .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.landing-page .nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  padding: 3px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.landing-page .nav-tab {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.landing-page .nav-tab:hover,
.landing-page .nav-tab:focus-visible {
  color: var(--text-primary);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.landing-page .nav-link {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.landing-page .nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.landing-page .nav-cta,
.landing-page .btn-primary,
.landing-page .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.landing-page .nav-cta {
  margin-left: 8px;
  min-height: 36px;
  padding: 0 16px;
  background: #0f172a;
  color: #fff;
  border: 1px solid #0f172a;
  font-size: var(--text-sm);
}

.landing-page .nav-cta:hover {
  background: #1e293b;
}

.landing-page .btn-primary,
.landing-page .btn-secondary {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
}

.landing-page .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px -12px rgba(37, 99, 235, 0.7);
}

.landing-page .btn-primary:hover {
  background: var(--accent-hover);
}

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

.landing-page .btn-secondary:hover {
  border-color: var(--border-strong);
  background: #f8fafc;
}

.landing-page .btn-primary.on-dark {
  background: #fff;
  color: var(--brand-800, #1e3a8a);
  border-color: #fff;
  box-shadow: none;
}

.landing-page .btn-secondary.on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.landing-page .btn-secondary.on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
}

.landing-page .hero-section {
  position: relative;
  padding: 88px var(--space-6) 28px;
  overflow: hidden;
}

.landing-page .hero-mesh {
  position: absolute;
  inset: -10% -10% auto;
  height: 640px;
  pointer-events: none;
  background:
    radial-gradient(42% 50% at 50% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 70%),
    radial-gradient(30% 40% at 80% 20%, rgba(147, 197, 253, 0.35) 0%, transparent 70%);
}

.landing-page .hero-container {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.landing-page .hero-copy {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.landing-page #insurance,
.landing-page #owners,
.landing-page #brokers {
  scroll-margin-top: 84px;
}

.landing-page .hero-eyebrow,
.landing-page .section-eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing-page .hero-title {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 600;
}

.landing-page .hero-subtitle {
  margin: 22px auto 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.landing-page .hero-ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.landing-page .hero-stage {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  overflow: hidden;
  background: #f8fafc;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 30px 80px -36px rgba(15, 23, 42, 0.45);
}

.landing-page .hero-stage img,
.landing-page .story-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-page .hero-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: var(--font-semibold);
  box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.55);
}

.landing-page .hero-play-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  color: #fff;
  background: var(--accent);
}

.landing-page .hero-stage:hover .hero-play-icon {
  background: var(--accent-hover);
}

.landing-page .hero-caption {
  margin: 16px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

.landing-page .outcomes {
  padding: 72px 0 24px;
}

.landing-page .outcomes-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.landing-page .outcomes-row span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  color: var(--accent);
}

.landing-page .outcomes-row h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.landing-page .outcomes-row p {
  margin: 0;
  max-width: 280px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.landing-page .story {
  padding: 88px 0;
}

.landing-page .story-alt {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(219, 234, 254, 0.7), transparent 60%),
    #f8fafc;
}

.landing-page .story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 64px;
  align-items: center;
}

.landing-page .story-grid-reverse {
  align-items: start;
}

.landing-page .story-grid-reverse {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}

.landing-page .story-grid-reverse .story-copy {
  order: 2;
}

.landing-page .story-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.landing-page .story-copy > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.landing-page .story-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-page .story-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.landing-page .story-points .ui-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.landing-page .story-shot {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 24px 60px -32px rgba(15, 23, 42, 0.4);
}

.landing-page .close-section {
  margin: 24px var(--space-6) 0;
  border-radius: 28px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(59, 130, 246, 0.35), transparent 55%),
    #0f172a;
  color: #fff;
}

.landing-page .close-inner {
  padding: 88px var(--space-6);
  text-align: center;
}

.landing-page .section-eyebrow.on-dark {
  color: #93c5fd;
}

.landing-page .close-inner h2 {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
}

.landing-page .close-inner > p {
  margin: 16px auto 0;
  max-width: 520px;
  color: #cbd5e1;
  font-size: 17px;
  line-height: 1.5;
}

.landing-page .landing-footer {
  padding: 72px var(--space-6) 32px;
}

.landing-page .footer-container {
  max-width: 1180px;
  margin: 0 auto;
}

.landing-page .footer-content {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-subtle);
}

.landing-page .footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-page .footer-tagline {
  margin: 12px 0 0;
  max-width: 240px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.landing-page .footer-links {
  display: flex;
  gap: 56px;
}

.landing-page .footer-heading {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.landing-page .footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-page .footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
}

.landing-page .footer-link:hover {
  color: var(--text-primary);
}

.landing-page .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

.landing-page .footer-bottom p {
  margin: 0;
}

.landing-page .footer-contact a {
  color: var(--text-secondary);
}

.landing-page .hero-video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.landing-page .hero-video-modal-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.landing-page .hero-video-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.landing-page .hero-video-modal-inner,
.landing-page .hero-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .landing-page .nav-container {
    height: auto;
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .landing-page .nav-tabs {
    order: 3;
    width: 100%;
    margin-right: 0;
    justify-content: space-between;
  }

  .landing-page .nav-tab {
    flex: 1;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .landing-page .story-grid,
  .landing-page .story-grid-reverse,
  .landing-page .outcomes-row,
  .landing-page .footer-content {
    grid-template-columns: 1fr;
    display: grid;
  }

  .landing-page .story-grid-reverse .story-copy {
    order: 0;
  }

  .landing-page .footer-links {
    flex-direction: column;
    gap: 24px;
  }

  .landing-page .hero-section {
    padding-top: 48px;
  }

  .landing-page .story {
    padding: 56px 0;
  }
}
/* ============================================
   ADDRESS INPUT - Premium Address Autocomplete
   ============================================ */

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

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

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

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

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

.address-input {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.address-input:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}

.address-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

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

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

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

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

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

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

.address-input-check {
  position: absolute;
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  pointer-events: none;
}

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

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

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

.address-suggestion {
  padding: 10px var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.address-suggestion::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.address-suggestion:hover,
.address-suggestion.selected {
  background: var(--accent-soft);
}

.address-suggestion:hover::before,
.address-suggestion.selected::before {
  background-color: var(--accent);
}

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

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

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

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

/* Preview Map */
.address-preview-map {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: #fafbfc;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

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

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

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

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

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

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

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

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

/* Form Sections */
.form-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  /* NOTE: overflow must be visible for address dropdown to appear */
  overflow: visible;
  position: relative;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

.form-section.expanded {
  z-index: 20;
  border-color: var(--accent-border);
  box-shadow: var(--shadow-xs);
}

.section-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 12px var(--space-4);
  background: transparent;
  border: none;
  border-radius: inherit;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-primary);
  transition: background var(--duration-normal) var(--ease-out);
}

.section-toggle:hover {
  background: #fafbfc;
}

.property-metadata-form .toggle-icon {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.form-section.expanded .toggle-icon {
  transform: rotate(90deg);
  color: var(--accent);
}

.property-metadata-form .section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.section-title-icon {
  color: var(--text-tertiary);
}

.form-section.expanded .section-title-icon {
  color: var(--accent);
}

.section-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
}

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

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

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

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

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

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

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

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

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

.form-field label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.form-field input,
.form-field select {
  padding: var(--space-2) var(--space-3);
  min-height: 38px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

.form-field input:hover:not(:focus):not(:disabled),
.form-field select:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

.form-field select {
  cursor: pointer;
}

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

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

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

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

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

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

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

/* Drop Zone */
.drop-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
  background: #fbfcfd;
}

.drop-zone:hover {
  border-color: var(--brand-300);
  background: var(--accent-soft);
}

.drop-zone.drag-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  border-style: solid;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.drop-zone-link {
  color: var(--accent-text);
  font-weight: var(--font-medium);
}

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

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

.drop-zone-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--accent);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-2);
}

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

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

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

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

/* Coverage Hint */
.coverage-hint {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.hint-icon {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.video-icon {
  display: inline-flex;
  color: var(--accent);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.image-with-detections .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.image-with-detections .image-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
  z-index: 1;
}

.image-with-detections .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--brand-100);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.image-with-detections .image-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  z-index: 1;
}

.image-with-detections .image-error .ui-icon {
  color: var(--warning-text);
}

.image-with-detections .image-error small {
  font-size: 11px;
  color: var(--text-muted);
}

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

.detection-viewer {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

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

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

.header-title-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

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

.detection-count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.view-controls {
  display: flex;
  gap: 2px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  padding: 3px;
  border-radius: var(--radius-sm);
}

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

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

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

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

.image-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

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

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

.image-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.image-wrapper {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-muted);
}

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

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

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

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

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

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

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

.detection-image-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

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

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

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

.detection-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  color: white;
  border-radius: var(--radius-full);
}

.detection-badge.has-detections {
  background: #fff;
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.image-number {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: rgba(15, 23, 42, 0.72);
  color: white;
  border-radius: var(--radius-full);
  pointer-events: none;
}

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

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

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

.detection-tag.high {
  background: #fff4ed;
  color: #c2410c;
  border-color: #fed7aa;
}

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

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

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

.action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.action-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}

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

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

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

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-out);
}

.group-header:hover {
  background: #fafbfc;
}

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

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

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

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

.expand-icon {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--duration-normal) var(--ease-out);
}

.expand-icon.open {
  transform: rotate(90deg);
  color: var(--accent);
}

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

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

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

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

.severity-indicator.critical { background: #dc2626; }
.severity-indicator.high { background: #ea580c; }
.severity-indicator.moderate { background: #f59e0b; }
.severity-indicator.low { background: #16a34a; }

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

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

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

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

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

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

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

.severity-dot.critical { background: #dc2626; }
.severity-dot.high { background: #ea580c; }
.severity-dot.moderate { background: #f59e0b; }
.severity-dot.low { background: #16a34a; }

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

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

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

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

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

/* Responsive */
@media (max-width: 768px) {
  .detection-viewer .images-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================
   CONDITION INTELLIGENCE / SEVERITY TAB
   Premium enterprise-grade styling
   ============================================ */

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

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

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

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

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

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

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

.condition-intelligence .severity-score-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-400) 100%);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.condition-intelligence .score-value-premium.excellent { color: #15803d; }
.condition-intelligence .score-value-premium.good { color: #16a34a; }
.condition-intelligence .score-value-premium.fair { color: #b45309; }
.condition-intelligence .score-value-premium.poor { color: #c2410c; }
.condition-intelligence .score-value-premium.critical { color: #b42318; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.condition-intelligence .component-item {
  position: relative;
  padding: 16px 16px 16px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.condition-intelligence .component-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border-default);
}

.condition-intelligence .component-item:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-sm);
}

.condition-intelligence .component-item.has-issues::before {
  background: #dc2626;
}

.condition-intelligence .component-item.healthy::before {
  background: #16a34a;
}

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

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

.condition-intelligence .component-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

.condition-intelligence .issue-item {
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.condition-intelligence .issue-item:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-sm);
}

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

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

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

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

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

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

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

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

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

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

.condition-intelligence .defect-item {
  padding: 12px;
}

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

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

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

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

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

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

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

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

/* Section shells */
.risk-actions-preview .risk-snapshot,
.risk-actions-preview .report-customization,
.risk-actions-preview .actions-section,
.risk-actions-preview .risk-drivers,
.risk-actions-preview .scenario-analysis,
.risk-actions-preview .severity-summary-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.risk-actions-preview .section-header,
.risk-actions-preview .snapshot-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.risk-actions-preview .section-header h3,
.risk-actions-preview .snapshot-header h3 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.risk-actions-preview .rap-heading-icon {
  color: var(--accent);
}

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

.risk-actions-preview .risk-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px var(--space-4);
  margin: var(--space-4) var(--space-4) 0;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}

.risk-actions-preview .risk-band.critical {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.risk-actions-preview .risk-band.high {
  background: #fff4ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.risk-actions-preview .risk-band.medium {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.risk-actions-preview .risk-band.low {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.risk-actions-preview .band-icon {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
}

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

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

.risk-actions-preview .metric-label,
.risk-actions-preview .cost-label,
.risk-actions-preview .ttf-label,
.risk-actions-preview .time-horizon-section h4,
.risk-actions-preview .actions-label {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.risk-actions-preview .metric-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.risk-actions-preview .metric-value.urgency-low { color: var(--success-text); }
.risk-actions-preview .metric-value.urgency-moderate,
.risk-actions-preview .metric-value.urgency-medium { color: var(--warning-text); }
.risk-actions-preview .metric-value.urgency-high { color: #c2410c; }
.risk-actions-preview .metric-value.urgency-critical { color: var(--error-text); }

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

.risk-actions-preview .cost-range {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.risk-actions-preview .recommendation-box {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  margin: var(--space-3) var(--space-4) 0;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
}

.risk-actions-preview .rec-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  flex-shrink: 0;
}

.risk-actions-preview .rec-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
  align-self: center;
}

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

.risk-actions-preview .form-group {
  padding: var(--space-3) var(--space-4) 0;
}

.risk-actions-preview .form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.risk-actions-preview .form-group textarea,
.risk-actions-preview .form-group input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  resize: vertical;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

.risk-actions-preview .form-group textarea:hover:not(:focus),
.risk-actions-preview .form-group input:hover:not(:focus) {
  border-color: var(--border-strong);
}

.risk-actions-preview .form-group textarea:focus,
.risk-actions-preview .form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

.risk-actions-preview .form-row .form-group {
  padding: 0;
}

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

.risk-actions-preview .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-8));
  margin: var(--space-4) auto 0;
  padding: 10px var(--space-3);
  min-height: 40px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.risk-actions-preview .action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.risk-actions-preview .action-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.risk-actions-preview .action-btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.risk-actions-preview .action-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.risk-actions-preview .action-btn.secondary {
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.risk-actions-preview .action-btn.secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

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

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

.risk-actions-preview .actions-label {
  margin: var(--space-1) 0 0;
}

.risk-actions-preview .action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.risk-actions-preview .action-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background-color var(--duration-normal) var(--ease-out);
}

.risk-actions-preview .action-btn.secondary:hover .action-icon {
  background: var(--bg-surface);
}

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

/* Confidence Badge */
.risk-actions-preview .confidence-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

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

.risk-actions-preview .time-horizon-section h4 {
  margin: 0 0 var(--space-3) 0;
}

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

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

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

.risk-actions-preview .horizon-bar-container {
  height: 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.risk-actions-preview .horizon-bar {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #dc2626);
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease-out);
}

.risk-actions-preview .horizon-value {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

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

.risk-actions-preview .ttf-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

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

/* Scenario Analysis */
.risk-actions-preview .scenario-tabs {
  display: flex;
  gap: 2px;
  margin: var(--space-3) var(--space-4) 0;
  padding: 3px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.risk-actions-preview .scenario-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px var(--space-2);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.risk-actions-preview .scenario-tab:hover {
  color: var(--text-primary);
}

.risk-actions-preview .scenario-tab.active {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.risk-actions-preview .scenario-tab.active .ui-icon {
  color: var(--accent);
}

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

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

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

.risk-actions-preview .scenario-metric .label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-medium);
}

.risk-actions-preview .scenario-metric .value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.risk-actions-preview .scenario-metric .value.risk-low { color: var(--success-text); }
.risk-actions-preview .scenario-metric .value.risk-medium { color: var(--warning-text); }
.risk-actions-preview .scenario-metric .value.risk-high { color: var(--error-text); }

.risk-actions-preview .scenario-metric .value.positive {
  align-self: center;
  color: var(--success-text);
  background: var(--success-bg);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

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

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

.risk-actions-preview .scenario-cost .value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

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

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

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

.risk-actions-preview .driver-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 3px);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out);
}

.risk-actions-preview .driver-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--border-strong);
}

.risk-actions-preview .driver-item:hover {
  border-color: var(--border-strong);
}

.risk-actions-preview .driver-item.severity-critical::before { background: #dc2626; }
.risk-actions-preview .driver-item.severity-high::before { background: #ea580c; }
.risk-actions-preview .driver-item.severity-moderate::before,
.risk-actions-preview .driver-item.severity-medium::before { background: #f59e0b; }
.risk-actions-preview .driver-item.severity-low::before { background: #16a34a; }

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

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

.risk-actions-preview .driver-contribution {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

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

.risk-actions-preview .driver-cost {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  font-variant-numeric: tabular-nums;
}

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

/* Severity Summary */
.risk-actions-preview .severity-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

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

.risk-actions-preview .sev-stat-value {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.risk-actions-preview .sev-stat-value.critical {
  color: var(--error-text);
}

.risk-actions-preview .sev-stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

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

.risk-actions-preview .sev-ttf-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--warning-text);
  font-variant-numeric: tabular-nums;
}

/* Button spinner (on solid accent) */
.risk-actions-preview .action-btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

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

@media (max-width: 480px) {
  .risk-actions-preview .severity-quick-stats {
    gap: var(--space-1);
  }

  .risk-actions-preview .sev-stat-value {
    font-size: var(--text-lg);
  }
}
/* ============================================
   DETECTION EDITOR - Premium Annotation UI
   ============================================ */

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

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

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

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

.editor-instructions p {
  margin: 0;
}

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

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

.image-error-overlay,
.image-loading-overlay {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.image-error-overlay .ui-icon {
  color: var(--warning-text);
}

.image-error-overlay small {
  color: var(--text-muted);
}

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

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

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

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

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

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

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

.custom-label input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

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

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

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

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

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

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

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

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

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

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

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

.relabel-controls select:focus,
.relabel-controls input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* Editor Actions */
.editor-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.editor-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Unified Submit Feedback Button */
.btn-submit-unified {
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 180px;
  justify-content: center;
}

.btn-submit-unified:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

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

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

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

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

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

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

.summary-item.added {
  background: var(--success-bg);
  color: var(--success-text);
}

.summary-item.removed {
  background: var(--error-bg);
  color: var(--error-text);
}

.summary-item.relabeled {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.feedback-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

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

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

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

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

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

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

/* This component uses a px-named spacing scale and legacy token names;
   remap them locally so they don't resolve against the global 4px-step scale. */
.condition-graph-viewer {
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;
  --bg-primary: var(--bg-surface);
  --bg-secondary: #fafbfc;
  --bg-tertiary: var(--bg-hover);
  --border-emphasis: var(--border-strong);
  --color-error: var(--error-text);
  --color-primary: var(--accent);
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 22px;

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

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

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

.condition-graph-viewer .graph-summary-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  border: 1px solid var(--border-subtle);
}

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

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

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

.condition-graph-viewer .summary-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.condition-graph-viewer .factor-tag.high {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

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

.condition-graph-viewer .factor-tag.low {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

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

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

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

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

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

.condition-graph-viewer .view-tab .tab-icon {
  color: var(--text-muted);
}

.condition-graph-viewer .view-tab.active .tab-icon {
  color: var(--accent);
}

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

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

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

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

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

.condition-graph-viewer .component-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.condition-graph-viewer .component-metric .metric-value.critical {
  color: #b91c1c;
}

.condition-graph-viewer .component-metric .metric-value.high {
  color: #c2410c;
}

.condition-graph-viewer .component-metric .metric-value.medium {
  color: #a16207;
}

.condition-graph-viewer .component-metric .metric-value.low {
  color: #15803d;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.condition-graph-viewer .risk-badge.low,
.condition-graph-viewer .severity-badge.low {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

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

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

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

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

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

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

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

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

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

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

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

/* ============================================================
   Graph View Section
   ============================================================ */

.condition-graph-viewer .graph-view-section {
  min-height: 200px;
}

.condition-graph-viewer .graph-stats {
  display: flex;
  gap: var(--space-20);
  padding: var(--space-12);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-16);
}

.condition-graph-viewer .stat-item {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.condition-graph-viewer .stat-item strong {
  font-weight: 700;
  color: var(--text-primary);
  margin-right: var(--space-4);
}

/* Graph Nodes List */
.condition-graph-viewer .graph-nodes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-20);
}

.condition-graph-viewer .graph-node-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
}

.condition-graph-viewer .graph-node-item:hover {
  border-color: var(--border-emphasis);
  background: var(--bg-tertiary);
}

.condition-graph-viewer .graph-node-item.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.condition-graph-viewer .node-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.condition-graph-viewer .node-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.condition-graph-viewer .node-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.condition-graph-viewer .node-type {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.condition-graph-viewer .node-metrics {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.condition-graph-viewer .node-severity {
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-sm);
}

.condition-graph-viewer .node-severity.critical {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.condition-graph-viewer .node-severity.high {
  background: rgba(249, 115, 22, 0.1);
  color: #c2410c;
}

.condition-graph-viewer .node-severity.medium {
  background: rgba(234, 179, 8, 0.1);
  color: #a16207;
}

.condition-graph-viewer .node-severity.low {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.condition-graph-viewer .node-detections {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Propagation Section */
.condition-graph-viewer .propagation-section {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.condition-graph-viewer .section-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-12);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.condition-graph-viewer .subtitle-icon {
  color: var(--accent);
}

.condition-graph-viewer .propagation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.condition-graph-viewer .propagation-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.condition-graph-viewer .prop-source {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 120px;
}

.condition-graph-viewer .prop-arrow {
  display: inline-flex;
  color: var(--text-muted);
}

.condition-graph-viewer .prop-targets {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.condition-graph-viewer .prop-target {
  display: inline-flex;
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #c2410c;
  background: rgba(249, 115, 22, 0.1);
  border-radius: var(--radius-sm);
}

.condition-graph-viewer .prop-metrics {
  display: flex;
  gap: var(--space-12);
}

.condition-graph-viewer .prop-risk {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #b91c1c;
}

.condition-graph-viewer .prop-time {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ============================================================
   Legend
   ============================================================ */

.condition-graph-viewer .graph-legend {
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.condition-graph-viewer .legend-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.condition-graph-viewer .legend-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.condition-graph-viewer .legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.condition-graph-viewer .legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.condition-graph-viewer .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.condition-graph-viewer .legend-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: capitalize;
}

/* ============================================================
   States
   ============================================================ */

.condition-graph-viewer .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-32);
  color: var(--text-muted);
}

.condition-graph-viewer .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--brand-100);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.condition-graph-viewer .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-32);
  text-align: center;
}

.condition-graph-viewer .empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
  margin-bottom: var(--space-4);
}

.condition-graph-viewer .empty-icon.is-success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.condition-graph-viewer .empty-state h4 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.condition-graph-viewer .empty-state p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ============================================================
   Responsive Design
   ============================================================ */

@media (max-width: 768px) {
  .condition-graph-viewer {
    padding: var(--space-12);
  }
  
  .condition-graph-viewer .summary-metrics {
    flex-direction: column;
    gap: var(--space-12);
  }
  
  .condition-graph-viewer .view-tabs {
    flex-direction: column;
  }
  
  .condition-graph-viewer .components-grid {
    grid-template-columns: 1fr;
  }
  
  .condition-graph-viewer .fm-header {
    flex-direction: column;
    gap: var(--space-8);
  }
  
  .condition-graph-viewer .fm-badges {
    flex-wrap: wrap;
  }
  
  .condition-graph-viewer .propagation-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .condition-graph-viewer .prop-arrow {
    display: none;
  }
}
.property-limit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.property-limit-modal {
  width: calc(100% - 32px);
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: var(--space-6);
  box-shadow: var(--shadow-2xl);
}

.property-limit-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

.property-limit-modal-title {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.property-limit-modal-body {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.55;
}

.property-limit-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.property-limit-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.property-limit-modal-btn.secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

.property-limit-modal-btn.secondary:hover {
  background: var(--bg-hover);
}

.property-limit-modal-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.property-limit-modal-btn.primary:hover {
  background: var(--accent-hover);
}

.property-limit-modal-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}
/* ============================================
   INSPECT PAGE
   All generic class names (.card, .btn, .badge, .alert) are scoped to
   .inspect-page so they don't leak into other pages.
   ============================================ */

.inspect-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* ==================== HEADER ==================== */

.inspect-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.hero-title {
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  margin: 0;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Progress tracker: a quiet stepper on a white rail */
.progress-tracker {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  width: fit-content;
}

.progress-tracker-item {
  display: flex;
  align-items: center;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px 8px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  transition: all var(--duration-normal) var(--ease-out);
}

.step-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.progress-step.active {
  background: var(--accent-soft);
}

.progress-step.active .step-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.progress-step.active .step-text {
  color: var(--accent-text);
  font-weight: var(--font-semibold);
}

.progress-step.completed .step-icon {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.progress-step.completed .step-text {
  color: var(--text-secondary);
}

.step-connector {
  width: 32px;
  height: 1px;
  background: var(--border-default);
  margin: 0 2px;
  transition: background var(--duration-normal) var(--ease-default);
}

.step-connector.completed {
  background: var(--success-border);
}

/* ==================== ALERT ==================== */

.inspect-page .alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  border-radius: var(--radius-md);
  animation: inspectSlideDown 0.25s var(--ease-out);
}

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

.inspect-page .alert-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.inspect-page .alert-icon {
  display: inline-flex;
}

.alert-text {
  flex: 1;
  font-size: var(--text-sm);
}

.inspect-page .alert-close {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: background var(--duration-fast) var(--ease-default);
}

.inspect-page .alert-close:hover {
  background: rgba(180, 35, 24, 0.08);
  opacity: 1;
}

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

.inspect-content {
  flex: 1;
  width: 100%;
}

.setup-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* ==================== CARDS ==================== */

.inspect-page .card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 0;
  overflow: visible; /* address dropdown must escape the card */
}

.inspect-page .card:hover {
  border-color: var(--border-default);
}

/* Keep the address menu above the media card and the start button */
.inspect-page .property-card {
  position: relative;
  z-index: 4;
}

.inspect-page .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin: 0;
  border-bottom: 1px solid var(--border-subtle);
}

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

.inspect-page .card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
}

.inspect-page .card-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0;
}

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

.inspect-page .card-body {
  padding: var(--space-5);
}

/* ==================== BADGES ==================== */

.inspect-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: 0;
}

.inspect-page .badge-muted {
  background: var(--bg-muted);
  color: var(--text-tertiary);
  border-color: var(--border-default);
}

.inspect-page .badge-success,
.inspect-page .badge-low,
.inspect-page .badge-minimal {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.inspect-page .badge-info {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--brand-100);
}

.inspect-page .badge-warning,
.inspect-page .badge-moderate {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.inspect-page .badge-error,
.inspect-page .badge-critical {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.inspect-page .badge-high {
  background: #fff4ed;
  color: #c2410c;
  border-color: #fed7aa;
}

/* ==================== CTA SECTION ==================== */

.cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  background:
    radial-gradient(600px 160px at 50% 0%, rgba(99, 102, 241, 0.08), transparent 70%),
    var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-align: center;
}

.cta-helper {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

.inspect-page .btn-xl {
  padding: 14px 28px;
  min-height: 48px;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
}

.inspect-page .btn-primary.btn-xl:not(:disabled) {
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ==================== REVIEW CONTAINER ==================== */

.review-container {
  max-width: 1200px;
  margin: 0 auto;
}

.review-container .cta-section {
  border: none;
  box-shadow: none;
  padding-bottom: 0;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.image-preview-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

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

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

.preview-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  z-index: 2;
}

.preview-detection-count {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 2px 8px;
  background: #fff;
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  z-index: 2;
}

.preview-img-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.preview-img-container .image-with-boxes {
  width: 100%;
  height: 100%;
}

.preview-img-container .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==================== THUMBNAIL GRID ==================== */
.thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

.thumbnail-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: visible;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.thumbnail-item > .thumbnail-img-container,
.thumbnail-item > .thumbnail-overlay {
  border-radius: inherit;
  overflow: hidden;
}

.thumbnail-item:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.thumbnail-item.has-detections {
  border-color: var(--warning-border);
}

.thumbnail-item.has-detections:hover {
  border-color: #f8c76b;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-muted);
}

.thumbnail-img-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-muted);
}

.thumbnail-img-container .image-with-boxes {
  width: 100%;
  height: 100%;
}

.thumbnail-img-container .detection-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.thumbnail-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px var(--space-2) 6px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.7));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.thumbnail-number {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: white;
}

.thumbnail-detections {
  font-size: 10px;
  font-weight: var(--font-semibold);
  color: #fff;
  background: rgba(217, 119, 6, 0.9);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* AI intelligence hover preview */
.thumbnail-ai-preview {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  font-size: 11px;
  color: var(--text-secondary);
  pointer-events: none;
}

.thumbnail-ai-line {
  margin: 2px 0;
}

.thumbnail-ai-none {
  color: var(--text-tertiary);
  font-style: italic;
}

/* Analysis Loader */
.analysis-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.loader-spinner {
  width: 56px;
  height: 56px;
  border: 3px solid var(--brand-100);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

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

.loader-progress {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: var(--bg-active);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

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

/* ==================== RESULTS ==================== */

.results-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-width: 0;
}

.stat-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  flex-shrink: 0;
}

.stat-icon-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
}

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

.inspect-page .stat-value {
  font-size: 22px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.2;
  text-transform: capitalize;
}

.stat-value.risk-critical { color: var(--error-text); }
.stat-value.risk-high { color: #c2410c; }
.stat-value.risk-medium { color: var(--warning-text); }
.stat-value.risk-low { color: var(--success-text); }

.inspect-page .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

/* Results tabs: segmented control */
.results-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  width: fit-content;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

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

.tab-btn.active .tab-icon {
  color: var(--accent);
}

.results-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.results-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.results-sidebar {
  position: sticky;
  top: var(--space-6);
  align-self: start;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
}

/* ==================== SEVERITY SUMMARY ==================== */

.severity-overview {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8);
  align-items: start;
}

.severity-score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.score-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-ring circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.score-bg { stroke: var(--bg-active); }
.score-fill { transition: stroke-dasharray 1s ease-out; }
.score-fill.severity-critical { stroke: var(--error-solid); }
.score-fill.severity-high { stroke: #f97316; }
.score-fill.severity-moderate { stroke: var(--warning-solid); }
.score-fill.severity-low { stroke: var(--success-solid); }
.score-fill.severity-minimal { stroke: #22c55e; }

.score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

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

.severity-breakdown { flex: 1; }

.severity-breakdown h4,
.component-severities h4 {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

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

.breakdown-item {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: var(--space-3);
}

.breakdown-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

.breakdown-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
}

.breakdown-fill.severity-critical { background: var(--error-solid); }
.breakdown-fill.severity-high { background: #f97316; }
.breakdown-fill.severity-moderate { background: var(--warning-solid); }
.breakdown-fill.severity-low { background: var(--success-solid); }

.breakdown-count {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: right;
}

.severity-cost { text-align: right; }

.severity-cost h4 {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cost-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.cost-min, .cost-max {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.cost-separator { color: var(--text-tertiary); }

.component-severities {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.components-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.component-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid;
  font-size: var(--text-sm);
}

.component-chip.severity-critical {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.component-chip.severity-high {
  background: #fff4ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.component-chip.severity-moderate {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.component-chip.severity-low,
.component-chip.severity-minimal {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.chip-name { font-weight: var(--font-medium); }
.chip-score { font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; }
.chip-count { font-size: var(--text-xs); color: inherit; opacity: 0.75; }

/* ==================== AI INTELLIGENCE FORM ==================== */

.ai-intelligence-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.ai-intelligence-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.ai-intelligence-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.ai-intelligence-group > label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.ai-intelligence-row,
.ai-intelligence-rec,
.ai-intelligence-risk-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ai-intelligence-risk-row > span {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ai-intelligence-textarea,
.ai-intelligence-input,
.ai-intelligence-select,
.ai-intelligence-number {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: inherit;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.ai-intelligence-textarea:focus,
.ai-intelligence-input:focus,
.ai-intelligence-select:focus,
.ai-intelligence-number:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.ai-intelligence-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

.ai-intelligence-input {
  flex: 1;
  min-width: 120px;
}

.ai-intelligence-number {
  width: 80px;
}

.ai-intelligence-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.ai-intelligence-remove:hover {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.ai-intelligence-add {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  align-self: flex-start;
}

.ai-intelligence-add:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}

.ai-intelligence-save {
  margin-top: var(--space-4);
}

/* ==================== TWO-PANE INSPECTOR ==================== */

.inspector-two-pane {
  display: flex;
  gap: 0;
  margin-top: var(--space-4);
  min-height: 480px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.inspector-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inspector-pane-left {
  border-right: 1px solid var(--border-subtle);
}

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

.inspector-pane-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.inspector-left-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.inspector-left-content .detection-editor {
  max-width: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  background: transparent;
  border-radius: 0;
}

.inspector-image-canvas {
  position: relative;
  width: 100%;
  height: 360px;
  min-height: 240px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  overflow: hidden;
}

.inspector-pane-right {
  padding: var(--space-4);
  overflow: auto;
}

.inspector-pane-empty {
  padding: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

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

@media (max-width: 1200px) {
  .results-sidebar {
    position: static;
    max-height: none;
    max-width: 600px;
    margin: 0 auto;
  }

  .severity-overview {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

  .severity-score-display { margin: 0 auto; }
  .severity-cost { text-align: center; }
}

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

@media (max-width: 900px) {
  .inspector-two-pane { flex-direction: column; }
  .inspector-pane-left {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
}

@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .hero-title { font-size: 22px; }

  .hero-actions .btn { flex: 1; }

  .progress-tracker {
    width: 100%;
    overflow-x: auto;
  }

  .step-text { display: none; }

  .results-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
  }

  .tab-btn { flex-shrink: 0; }

  .breakdown-item { grid-template-columns: 60px 1fr 30px; }
}

@media (max-width: 480px) {
  .stat-tile {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  .cta-section { padding: var(--space-6); }

  .inspect-page .btn-xl { width: 100%; }
}
.history-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-base);
  color: var(--text-primary);
}

.history-page .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-default);
  background-color: var(--bg-hover);
  flex-shrink: 0;
}

.history-page .history-header h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.history-page .refresh-button {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.history-page .refresh-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.history-page .refresh-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Two-column layout matching Properties tab */
.history-page .history-content-layout {
  display: flex;
  height: calc(100vh - 80px);
  gap: 24px;
  padding: 24px;
  overflow: hidden;
}

/* Left Column: Inspection List */
.history-page .history-left-column {
  flex: 0 0 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.history-page .history-search-section {
  padding: 20px;
  border-bottom: 1px solid var(--border-default);
}

.history-page .history-search-section h3 {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
}

.history-page .history-search-input {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color 0.2s;
}

.history-page .history-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.history-page .history-search-input::placeholder {
  color: var(--text-muted);
}

.history-page .history-list-container {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-surface);
}

.history-page .history-loading,
.history-page .history-error,
.history-page .history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

.history-page .history-error {
  color: var(--error-text);
}

.history-page .history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-page .history-list-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background-color 0.2s, border-left 0.2s;
}

.history-page .history-list-item:hover {
  background-color: var(--bg-hover);
}

.history-page .history-list-item.selected {
  background-color: var(--bg-hover);
  border-left: 4px solid var(--accent);
  padding-left: 16px;
}

.history-page .history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-page .history-item-id {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.history-page .history-item-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.history-page .history-item-address {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.history-page .history-item-status {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: capitalize;
}

/* Right Column: Inspection Details */
.history-page .history-right-column {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow-y: auto;
  padding: 24px;
}

.history-page .history-details-empty,
.history-page .history-details-loading,
.history-page .history-details-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-tertiary);
}

.history-page .history-details-empty h3,
.history-page .history-details-error h3 {
  margin: 16px 0 8px 0;
  color: var(--text-primary);
}

.history-page .history-details-error {
  color: var(--error-text);
}

.history-page .empty-state-icon,
.history-page .error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.history-page .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border-default);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.history-page .history-details-content {
  max-width: 100%;
}

.history-page .history-details-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}

.history-page .history-details-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
}

.history-page .history-details-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-page .detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
}

.history-page .detail-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.history-page .detail-date {
  font-size: 16px;
  color: var(--text-tertiary);
  margin: 0;
}

.history-page .severity-badge-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 12px;
  border: 2px solid;
  min-width: 100px;
}

.history-page .severity-score {
  font-size: 32px;
  font-weight: 700;
}

.history-page .severity-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.history-page .detail-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-page .detail-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 24px;
}

.history-page .detail-section h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.history-page .inspection-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-page .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
}

.history-page .info-row:last-child {
  border-bottom: none;
}

.history-page .info-label {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.history-page .info-value {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
}

.history-page .damage-types-container {
  margin-top: 16px;
}

.history-page .damage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-page .damage-tag {
  background: var(--bg-surface);
  border: 1px solid var(--accent-border);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
}

.history-page .damage-tag:hover {
  border-color: var(--accent);
  background: var(--accent-soft-hover);
}

.history-page .no-damage-types {
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0;
}

.history-page .report-content {
  color: var(--text-secondary);
  line-height: 1.6;
}

.history-page .report-summary {
  margin: 0 0 16px 0;
}

.history-page .recommendation {
  margin-top: 16px;
  padding: 16px;
  background-color: var(--bg-hover);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.history-page .recommendation strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.history-page .recommendation p {
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .history-page .history-content-layout {
    flex-direction: column;
    height: auto;
  }

  .history-page .history-left-column {
    flex: 1;
    min-height: 300px;
  }

  .history-page .history-right-column {
    flex: 1;
    min-height: 400px;
  }

  .history-page .detail-header {
    flex-direction: column;
    gap: 16px;
  }
}
/* ============================================
   BILLING PAGE - Premium Pricing Cards
   ============================================ */

.billing-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  padding: var(--space-2) 0 var(--space-8);
}

.billing-page > div {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.billing-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: var(--space-4) auto var(--space-10);
  max-width: 620px;
}

.billing-header h1 {
  font-size: 32px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.billing-description {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: 0;
  line-height: 1.55;
}

/* Message Banner */
.billing-page .billing-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.billing-page .billing-message.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.billing-page .billing-message.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.billing-page .billing-message.info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

/* Plans Grid */
.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
  margin-bottom: var(--space-8);
}

.billing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
  position: relative;
}

.billing-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.billing-card.featured {
  border-color: var(--accent-border);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(99, 102, 241, 0.07), transparent 70%),
    var(--bg-surface);
  box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-lg);
}

.billing-card.current-plan {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-md);
}

.billing-card-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(79, 70, 229, 0.6);
}

/* Plan Header */
.billing-card .plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.billing-card .plan-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.billing-card .plan-header .plan-description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

.billing-card .plan-badge {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

.billing-card .plan-badge.blue {
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}

.billing-card .plan-badge.purple {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.billing-card .plan-badge.gold {
  background: var(--warning-bg);
  color: var(--warning-text);
}

/* Pricing */
.billing-card .plan-pricing {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.billing-card .price {
  font-size: 34px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.billing-card .price-period {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--text-tertiary);
  letter-spacing: 0;
  margin-left: 2px;
}

.billing-card .price-description {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 6px 0 0 0;
}

/* Features */
.billing-card .plan-features {
  flex: 1;
  margin-bottom: var(--space-6);
}

.billing-card .plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.billing-card .plan-features li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.plan-feature-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Actions */
.billing-card .plan-actions {
  margin-top: auto;
}

.billing-card .current-plan-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.billing-card .current-plan-indicator span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-text);
}

.btn-subscribe,
.btn-manage,
.btn-contact-sales {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  text-align: center;
  border: 1px solid transparent;
}

.btn-subscribe:focus-visible,
.btn-manage:focus-visible,
.btn-contact-sales:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.btn-subscribe {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.btn-subscribe:hover:not(:disabled) {
  background: var(--accent-hover);
}

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

.btn-manage,
.btn-contact-sales {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.btn-manage:hover:not(:disabled),
.btn-contact-sales:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.billing-card.featured .btn-contact-sales {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.billing-card.featured .btn-contact-sales:hover {
  background: var(--accent-hover);
}

/* Help Section */
.billing-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fafbfc;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: var(--space-6);
  text-align: center;
}

.billing-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.billing-info h3 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

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

/* Billing Success */
.billing-success-page {
  align-items: center;
  justify-content: center;
}

.billing-page > .billing-success-card {
  max-width: 480px;
}

.billing-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: var(--space-12) auto;
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
}

.billing-success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.06);
}

.billing-success-card h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.billing-success-card > p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.billing-success-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.billing-success-status .ui-icon {
  color: var(--accent);
}

.billing-success-status.done {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.billing-success-status.done .ui-icon {
  color: inherit;
}

.billing-success-slow {
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: 12px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  text-align: left;
}

.billing-success-slow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--warning-text);
}

.billing-success-debug {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
}

.billing-success-debug.ok { color: var(--success-text); }
.billing-success-debug.fail { color: var(--error-text); }

.billing-success-card .billing-success-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-6);
}

/* Responsive */
@media (max-width: 1024px) {
  .billing-plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .billing-plans-grid {
    grid-template-columns: 1fr;
  }

  .billing-card {
    padding: var(--space-5);
  }
}
/* ============================================
   ACCOUNT SETTINGS PAGE - Premium Settings UI
   ============================================ */

.account-settings-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  overflow: auto;
  padding: var(--space-2) 0 var(--space-8);
}

.account-settings-inner {
  width: 100%;
  max-width: 960px;
}

.account-settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--text-tertiary);
  font-size: var(--text-md);
}

.account-settings-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-6);
}

.account-settings-header h1 {
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

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

/* Sections: label column + content column */
.account-settings-section {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.account-settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.account-settings-section-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

.account-settings-section-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.account-settings-section-desc {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* Forms */
.account-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 460px;
}

.account-settings-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-settings-form-group label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.account-settings-input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

.account-settings-input:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.account-settings-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.account-settings-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-muted);
}

/* Messages */
.account-settings-error {
  padding: 10px var(--space-3);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  color: var(--error-text);
  font-size: var(--text-sm);
}

.account-settings-success {
  padding: 10px var(--space-3);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: var(--radius-md);
  color: var(--success-text);
  font-size: var(--text-sm);
}

/* Buttons */
.account-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
  border: 1px solid transparent;
  width: fit-content;
}

.account-settings-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.account-settings-button.primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.account-settings-button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.account-settings-button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.account-settings-button.secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.account-settings-button.secondary:hover {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

/* Subscription Section */
.account-settings-subscription {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-settings-subscription-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid var(--border-subtle);
}

.account-settings-subscription-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.account-settings-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.account-settings-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.account-settings-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.account-settings-badge.free {
  background: var(--bg-muted);
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
}

.account-settings-badge.starter {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

.account-settings-badge.enterprise {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.account-settings-badge.canceled {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.account-settings-subscription-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.account-settings-subscription-actions {
  display: flex;
  gap: var(--space-3);
}

/* Account Actions */
.account-settings-actions {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Responsive */
@media (max-width: 860px) {
  .account-settings-section {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .account-settings-form {
    max-width: 100%;
  }
}
/* ============================================
   BLURRED PREVIEW - Premium Paywall Overlay
   ============================================ */

.blurred-preview-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.blurred-preview-content {
  filter: blur(5px) saturate(0.9);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  width: 100%;
  height: 100%;
}

.blurred-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(248, 250, 252, 0.92));
  backdrop-filter: blur(4px);
  z-index: 10;
}

.blurred-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-width: 480px;
  gap: var(--space-4);
  box-shadow: var(--shadow-xl);
}

.blurred-preview-icon {
  font-size: 56px;
  margin-bottom: var(--space-2);
  opacity: 0.9;
}

.blurred-preview-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.blurred-preview-description {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 360px;
}

.blurred-preview-button {
  padding: var(--space-3) var(--space-6);
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  margin-top: var(--space-2);
}

.blurred-preview-button:hover {
  background: var(--primary-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Enterprise variant - gold button */
.blurred-preview-card.enterprise .blurred-preview-button {
  background: linear-gradient(135deg, var(--warning-solid) 0%, #d97706 100%);
  color: white;
}

.blurred-preview-card.enterprise .blurred-preview-button:hover {
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

/* Responsive */
@media (max-width: 480px) {
  .blurred-preview-card {
    padding: var(--space-6);
    margin: var(--space-4);
  }
  
  .blurred-preview-title {
    font-size: var(--text-xl);
  }
  
  .blurred-preview-description {
    font-size: var(--text-sm);
  }
}

/* Revamp refinements */
.blurred-preview-card {
  gap: var(--space-3);
  border-color: var(--border-default);
  border-radius: 20px;
  box-shadow: var(--shadow-2xl);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(37, 99, 235, 0.08), transparent 70%),
    var(--bg-surface);
}

.blurred-preview-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
  font-size: 0;
  opacity: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.blurred-preview-eyebrow {
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.blurred-preview-title {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.blurred-preview-description {
  font-size: var(--text-sm);
}

.blurred-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 var(--space-5);
  background: var(--accent);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px -10px rgba(37, 99, 235, 0.55);
  font-size: var(--text-sm);
  transition: background-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.blurred-preview-button:hover {
  background: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -10px rgba(37, 99, 235, 0.65);
}

.blurred-preview-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}.insurance-dashboard {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
  color: var(--text-primary);
}

.insurance-dashboard .ui-page-header {
  margin-bottom: 0;
}

.insurance-toolbar-body {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.insurance-field-grow {
  flex: 1;
  min-width: 0;
}

.insurance-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.insurance-field label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.insurance-dashboard select,
.insurance-dashboard input {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  box-sizing: border-box;
}

.insurance-dashboard select:hover,
.insurance-dashboard input:hover {
  border-color: var(--border-strong);
}

.insurance-dashboard select:focus,
.insurance-dashboard input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.insurance-alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.insurance-alert strong {
  display: block;
  font-size: var(--text-sm);
}

.insurance-alert p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.insurance-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
}

.insurance-empty h2 {
  margin: 0;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.insurance-empty p,
.insurance-muted {
  margin: 0;
  max-width: 460px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.insurance-decision {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-50) 0%, transparent 55%),
    var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.insurance-decision h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.03em;
}

.insurance-decision p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 640px;
}

.insurance-decision-approved {
  border-color: var(--success-border);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--success-bg) 0%, transparent 58%),
    var(--bg-surface);
}

.insurance-decision-conditional {
  border-color: var(--warning-border);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--warning-bg) 0%, transparent 58%),
    var(--bg-surface);
}

.insurance-decision-declined {
  border-color: var(--error-border);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--error-bg) 0%, transparent 58%),
    var(--bg-surface);
}

.insurance-decision-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.insurance-report-id {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.insurance-pay-now {
  font-size: 28px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.insurance-table-wrap {
  overflow-x: auto;
}

.insurance-scope {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.insurance-scope th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--font-semibold);
  padding: 0 12px 10px 0;
}

.insurance-scope td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--border-default);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.insurance-scope td strong {
  display: block;
  font-weight: var(--font-semibold);
}

.insurance-scope td span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.4;
  max-width: 360px;
}

.insurance-settlement-math {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.insurance-settlement-math div:last-child dd {
  font-size: var(--text-lg);
}

.insurance-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.insurance-tone-low { color: #157f3c; }
.insurance-tone-medium { color: #b45309; }
.insurance-tone-high { color: #c2410c; }
.insurance-tone-severe { color: #b42318; }

.insurance-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.75fr);
  gap: var(--space-5);
  align-items: start;
}

.insurance-main,
.insurance-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.insurance-side {
  position: sticky;
  top: var(--space-4);
}

.insurance-fact-note {
  margin-bottom: var(--space-4);
  max-width: none;
}

.insurance-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.insurance-facts div {
  min-width: 0;
}

.insurance-facts dt {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.insurance-facts dd {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.insurance-defect-list,
.insurance-detection-list,
.insurance-factors,
.insurance-bars,
.insurance-notes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.insurance-defect-list li,
.insurance-detection-list li,
.insurance-factors li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: #fafbfc;
  font-size: var(--text-sm);
}

.insurance-defect-list strong,
.insurance-confidence {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: var(--font-semibold);
}

.insurance-detection-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-4);
}

.insurance-detection-list li span:first-child,
.insurance-factors li strong {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.insurance-factors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--space-4);
}

.insurance-factors li {
  align-items: flex-start;
}

.insurance-factors p {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.insurance-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insurance-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.insurance-bar-label strong {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.insurance-bar-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}

.insurance-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.risk-fill-low { background: #16a34a; }
.risk-fill-medium { background: #d97706; }
.risk-fill-high { background: #ea580c; }
.risk-fill-severe { background: #dc2626; }

.insurance-dashboard .risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.insurance-dashboard .risk-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.insurance-dashboard .risk-low {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #157f3c;
}

.insurance-dashboard .risk-medium {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.insurance-dashboard .risk-high {
  background: #fff4ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.insurance-dashboard .risk-severe {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b42318;
}

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

.insurance-notes h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.insurance-notes li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.insurance-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

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

.insurance-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.insurance-recalc {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

@media (max-width: 1100px) {
  .insurance-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insurance-workspace {
    grid-template-columns: 1fr;
  }

  .insurance-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .insurance-toolbar-body,
  .insurance-decision {
    flex-direction: column;
    align-items: stretch;
  }

  .insurance-decision-side {
    align-items: flex-start;
  }

  .insurance-stats,
  .insurance-facts,
  .insurance-field-row {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   ADMIN DASHBOARD - scoped under .admin-dashboard
   ============================================ */

.admin-dashboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-y: auto;
  padding-bottom: var(--space-8);
  color: var(--text-primary);
}

.admin-dashboard .admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-2) 0 var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.admin-dashboard .admin-header h1 {
  font-size: 26px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-primary);
}

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

.admin-dashboard .refresh-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.admin-dashboard .refresh-button .ui-icon {
  color: var(--accent);
}

.admin-dashboard .refresh-button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.admin-dashboard .refresh-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* Loading / error / denied states */
.admin-dashboard .admin-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: 14px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.admin-dashboard .admin-state p {
  margin: 0;
}

.admin-dashboard .admin-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.admin-dashboard .admin-state.error {
  color: var(--error-text);
  border-color: var(--error-border);
  background: var(--error-bg);
}

.admin-dashboard .admin-state.error .admin-state-icon {
  background: var(--bg-surface);
  color: var(--error-text);
}

.admin-dashboard .admin-content {
  flex: 1;
  width: 100%;
}

/* KPI strip */
.admin-dashboard .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-dashboard .stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out);
}

.admin-dashboard .stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.admin-dashboard .stat-card .icon-tile {
  margin-bottom: var(--space-2);
}

.admin-dashboard .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.admin-dashboard .stat-value {
  font-size: 26px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Charts */
.admin-dashboard .charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: var(--space-4);
}

.admin-dashboard .chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.admin-dashboard .chart-card h2,
.admin-dashboard .chart-card h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-4) 0;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.admin-dashboard .chart-container {
  height: 280px;
  position: relative;
}

.admin-dashboard .chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: 10px;
  background: #fafbfc;
  border: 1px dashed var(--border-default);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.admin-dashboard .chart-empty p {
  margin: 0;
}

/* Metric cards */
.admin-dashboard .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.admin-dashboard .metric-card {
  background: #fafbfc;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--space-4) var(--space-5);
}

.admin-dashboard .metric-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.admin-dashboard .metric-value {
  font-size: 22px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.admin-dashboard .metric-value.is-bad {
  color: var(--error-text);
}

.admin-dashboard .metric-value.is-good {
  color: var(--success-text);
}

.admin-dashboard .metric-detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Collapsible sections */
.admin-dashboard .collapsible-section {
  margin-bottom: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.admin-dashboard .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}

.admin-dashboard .collapsible-section.open .section-header {
  border-bottom: 1px solid var(--border-subtle);
}

.admin-dashboard .section-header:hover {
  background-color: var(--bg-hover);
}

.admin-dashboard .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.admin-dashboard .section-toggle {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform var(--duration-slow) var(--ease-out);
}

.admin-dashboard .collapsible-section.open .section-toggle {
  transform: rotate(90deg);
}

.admin-dashboard .section-content {
  padding: var(--space-5);
}

@media (max-width: 768px) {
  .admin-dashboard .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-dashboard .stats-grid,
  .admin-dashboard .charts-grid,
  .admin-dashboard .metrics-grid {
    grid-template-columns: 1fr;
  }

  .admin-dashboard .chart-container {
    height: 240px;
  }
}
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top{left:50%;top:0;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-right{right:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{left:0;top:50%;transform:translateY(-50%)}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{float:left;margin:10px 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:initial;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;overflow:hidden;padding:0;width:29px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#0000000d}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath id='south' d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-buildings-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3.3335 11.6666C3.3335 12.5871 4.07969 13.3333 5.00016 13.3333C5.92064 13.3333 6.66683 12.5871 6.66683 11.6666L6.66683 6.66659L11.6668 6.66659C12.5873 6.66659 13.3335 5.92039 13.3335 4.99992C13.3335 4.07944 12.5873 3.33325 11.6668 3.33325H3.3335V11.6666Z' fill='currentColor'/%3E%3Cpath d='M26.6668 11.6666C26.6668 12.5871 25.9206 13.3333 25.0002 13.3333C24.0797 13.3333 23.3335 12.5871 23.3335 11.6666L23.3335 6.66659L18.3335 6.66659C17.413 6.66659 16.6668 5.92039 16.6668 4.99992C16.6668 4.07944 17.413 3.33325 18.3335 3.33325H26.6668L26.6668 11.6666Z' fill='currentColor'/%3E%3Cpath d='M13.3335 24.9999C13.3335 25.9204 12.5873 26.6666 11.6668 26.6666H3.3335V18.3333C3.3335 17.4128 4.07969 16.6666 5.00016 16.6666C5.92064 16.6666 6.66683 17.4128 6.66683 18.3333V23.3333H11.6668C12.5873 23.3333 13.3335 24.0794 13.3335 24.9999Z' fill='currentColor'/%3E%3Cpath d='M18.3335 26.6666C17.413 26.6666 16.6668 25.9204 16.6668 24.9999C16.6668 24.0794 17.413 23.3333 18.3335 23.3333H23.3335V18.3333C23.3335 17.4128 24.0797 16.6666 25.0002 16.6666C25.9206 16.6666 26.6668 17.4128 26.6668 18.3333V26.6666H18.3335Z' fill='currentColor'/%3E%3C/svg%3E");background-size:26px 26px}.mapboxgl-ctrl button.mapboxgl-ctrl-buildings-toggle.mapboxgl-ctrl-level-button-selected .mapboxgl-ctrl-icon{filter:invert(1) brightness(1)}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2' display='none'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' display='none'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle id='dot' cx='10' cy='10' r='2'/%3E%3Cpath id='stroke' d='M14 5l1 1-9 9-1-1 9-9z' fill='%23f00'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='0.9' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23fff'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd' viewBox='0 0 88 23'%3E%3Cdefs%3E%3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='clip'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/mask%3E%3Cg id='outline' opacity='1' stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23text' mask='url(%23clip)'/%3E%3C/g%3E%3Cg id='fill' opacity='1' fill='%23000'%3E%3Cuse xlink:href='%23logo'/%3E%3Cuse xlink:href='%23text'/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:#ffffff80;margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:initial;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:#ffffff80;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid #0000;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:initial;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:#0000000d}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px #00000059;box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:#000000b3;color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl-separator{background-color:#e0e0e0;height:1px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{color:#333;font-size:18px;font-weight:700;height:50px;width:50px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button:hover{background-color:#f5f5f5}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#4a5568;color:#fff}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#2d3748}/* ============================================
   PORTFOLIO MAP - Premium Map Component
   ============================================ */

.portfolio-map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio-map-container {
  width: 100%;
  height: 380px;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-default);
}

.mapbox-error {
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  color: var(--warning-text);
  padding: var(--space-5);
  text-align: center;
  border: 1px solid var(--border-subtle);
  gap: var(--space-2);
}

.mapbox-error p {
  margin: 0;
  font-size: var(--text-sm);
  color: inherit;
}

/* Popup content (DOM-built in PortfolioMap.jsx) */
.map-popup {
  font-family: var(--font-sans);
  max-width: 240px;
}

.map-popup-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: 2px;
  line-height: 1.35;
}

.map-popup-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.map-popup-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}

.map-popup-btn:hover {
  background: var(--accent-hover);
}/* ============================================
   PORTFOLIO PAGE
   Stats strip on top, map + filters on the left (sticky),
   property grid on the right.
   ============================================ */

.portfolio-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.portfolio-page .ui-page-header {
  margin-bottom: 0;
}

/* Loading / error */
.portfolio-loading,
.portfolio-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.portfolio-error .error-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}

.portfolio-error h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.portfolio-error p {
  margin: 0;
  font-size: var(--text-sm);
}

/* Summary stats strip */
.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.portfolio-summary .summary-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--border-subtle);
  min-width: 0;
}

.portfolio-summary .summary-item:last-child {
  border-right: none;
}

.portfolio-summary .summary-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 4px;
}

.portfolio-summary .summary-item label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-summary .summary-value {
  font-size: 24px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Two-column layout */
.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.portfolio-side-col {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.portfolio-main-col {
  min-width: 0;
}

/* Map card */
.portfolio-map-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}

.portfolio-map-section h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
}

.portfolio-section-icon {
  color: var(--accent);
}

/* Asset type selector */
.portfolio-asset-type-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.portfolio-asset-type-selector label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

/* Filters */
.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.portfolio-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.portfolio-filters .filter-group > label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.portfolio-page .filter-input,
.portfolio-page .filter-input-small {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.portfolio-page .filter-input:hover:not(:focus),
.portfolio-page .filter-input-small:hover:not(:focus) {
  border-color: var(--border-strong);
}

.portfolio-page .filter-input:focus,
.portfolio-page .filter-input-small:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.portfolio-filters .risk-range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.portfolio-filters .risk-range-inputs span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.portfolio-filters .filter-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portfolio-filters .toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.portfolio-filters .toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.portfolio-filters .clear-filters-btn {
  align-self: flex-start;
  padding: 6px var(--space-3);
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}

.portfolio-filters .clear-filters-btn:hover {
  background: var(--accent-soft);
}

/* Grid section */
.portfolio-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.portfolio-grid-section h2 {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.portfolio-grid-section .pagination-info {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.portfolio-empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}

/* Property grid */
.portfolio-page .property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.portfolio-page .property-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.portfolio-page .property-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.property-card-image-wrapper {
  position: relative;
  height: 156px;
  background: var(--bg-muted);
  overflow: hidden;
}

.property-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.portfolio-page .property-card:hover .property-card-image {
  transform: scale(1.03);
}

.property-card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, var(--brand-50), transparent 60%),
    var(--bg-muted);
  color: var(--brand-300);
}

.property-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4);
}

.property-card-title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-card-location {
  display: flex;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.property-card-location span:not(:last-child)::after {
  content: ',';
}

.property-card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.property-card-meta .meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.property-card-meta .meta-item label {
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.property-card-meta .meta-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.property-card-meta .feedback-badge {
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent-text) !important;
  padding: 0 8px;
  border-radius: var(--radius-full);
}

.risk-score {
  font-weight: var(--font-semibold);
}

.property-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

/* Underwrite button — success-toned primary action */
.btn.btn-underwrite-green {
  color: #fff;
  background: #16a34a;
  border: 1px solid #16a34a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.btn.btn-underwrite-green:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
  box-shadow: var(--shadow-md);
}

.btn.btn-underwrite-green:disabled {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
  cursor: wait;
  opacity: 1;
}

/* Pagination */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pagination-btn {
  min-height: 34px;
  padding: 6px var(--space-4);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

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

.pagination-page-info {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 1280px) {
  .portfolio-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-summary .summary-item:nth-child(3n) {
    border-right: none;
  }

  .portfolio-summary .summary-item:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border-subtle);
  }
}

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

  .portfolio-side-col {
    position: static;
  }
}

@media (max-width: 640px) {
  .portfolio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-summary .summary-item {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .portfolio-page .property-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   ANALYTICS PAGE
   ============================================ */

.analytics-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.analytics-page .ui-page-header {
  margin-bottom: 0;
}

/* Legacy header (kept for any remaining usages) */
.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.analytics-header h1 {
  margin: 0 0 var(--space-2) 0;
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

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

/* AI Insights Banner */
.ai-insights-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-50) 0%, transparent 55%),
    var(--bg-surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.ai-insights-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.45);
}

.attention-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--brand-50) 0%, transparent 55%),
    var(--bg-surface);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.analytics-page .analytics-stat-critical .ui-stat-value {
  color: #b42318;
}

.analytics-page .priority-link {
  text-decoration: none;
  color: inherit;
}

.analytics-page .operations-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-6);
}

.analytics-page .chart-wrapper-tall {
  height: 360px;
}

.ai-insights-content {
  flex: 1;
}

.ai-insights-content h3 {
  margin: 0 0 4px 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

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

.ai-insights-content strong {
  color: var(--accent-text);
  font-weight: var(--font-semibold);
}

/* Content wrapper */
.analytics-content-wrapper {
  width: 100%;
}

/* Sections grid: two columns, wide cards span both */
.analytics-sections-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.analytics-sections-grid > .analytics-card,
.analytics-pair {
  grid-column: 1 / -1;
}

.analytics-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.analytics-pair-col {
  min-width: 0;
}

/* Analytics Card */
.analytics-page .analytics-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  min-width: 0;
}

.analytics-card-title,
.analytics-page .analytics-card > h2 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.analytics-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Loading and Error States */
.analytics-loading,
.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.analytics-error {
  color: var(--error-text);
}

/* Metric Cards */
.analytics-page .metric-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-4);
  background: #fafbfc;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.analytics-page .metric-card-large {
  padding: var(--space-5);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brand-50) 0%, transparent 60%),
    var(--bg-surface);
}

.analytics-page .metric-card label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-medium);
}

.analytics-page .metric-value {
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.analytics-page .metric-value-large {
  font-size: 34px;
  color: var(--text-primary);
}

.analytics-page .metric-subtitle {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.analytics-page .metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

/* Charts */
.analytics-page .chart-wrapper {
  position: relative;
  height: 280px;
  width: 100%;
  min-width: 0;
}

.analytics-page .chart-section,
.risk-chart-container,
.top-risky-properties,
.maintenance-backlog-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.analytics-page .chart-section h3,
.risk-chart-container h3,
.top-risky-properties h3,
.maintenance-backlog-section h3 {
  margin: 0;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Risk Overview */
.risk-overview-content,
.operations-content,
.financial-content,
.geo-mix-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.risk-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
}

.analytics-page .properties-list,
.backlog-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 380px;
  overflow-y: auto;
  padding-right: 2px;
}

.backlog-list {
  max-height: 280px;
}

.analytics-page .property-item,
.backlog-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.analytics-page .property-item:hover,
.backlog-item:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-sm);
}

.analytics-page .property-item-header,
.backlog-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.analytics-page .property-address,
.backlog-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-sm);
  flex: 1;
}

.analytics-page .property-risk {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.analytics-page .property-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.analytics-page .property-risk-level {
  font-weight: var(--font-medium);
  text-transform: capitalize;
}

.backlog-defects {
  font-weight: var(--font-semibold);
  color: var(--warning-text);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.backlog-age {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.trend-summary {
  padding: 10px var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.analytics-page .no-data {
  padding: var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.analytics-placeholder {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  padding: var(--space-4);
  background: #fafbfc;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Responsive */
@media (max-width: 1100px) {
  .analytics-pair,
  .risk-overview-grid,
  .analytics-kpi-grid,
  .analytics-page .operations-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analytics-sections-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

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

  .analytics-page .chart-wrapper {
    height: 240px;
  }
}

@media (max-width: 480px) {
  .analytics-page .metric-value-large {
    font-size: 28px;
  }

  .analytics-page .chart-wrapper {
    height: 200px;
  }
}
/* ============================================
   MARKETPLACE — lists, cards, buttons and modals
   ============================================ */

/* Sections */
.marketplace-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

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

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

.marketplace-section-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

.marketplace-section-header h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.marketplace-section-count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.marketplace-section-body {
  padding: var(--space-5);
}

/* Filters */
.marketplace-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.marketplace-filter-input,
.marketplace-status-select {
  min-height: 34px;
  padding: 6px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.marketplace-filter-input {
  min-width: 200px;
}

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

.marketplace-status-select {
  cursor: pointer;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
}

.marketplace-filter-input:hover:not(:focus),
.marketplace-status-select:hover:not(:focus) {
  border-color: var(--border-strong);
}

.marketplace-filter-input:focus,
.marketplace-status-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* States */
.marketplace-loading,
.marketplace-error,
.marketplace-empty {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.marketplace-error {
  color: var(--error-text);
}

/* Card grid */
.marketplace-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}

.marketplace-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

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

.marketplace-card-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.marketplace-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.marketplace-card-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.marketplace-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.marketplace-card-field {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.marketplace-card-field strong {
  color: var(--text-tertiary);
  font-weight: var(--font-medium);
  margin-right: 6px;
}

.specializations-list {
  color: var(--accent-text);
  font-weight: var(--font-medium);
}

.marketplace-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.marketplace-card-body + .marketplace-card-actions {
  margin-top: var(--space-4);
}

.marketplace-card-actions-left,
.marketplace-card-actions-right {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Dropdown */
.marketplace-dropdown {
  position: relative;
  display: inline-block;
}

.marketplace-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: var(--bg-surface);
  min-width: 140px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown, 10);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-top: 4px;
}

.marketplace-dropdown:hover .marketplace-dropdown-content {
  display: block;
}

.marketplace-dropdown-content button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.marketplace-dropdown-content button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Buttons */
.marketplace-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.marketplace-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.marketplace-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
}

.marketplace-btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.marketplace-btn.primary:active:not(:disabled) {
  background: var(--accent-pressed);
}

.marketplace-btn.secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

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

.marketplace-btn.secondary:active:not(:disabled) {
  background: var(--bg-active);
}

.marketplace-btn.danger {
  background: var(--bg-surface);
  color: var(--error-text);
  border-color: var(--error-border);
}

.marketplace-btn.danger:hover:not(:disabled) {
  background: var(--error-bg);
}

.marketplace-btn.small {
  min-height: 28px;
  padding: 4px 10px;
  font-size: var(--text-xs);
}

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

/* Job status pills */
.marketplace-status-pending,
.marketplace-status-open,
.marketplace-status-assigned,
.marketplace-status-in-progress,
.marketplace-status-completed,
.marketplace-status-cancelled,
.marketplace-modal .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.marketplace-status-pending::before,
.marketplace-status-open::before,
.marketplace-status-assigned::before,
.marketplace-status-in-progress::before,
.marketplace-status-completed::before,
.marketplace-status-cancelled::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.marketplace-status-pending,
.marketplace-modal .status-badge.pending {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.marketplace-status-open,
.marketplace-modal .status-badge.open {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

.marketplace-status-assigned,
.marketplace-modal .status-badge.assigned {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.marketplace-status-in-progress,
.marketplace-modal .status-badge.in_progress {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

.marketplace-status-completed,
.marketplace-modal .status-badge.completed,
.marketplace-modal .status-badge.active {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.marketplace-status-cancelled,
.marketplace-modal .status-badge.cancelled,
.marketplace-modal .status-badge.inactive {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

/* ============================================
   Modals (rendered via portal at document.body)
   ============================================ */

/* Overlay positioning is forced so the portal always escapes parent layout */
.marketplace-modal.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 9999 !important;
  padding: var(--space-4);
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(6px);
  animation: mp-fade-in var(--duration-normal) var(--ease-out);
}

.marketplace-modal .modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 720px !important;
  min-width: 320px !important;
  max-height: 90vh !important;
  margin: 0 !important;
  transform: none;
  inset: auto !important;
  box-sizing: border-box !important;
  overflow-y: auto;
  padding: 0;
  text-align: left;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  animation: mp-pop-in var(--duration-slow, 240ms) var(--ease-out);
}

@keyframes mp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mp-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marketplace-modal.modal-overlay,
  .marketplace-modal .modal-content {
    animation: none;
  }
}

.marketplace-modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  margin: 0;
  flex-shrink: 0;
}

.marketplace-modal .modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.marketplace-modal .modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.marketplace-modal .modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.marketplace-modal .modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.marketplace-modal .modal-form,
.marketplace-modal .view-job-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
  padding: var(--space-5) var(--space-6) 0;
}

.marketplace-modal .form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.marketplace-modal .form-section:not(:last-of-type) {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.marketplace-modal .form-section-header,
.marketplace-modal .view-job-section h3 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marketplace-modal .modal-error {
  padding: var(--space-3) var(--space-4);
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.marketplace-modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.marketplace-modal .form-group label {
  display: block;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.marketplace-modal .form-group small {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.45;
}

.marketplace-modal .required {
  color: var(--error-text);
  font-weight: var(--font-semibold);
  margin-left: 2px;
}

.marketplace-modal .form-input {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.marketplace-modal .form-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.marketplace-modal .form-input:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}

.marketplace-modal .form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.marketplace-modal .form-input:disabled {
  background-color: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

.marketplace-modal textarea.form-input {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

.marketplace-modal select.form-input {
  cursor: pointer;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.marketplace-modal select.form-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.marketplace-modal .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.marketplace-modal .form-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.marketplace-modal .form-checkbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.marketplace-modal .form-loading,
.marketplace-modal .form-empty {
  padding: var(--space-2);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.marketplace-modal .modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: var(--space-6) calc(var(--space-6) * -1) 0;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: #fafbfc;
  flex-shrink: 0;
}

/* ViewJobModal places actions directly in .modal-content (no form padding) */
.marketplace-modal .modal-content > .modal-actions {
  margin: var(--space-6) 0 0;
}

.marketplace-modal .modal-actions .marketplace-btn {
  min-width: 96px;
  min-height: 36px;
}

/* View Job */
.marketplace-modal .view-job-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}

.marketplace-modal .view-job-section h3 {
  grid-column: 1 / -1;
}

.marketplace-modal .view-job-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.marketplace-modal .view-job-field label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.marketplace-modal .view-job-field span {
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.marketplace-modal .view-job-field span.status-badge {
  align-self: flex-start;
  font-size: 11px;
}

/* BOM items */
.marketplace-modal .bom-item-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fafbfc;
  transition: border-color var(--duration-normal) var(--ease-out);
}

.marketplace-modal .bom-item-card:hover {
  border-color: var(--border-strong);
}

.marketplace-modal .bom-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.marketplace-modal .bom-item-total {
  align-self: flex-end;
  padding: 6px var(--space-3);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 768px) {
  .marketplace-list {
    grid-template-columns: 1fr;
  }

  .marketplace-modal .form-row,
  .marketplace-modal .view-job-section {
    grid-template-columns: 1fr;
  }

  .marketplace-modal .modal-content {
    max-width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
  }

  .marketplace-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketplace-filter-input {
    min-width: 0;
    flex: 1;
  }
}
/* ============================================
   MARKETPLACE PAGE
   ============================================ */

.marketplace-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.marketplace-page .ui-page-header {
  margin-bottom: 0;
}

.marketplace-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .marketplace-page .ui-page-actions {
    width: 100%;
  }

  .marketplace-page .ui-page-actions .marketplace-btn {
    flex: 1;
  }
}
.julia-chat-msg {
  display: flex;
  max-width: 85%;
}

.julia-chat-msg-user {
  align-self: flex-end;
}

.julia-chat-msg-assistant {
  align-self: flex-start;
}

.julia-chat-msg-content {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  overflow-wrap: anywhere;
}

.julia-chat-msg-user .julia-chat-msg-content {
  background: var(--accent);
  color: var(--text-on-accent);
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px -6px rgba(79, 70, 229, 0.5);
}

.julia-chat-msg-assistant .julia-chat-msg-content {
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
}

.julia-chat-msg-markdown .julia-md-h1 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-2);
}

.julia-chat-msg-markdown .julia-md-h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: var(--space-3) 0 var(--space-2);
}

.julia-chat-msg-markdown .julia-md-h2:first-child {
  margin-top: 0;
}

.julia-chat-msg-markdown .julia-md-h3 {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  margin: var(--space-2) 0 var(--space-1);
}

.julia-chat-msg-markdown .julia-md-p {
  margin: 0 0 var(--space-2);
}

.julia-chat-msg-markdown .julia-md-p:last-child {
  margin-bottom: 0;
}

.julia-chat-msg-markdown .julia-md-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}

.julia-chat-msg-markdown .julia-md-list li {
  margin-bottom: var(--space-1);
}
.julia-agent-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.julia-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-medium);
}

.julia-agent-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.julia-agent-chip-running {
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}

.julia-agent-chip-running::before {
  animation: julia-chip-pulse 1.2s infinite ease-in-out;
}

@keyframes julia-chip-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.julia-agent-chip-completed {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}

.julia-agent-chip-error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
}
.julia-suggestions {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: #fafbfc;
}

.julia-suggestions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.julia-suggestions-icon {
  color: var(--accent);
}

.julia-suggestions-title {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.julia-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.julia-suggestion-btn {
  padding: 6px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.julia-suggestion-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.julia-suggestion-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.julia-suggestion-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ============================================
   JULIA PAGE - Premium AI Chat Interface
   ============================================ */

.julia-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Full width - remove max-width constraint for modern layout */
  max-width: 1000px;
  margin: 0 auto;
}

.julia-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.julia-page-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.julia-page-header h1 {
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.julia-page-subtitle,
.julia-page-subheader {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-1) 0 0 0;
}

.julia-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-height: 560px; /* Ensure usable chat height */
}

/* Example Queries */
.julia-chat-examples {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.julia-examples-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.julia-examples-icon {
  font-size: var(--text-lg);
}

.julia-examples-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.julia-examples-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.julia-example-query {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.julia-example-query:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.julia-example-query:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Chat Messages */
.julia-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
}

.julia-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-tertiary);
}

.julia-chat-empty p {
  margin: 0;
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.julia-chat-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
}

.julia-chat-empty-hint {
  font-size: var(--text-sm);
  margin-top: var(--space-2) !important;
  color: var(--text-muted);
}

.julia-message {
  display: flex;
  max-width: 85%;
}

.julia-message-user {
  align-self: flex-end;
}

.julia-message-assistant {
  align-self: flex-start;
}

.julia-message-content {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.julia-message-user .julia-message-content {
  background: var(--accent);
  color: var(--text-on-accent);
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px -6px rgba(79, 70, 229, 0.5);
}

.julia-message-assistant .julia-message-content {
  display: flex;
  align-items: center;
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
}

/* Typing Indicator */
.julia-typing-indicator {
  display: flex;
  gap: 4px;
  padding: var(--space-1) 0;
}

.julia-typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: var(--radius-full);
  animation: typing-bounce 1.4s infinite;
}

.julia-typing-indicator span:nth-child(1) { animation-delay: 0s; }
.julia-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.julia-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

.julia-loading-text {
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.julia-agent-status-wrap {
  padding: var(--space-2) 0;
  align-self: flex-start;
}

.julia-pdf-buttons {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-self: flex-start;
}

.julia-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: var(--font-medium);
  transition: background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}

.julia-pdf-btn .ui-icon {
  color: var(--accent);
}

.julia-pdf-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Chat Error */
.julia-chat-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--error-text);
}

/* Input Form */
.julia-chat-input-form {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: #fafbfc;
}

.julia-chat-input {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

.julia-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

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

.julia-chat-send-btn {
  min-height: 44px;
  padding: 0 var(--space-5);
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
}

.julia-chat-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

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

/* Responsive */
@media (max-width: 768px) {
  .julia-page {
    padding: var(--space-4);
  }
  
  .julia-message {
    max-width: 90%;
  }
  
  .julia-examples-list {
    flex-direction: column;
  }
  
  .julia-example-query {
    width: 100%;
    text-align: left;
  }
}
/* ============================================
   JULIA AGENT — conversational workspace
   All selectors scoped: page CSS is bundled globally.
   ============================================ */

.julia-agent {
  min-height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background:
    radial-gradient(60% 40% at 50% 0%, var(--brand-50) 0%, transparent 70%);
  border-radius: var(--radius-xl);
}

/* Hero */
.julia-agent .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-5) var(--space-6);
}

.julia-agent .hero-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.julia-agent .hero h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.julia-agent .hero p {
  margin: 0 0 var(--space-5);
  color: var(--text-tertiary);
  font-size: var(--text-md);
}

.julia-agent .suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 760px;
}

.julia-agent .suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}

.julia-agent .suggestion-chip .ui-icon {
  color: var(--text-muted);
  transition: color var(--duration-normal) var(--ease-out);
}

.julia-agent .suggestion-chip:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.julia-agent .suggestion-chip:hover .ui-icon {
  color: var(--accent);
}

/* Chat card */
.julia-agent .chat-shell {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-4) var(--space-8);
}

.julia-agent .chat-card {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.julia-agent .chat-area {
  flex: 1;
  min-height: 280px;
  max-height: 55vh;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-2);
}

.julia-agent .chat-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.julia-agent .chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 220px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Bubbles */
.julia-agent .bubble {
  max-width: 80%;
  padding: 10px 14px;
  margin-bottom: var(--space-3);
  border-radius: 16px;
  font-size: var(--text-sm);
  line-height: 1.6;
  animation: julia-fade-in 0.2s var(--ease-out);
  overflow-wrap: anywhere;
}

.julia-agent .bubble.user {
  align-self: flex-end;
  color: var(--text-on-accent);
  background: var(--accent);
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 12px -6px rgba(79, 70, 229, 0.5);
}

.julia-agent .bubble.assistant {
  align-self: flex-start;
  color: var(--text-primary);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-bottom-left-radius: 6px;
}

.julia-agent .bubble.thinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
}

.julia-agent .typing-dots {
  display: inline-flex;
  gap: 3px;
}

.julia-agent .typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: julia-dot 1.2s infinite ease-in-out;
}

.julia-agent .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.julia-agent .typing-dots i:nth-child(3) { animation-delay: 0.3s; }

.julia-agent .bubble.assistant .julia-md-p {
  margin: 0 0 8px 0;
}

.julia-agent .bubble.assistant .julia-md-p:last-child {
  margin-bottom: 0;
}

.julia-agent .bubble.assistant .julia-md-h2 {
  margin: 14px 0 6px 0;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.julia-agent .bubble.assistant .julia-md-h3 {
  margin: 12px 0 4px 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.julia-agent .bubble.assistant .julia-md-list {
  margin: 0 0 8px 0;
  padding-left: 20px;
}

/* Agent steps */
.julia-agent .agent-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: #fafbfc;
}

.julia-agent .step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.julia-agent .step::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

.julia-agent .step.running {
  color: var(--warning-text);
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

.julia-agent .step.running::before {
  background: #f59e0b;
  animation: julia-dot 1.2s infinite ease-in-out;
}

.julia-agent .step.completed {
  color: var(--success-text);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.julia-agent .step.completed::before {
  background: #16a34a;
}

.julia-agent .step.error {
  color: var(--error-text);
  background: var(--error-bg);
  border-color: var(--error-border);
}

.julia-agent .step.error::before {
  background: #dc2626;
}

/* PDF actions */
.julia-agent .pdf-buttons {
  display: flex;
  gap: var(--space-2);
  padding: 10px var(--space-5) 0;
}

.julia-agent .pdf-buttons button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}

.julia-agent .pdf-buttons button:hover {
  background: var(--accent-soft-hover, #dbeafe);
}

/* Composer */
.julia-agent .composer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.julia-agent .composer-context,
.julia-agent .attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.julia-agent .context-chip,
.julia-agent .attach-chip,
.julia-agent .bubble-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-height: 28px;
  padding: 3px 6px 3px 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-subtle, var(--bg-canvas));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}

.julia-agent .attach-chip img,
.julia-agent .bubble-file img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
}

.julia-agent .attach-name,
.julia-agent .bubble-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.julia-agent .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.julia-agent .chip-remove:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

.julia-agent .composer-error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--error-text, #b91c1c);
}

.julia-agent .bubble-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.julia-agent .input-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.julia-agent .composer-plus {
  position: relative;
  flex: 0 0 auto;
}

.julia-agent .plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.julia-agent .plus-btn:hover,
.julia-agent .plus-btn[aria-expanded="true"] {
  color: var(--accent-text);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.julia-agent .file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.julia-agent .plus-menu,
.julia-agent .plus-submenu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 248px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.julia-agent .plus-submenu {
  max-height: 280px;
  overflow: auto;
}

.julia-agent .plus-menu {
  bottom: calc(100% + 8px);
  left: 0;
}

.julia-agent .menu-branch {
  position: relative;
}

.julia-agent .plus-submenu {
  top: 0;
  left: calc(100% + 6px);
}

.julia-agent .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.julia-agent .menu-item span {
  flex: 1;
}

.julia-agent .menu-item kbd {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.julia-agent .menu-item .ui-icon:last-child {
  color: var(--text-muted);
}

.julia-agent .menu-item:hover:not(:disabled),
.julia-agent .menu-branch.open > .menu-item {
  background: var(--bg-subtle, #f4f5f7);
}

.julia-agent .menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.julia-agent .menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border-subtle);
}

.julia-agent .menu-empty {
  margin: 0;
  padding: 8px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.julia-agent .input-bar input:not([type="file"]) {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.julia-agent .input-bar input::placeholder {
  color: var(--text-muted);
}

.julia-agent .input-bar input:not([type="file"]):focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.julia-agent .input-bar .send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-5);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--shadow-xs);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.julia-agent .input-bar .send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.julia-agent .input-bar .send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@keyframes julia-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes julia-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .julia-agent .bubble,
  .julia-agent .typing-dots i,
  .julia-agent .step.running::before {
    animation: none;
  }
}

@media (max-width: 640px) {
  .julia-agent .bubble {
    max-width: 92%;
  }

  .julia-agent .plus-submenu {
    position: static;
    min-width: 0;
    margin: 2px 0 4px 28px;
    padding: 2px 0 2px 8px;
    max-height: 180px;
    overflow: auto;
    border: 0;
    border-left: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .julia-agent .pdf-buttons {
    flex-direction: column;
  }
}
/* ============================================
   AERIAL PAGE - Mapbox imagery explorer
   ============================================ */

.aerial-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - 8rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--text-primary);
}

.aerial-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.aerial-title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.aerial-layer-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.aerial-layer-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Segmented layer toggle */
.aerial-layer-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.aerial-layer-btn {
  padding: 6px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.aerial-layer-btn:hover:not(.active) {
  color: var(--text-primary);
}

.aerial-layer-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.aerial-layer-btn.active {
  color: var(--text-primary);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

/* Map frame */
.aerial-map-wrapper {
  flex: 1;
  min-height: 480px;
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--bg-muted);
}

.aerial-map-container {
  position: absolute;
  inset: 0;
}

.aerial-map-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--bg-muted);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-6);
}

.aerial-map-placeholder .ui-icon {
  color: var(--accent);
}

.aerial-map-placeholder p {
  margin: 0;
}

/* Floating action: Analyze Roof */
.aerial-analyze-btn {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.aerial-analyze-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(79, 70, 229, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.aerial-analyze-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}


/* ============================================
   JULIA DESIGN SYSTEM v2.0
   Premium Enterprise SaaS
   ============================================
   
   Table of Contents:
   1. DESIGN TOKENS
      1.1 Spacing Scale
      1.2 Typography
      1.3 Color Palette
      1.4 Border Radius
      1.5 Shadows & Elevation
      1.6 Transitions
      1.7 Z-Index Scale
      1.8 Layout
   2. BASE RESET & DEFAULTS
   3. TYPOGRAPHY STYLES
   4. COMPONENT LIBRARY
      4.1 Buttons
      4.2 Form Elements
      4.3 Cards
      4.4 Tables
      4.5 Badges
      4.6 Modals
      4.7 Alerts & Messages
      4.8 Tabs & Navigation
   5. SIDEBAR NAVIGATION
   6. MAIN CONTENT AREA
   7. LOADING STATES
   8. UTILITY CLASSES
   9. RESPONSIVE BREAKPOINTS
   
   ============================================ */

/* ============================================
   1. DESIGN TOKENS
   ============================================ */

/* Import premium fonts */

:root {
  /* ========== 1.1 SPACING SCALE (4px base) ========== */
  --space-0: 0;
  --space-1: 4px;    /* xs */
  --space-2: 8px;    /* sm */
  --space-3: 12px;   /* md */
  --space-4: 16px;   /* base */
  --space-5: 20px;   /* lg */
  --space-6: 24px;   /* xl */
  --space-7: 28px;
  --space-8: 32px;   /* 2xl */
  --space-10: 40px;  /* 3xl */
  --space-12: 48px;  /* 4xl */
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ========== 1.2 TYPOGRAPHY ========== */
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  
  /* Font Sizes - H1 through Caption */
  --text-h1: 36px;     /* H1 - Page titles */
  --text-h2: 28px;     /* H2 - Section headers */
  --text-h3: 24px;     /* H3 - Card headers */
  --text-h4: 20px;     /* H4 - Subsection headers */
  --text-h5: 18px;     /* H5 - Minor headers */
  --text-h6: 16px;     /* H6 - Small headers */
  --text-body: 14px;   /* Body text */
  --text-body-lg: 16px;/* Large body text */
  --text-caption: 12px;/* Captions, labels */
  --text-tiny: 11px;   /* Badges, tiny labels */
  
  /* Legacy aliases for backward compatibility */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  --text-5xl: 36px;
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ========== 1.3 COLOR PALETTE ========== */
  
  /*
   * Light theme. The numbered scales below are mirrored: legacy component CSS
   * was written for a dark UI and uses 300/400 as foreground and 800/900 as
   * tinted backgrounds. Mirroring keeps that intent on white. 500 is always
   * the solid brand/status color. New code should prefer the semantic tokens
   * (--accent-*, --brand-*, --*-bg/-text/-border) which are not mirrored.
   */

  /* Brand - Blue (true scale, light to dark) */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;
  --brand-900: #1e3a8a;
  --brand-950: #172554;

  /* Semantic accent */
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-pressed: var(--brand-800);
  --accent-text: var(--brand-700);
  --accent-soft: var(--brand-50);
  --accent-soft-hover: var(--brand-100);
  --accent-border: var(--brand-200);
  --accent-ring: rgba(37, 99, 235, 0.18);

  /* Neutrals (mirrored: 50 = ink, 950 = canvas) */
  --neutral-50: #0f172a;
  --neutral-100: #1e293b;
  --neutral-200: #334155;
  --neutral-300: #475569;
  --neutral-400: #5b6474;
  --neutral-500: #7c8596;
  --neutral-600: #a0a8b6;
  --neutral-700: #d5d9e0;
  --neutral-800: #e6e8ec;
  --neutral-900: #f3f4f6;
  --neutral-950: #f7f8fa;

  /* Background Colors */
  --bg-base: #f7f8fa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #f4f5f7;
  --bg-subtle: #eceef2;
  --bg-hover: #f1f2f5;
  --bg-active: #e6e8ec;
  
  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-on-accent: #ffffff;
  
  /* Border Colors */
  --border-subtle: #e9ebef;
  --border-default: #e2e5ea;
  --border-strong: #cfd4dc;
  --border-focus: var(--accent);
  
  /* Primary (mirrored blue) */
  --primary-50: #172554;
  --primary-100: #1e3a8a;
  --primary-200: #1e40af;
  --primary-300: #1e40af;
  --primary-400: #1d4ed8;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #bfdbfe;
  --primary-800: #dbeafe;
  --primary-900: #eff6ff;
  
  /* Secondary (mirrored blue, alias of primary) */
  --secondary-50: #172554;
  --secondary-100: #1e3a8a;
  --secondary-200: #1e40af;
  --secondary-300: #1e40af;
  --secondary-400: #1d4ed8;
  --secondary-500: #2563eb;
  --secondary-600: #1d4ed8;
  --secondary-700: #bfdbfe;
  --secondary-800: #dbeafe;
  --secondary-900: #eff6ff;
  
  /* Accent - Legacy aliases (1-3 tints, 4-6 brand, 7-9 deep) */
  --accent-1: #eff6ff;
  --accent-2: #dbeafe;
  --accent-3: #bfdbfe;
  --accent-4: #1d4ed8;
  --accent-5: #2563eb;
  --accent-6: #3b82f6;
  --accent-7: #1d4ed8;
  --accent-8: #1e40af;
  --accent-9: #1e3a8a;
  
  /* Success - Green (mirrored) */
  --success-50: #052e16;
  --success-100: #14532d;
  --success-200: #166534;
  --success-300: #166534;
  --success-400: #15803d;
  --success-500: #16a34a;
  --success-600: #15803d;
  --success-700: #bbf7d0;
  --success-800: #dcfce7;
  --success-900: #f0fdf4;
  
  --success-bg: #ecfdf3;
  --success-border: #bbf0cf;
  --success-text: #157f3c;
  --success-solid: #16a34a;
  
  /* Warning - Amber (mirrored) */
  --warning-50: #451a03;
  --warning-100: #78350f;
  --warning-200: #92400e;
  --warning-300: #92400e;
  --warning-400: #b45309;
  --warning-500: #d97706;
  --warning-600: #b45309;
  --warning-700: #fde68a;
  --warning-800: #fef3c7;
  --warning-900: #fffbeb;
  --warning-950: #fffbeb;
  
  --warning-bg: #fffaeb;
  --warning-border: #fbe3a6;
  --warning-text: #a15c07;
  --warning-solid: #d97706;
  
  /* Error - Red (mirrored) */
  --error-50: #450a0a;
  --error-100: #7f1d1d;
  --error-200: #991b1b;
  --error-300: #991b1b;
  --error-400: #c2261f;
  --error-500: #dc2626;
  --error-600: #b91c1c;
  --error-700: #fecaca;
  --error-800: #fee2e2;
  --error-900: #fef2f2;
  
  --error-bg: #fef3f2;
  --error-border: #fdd1cd;
  --error-text: #b42318;
  --error-solid: #dc2626;
  
  /* Info - Blue (mirrored) */
  --info-50: #172554;
  --info-100: #1e3a8a;
  --info-200: #1e40af;
  --info-300: #1e40af;
  --info-400: #1d4ed8;
  --info-500: #2563eb;
  --info-600: #1d4ed8;
  --info-700: #bfdbfe;
  --info-800: #dbeafe;
  --info-900: #eff6ff;
  
  --info-bg: #eff6ff;
  --info-border: #cfe0fd;
  --info-text: #1d4ed8;
  --info-solid: #2563eb;

  /* ========== 1.4 BORDER RADIUS ========== */
  --radius-none: 0;
  --radius-xs: 6px;      /* Small elements */
  --radius-sm: 8px;      /* Buttons, inputs */
  --radius-md: 10px;     /* Cards, modals */
  --radius-lg: 14px;     /* Large cards */
  --radius-xl: 18px;     /* Extra large */
  --radius-2xl: 24px;    /* Huge containers */
  --radius-full: 9999px; /* Pills, circles */

  /* ========== 1.5 SHADOWS & ELEVATION ========== */
  /* Soft, layered, cool-tinted shadows for a white UI */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.06), 0 1px 2px -1px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.10), 0 4px 8px -4px rgba(16, 24, 40, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, 0.16), 0 8px 16px -8px rgba(16, 24, 40, 0.06);
  --shadow-2xl: 0 32px 64px -16px rgba(16, 24, 40, 0.22);
  
  /* Focus / accent glows */
  --shadow-glow: 0 0 0 4px var(--accent-ring);
  --shadow-glow-strong: 0 8px 24px -6px rgba(79, 70, 229, 0.35);
  --shadow-glow-success: 0 0 0 4px rgba(22, 163, 74, 0.15);
  --shadow-glow-error: 0 0 0 4px rgba(220, 38, 38, 0.15);

  /* ========== 1.6 TRANSITIONS ========== */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-slower: 300ms;
  --duration-slowest: 500ms;
  
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== 1.7 Z-INDEX SCALE ========== */
  --z-base: 0;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;

  /* ========== 1.8 LAYOUT ========== */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;
  --max-content-width: 1440px;
  --content-width-sm: 640px;
  --content-width-md: 768px;
  --content-width-lg: 1024px;
  --content-width-xl: 1280px;
  
  /* Gutters */
  --gutter-xs: var(--space-2);
  --gutter-sm: var(--space-4);
  --gutter-md: var(--space-6);
  --gutter-lg: var(--space-8);
  --gutter-xl: var(--space-12);
}

/* ============================================
   2. BASE RESET & DEFAULTS
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* CRITICAL: Allow body to scroll naturally - single scrollbar on the right */
  overflow-x: hidden;
  overflow-y: auto;
}

#root {
  width: 100%;
  min-height: 100%;
}

body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Selection */
::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* Thin, quiet scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #d5d9e0 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #d5d9e0;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #b8bec9; }

svg { flex-shrink: 0; }

.tabular-nums,
table,
.metric-value,
.kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   3. TYPOGRAPHY STYLES
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

h1, h2 { letter-spacing: -0.025em; }

h1 { 
  font-size: var(--text-h1); 
  margin-bottom: var(--space-6); 
}
h2 { 
  font-size: var(--text-h2); 
  margin-bottom: var(--space-5); 
}
h3 { 
  font-size: var(--text-h3); 
  margin-bottom: var(--space-4); 
}
h4 { 
  font-size: var(--text-h4); 
  margin-bottom: var(--space-3); 
}
h5 { 
  font-size: var(--text-h5); 
  margin-bottom: var(--space-3); 
}
h6 { 
  font-size: var(--text-h6); 
  margin-bottom: var(--space-2); 
}

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

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

a:hover {
  color: var(--accent-pressed);
}

small, .text-caption {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

code, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-elevated);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ============================================
   4. COMPONENT LIBRARY
   ============================================ */

/* ========== 4.1 BUTTONS ========== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  letter-spacing: -0.005em;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}

/* Button - Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button - Primary */
.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.btn-primary:active:not(:disabled) {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
}

/* Button - Secondary */
.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:active:not(:disabled) {
  background: var(--bg-subtle);
}

/* Button - Success */
.btn-success {
  background: var(--success-solid);
  color: white;
  border-color: var(--success-solid);
  box-shadow: var(--shadow-xs);
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}

.btn-success:active:not(:disabled) {
  background: #166534;
  border-color: #166534;
}

/* Button - Warning */
.btn-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.btn-warning:hover:not(:disabled) {
  background: #fef0c7;
  border-color: #f8d57e;
}

.btn-warning:active:not(:disabled) {
  background: #fde68a;
}

/* Button - Danger */
.btn-danger {
  background: var(--error-solid);
  color: white;
  border-color: var(--error-solid);
  box-shadow: var(--shadow-xs);
}

.btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-danger:active:not(:disabled) {
  background: #991b1b;
  border-color: #991b1b;
}

/* Button - Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}

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

.btn-ghost:active:not(:disabled) {
  background: var(--bg-subtle);
}

/* Button - Outline */
.btn-outline {
  background: var(--bg-surface);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

.btn-outline:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--brand-300);
  color: var(--accent-pressed);
}

/* Button - Soft accent */
.btn-soft {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: transparent;
}

.btn-soft:hover:not(:disabled) {
  background: var(--accent-soft-hover);
}

/* Button Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  min-height: 24px;
}

.btn-sm {
  padding: 6px var(--space-3);
  font-size: var(--text-xs);
  min-height: 30px;
}

.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
  min-height: 44px;
  border-radius: var(--radius-md);
}

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

/* Button - Full Width */
.btn-full {
  width: 100%;
}

/* Button - Icon Only */
.btn-icon {
  padding: var(--space-2);
  width: 36px;
  height: 36px;
}

.btn-icon.btn-sm {
  width: 28px;
  height: 28px;
  padding: var(--space-1);
}

.btn-icon.btn-lg {
  width: 44px;
  height: 44px;
  padding: var(--space-3);
}

/* ========== 4.2 FORM ELEMENTS ========== */

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

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

.form-label.required::after {
  content: ' *';
  color: var(--error-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  min-height: 38px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

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

/* Input - Hover */
.form-input:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus),
.form-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}

/* Input - Focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

/* Input - Disabled */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-muted);
}

/* Input - Error */
.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--error-solid);
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Input - Success */
.form-input.success,
.form-select.success,
.form-textarea.success {
  border-color: var(--success-solid);
}

.form-input.success:focus,
.form-select.success:focus,
.form-textarea.success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Select */
.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

/* Textarea */
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Checkbox & Radio */
.form-checkbox,
.form-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-500);
  cursor: pointer;
}

/* Form Helper Text */
.form-helper {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--error-text);
  margin-top: var(--space-1);
}

/* Input Sizes */
.form-input-sm,
.form-select-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.form-input-lg,
.form-select-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
}

/* ========== 4.3 CARDS ========== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

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

.card-title {
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.card-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
}

.card-change {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.card-change.positive { color: var(--success-text); }
.card-change.negative { color: var(--error-text); }

.card-body {
  flex: 1;
}

.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Summary Cards Grid */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}

.summary-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

/* Chart Cards */
.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

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

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

.chart-container {
  position: relative;
  height: 280px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ========== 4.4 TABLES ========== */

.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.table th {
  background: #fafbfc;
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

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

.table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-out);
}

.table tbody tr:hover {
  background: #fafbfc;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Striped */
.table-striped tbody tr:nth-child(even) {
  background: #fafbfc;
}

/* Table Compact */
.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}

/* ========== 4.5 BADGES ========== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* Badge Variants */
.badge-default {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.badge-primary {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--brand-100);
}

.badge-secondary {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-border);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

.badge-danger,
.badge-error {
  background: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* Legacy badges */
.beta-badge,
.enterprise-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.beta-badge {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}

.enterprise-badge {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
}

.nav-item.active .beta-badge,
.nav-item.active .enterprise-badge {
  background: var(--bg-surface);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.status-excellent { background: var(--success-bg); color: var(--success-text); }
.status-good { background: var(--info-bg); color: var(--info-text); }
.status-fair { background: var(--warning-bg); color: var(--warning-text); }
.status-poor { background: #fff4ed; color: #c2410c; }
.status-critical { background: var(--error-bg); color: var(--error-text); }

/* ========== 4.6 MODALS ========== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-6);
  animation: fadeIn var(--duration-normal) var(--ease-default);
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--z-modal);
  box-shadow: var(--shadow-xl);
  animation: slideUp var(--duration-slow) var(--ease-spring);
}

.modal-sm { max-width: 400px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1000px; }
.modal-full { max-width: 95vw; max-height: 95vh; }

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

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

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

.modal-body {
  padding: var(--space-5);
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* Shared overlay/container used by Marketplace, editor and limit modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-8);
  animation: fadeIn 0.2s ease-out;
}

.modal-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s var(--ease-out);
}

.modal-container.modal-lg {
  width: 100%;
  max-width: 1000px;
}

/* Spinner on solid buttons */
.btn-primary .spinner,
.btn-danger .spinner,
.btn-success .spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== 4.7 ALERTS & MESSAGES ========== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  animation: slideDown var(--duration-normal) var(--ease-default);
}

.alert-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.alert-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.alert-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.alert-info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

/* Legacy aliases */
.error-message { 
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.success-message {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.info-message {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.warning-message {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

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

.alert-content,
.error-text {
  flex: 1;
  line-height: var(--leading-normal);
}

.alert-close,
.error-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--text-xl);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  opacity: 0.7;
  transition: opacity var(--duration-fast);
}

.alert-close:hover,
.error-close:hover {
  opacity: 1;
}

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

/* ========== 4.8 TABS & NAVIGATION ========== */

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

.tabs-list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  margin-bottom: -1px;
}

.tab-button:hover:not(.active) {
  color: var(--text-secondary);
  background: var(--bg-muted);
}

.tab-button.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ============================================
   5. SIDEBAR NAVIGATION
   ============================================ */

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

.logo {
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: var(--tracking-tight);
  border-bottom: 1px solid var(--border-subtle);
}

.tabs {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  flex: 1;
  overflow-y: auto;
  gap: var(--space-1);
}

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

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

.nav-item.active,
.sidebar .tab-button.active {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.nav-item.active:hover,
.sidebar .tab-button.active:hover {
  background: var(--accent-soft-hover);
}

/* User Profile Section */
.user-profile {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3);
  margin-top: auto;
}

/* Units bar (portfolio size) - legacy class name kept for compatibility */
.user-units-bar,
.user-credits-bar {
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

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

.units-value,
.credits-value {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  display: block;
  margin-top: var(--space-1);
}

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

.units-progress-mini,
.credits-progress-mini {
  width: 100%;
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  overflow: hidden;
}

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

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

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

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

.user-details {
    flex: 1;
  min-width: 0;
}

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

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

/* Plan Badges */
.user-role.plan-badge-blue,
.user-role.plan-badge-purple,
.user-role.plan-badge-gold,
.user-role.plan-badge-gray {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.user-role.plan-badge-blue {
  background: var(--info-bg);
  color: var(--info-text);
}

.user-role.plan-badge-purple {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.user-role.plan-badge-gold {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.user-role.plan-badge-gray {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}

/* ============================================
   6. MAIN CONTENT AREA
   ============================================ */

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

.content-area {
  padding: var(--space-6);
    width: 100%;
  /* CRITICAL: Full width layout - remove max-width constraint for flexibility */
  }

/* Page Header */
  .header {
  margin-bottom: var(--space-6);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  }

  .welcome-text h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.welcome-text p {
  color: var(--text-tertiary);
  font-size: var(--text-md);
  margin: var(--space-1) 0 0 0;
}

.user-info-text {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
  margin-top: var(--space-2) !important;
}

.user-role-badge {
  color: var(--accent-text);
  font-weight: var(--font-medium);
  }

  .header-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ============================================
   7. LOADING STATES
   ============================================ */

.spinner,
.loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--brand-100);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

.spinner-xs { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-md { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-xl { width: 40px; height: 40px; border-width: 3px; }

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

.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

.skeleton-text {
  height: 1em;
  margin: var(--space-2) 0;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton-button {
  height: 36px;
  width: 100px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--brand-100);
  font-size: 24px;
  margin-bottom: var(--space-4);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  max-width: 400px;
  margin: 0 auto;
}

/* ============================================
   7b. SHARED PAGE PATTERNS
   ============================================ */

/* Page header: title + subtitle on the left, actions on the right */
.ui-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.ui-page-header-text {
  min-width: 0;
}

.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.ui-page-title {
  font-size: 26px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.ui-page-subtitle {
  font-size: var(--text-md);
  color: var(--text-tertiary);
  margin: 6px 0 0;
  max-width: 640px;
}

.ui-page-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Section card: white panel with optional header row */
.ui-section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

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

.ui-section-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.ui-section-card-title .ui-icon {
  color: var(--accent);
}

.ui-section-card-body {
  padding: var(--space-5);
}

/* KPI / stat card */
.ui-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.ui-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ui-stat-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
}

.ui-stat-value {
  font-size: 28px;
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ui-stat-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Status pill with leading dot */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  white-space: nowrap;
}

.ui-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.ui-pill.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.ui-pill.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.ui-pill.error   { background: var(--error-bg);   color: var(--error-text);   border-color: var(--error-border); }
.ui-pill.info    { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.ui-pill.accent  { background: var(--accent-soft); color: var(--accent-text); border-color: var(--brand-100); }

/* Segmented control */
.ui-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.ui-segmented > button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 6px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  cursor: pointer;
}

.ui-segmented > button.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Mapbox controls and popups */
.mapboxgl-ctrl-group {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.mapboxgl-ctrl-group button + button {
  border-top-color: var(--border-subtle) !important;
}

.mapboxgl-popup-content {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-3) var(--space-4) !important;
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.mapboxgl-popup-close-button {
  color: var(--text-tertiary);
  padding: 2px 6px;
}

/* Inline icon + text helper */
.ui-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Centered full-area loading state */
.ui-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 50vh;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.ui-loading-screen .ui-icon {
  color: var(--accent);
}

.ui-loading-screen p {
  margin: 0;
}

/* ============================================
   8. UTILITY CLASSES
   ============================================ */

/* Flexbox */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.flex-1 { flex: 1; }
.flex-none { flex: none; }

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

/* Sizing */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }

/* Spacing - Gaps */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing - Padding */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* Spacing - Margin */
.m-0 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

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

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-error { color: var(--error-text); }
.text-info { color: var(--info-text); }

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

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

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Borders */
.border { border: 1px solid var(--border-default); }
.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.border-l { border-left: 1px solid var(--border-subtle); }
.border-r { border-right: 1px solid var(--border-subtle); }

.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Background */
.bg-base { background-color: var(--bg-base); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-muted { background-color: var(--bg-muted); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Transitions */
.transition { transition: all var(--duration-fast) var(--ease-default); }
.transition-colors { transition: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default); }

/* ============================================
   9. RESPONSIVE BREAKPOINTS
   ============================================ */

/* 
   Breakpoints:
   - sm: 640px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1536px
*/

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

@media (max-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }
  
  body {
    flex-direction: column;
    overflow-y: auto;
  }
  
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-2);
    gap: var(--space-1);
  }
  
  .nav-item,
  .sidebar .tab-button {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .user-profile {
    display: none;
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .content-area {
    padding: var(--space-4);
  }
  
  .summary-cards {
    grid-template-columns: 1fr;
  }
  
  .header-top {
  flex-direction: column;
    align-items: stretch;
}

  .header-actions {
  width: 100%;
}

  .header-actions .btn {
    flex: 1;
  }
  
  /* Modal responsive */
  .modal {
    max-width: 100%;
    margin: var(--space-4);
    max-height: calc(100vh - var(--space-8));
  }
  
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .welcome-text h1 {
    font-size: var(--text-2xl);
  }
  
  .content-area {
    padding: var(--space-3);
  }
  
  .card,
  .summary-card,
  .chart-card {
    padding: var(--space-4);
  }
  
  .card-value {
    font-size: var(--text-2xl);
  }
  
  .btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  
  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
}
/* ============================================
   LAYOUT - Dashboard & Page Specific Styles
   Uses Julia Design System tokens
   ============================================ */

/* ========== PAGE SECTIONS ========== */

.page-section,
.job-info-section,
.upload-section,
.results-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-xs);
}

.page-section h2,
.job-info-section h2,
.upload-section h2,
.results-section h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ========== FORM ROW ========== */

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* ========== UPLOAD AREA ========== */

.upload-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-default);
}

.upload-area:hover {
  border-color: var(--primary-500);
  background: var(--bg-muted);
}

.upload-area.dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.upload-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.upload-actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.analyze-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.analyze-button {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-semibold);
}

.analyze-hint {
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ========== PROCESSING INDICATOR ========== */

.processing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--info-text);
  font-size: var(--text-sm);
}

/* ========== FILE INPUT ========== */

.file-input-wrapper {
  flex: 1;
}

.file-input {
  display: none;
}

.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--primary-500);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--duration-fast) var(--ease-default);
}

.file-label:hover {
  background: var(--accent-hover);
}

.file-label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.file-name {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-left: var(--space-3);
}

/* ========== RISK SUMMARY CARD ========== */

.risk-summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.risk-summary-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.risk-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

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

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

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

.urgency-low { color: var(--success-text); }
.urgency-moderate { color: var(--warning-text); }
.urgency-high { color: #c2410c; }
.urgency-critical { color: var(--error-text); }

/* ========== IMAGES GRID ========== */

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: var(--space-5);
}

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

.image-result-card:hover {
  border-color: var(--primary-500);
  box-shadow: var(--shadow-md);
}

/* ========== RESULT IMAGE ========== */

.image-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  display: none;
}

.image-section.active {
  display: block;
}

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

.result-image {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

/* ========== DEFECT LIST ========== */

.defect-list-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.defect-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

.defect-item:hover {
  border-color: var(--primary-500);
  background: var(--bg-muted);
}

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

.defect-count {
  background: var(--primary-500);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
}

/* ========== EDITOR MODAL ========== */

.editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
  padding: var(--space-6);
}

.editor-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  max-width: 95vw;
  max-height: 95vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

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

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

.close-button {
  background: none;
  border: none;
  font-size: var(--text-3xl);
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
}

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

/* ========== PROPERTY DETAILS ========== */

.property-details-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.property-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.property-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.property-detail-value {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

/* ========== AUTOCOMPLETE DROPDOWN ========== */

.address-search-wrapper {
  position: relative;
  width: 100%;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-1);
  max-height: 280px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  display: none;
  box-shadow: var(--shadow-lg);
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-default);
}

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

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

.autocomplete-item.selected {
  background: var(--bg-subtle);
}

.autocomplete-address {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

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

.autocomplete-loading,
.autocomplete-empty {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ========== TAB CONTENT ========== */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ========== DIVIDERS ========== */

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-5) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--border-subtle);
  margin: 0 var(--space-4);
}

/* ========== DATA LIST ========== */

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

.data-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

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

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

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

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

@media (max-width: 1024px) {
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .images-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .risk-metrics {
    grid-template-columns: 1fr;
  }
  
  .upload-row {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .upload-row .form-group {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-section,
  .job-info-section,
  .upload-section,
  .results-section,
  .risk-summary-card {
    padding: var(--space-4);
  }
  
  .property-details-grid {
    grid-template-columns: 1fr;
  }
}