/*
 * Steel Theme — Dark / Metallic
 * Activated by: body.steel-theme
 * Deactivated via: Header ? button → theme toggle
 * Persisted: localStorage "melissasoft_steel_theme"
 *
 * Scope: All UI chrome (header, panels, tabs, buttons, chat, scrollbars)
 *        3D canvas / point-cloud render viewports are explicitly excluded.
 */

/* ─── Token Map ──────────────────────────────────────────────────────────── */
body.steel-theme {
  --st-bg:           #111418;
  --st-bg2:          #191d22;
  --st-surface:      #1e2229;
  --st-surface2:     #252b34;
  --st-surface3:     #2c333e;
  --st-border:       #35404d;
  --st-border2:      #3f4d5c;
  --st-text:         #b8c5d0;
  --st-text-dim:     #6b7c8e;
  --st-text-muted:   #47566a;
  --st-highlight:    #cdd8e0;
  --st-accent:       #7a93a8;
  --st-accent-hover: #9ab2c4;
  --st-accent-glow:  rgba(122,147,168,0.25);

  /* Brushed-metal micro-texture */
  --st-metal:
    repeating-linear-gradient(
      93deg,
      rgba(255,255,255,0.016) 0px,
      rgba(255,255,255,0.016) 1px,
      transparent 1px,
      transparent 5px
    );

  /* Honeycomb Perforated Plate Texture */
  --st-metal-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='41.569'%3E%3Cg fill='%2306080a' stroke='rgba(255,255,255,0.12)' stroke-width='1'%3E%3Cpolygon points='12,2 21.5,7.48 21.5,18.44 12,23.93 2.5,18.44 2.5,7.48'/%3E%3Cpolygon points='24,22.78 33.5,28.27 33.5,39.23 24,44.71 14.5,39.23 14.5,28.27'/%3E%3Cpolygon points='0,22.78 9.5,28.27 9.5,39.23 0,44.71 -9.5,39.23 -9.5,28.27'/%3E%3C/g%3E%3C/svg%3E");
}

/* ─── Root / Body ─────────────────────────────────────────────────────────── */
body.steel-theme {
  background-color: var(--st-bg) !important;
  background-image: 
    /* 수평 중앙이 밝은 그라데이션 (타공철판 위 빛 반사) */
    linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.6) 100%),
    var(--st-metal-plate) !important;
  color: var(--st-text) !important;
}

/* App root wrapper (h-screen bg-white text-slate-900) */
body.steel-theme #root > div,
body.steel-theme [class*="h-screen"][class*="bg-white"],
body.steel-theme [class*="h-screen"] {
  background: transparent !important;
  color: var(--st-text) !important;
}

/* Scrollable page container (overflow-y-auto inside root) */
body.steel-theme [class*="overflow-y-auto"][class*="h-full"],
body.steel-theme [class*="overflow-y-auto"][class*="flex-1"] {
  background: transparent !important;
}

/* ─── Sticky Section Headers ────────────────────────────────────────────────── */
body.steel-theme .sticky[class*="bg-white"] {
  background-color: rgba(30, 38, 48, 0.8) !important;
  border-color: var(--st-border2) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
body.steel-theme .sticky[class*="bg-white"] h2,
body.steel-theme .sticky[class*="bg-white"] p {
  color: var(--st-text) !important;
}

/* ─── Section backgrounds (About, landing pages) ─────────────────────────── */
/* bg-sky-50 / bg-sky-100 sections */
body.steel-theme section[class*="bg-sky-50"],
body.steel-theme section[class*="bg-sky-100"],
body.steel-theme [class*="bg-sky-50"][class*="py-"],
body.steel-theme [class*="bg-sky-100"][class*="py-"] {
  background-color: rgba(25, 29, 34, 0.6) !important;
  backdrop-filter: blur(2px);
}
/* bg-white sections and page sections */
body.steel-theme section[class*="bg-white"],
body.steel-theme section[class*="py-"][class*="border-y"],
body.steel-theme section[class*="py-"][class*="border-b"],
body.steel-theme section[id="contact"] {
  background-color: rgba(17, 20, 24, 0.65) !important;
  backdrop-filter: blur(2px);
}

/* Gradient backgrounds for sections */
body.steel-theme section[class*="bg-gradient-to-b"][class*="from-white"],
body.steel-theme section[class*="bg-gradient-to-b"][class*="from-slate-50"] {
  background-image: linear-gradient(180deg, rgba(17, 20, 24, 0.65) 0%, rgba(25, 29, 34, 0.6) 100%) !important;
  backdrop-filter: blur(2px);
}

/* Blue-tinted cards (bg-blue-50 / border-blue-200 / border-blue-300) */
body.steel-theme [class*="bg-blue-50"] {
  background: var(--st-surface2) !important;
}
body.steel-theme [class*="border-blue-300"] {
  border-color: var(--st-border2) !important;
}
body.steel-theme [class*="border-blue-200"] {
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="bg-blue-100"] {
  background: var(--st-surface3) !important;
}

/* border-sky-100 / border-sky-200 section dividers */
body.steel-theme [class*="border-sky-100"],
body.steel-theme [class*="border-sky-200"] {
  border-color: var(--st-border) !important;
}

/* hover: border-blue card lift effects */
body.steel-theme [class*="hover:border-blue-"]:hover {
  border-color: var(--st-accent) !important;
}
body.steel-theme [class*="hover:bg-blue-50"]:hover {
  background: rgba(42,50,62,0.92) !important;
}

/* Pipeline / tech diagram cards (About page) */
body.steel-theme [class*="rounded-2xl"][class*="border-slate-200"],
body.steel-theme [class*="rounded-xl"][class*="border-slate-200"],
body.steel-theme [class*="rounded-lg"][class*="border-slate-200"] {
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="border-dashed"][class*="border-slate-300"] {
  border-color: var(--st-border2) !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
body.steel-theme header,
body.steel-theme header[class*="bg-"],
body.steel-theme header[class*="from-sky-"],
body.steel-theme header[class*="from-blue-"] {
  background-image:
    /* 대각선 빛 반사 (사선 하이라이트) */
    linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.12) 25%, transparent 30%, transparent 45%, rgba(255,255,255,0.06) 50%, transparent 55%),
    /* 상하 원통형 금속 반사 (Cylindrical Metal Bevel) - 밝은 그레이 톤으로 수정 */
    linear-gradient(
      180deg,
      #6b7c8e 0%,
      #47566a 35%,
      #2c3848 48%,
      #1e2633 50%,
      #354455 52%,
      #252e3d 100%
    ),
    /* 다이아몬드 플레이트 텍스처 오버레이 */
    var(--st-metal-plate) !important;
  background-color: #2c3848 !important;
  border-bottom: 1px solid #1e2633 !important;
  /* 상단 엣지 하이라이트 + 하단 그림자 */
  box-shadow:
    0 1px 1px rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 3px 12px rgba(0,0,0,0.6) !important;
}

/* Header text */
body.steel-theme header span,
body.steel-theme header p,
body.steel-theme header a { color: var(--st-text) !important; }
body.steel-theme header [class*="text-slate-800"],
body.steel-theme header [class*="text-slate-900"] { color: var(--st-highlight) !important; }
body.steel-theme header [class*="text-blue-"],
body.steel-theme header [class*="text-sky-"] { color: var(--st-accent) !important; }
body.steel-theme header [class*="text-slate-400"],
body.steel-theme header [class*="text-slate-500"] { color: var(--st-text-muted) !important; }

/* Header nav group pill */
body.steel-theme header [class*="border-blue-300"],
body.steel-theme header [class*="border-sky-"] {
  border-color: var(--st-border) !important;
  background: rgba(30,34,41,0.92) !important;
}

/* Header buttons (excluding the logo button) */
body.steel-theme header button:not([aria-label="Home"]) {
  background: rgba(44,56,72,0.85) !important;
  border-color: rgba(100,120,145,0.35) !important;
  color: var(--st-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 3px rgba(0,0,0,0.4) !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.steel-theme header button:not([aria-label="Home"]):hover {
  background: linear-gradient(180deg, rgba(90,115,145,0.6) 0%, rgba(50,68,90,0.9) 100%) !important;
  border-color: rgba(160,195,230,0.55) !important;
  color: #e8f0fa !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 8px rgba(130,175,220,0.25),
    0 2px 6px rgba(0,0,0,0.5) !important;
}
body.steel-theme header button:not([aria-label="Home"]):active {
  background: rgba(30,40,55,0.95) !important;
  border-color: rgba(100,140,180,0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}
/* Active/highlighted nav button (current page) */
body.steel-theme header button[class*="bg-blue-600"]:not([aria-label="Home"]),
body.steel-theme header button[class*="border-blue-600"]:not([aria-label="Home"]) {
  background: linear-gradient(180deg, #4a6a8a 0%, #2c4460 100%) !important;
  border-color: #6a9abf !important;
  color: #d8eaff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px rgba(90,150,210,0.3), 0 2px 5px rgba(0,0,0,0.5) !important;
}

/* Language toggle button (EN/KO) */
body.steel-theme header [class*="rounded-full"][class*="border"] {
  background: rgba(44,56,72,0.85) !important;
  border-color: rgba(100,120,145,0.35) !important;
  color: var(--st-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 3px rgba(0,0,0,0.4) !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}
body.steel-theme header [class*="rounded-full"][class*="border"]:hover {
  background: linear-gradient(180deg, rgba(90,115,145,0.6) 0%, rgba(50,68,90,0.9) 100%) !important;
  border-color: rgba(160,195,230,0.55) !important;
  color: #e8f0fa !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 8px rgba(130,175,220,0.25),
    0 2px 6px rgba(0,0,0,0.5) !important;
}

/* Header dropdown */
body.steel-theme header [class*="bg-white"][class*="rounded-lg"] {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}
body.steel-theme header [class*="text-slate-700"] { color: var(--st-text) !important; }
body.steel-theme header [class*="hover:bg-slate-50"]:hover { background: rgba(122,147,168,0.1) !important; }

/* amber branding chip */
body.steel-theme header [class*="bg-amber"] {
  background: rgba(37,43,52,0.9) !important;
  border-color: var(--st-border) !important;
  color: var(--st-accent) !important;
}

/* ─── Distributor modal ──────────────────────────────────────────────────── */
body.steel-theme [class*="rounded-2xl"][class*="bg-white"],
body.steel-theme [class*="rounded-2xl"][class*="bg-white/95"] {
  background: var(--st-surface) !important;
  color: var(--st-text) !important;
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="border-slate-100"] { border-color: var(--st-border) !important; }
body.steel-theme [class*="border-slate-200"] { border-color: var(--st-border) !important; }

/* ─── Right panels (bg-slate-100 wrappers) ─────────────────────────────── */
body.steel-theme [class*="bg-slate-100"] {
  background: var(--st-surface) !important;
}
body.steel-theme [class*="border-slate-300"] { border-color: var(--st-border) !important; }
body.steel-theme [class*="border-l border-slate-300"] { border-color: var(--st-border) !important; }

/* Card sections inside panels (bg-sky-50, bg-sky-100) */
body.steel-theme [class*="bg-sky-50"],
body.steel-theme [class*="bg-sky-100"] {
  background: var(--st-surface2) !important;
}
body.steel-theme [class*="border-sky-200"],
body.steel-theme [class*="border-sky-100"] {
  border-color: var(--st-border2) !important;
}

/* Inline stat boxes (bg-white/80, bg-white/60) inside panels */
body.steel-theme [class*="bg-white\/80"],
body.steel-theme [class*="bg-white\/60"],
body.steel-theme [class*="bg-white\/85"],
body.steel-theme [class*="bg-white\/90"],
body.steel-theme [class*="bg-white\/95"] {
  background: rgba(37,43,52,0.92) !important;
}
body.steel-theme [class*="bg-white"] {
  background: var(--st-surface) !important;
}

/* Text colors inside panels */
body.steel-theme [class*="text-blue-600"],
body.steel-theme [class*="text-blue-700"],
body.steel-theme [class*="text-sky-700"],
body.steel-theme [class*="text-sky-600"] {
  color: var(--st-accent-hover) !important;
}
body.steel-theme [class*="text-slate-600"],
body.steel-theme [class*="text-slate-700"] {
  color: var(--st-text) !important;
}
body.steel-theme [class*="text-slate-500"],
body.steel-theme [class*="text-slate-400"] {
  color: var(--st-text-dim) !important;
}
body.steel-theme [class*="text-slate-900"],
body.steel-theme [class*="text-slate-800"] {
  color: var(--st-highlight) !important;
}

/* ─── Tabs (Radix UI data-state) ─────────────────────────────────────────── */
/* TabsList container */
body.steel-theme [role="tablist"],
body.steel-theme [class*="bg-sky-100"][class*="border-sky-200"],
body.steel-theme [class*="grid-cols-"][class*="bg-sky-"] {
  background: var(--st-surface3) !important;
  border-color: var(--st-border) !important;
}

/* Inactive tab */
body.steel-theme [role="tab"],
body.steel-theme [data-state="inactive"][role="tab"] {
  color: var(--st-text-dim) !important;
  background: transparent !important;
}
body.steel-theme [role="tab"]:hover {
  color: var(--st-accent-hover) !important;
  background: rgba(122,147,168,0.1) !important;
}

/* Active tab — was blue-600 */
body.steel-theme [data-state="active"][role="tab"],
body.steel-theme [class*="data-[state=active]:bg-blue-600"],
body.steel-theme [class*="data-[state=active]:text-white"] {
  background: var(--st-surface) !important;
  color: var(--st-highlight) !important;
  border-color: var(--st-border2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* TabsContent */
body.steel-theme [role="tabpanel"] { color: var(--st-text) !important; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* Primary action buttons (bg-blue-600) */
body.steel-theme button[class*="bg-blue-600"],
body.steel-theme button[class*="bg-blue-500"] {
  background: var(--st-surface3) !important;
  border-color: var(--st-border2) !important;
  color: var(--st-highlight) !important;
}
body.steel-theme button[class*="bg-blue-600"]:hover,
body.steel-theme button[class*="bg-blue-500"]:hover {
  background: rgba(122,147,168,0.22) !important;
  border-color: var(--st-accent) !important;
}

/* Outline / ghost buttons */
body.steel-theme button[class*="bg-white"][class*="border"],
body.steel-theme button[class*="border-slate-300"],
body.steel-theme button[class*="border-blue-300"] {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}
body.steel-theme button[class*="bg-white"]:hover,
body.steel-theme button[class*="border-slate-300"]:hover {
  background: rgba(122,147,168,0.12) !important;
  border-color: var(--st-accent) !important;
  color: var(--st-highlight) !important;
}

/* Selected state (bg-blue-100 border-blue-400) */
body.steel-theme [class*="bg-blue-100"][class*="border-blue-400"] {
  background: rgba(122,147,168,0.2) !important;
  border-color: var(--st-accent) !important;
  color: var(--st-highlight) !important;
}

/* Play/Pause control button */
body.steel-theme [class*="bg-white border-blue-300"] {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
}

/* ─── Footer / Bottom bar ────────────────────────────────────────────────── */
body.steel-theme [class*="bg-slate-100"][class*="border-t"],
body.steel-theme [class*="bg-slate-100"][class*="border-slate-300"] {
  background: var(--st-surface) !important;
  border-color: var(--st-border) !important;
}

/* Stats cards in footer */
body.steel-theme [class*="bg-sky-50 rounded border"] {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
}

/* ─── Viewport floating panels (VIEW/ZONE menus, Chat) ───────────────────── */
/* VIEWPORT_MENU_PANEL_SHELL_CLASS: bg-white/85 */
body.steel-theme [class*="bg-white/85"],
body.steel-theme [class*="bg-white\/85"] {
  background: rgba(28,33,41,0.96) !important;
  border-color: var(--st-border) !important;
}
/* Panel header: bg-white/60, bg-white/80 */
body.steel-theme [class*="bg-white/60"],
body.steel-theme [class*="bg-white\/60"] {
  background: rgba(37,43,52,0.92) !important;
  border-color: rgba(53,64,77,0.7) !important;
}
body.steel-theme [class*="border-white/40"],
body.steel-theme [class*="border-white\/40"] {
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="border-white/50"],
body.steel-theme [class*="border-white\/50"] {
  border-color: var(--st-border) !important;
}

/* FLOATING_GLASS_FRAME_CLASS: border-black/80, bg-white/80 */
body.steel-theme [class*="border-black/80"],
body.steel-theme [class*="border-black\/80"] {
  border-color: var(--st-border2) !important;
}

/* ─── Chat Widget ─────────────────────────────────────────────────────────── */
/* Chat panel shell */
body.steel-theme [class*="FLOATING_GLASS_FRAME"],
body.steel-theme .chat-widget-panel,
body.steel-theme [class*="rounded-md border border-black"] {
  background: rgba(25,29,34,0.97) !important;
  border-color: var(--st-border2) !important;
}

/* Chat messages area */
body.steel-theme [class*="custom-scrollbar-light"],
body.steel-theme [class*="overflow-y-auto"] {
  scrollbar-color: var(--st-accent) var(--st-bg2);
}

/* Bot message bubble */
body.steel-theme [class*="bg-blue-50/80"],
body.steel-theme [class*="bg-blue-50\/80"] {
  background: rgba(37,43,52,0.95) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}
/* User message bubble */
body.steel-theme [class*="bg-blue-500/90"],
body.steel-theme [class*="bg-blue-500\/90"] {
  background: rgba(63,77,92,0.95) !important;
}

/* System message (bg-white/80) */
body.steel-theme [class*="bg-white/80"][class*="border-slate-200"] {
  background: rgba(30,34,41,0.95) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

/* Chat input area */
body.steel-theme [class*="bg-slate-50/90"],
body.steel-theme [class*="bg-slate-50\/90"] {
  background: rgba(22,27,33,0.96) !important;
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="border-slate-200/70"],
body.steel-theme [class*="border-slate-200\/70"] {
  border-color: var(--st-border) !important;
}

/* Prompt card */
body.steel-theme [class*="bg-gradient-to-b from-blue-50"] {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
}
body.steel-theme [class*="text-blue-700/90"],
body.steel-theme [class*="text-blue-700\/90"] {
  color: var(--st-accent) !important;
}

/* Suggestion chips */
body.steel-theme [class*="border-blue-400/55"],
body.steel-theme [class*="border-blue-400\/55"] {
  border-color: var(--st-border2) !important;
  background: rgba(37,43,52,0.85) !important;
  color: var(--st-text) !important;
}
body.steel-theme [class*="border-blue-400/55"]:hover,
body.steel-theme [class*="border-blue-400\/55"]:hover {
  background: rgba(63,77,92,0.9) !important;
  border-color: var(--st-accent) !important;
  color: var(--st-highlight) !important;
}

/* Chat text input */
body.steel-theme [class*="bg-white/80"][class*="border-white/60"] {
  background: rgba(28,33,41,0.97) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}
body.steel-theme [class*="placeholder:text-slate-400"]::placeholder {
  color: var(--st-text-muted) !important;
}
body.steel-theme [class*="focus:ring-blue-400"] {
  --tw-ring-color: rgba(122,147,168,0.35) !important;
}

/* Chat send button */
body.steel-theme [class*="bg-blue-500/90"][class*="border-blue-400/70"] {
  background: var(--st-surface3) !important;
  border-color: var(--st-border2) !important;
  color: var(--st-highlight) !important;
}
body.steel-theme [class*="bg-blue-500/90"][class*="border-blue-400/70"]:hover {
  background: rgba(63,77,92,0.95) !important;
  border-color: var(--st-accent) !important;
}

/* Chat bubble button */
body.steel-theme [class*="from-blue-400 to-blue-600"] {
  background: linear-gradient(135deg, var(--st-surface3) 0%, var(--st-border2) 100%) !important;
  border-color: var(--st-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* ─── Inputs / Selects ────────────────────────────────────────────────────── */
body.steel-theme input[type="text"],
body.steel-theme input[type="number"],
body.steel-theme input[type="search"],
body.steel-theme textarea,
body.steel-theme select {
  background: var(--st-surface2) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}
body.steel-theme input:focus,
body.steel-theme textarea:focus,
body.steel-theme select:focus {
  border-color: var(--st-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--st-accent-glow) !important;
}
body.steel-theme input[type="range"] {
  accent-color: var(--st-accent) !important;
}

/* ─── Sliders (Radix) ────────────────────────────────────────────────────── */
body.steel-theme [class*="SliderTrack"],
body.steel-theme [role="slider"][class*="bg-"] {
  background: var(--st-surface3) !important;
}
body.steel-theme [class*="SliderRange"] {
  background: var(--st-accent) !important;
}

/* ─── Scrollbars ─────────────────────────────────────────────────────────── */
/* Global override — all scrollbars on page */
body.steel-theme *::-webkit-scrollbar { width: 6px; height: 6px; }
body.steel-theme *::-webkit-scrollbar-track { background: var(--st-bg2); }
body.steel-theme *::-webkit-scrollbar-thumb {
  background: var(--st-border2);
  border-radius: 3px;
}
body.steel-theme *::-webkit-scrollbar-thumb:hover { background: var(--st-accent); }

/* Firefox */
body.steel-theme * { scrollbar-color: var(--st-border2) var(--st-bg2); scrollbar-width: thin; }

/* custom-scrollbar and custom-scrollbar-light override */
body.steel-theme .custom-scrollbar::-webkit-scrollbar-thumb,
body.steel-theme .custom-scrollbar-light::-webkit-scrollbar-thumb {
  background: var(--st-border2) !important;
  border: none !important;
}
body.steel-theme .custom-scrollbar::-webkit-scrollbar-thumb:hover,
body.steel-theme .custom-scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: var(--st-accent) !important;
}
body.steel-theme .custom-scrollbar::-webkit-scrollbar-track,
body.steel-theme .custom-scrollbar-light::-webkit-scrollbar-track {
  background: var(--st-bg2) !important;
}
body.steel-theme .custom-scrollbar,
body.steel-theme .custom-scrollbar-light {
  scrollbar-color: var(--st-border2) var(--st-bg2) !important;
}

/* ─── Viewport toolbar buttons (viewportMenuUi) ──────────────────────────── */
/* bg-blue-500/90 (active) → dark steel active */
body.steel-theme [class*="bg-blue-500/90"][class*="border-blue-400/70"][class*="text-white"]:not([class*="chat"]) {
  background: rgba(50,60,72,0.95) !important;
  border-color: var(--st-border2) !important;
  color: var(--st-highlight) !important;
}
/* bg-white/80 (inactive) */
body.steel-theme [class*="bg-white/80"][class*="border-white/60"][class*="text-slate-600"] {
  background: rgba(28,33,41,0.88) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}
body.steel-theme [class*="bg-white/80"][class*="border-white/60"]:hover {
  background: rgba(42,50,62,0.92) !important;
  color: var(--st-highlight) !important;
}

/* ─── Main / Home page ───────────────────────────────────────────────────── */
body.steel-theme main,
body.steel-theme [id="root"] > div > main,
body.steel-theme .page-main {
  background: var(--st-bg) !important;
  color: var(--st-text) !important;
}

/* Section / card backgrounds on landing pages */
body.steel-theme section,
body.steel-theme article {
  background: transparent !important;
}
body.steel-theme [class*="bg-white"][class*="rounded"] {
  background: var(--st-surface) !important;
}
body.steel-theme [class*="bg-slate-50"],
body.steel-theme [class*="bg-gray-50"] {
  background: var(--st-bg2) !important;
}
body.steel-theme [class*="bg-slate-100"] {
  background: var(--st-surface) !important;
}
body.steel-theme [class*="bg-slate-200"],
body.steel-theme [class*="bg-gray-100"] {
  background: var(--st-surface2) !important;
}
body.steel-theme [class*="border-slate-200"],
body.steel-theme [class*="border-gray-200"] {
  border-color: var(--st-border) !important;
}

/* Landing hero gradient backgrounds */
body.steel-theme [class*="from-sky-"],
body.steel-theme [class*="from-blue-"],
body.steel-theme [class*="bg-gradient-to-"][class*="from-sky"] {
  background: linear-gradient(135deg, #111418 0%, #1a1f28 100%) !important;
}

/* ─── LiDAR Simulator grid backgrounds ───────────────────────────────────── */
/* 4-viewport grid splitter line (bg-blue-600 gap) */
body.steel-theme [class*="bg-blue-600"][class*="grid"] {
  background: var(--st-bg) !important;
}
/* Viewport label chips */
body.steel-theme [class*="bg-white/85"][class*="backdrop-blur"] {
  background: rgba(25,29,34,0.88) !important;
  border-color: var(--st-border) !important;
  color: var(--st-text) !important;
}

/* ─── Shadows / Cards ────────────────────────────────────────────────────── */
body.steel-theme [class*="shadow-md"],
body.steel-theme [class*="shadow-lg"],
body.steel-theme [class*="shadow-xl"] {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
body.steel-theme [class*="shadow-sm"] {
  box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}