/* ==========================================================================
   DataScope Enterprise - Windows 10 Fluent & Azure Metro Design System
   STRICT REQUIREMENT: 100% Windows 10 Enterprise UI. ZERO ROUNDED CORNERS (0px radius).
   ========================================================================== */

/* Absolute enforcement of zero rounded corners across ALL elements */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --header-bg: #181818;
  --cmd-bg: #1e1e1e;
  --pane: #1b1b1b;
  --card: #242424;
  --card-hover: #2d2d2d;
  --card-active: #363636;
  --border: #333333;
  --border-strong: #4a4a4a;
  --border-input: #606060;
  --text: #f5f5f5;
  --text-secondary: #cccccc;
  --text-muted: #8e8e8e;
  --accent: #0078d7;
  --accent-hover: #106ebe;
  --accent-active: #005a9e;
  --accent-light: #2899eb;
  --accent-glow: rgba(0, 120, 215, 0.25);
  --success: #107c41;
  --success-light: #10893e;
  --warning: #ff8c00;
  --warning-bg: #2d2012;
  --danger: #e81123;
  --danger-bg: #321616;
  --info: #00b7c3;
  --sidebar-w: 240px;
  --statusbar-bg: #0078d7;
  --statusbar-text: #ffffff;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-text: #b5b5b5;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f3;
  --header-bg: #ffffff;
  --cmd-bg: #f7f7f7;
  --pane: #ebebeb;
  --card: #ffffff;
  --card-hover: #f5f5f5;
  --card-active: #eaeaea;
  --border: #d4d4d4;
  --border-strong: #ababab;
  --border-input: #888888;
  --text: #111111;
  --text-secondary: #333333;
  --text-muted: #666666;
  --accent: #0078d7;
  --accent-hover: #0063b1;
  --accent-active: #004e8c;
  --accent-light: #106ebe;
  --accent-glow: rgba(0, 120, 215, 0.15);
  --success: #107c41;
  --success-light: #10893e;
  --warning: #d83b01;
  --warning-bg: #fff4ce;
  --danger: #a80000;
  --danger-bg: #fde7e9;
  --info: #0078d7;
  --statusbar-bg: #0078d7;
  --statusbar-text: #ffffff;
  --chart-grid: rgba(0, 0, 0, 0.08);
  --chart-text: #555555;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 'Segoe UI', -apple-system, BlinkMacSystemFont, Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: transparent;
  border: 0;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 1px;
}

a {
  color: inherit;
  text-decoration: none;
}

.mono {
  font-family: Consolas, 'Cascadia Code', monospace;
}

.mdl {
  font-family: 'Segoe MDL2 Assets', 'Segoe UI Symbol', sans-serif;
  font-weight: normal !important;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  speak: none;
  vertical-align: middle;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   1. Enterprise Global Header (DataScope Cloud Architecture)
   ========================================================================== */
.enterprise-global-header {
  height: 48px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 100;
  user-select: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-toggle-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-secondary);
  transition: background 0.08s ease, color 0.08s ease;
}

.nav-toggle-btn:hover {
  background: var(--card-hover);
  color: var(--text);
}

.enterprise-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  white-space: nowrap;
}

.brand-logo-icon {
  font-size: 20px;
  color: var(--accent-light);
}

.brand-name {
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand-service-tag {
  background: rgba(0, 120, 215, 0.18);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tenant-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.08s ease;
}

.tenant-selector:hover {
  background: var(--card-hover);
  color: var(--text);
}

.tenant-selector .chevron {
  font-size: 9px;
  color: var(--text-muted);
}

/* Universal Search */
.header-center {
  flex: 1;
  max-width: 580px;
}

.global-search-container {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border-input);
  height: 32px;
  padding: 0 10px;
  gap: 8px;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.global-search-container:focus-within {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent-light);
}

.search-icon {
  color: var(--text-muted);
  font-size: 14px;
}

.global-search-container input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
  color: var(--text);
}

.search-shortcut {
  font-size: 10px;
  color: var(--text-muted);
}

.search-shortcut kbd {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1px 4px;
  font-family: inherit;
}

/* Header Utilities */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cloud-health-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(16, 124, 65, 0.12);
  border: 1px solid var(--success);
  margin-right: 4px;
}

.cluster-pulse {
  width: 7px;
  height: 7px;
  background: var(--success);
  display: inline-block;
}

.header-tool-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 15px;
  position: relative;
  transition: background 0.08s ease, color 0.08s ease;
}

.header-tool-btn:hover {
  background: var(--card-hover);
  color: var(--text);
}

.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  line-height: 1;
}

.user-profile-badge {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
  border: 1px solid var(--accent-light);
  cursor: pointer;
}

.user-profile-badge:hover {
  background: var(--accent-hover);
}

.menu-anchor-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.win-flyout-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 310px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: none;
  padding: 0;
  user-select: none;
}

.win-flyout-menu.open {
  display: block;
}

/* User Profile Flyout */
.flyout-user-card {
  padding: 16px;
  background: var(--cmd-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.flyout-avatar-box {
  width: 42px;
  height: 42px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--accent-light);
  flex-shrink: 0;
}

.flyout-user-meta {
  display: flex;
  flex-direction: column;
}

.flyout-user-meta strong {
  font-size: 13px;
  color: var(--text);
}

.flyout-user-meta span {
  font-size: 11px;
  color: var(--text-muted);
}

.flyout-role-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  background: rgba(0, 120, 215, 0.2);
  color: var(--accent-light);
  border: 1px solid var(--accent);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
}

.flyout-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.flyout-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.flyout-kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 3px 0;
  color: var(--text-secondary);
}

.flyout-kpi-row strong {
  color: var(--text);
}

.flyout-actions-list {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

.flyout-btn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
}

.flyout-btn-item:hover {
  background: var(--card-hover);
  color: var(--text);
}

.flyout-btn-item .mdl {
  font-size: 15px;
  color: var(--accent-light);
}

.flyout-footer-note {
  padding: 8px 16px;
  background: var(--cmd-bg);
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

/* Notifications Flyout */
.notif-flyout-menu {
  min-width: 320px;
}

.flyout-header-row {
  padding: 12px 16px;
  background: var(--cmd-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.flyout-badge-chip {
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.notif-item:last-child {
  border-bottom: 0;
}

.notif-icon {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.notif-icon.ok { color: #57bc82; }
.notif-icon.warn { color: var(--warning); }
.notif-icon.info { color: var(--accent-light); }

.notif-item strong {
  display: block;
  font-size: 12px;
  color: var(--text);
}

.notif-item p {
  margin: 3px 0 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.notif-item small {
  font-size: 10px;
  color: var(--text-muted);
}

/* Master Plan Architecture & UFO Preset */
.master-preset-card {
  border-left: 3px solid #57bc82 !important;
  background: rgba(16, 124, 65, 0.08) !important;
}

.ufo-badge {
  background: #107c41 !important;
  color: #fff !important;
}

.storage-node {
  border-top: 3px solid #00b7c3 !important;
}

.status-storage {
  background: rgba(0, 183, 195, 0.2) !important;
  color: #00b7c3 !important;
}

.architecture-diagram-wrap {
  padding: 16px 20px;
}

.arch-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-light);
  margin-bottom: 12px;
}

.delivery-title {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.cicd-flow-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
}

.cicd-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex: 1;
  min-width: 130px;
}

.cicd-icon {
  font-size: 20px;
  color: var(--accent-light);
}

.cicd-step strong {
  font-size: 12px;
  color: var(--text);
}

.cicd-step small {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
}

.cicd-arrow {
  color: var(--accent-light);
  font-size: 16px;
}

.tf-step strong {
  color: #00b7c3;
}

/* ==========================================================================
   2. Enterprise Command Ribbon & Breadcrumbs
   ========================================================================== */
.enterprise-command-bar {
  min-height: 40px;
  background: var(--cmd-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  font-size: 12px;
}

.command-bar-left, .command-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.enterprise-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}

.b-sep {
  opacity: 0.5;
}

.b-current {
  color: var(--text);
  font-weight: 600;
}

.cmd-divider {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 4px;
}

.cmd-pill-link, .cmd-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  transition: background 0.08s ease, border-color 0.08s ease, color 0.08s ease;
}

.cmd-pill-link:hover, .cmd-pill-btn:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.cmd-pill-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.cmd-pill-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.cmd-pill-btn.primary:hover {
  background: var(--accent-hover);
}

.env-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
}

/* ==========================================================================
   3. Application Shell & Navigation SplitView
   ========================================================================== */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.side-pane {
  width: var(--sidebar-w);
  background: var(--pane);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  transition: width 0.15s ease;
}

.side-pane.collapsed {
  width: 52px;
}

.side-pane.collapsed .nav-text,
.side-pane.collapsed .nav-header-text,
.side-pane.collapsed .nav-badge,
.side-pane.collapsed .sidebar-footnote {
  display: none;
}

.side-pane.collapsed .nav-link {
  padding: 0;
  justify-content: center;
}

.side-pane.collapsed .nav-header,
.side-pane.collapsed .nav-section-title {
  padding: 8px 0;
  justify-content: center;
}

.nav-header, .nav-section-title {
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.nav-section-title {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.nav-link {
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 38px;
  width: 100%;
  text-align: left;
  padding: 0 16px;
  font-size: 13px;
  transition: background 0.08s ease, color 0.08s ease;
  position: relative;
}

.nav-link .mdl {
  font-size: 17px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

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

.nav-link:hover {
  background: var(--card-hover);
  color: var(--text);
}

.nav-link.selected, .nav-link.selected-section {
  background: var(--card);
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.nav-badge {
  font-size: 10px;
  padding: 2px 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.nav-badge.warn {
  background: var(--warning);
  color: #000;
}

.nav-badge.info {
  background: var(--accent);
  color: #fff;
}

.nav-bottom {
  margin-top: auto;
  padding-top: 10px;
}

.nav-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0 10px;
}

.sidebar-footnote {
  color: var(--text-muted);
  font-size: 11px;
  padding: 16px 18px 6px;
  line-height: 1.6;
}

/* ==========================================================================
   4. Workspace & Layout
   ========================================================================== */
.workspace {
  min-width: 0;
  flex: 1;
  padding: 28px 36px 60px;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

.page-heading {
  margin-bottom: 24px;
}

.page-heading h1 {
  font-size: 32px;
  font-weight: 300;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.page-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.page-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dataset-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.dataset-name .mdl {
  color: var(--accent-light);
  font-size: 18px;
}

.report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Windows 10 Flat Buttons */
.win-button {
  border: 1px solid var(--border-input);
  background: var(--card);
  color: var(--text);
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.08s ease, border-color 0.08s ease;
  user-select: none;
}

.win-button:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.win-button:active {
  background: var(--card-active);
}

.win-button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.win-button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.win-button.primary:active {
  background: var(--accent-active);
  border-color: var(--accent-active);
}

.win-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.win-button .mdl {
  font-size: 15px;
}

/* Surface Panel */
.surface-panel {
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--cmd-bg);
}

.panel-heading > .mdl {
  font-size: 20px;
  color: var(--accent-light);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.panel-heading h2 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
}

.panel-heading span:not(.mdl) {
  color: var(--text-muted);
  font-size: 11px;
  display: block;
  margin-top: 2px;
}

.panel-status-chip {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(0, 120, 215, 0.15);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  letter-spacing: 0.05em;
}

.stage-chip {
  background: rgba(16, 124, 65, 0.15);
  border-color: var(--success);
  color: #57bc82;
}

.panel-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.padded-panel {
  padding: 22px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.section-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.section-title > span {
  font-size: 12px;
  color: var(--text-muted);
}

.report-section[hidden] {
  display: none !important;
}

/* ==========================================================================
   5. Show-Worthy Enterprise Homepage Elements
   ========================================================================== */
/* ==========================================================================
   Windows 10 Fluent 1 (Project Neon) Design System - Vibrant, Colorful & Spacious
   Five Pillars: Light (Reveal), Depth (Z-Layers), Motion, Material (Acrylic), Scale
   ========================================================================== */
.enterprise-hero-banner {
  position: relative;
  background: radial-gradient(circle at 15% 20%, rgba(0, 120, 215, 0.35) 0%, transparent 50%),
              radial-gradient(circle at 85% 30%, rgba(136, 23, 152, 0.32) 0%, transparent 55%),
              radial-gradient(circle at 50% 85%, rgba(0, 183, 195, 0.22) 0%, transparent 60%),
              linear-gradient(135deg, rgba(20, 20, 28, 0.96) 0%, rgba(10, 10, 14, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 4px solid #0078d7;
  padding: 48px 52px;
  margin-bottom: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 120, 215, 0.15);
  overflow: hidden;
  backdrop-filter: blur(28px) saturate(180%);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-top-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.win-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 124, 65, 0.25);
  border: 1px solid #107c41;
  color: #70df7b;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(16, 124, 65, 0.3);
}

.live-pulse {
  width: 8px;
  height: 8px;
  background: #70df7b;
  border-radius: 0 !important;
  display: inline-block;
  box-shadow: 0 0 8px #70df7b;
  animation: live-pulse-anim 2s infinite ease-in-out;
}

@keyframes live-pulse-anim {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #70df7b; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.hero-lab-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #00b7c3;
  background: rgba(0, 183, 195, 0.15);
  border: 1px solid rgba(0, 183, 195, 0.35);
  padding: 5px 12px;
}

.hero-headline {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.hero-headline-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #60cdff 40%, #b146c2 85%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle {
  margin: 0 0 28px;
  font-size: 16px;
  color: #d0d4dc;
  max-width: 780px;
  line-height: 1.65;
}

.hero-cta-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-primary-btn {
  padding: 12px 28px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: #0078d7 !important;
  border: 1px solid #60cdff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px rgba(0, 120, 215, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease !important;
}

.hero-primary-btn:hover {
  transform: translateY(-2px);
  background: #0086f0 !important;
  box-shadow: 0 8px 32px rgba(0, 120, 215, 0.75);
}

.hero-secondary-btn {
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: rgba(136, 23, 152, 0.25) !important;
  border: 1px solid #b146c2 !important;
  color: #e3a6ff !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(136, 23, 152, 0.35);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease !important;
}

.hero-secondary-btn:hover {
  transform: translateY(-2px);
  background: #881798 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(136, 23, 152, 0.65);
}

.hero-ghost-btn {
  padding: 12px 22px !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  transition: border-color 0.12s ease, background 0.12s ease !important;
}

.hero-ghost-btn:hover {
  border-color: #00b7c3 !important;
  background: rgba(0, 183, 195, 0.15) !important;
  color: #ffffff !important;
}

/* Fluent 1 Acrylic Spec Strip */
.hero-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.metric-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.metric-tile:nth-child(1) { border-left-color: #0078d7; }
.metric-tile:nth-child(2) { border-left-color: #00b7c3; }
.metric-tile:nth-child(3) { border-left-color: #107c41; }
.metric-tile:nth-child(4) { border-left-color: #881798; }
.metric-tile:nth-child(5) { border-left-color: #ffb900; }

.metric-tile:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.metric-val {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.metric-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #a0a6b4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   Vibrant Fluent 1 Metro Feature Tiles (Project Neon 4-Card Hero Grid)
   ========================================================================== */
.fluent-neon-showcase {
  margin-bottom: 36px;
}

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

@media (max-width: 1100px) {
  .fluent-neon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .fluent-neon-grid {
    grid-template-columns: 1fr;
  }
}

.neon-tile {
  position: relative;
  background: rgba(26, 26, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 !important;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.neon-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tile-color, #0078d7);
  box-shadow: 0 0 12px var(--tile-color, #0078d7);
}

.neon-tile:hover {
  transform: translateY(-4px);
  border-color: var(--tile-color, #0078d7);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 20px var(--tile-glow, rgba(0, 120, 215, 0.25));
}

.neon-tile.tile-blue   { --tile-color: #0078d7; --tile-glow: rgba(0, 120, 215, 0.35); }
.neon-tile.tile-cyan   { --tile-color: #00b7c3; --tile-glow: rgba(0, 183, 195, 0.35); }
.neon-tile.tile-green  { --tile-color: #107c41; --tile-glow: rgba(16, 124, 65, 0.35); }
.neon-tile.tile-purple { --tile-color: #881798; --tile-glow: rgba(136, 23, 152, 0.35); }

.neon-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.neon-tile-icon {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--tile-color, #ffffff);
}

.neon-tile-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tile-color, #ffffff);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
}

.neon-tile h3 {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.neon-tile p {
  font-size: 13px;
  color: #b0b6c4;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.neon-tile-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.neon-pill {
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d8dce6;
  padding: 4px 8px;
}

.neon-pill strong {
  color: var(--tile-color, #ffffff);
}

/* ==========================================================================
   Vibrant Ingestion & Preset Cartridges (Spacious Windows 10 Design)
   ========================================================================== */
.enterprise-ingestion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 960px) {
  .enterprise-ingestion-grid {
    grid-template-columns: 1fr;
  }
}

.enterprise-drop-target {
  background: rgba(18, 18, 24, 0.7) !important;
  background-image: radial-gradient(rgba(0, 120, 215, 0.18) 1.5px, transparent 1.5px) !important;
  background-size: 20px 20px !important;
  border: 2px dashed rgba(0, 120, 215, 0.45) !important;
  padding: 44px 28px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.enterprise-drop-target:hover {
  border-color: #00b7c3 !important;
  background-color: rgba(0, 120, 215, 0.08) !important;
  box-shadow: 0 0 32px rgba(0, 120, 215, 0.25) !important;
}

.upload-glyph {
  font-size: 42px;
  color: #00b7c3;
  margin-bottom: 12px;
  display: inline-block;
}

.enterprise-drop-target strong {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 4px;
}

.enterprise-drop-target span#upload-caption {
  font-size: 13px;
  color: #a0a6b4;
  margin-bottom: 12px;
}

.drop-meta {
  font-size: 11px;
  color: #00b7c3;
  background: rgba(0, 183, 195, 0.1);
  border: 1px solid rgba(0, 183, 195, 0.25);
  padding: 4px 10px;
}

/* Vibrant Cartridge Presets */
.presets-panel {
  background: rgba(22, 22, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid #b146c2;
  backdrop-filter: blur(20px);
}

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

.preset-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--border-strong);
  padding: 14px 16px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.preset-card:hover {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.06);
}

.preset-card.cartridge-ufo   { border-left-color: #881798; }
.preset-card.cartridge-auto  { border-left-color: #0078d7; }
.preset-card.cartridge-risk  { border-left-color: #ffb900; }
.preset-card.cartridge-churn { border-left-color: #107c41; }

.preset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.preset-top strong {
  font-size: 14px;
  color: #ffffff;
}

.preset-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.ufo-badge   { background: rgba(136, 23, 152, 0.3); border: 1px solid #881798; color: #e3a6ff; }
.auto-badge  { background: rgba(0, 120, 215, 0.3); border: 1px solid #0078d7; color: #60cdff; }
.risk-badge  { background: rgba(255, 185, 0, 0.25); border: 1px solid #ffb900; color: #ffdc7a; }
.churn-badge { background: rgba(16, 124, 65, 0.3); border: 1px solid #107c41; color: #70df7b; }

.preset-desc {
  font-size: 12px;
  color: #b0b6c4;
  margin: 0 0 10px;
  line-height: 1.45;
}

.preset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.hero-lab-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.hero-headline {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  color: var(--text);
}

.hero-headline-gradient {
  background: linear-gradient(135deg, #ffffff 10%, #00b7c3 50%, #0078d7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 820px;
  line-height: 1.6;
}

.hero-cta-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-primary-btn {
  padding: 11px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 120, 215, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.hero-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 120, 215, 0.6);
}

.hero-secondary-btn {
  padding: 11px 20px !important;
  font-size: 13px !important;
  background: var(--card) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-light) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: background 0.1s ease, color 0.1s ease !important;
}

.hero-secondary-btn:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.hero-ghost-btn {
  padding: 11px 18px !important;
  font-size: 13px !important;
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  transition: border-color 0.1s ease, color 0.1s ease !important;
}

.hero-ghost-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Apple-Style Sharp Metrics Strip */
.hero-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.metric-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.metric-tile:hover {
  background: rgba(0, 120, 215, 0.08);
  border-color: var(--accent);
}

.metric-val {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.metric-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Fluent Metro Feature Grid (Strict Windows 10 Geometry) */
.bento-section {
  margin-bottom: 32px;
}

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

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

.bento-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 0 !important;
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.bento-card:nth-child(1) {
  border-top-color: #0078d7; /* Windows 10 Cobalt */
}

.bento-card:nth-child(2) {
  border-top-color: #00b7c3; /* Windows 10 Teal / Cyan */
}

.bento-card:nth-child(3) {
  border-top-color: #107c41; /* Windows 10 Emerald */
}

.bento-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.bento-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 8px;
}

.bento-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bento-card h3 .mdl {
  color: var(--accent-light);
  font-size: 18px;
}

.bento-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}

.bento-interactive-preview {
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 11px;
}

.bento-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bento-pill {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 3px 8px;
  font-size: 10px;
  color: var(--text-secondary);
}

.bento-pill strong {
  color: var(--text);
}

/* Enhanced Ingestion Dotted Pattern */
.enterprise-drop-target {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.enterprise-drop-target:hover {
  border-color: var(--accent) !important;
  background-color: rgba(0, 120, 215, 0.05) !important;
}

/* Enterprise Ingestion Grid */
.enterprise-ingestion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}

.ingestion-body {
  padding: 20px;
}

.enterprise-drop-target {
  min-height: 200px;
  border: 1px dashed var(--border-input);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 24px;
  text-align: center;
  transition: background 0.1s ease, border-color 0.1s ease;
  margin-bottom: 16px;
}

.enterprise-drop-target:hover, .enterprise-drop-target.dragover {
  border-color: var(--accent-light);
  background: rgba(0, 120, 215, 0.08);
}

.upload-glyph {
  font-size: 40px;
  color: var(--accent-light);
  margin-bottom: 4px;
}

.enterprise-drop-target strong {
  font-size: 16px;
  font-weight: 600;
}

.enterprise-drop-target > span:not(.upload-glyph) {
  color: var(--text-muted);
  font-size: 12px;
}

.drop-meta {
  font-size: 11px;
  color: var(--text-muted) !important;
  padding-top: 6px;
}

.enterprise-drop-target input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}

.ingest-controls-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.control-unit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-unit label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.win-select-sm {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-input);
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
}

.win-select-sm:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.enterprise-upload-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.upload-status-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-status-icon {
  color: var(--accent-light);
  font-size: 16px;
}

.enterprise-submit-btn {
  min-height: 38px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
}

/* Demo Presets Panel */
.presets-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.presets-intro {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.preset-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  transition: background 0.08s ease, border-color 0.08s ease;
}

.preset-card:hover {
  background: var(--cmd-bg);
  border-color: var(--border-strong);
}

.preset-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.preset-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  color: #fff;
}

.auto-badge { background: #0078d7; }
.churn-badge { background: #8764b8; }
.risk-badge { background: #d83b01; }

.preset-top strong {
  font-size: 12px;
}

.preset-desc {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.preset-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.preset-meta .win-button {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 11px;
}

/* ==========================================================================
   6. Architecture & Flowchart Visualizer
   ========================================================================== */
.architecture-panel {
  margin-bottom: 24px;
}

.architecture-flow-container {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-x: auto;
}

.arch-node {
  flex: 1;
  min-width: 170px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.arch-node.active-node {
  border-top: 3px solid var(--accent);
}

.arch-node.planned-node {
  border-top: 3px solid var(--border-strong);
  opacity: 0.85;
}

.node-header {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.node-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.node-status {
  display: inline-block;
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  margin-bottom: 8px;
}

.status-active {
  background: rgba(16, 124, 65, 0.2);
  color: #57bc82;
}

.status-planned {
  background: rgba(255, 140, 0, 0.2);
  color: var(--warning);
}

.arch-node p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.arch-arrow {
  font-size: 18px;
  color: var(--accent-light);
  flex-shrink: 0;
}

/* ==========================================================================
   7. Enterprise SLA Standards & Audit Log
   ========================================================================== */
.sla-standards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.sla-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 18px;
  position: relative;
}

.sla-accent-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.sla-accent-top.blue { background: var(--accent); }
.sla-accent-top.green { background: var(--success); }
.sla-accent-top.orange { background: var(--warning); }
.sla-accent-top.teal { background: #00b7c3; }

.sla-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sla-target {
  font-size: 26px;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.sla-card p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.audit-table td {
  font-size: 12px;
}

.env-badge {
  font-size: 10px;
  padding: 2px 6px;
}

.env-badge.local {
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.grade-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  color: #fff;
}

.grade-a { background: var(--success); }
.grade-b { background: var(--accent); }
.grade-aplus { background: #10893e; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
}

.status-pill.ok {
  background: rgba(16, 124, 65, 0.15);
  color: #57bc82;
  border: 1px solid var(--success);
}

.table-action-btn {
  background: var(--cmd-bg);
  border: 1px solid var(--border-input);
  color: var(--text);
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}

.table-action-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Enterprise Capabilities Grid */
.enterprise-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}

.metro-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  position: relative;
  transition: background 0.08s ease, border-color 0.08s ease;
}

.metro-feature-card:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.feature-accent-strip {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.feature-icon-wrap {
  width: 32px;
  height: 32px;
  background: rgba(0, 120, 215, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.feature-icon-wrap .mdl {
  color: var(--accent-light);
  font-size: 18px;
}

.metro-feature-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.metro-feature-card p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   8. Metro Live Tiles (Report KPI Grid)
   ========================================================================== */
.metro-kpi-grid, .metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.metro-tile, .metric {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 136px;
  transition: border-color 0.1s ease, background 0.1s ease;
}

.metro-tile:hover, .metric:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.metro-tile-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}

.tile-blue .metro-tile-accent { background: var(--accent); }
.tile-teal .metro-tile-accent { background: #00b7c3; }
.tile-orange .metro-tile-accent { background: var(--warning); }
.tile-quality .metro-tile-accent { background: #57bc82; }

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tile-icon {
  font-size: 18px;
  color: var(--accent-light);
}

.tile-number {
  display: block;
  font-size: 36px;
  font-weight: 300;
  margin-top: 10px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metric-unit {
  font-size: 18px;
  color: var(--text-muted);
  padding-left: 2px;
  font-weight: 400;
}

.tile-footer {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tile-badge {
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}

.tile-badge.warn {
  border-color: var(--warning);
  color: var(--warning);
}

.tile-badge.ok {
  border-color: var(--success);
  color: var(--success-light);
}

.quality-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.grade-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.tile-progress {
  height: 4px;
  background: var(--border-strong);
  width: 60px;
  overflow: hidden;
}

.tile-progress-fill {
  height: 100%;
  background: var(--warning);
}

/* ==========================================================================
   9. Charts Row & Presentation
   ========================================================================== */
.charts-row-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.chart-panel {
  min-height: 280px;
}

.chart-box-container {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.chart-canvas-wrap {
  width: 170px;
  height: 170px;
  position: relative;
  flex-shrink: 0;
}

.chart-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.chart-center-val {
  display: block;
  font-size: 26px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chart-center-sub {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-weight: 600;
}

.chart-legend-custom {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
}

.legend-row:last-child {
  border-bottom: 0;
}

.legend-row span:not(.legend-box) {
  color: var(--text-secondary);
}

.legend-row strong {
  font-variant-numeric: tabular-nums;
}

.legend-box {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ==========================================================================
   10. Quality Summary & Insights
   ========================================================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 16px;
  margin-bottom: 20px;
}

.summary-row {
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-row > span {
  color: var(--text-secondary);
}

.summary-row > strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.insight-list {
  padding: 4px 18px 12px;
}

.insight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
}

.insight:last-child {
  border-bottom: 0;
}

.insight-icon {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.insight-icon.warning { color: var(--warning); }
.insight-icon.ok { color: var(--success); }
.insight-icon.info { color: var(--accent-light); }

.insight strong {
  font-size: 13px;
  font-weight: 600;
}

.insight p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   11. Data Quality Section & Missing Charts
   ========================================================================== */
.large-rate {
  font-size: 28px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
}

.progress-track-lg {
  height: 10px;
  background: var(--border-strong);
  overflow: hidden;
  margin-bottom: 24px;
}

.progress-track {
  height: 7px;
  background: var(--border-strong);
  overflow: hidden;
  flex: 1;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
}

.warn-fill {
  background: var(--warning);
}

.subheading {
  margin: 28px 0 6px !important;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.missing-chart-container {
  height: 220px;
  margin: 16px 0 24px;
  position: relative;
}

.missing-rows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.missing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}

.missing-col-info {
  width: 200px;
  max-width: 40%;
  display: flex;
  flex-direction: column;
}

.missing-col-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-col-info small {
  color: var(--text-muted);
}

.missing-val-badge {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--warning);
  font-weight: 600;
  width: 50px;
  text-align: right;
}

.good-info {
  margin-top: 15px;
  color: #57bc82;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 12px;
  background: rgba(87, 188, 130, 0.1);
  border-left: 3px solid #57bc82;
}

.formula-box {
  margin-top: 24px;
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
}

.formula-box .mdl {
  color: var(--accent-light);
  font-size: 18px;
  margin-top: 2px;
}

.formula-box strong {
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.formula-box p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   12. Tables & Column Explorer
   ========================================================================== */
.table-toolbar {
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--cmd-bg);
  flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.counter-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-pill-group {
  display: flex;
  gap: 4px;
}

.filter-pill {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--card);
  border: 1px solid var(--border-input);
  color: var(--text-secondary);
  transition: background 0.08s ease;
}

.filter-pill:hover {
  background: var(--card-hover);
  color: var(--text);
}

.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.table-toolbar input[type="search"],
.table-toolbar input[type="text"] {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-input);
  padding: 6px 10px;
  width: 240px;
  font-size: 12px;
}

.table-toolbar input:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.table-scroll {
  overflow-x: auto;
  width: 100%;
}

.data-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 750px;
  font-size: 12px;
}

.data-table th {
  color: var(--text);
  text-align: left;
  padding: 11px 14px;
  background: var(--cmd-bg);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.data-table td {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  color: var(--text-secondary);
  max-width: 260px;
  overflow-wrap: anywhere;
}

.data-table tbody tr:hover {
  background: var(--card-hover);
  color: var(--text);
}

.data-table .primary-cell {
  color: var(--text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-badge {
  font-size: 9px;
  padding: 2px 5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.key-badge {
  background: var(--accent);
  color: #ffffff;
}

.warn-badge {
  background: var(--warning);
  color: #000000;
}

.type-label {
  padding: 3px 8px;
  font-size: 11px;
  display: inline-block;
  background: rgba(0, 120, 215, 0.15);
  color: var(--accent-light);
  font-weight: 600;
}

.type-text {
  background: rgba(135, 100, 184, 0.15);
  color: #a782de;
}

.type-date\/time {
  background: rgba(16, 124, 65, 0.15);
  color: #57bc82;
}

.cell-percent {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.mini-track {
  height: 6px;
  background: var(--border-strong);
  width: 55px;
}

.mini-track > div {
  background: var(--accent-light);
  height: 100%;
}

.sample-cell {
  color: var(--text-muted) !important;
  font-family: Consolas, monospace;
  font-size: 11px;
}

.row-counter {
  color: var(--text-muted) !important;
  font-variant-numeric: tabular-nums;
  width: 40px;
}

/* ==========================================================================
   13. Distributions & Statistical Charts
   ========================================================================== */
.dist-interactive-panel {
  margin-bottom: 24px;
}

.dist-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selector-label {
  font-size: 12px;
  color: var(--text-muted);
}

.win-select {
  background: var(--cmd-bg);
  color: var(--text);
  border: 1px solid var(--border-input);
  padding: 6px 12px;
  font-size: 12px;
  min-width: 180px;
  cursor: pointer;
}

.win-select:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}

.dist-chart-container {
  height: 250px;
  position: relative;
  margin: 14px 0 20px;
}

.dist-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.dist-kpi-item {
  background: var(--cmd-bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.dist-kpi-item span {
  font-size: 11px;
  color: var(--text-muted);
}

.dist-kpi-item strong {
  font-size: 16px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.distribution-panel {
  min-width: 0;
  padding-bottom: 12px;
}

.histogram {
  height: 140px;
  display: flex;
  align-items: end;
  gap: 4px;
  margin: 24px 18px 20px;
  border-bottom: 1px solid var(--border-strong);
  padding: 0 4px;
  background: repeating-linear-gradient(to top, transparent 0px, transparent 34px, var(--border) 35px);
}

.hist-bar {
  min-width: 6px;
  flex: 1;
  background: var(--accent);
  position: relative;
  transition: background 0.08s ease;
}

.hist-bar:hover {
  background: var(--accent-light);
}

.hist-tooltip {
  visibility: hidden;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  white-space: nowrap;
  font-weight: 600;
  z-index: 2;
}

.hist-bar:hover .hist-tooltip {
  visibility: visible;
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin: 0 18px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.stat-row span {
  color: var(--text-muted);
}

.stat-row strong {
  font-weight: 600;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.category-heading {
  margin: 24px 0 14px;
  font-size: 18px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-list-body {
  padding: 12px 18px;
}

.category-row {
  margin-bottom: 12px;
}

.category-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 12px;
}

.category-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

.category-label strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   14. Scatter & Bivariate Explorer
   ========================================================================== */
.scatter-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--cmd-bg);
  padding: 14px 18px;
  border: 1px solid var(--border);
}

.scatter-pickers {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.picker-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.picker-group label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.scatter-meta {
  display: flex;
  gap: 16px;
}

.reg-stat {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.reg-stat span {
  color: var(--text-muted);
}

.reg-stat strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
}

.scatter-chart-wrap {
  height: 380px;
  position: relative;
  margin: 16px 0;
}

/* ==========================================================================
   15. Correlations Matrix
   ========================================================================== */
.correlation-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.corr-legend {
  display: flex;
  gap: 8px;
}

.corr-chip {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.corr-chip.neg { background: rgba(221, 103, 92, 0.4); color: #fff; }
.corr-chip.zero { background: var(--card-hover); color: var(--text-muted); }
.corr-chip.pos { background: rgba(0, 120, 215, 0.4); color: #fff; }

.correlation-table {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  min-width: 580px;
  font-size: 11px;
}

.correlation-table th {
  text-align: left;
  font-weight: 600;
  background: var(--cmd-bg);
  padding: 8px 10px;
  min-width: 66px;
  max-width: 130px;
  overflow-wrap: anywhere;
}

.correlation-table td {
  text-align: center;
  min-width: 50px;
  padding: 10px 6px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: outline 0.05s ease;
}

.correlation-table td:hover {
  outline: 2px solid #ffffff;
  z-index: 1;
}

/* ==========================================================================
   16. Data Preview Grid & Pagination
   ========================================================================== */
.preview-toolbar {
  justify-content: space-between;
}

.preview-count {
  font-size: 12px;
  color: var(--text-muted);
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.page-size-selector select {
  min-width: 60px;
  padding: 4px 6px;
}

.sortable-th {
  cursor: pointer;
  user-select: none;
}

.sortable-th:hover {
  background: var(--card-hover);
}

.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.sort-icon {
  font-size: 11px;
  color: var(--text-muted);
}

.table-pagination {
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--cmd-bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.pagination-buttons {
  display: flex;
  gap: 4px;
}

.pagination-buttons .win-button {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

/* ==========================================================================
   17. Messages & Alerts
   ========================================================================== */
.message {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-left: 4px solid;
}

.message .mdl {
  font-size: 22px;
  flex-shrink: 0;
}

.message strong {
  display: block;
  font-size: 13px;
}

.message p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.error-msg {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.error-msg .mdl {
  color: var(--danger);
}

.warning-msg {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.warning-msg .mdl {
  color: var(--warning);
}

.muted {
  color: var(--text-muted);
  font-size: 12px;
}

.small-note {
  color: var(--text-muted);
  font-size: 12px;
  margin: 8px 0 0;
  line-height: 1.6;
}

.empty-state {
  color: var(--text-muted);
  padding: 30px 0;
  text-align: center;
}

/* ==========================================================================
   18. Cleaning Studio
   ========================================================================== */
.workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.workbench-pad {
  padding: 22px;
}

.field-title {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 13px;
}

.file-pick-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.win-file {
  display: block;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-input);
  padding: 10px;
  width: 100%;
  font-size: 12px;
}

.win-file::file-selector-button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  margin-right: 14px;
  cursor: pointer;
  transition: background 0.08s ease;
}

.win-file::file-selector-button:hover {
  background: var(--card-hover);
}

.recipe-section, .eyebrow {
  color: var(--accent-light);
  letter-spacing: 0.12em;
  font-size: 10px;
  font-weight: 700;
}

.recipe-section {
  margin: 24px 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.recipe-option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.08s ease;
}

.recipe-option:hover {
  background: var(--card-hover);
}

.recipe-option input {
  accent-color: var(--accent);
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.recipe-option strong {
  font-size: 13px;
  display: block;
  font-weight: 600;
}

.recipe-option small {
  display: block;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.5;
}

.recipe-subfield {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subfield-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.studio-actions-bar {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.side-title {
  font-weight: 300;
  font-size: 22px;
  margin: 6px 0 20px;
}

.preview-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.prev-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
}

.prev-metric span {
  font-size: 11px;
  color: var(--text-muted);
}

.prev-metric strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-light);
}

.prev-operations {
  margin: 12px 0;
  font-size: 12px;
}

.prev-op-item {
  padding: 4px 0;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border);
}

.prev-table-wrap h4 {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
}

.pipeline-step {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.pipeline-index {
  color: var(--accent-light);
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  width: 26px;
}

.pipeline-step strong {
  display: block;
  font-size: 13px;
}

.pipeline-step small {
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.studio-note {
  margin-top: 16px;
}

.studio-note > .mdl {
  color: var(--accent-light);
  font-size: 22px;
}

.studio-note h3 {
  margin: 10px 0 6px;
  font-size: 14px;
}

.studio-note p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
}

/* ==========================================================================
   19. Compare Page
   ========================================================================== */
.compare-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  margin-bottom: 24px;
}

.compare-upload label {
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin: 6px 0 10px;
}

.compare-versus {
  color: var(--accent-light);
  font-size: 24px;
  text-align: center;
}

.comparison-head {
  margin: 24px 0 16px;
}

.comparison-head h2 {
  font-weight: 300;
  font-size: 26px;
  margin: 4px 0;
}

.col-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--cmd-bg);
  border: 1px solid var(--border);
}

.compare-arrow {
  color: var(--accent-light);
  margin: 0 8px;
  font-weight: bold;
}

.compare-chart-panel {
  margin-bottom: 20px;
}

.compare-chart-wrap {
  height: 280px;
  position: relative;
}

.delta-up { color: #57bc82 !important; font-weight: 600; }
.delta-down { color: #e87972 !important; font-weight: 600; }

.schema-group {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.schema-group:last-child {
  border-bottom: 0;
}

.schema-group h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}

.schema-count {
  background: var(--cmd-bg);
  color: var(--text-secondary);
  padding: 2px 6px;
  margin-left: 6px;
  border: 1px solid var(--border);
  font-size: 11px;
}

.schema-tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 5px 9px;
  background: var(--cmd-bg);
  font-size: 12px;
  border: 1px solid var(--border);
}

.schema-tag.add { border-left: 3px solid var(--success); }
.schema-tag.remove { border-left: 3px solid var(--danger); }

.type-change {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.empty-compare {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-input);
  background: var(--card);
}

.empty-compare > .mdl {
  font-size: 44px;
  color: var(--accent-light);
  margin-bottom: 12px;
}

.empty-compare h2 {
  color: var(--text);
  font-size: 22px;
  font-weight: 300;
  margin: 0 0 6px;
}

.empty-compare p {
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
  font-size: 13px;
}

/* ==========================================================================
   20. Windows 10 Status Bar
   ========================================================================== */
.statusbar {
  flex-shrink: 0;
  background: var(--statusbar-bg);
  min-height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 14px;
  font-size: 11px;
  color: var(--statusbar-text);
  gap: 12px;
  user-select: none;
  z-index: 10;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-icon {
  font-size: 13px;
}

.status-sep {
  opacity: 0.5;
  margin: 0 2px;
}

/* ==========================================================================
   21. Windows 10 Action Center Toast Notification
   ========================================================================== */
.win-toast {
  position: fixed;
  bottom: 34px;
  right: 20px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-width: 320px;
  max-width: 440px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.2s ease;
}

.win-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.toast-glyph {
  font-size: 20px;
  color: var(--accent-light);
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-content strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.toast-content p {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.toast-close {
  color: var(--text-muted);
  font-size: 10px;
  padding: 4px;
}

.toast-close:hover {
  color: var(--text);
}

/* ==========================================================================
   22. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
  .workspace {
    padding: 22px 20px 50px;
  }
  .enterprise-ingestion-grid {
    grid-template-columns: 1fr;
  }
  .sla-standards-grid, .enterprise-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metro-kpi-grid, .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .charts-row-dual {
    grid-template-columns: 1fr;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dist-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .side-pane {
    width: 200px;
  }
  .compare-form {
    grid-template-columns: 1fr 1fr;
  }
  .compare-versus {
    display: none;
  }
  .workbench-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-center, .tenant-selector, .cloud-health-indicator {
    display: none;
  }
  .side-pane {
    width: 52px;
  }
  .side-pane .nav-text,
  .side-pane .nav-header-text,
  .side-pane .nav-badge,
  .side-pane .sidebar-footnote {
    display: none;
  }
  .side-pane .nav-link {
    padding: 0;
    justify-content: center;
  }
  .sla-standards-grid, .enterprise-feature-grid, .metro-kpi-grid, .metric-grid, .stats-grid {
    grid-template-columns: 1fr;
  }
  .ingest-controls-row {
    grid-template-columns: 1fr;
  }
  .dist-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compare-form {
    grid-template-columns: 1fr;
  }
  .compare-form > .win-button {
    width: 100%;
  }
  .statusbar .status-right {
    display: none;
  }
}

/* ==========================================================================
   22b. Windows 10 Fluent 1 (Project Neon) Low-Density Product Landing Page
   Strict 0px border-radius, vibrant neon accents, acrylic material, spacious hierarchy
   ========================================================================== */

.landing-page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 60px;
}

/* --- 1. Cinematic Fluent 1 Hero Section --- */
.landing-hero {
  position: relative;
  padding: 48px 20px 56px;
  text-align: center;
  overflow: hidden;
}

.hero-acrylic-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 480px;
  background: radial-gradient(ellipse 65% 55% at 50% 35%, rgba(0, 120, 215, 0.24), rgba(0, 183, 195, 0.1) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Live Cloud Deployment Status Badge */
.landing-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(0, 120, 215, 0.12);
  border: 1px solid rgba(0, 120, 215, 0.45);
  color: #60cdff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin-bottom: 28px;
  backdrop-filter: blur(10px);
}

.live-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #107c41;
  box-shadow: 0 0 10px #107c41;
  border-radius: 0 !important;
  display: inline-block;
  animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 124, 65, 0.85);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 124, 65, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 124, 65, 0);
  }
}

/* Bold Confident Headlines */
.landing-title {
  font-size: 52px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 20px;
  color: var(--text);
}

.landing-title-accent {
  background: linear-gradient(135deg, #0078d7 0%, #00b7c3 50%, #60cdff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.landing-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 36px;
  font-weight: 400;
}

/* CTA Buttons Row */
.landing-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 52px;
}

.landing-cta-primary {
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 600;
  background: #0078d7;
  color: #ffffff;
  border: 1px solid #0078d7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 120, 215, 0.35);
  transition: all 0.15s ease-in-out;
}

.landing-cta-primary:hover {
  background: #106ebe;
  border-color: #106ebe;
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 120, 215, 0.55);
  transform: translateY(-1px);
}

.landing-cta-secondary {
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.15s ease-in-out;
}

.landing-cta-secondary:hover {
  background: rgba(0, 183, 195, 0.12);
  border-color: #00b7c3;
  color: #4ee2ec;
  transform: translateY(-1px);
}

.landing-cta-ghost {
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.landing-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* Hero Interactive Product Preview Mockup Window */
.hero-mockup-frame {
  width: 100%;
  max-width: 880px;
  margin: 0 auto 36px;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 120, 215, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: left;
}

.hero-mockup-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 120, 215, 0.28);
}

.mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mockup-dots {
  display: flex;
  gap: 7px;
}

.mock-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 0 !important;
}

.mock-dot.red { background: #e81123; }
.mock-dot.yellow { background: #ff8c00; }
.mock-dot.green { background: #107c41; }

.mockup-title-bar {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.mockup-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  background: rgba(0, 120, 215, 0.2);
  color: #60cdff;
  border: 1px solid rgba(0, 120, 215, 0.45);
}

.mockup-body {
  padding: 24px;
}

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

.mock-kpi {
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-top: 3px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.mock-kpi:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.mock-kpi.cobalt { border-top-color: #0078d7; }
.mock-kpi.cyan { border-top-color: #00b7c3; }
.mock-kpi.emerald { border-top-color: #107c41; }
.mock-kpi.purple { border-top-color: #881798; }

.mock-kpi .kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.mock-kpi .kpi-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
  line-height: 1.1;
  margin: 4px 0 2px;
}

.mock-kpi .kpi-val small {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}

.mock-kpi .kpi-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Landing Horizontal Stats Strip */
.landing-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 880px;
}

.landing-stats-strip .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.landing-stats-strip .stat-item strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}

.landing-stats-strip .stat-item span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.landing-stats-strip .stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* --- Section Headers --- */
.section-header-centered {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 44px;
}

.section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.section-tag.cobalt {
  background: rgba(0, 120, 215, 0.15);
  color: #60cdff;
  border: 1px solid rgba(0, 120, 215, 0.45);
}

.section-tag.emerald {
  background: rgba(16, 124, 65, 0.15);
  color: #6ccb5f;
  border: 1px solid rgba(16, 124, 65, 0.45);
}

.section-tag.purple {
  background: rgba(136, 23, 152, 0.15);
  color: #d189e2;
  border: 1px solid rgba(136, 23, 152, 0.45);
}

.section-tag.cyan {
  background: rgba(0, 183, 195, 0.15);
  color: #4ee2ec;
  border: 1px solid rgba(0, 183, 195, 0.45);
}

.section-header-centered h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -0.4px;
}

.section-header-centered p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* --- 2. Features Section (Three Columns) --- */
.landing-features-section {
  padding: 72px 0 54px;
  border-top: 1px solid var(--border);
}

.features-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-col-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 4px solid var(--border);
  transition: all 0.2s ease-in-out;
}

.feature-col-card.card-cobalt { border-top-color: #0078d7; }
.feature-col-card.card-cyan { border-top-color: #00b7c3; }
.feature-col-card.card-emerald { border-top-color: #107c41; }

.feature-col-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.28);
}

.col-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
}

.card-cobalt .col-icon-box {
  color: #60cdff;
  background: rgba(0, 120, 215, 0.12);
  border-color: rgba(0, 120, 215, 0.4);
}

.card-cyan .col-icon-box {
  color: #4ee2ec;
  background: rgba(0, 183, 195, 0.12);
  border-color: rgba(0, 183, 195, 0.4);
}

.card-emerald .col-icon-box {
  color: #6ccb5f;
  background: rgba(16, 124, 65, 0.12);
  border-color: rgba(16, 124, 65, 0.4);
}

.feature-col-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.feature-col-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 24px;
  flex: 1;
}

.feature-card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tag-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid var(--border);
  letter-spacing: 0.3px;
}

/* --- 3. Ingestion Workspace Section --- */
.landing-ingest-section {
  padding: 72px 0 54px;
  border-top: 1px solid var(--border);
}

.ingest-workspace-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.landing-drop-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 32px;
  border: 2px dashed #0078d7;
  background: rgba(0, 120, 215, 0.03);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.landing-drop-target:hover,
.landing-drop-target.dragover {
  background: rgba(0, 120, 215, 0.09);
  border-color: #60cdff;
  border-style: solid;
}

.drop-icon-circle {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: rgba(0, 120, 215, 0.14);
  color: #60cdff;
  border: 1px solid rgba(0, 120, 215, 0.4);
  margin-bottom: 16px;
}

.landing-drop-target strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.landing-drop-target span {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.drop-file-types {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.landing-drop-target input[type="file"] {
  display: none;
}

/* Action Bar */
.ingest-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  gap: 16px;
}

.file-chosen-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.file-status-icon {
  font-size: 18px;
  color: var(--accent);
}

.landing-submit-btn {
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 600;
  background: #0078d7;
  color: #ffffff;
  border: 1px solid #0078d7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 120, 215, 0.3);
  transition: all 0.15s ease-in-out;
}

.landing-submit-btn:hover {
  background: #106ebe;
  border-color: #106ebe;
  box-shadow: 0 6px 18px rgba(0, 120, 215, 0.5);
}

/* Advanced Ingest Toggled Settings */
.advanced-ingest-details {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.advanced-toggle {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.advanced-toggle:hover {
  color: var(--accent-light);
}

.ingest-controls-row {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.control-unit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}

.control-unit label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.win-select-sm {
  padding: 7px 12px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-input);
}

/* Quick 1-Click Samples Bar */
.quick-samples-bar {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.samples-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.samples-pill-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sample-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border-left: 3px solid;
}

.sample-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.sample-chip .chip-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  letter-spacing: 0.6px;
}

.sample-chip.chip-ufo {
  border-left-color: #0078d7;
}
.sample-chip.chip-ufo:hover {
  border-color: #0078d7;
}
.sample-chip.chip-ufo .chip-badge {
  background: rgba(0, 120, 215, 0.22);
  color: #60cdff;
}

.sample-chip.chip-auto {
  border-left-color: #00b7c3;
}
.sample-chip.chip-auto:hover {
  border-color: #00b7c3;
}
.sample-chip.chip-auto .chip-badge {
  background: rgba(0, 183, 195, 0.22);
  color: #4ee2ec;
}

.sample-chip.chip-risk {
  border-left-color: #ff8c00;
}
.sample-chip.chip-risk:hover {
  border-color: #ff8c00;
}
.sample-chip.chip-risk .chip-badge {
  background: rgba(255, 140, 0, 0.22);
  color: #ffb900;
}

.sample-chip.chip-churn {
  border-left-color: #881798;
}
.sample-chip.chip-churn:hover {
  border-color: #881798;
}
.sample-chip.chip-churn .chip-badge {
  background: rgba(136, 23, 152, 0.22);
  color: #d189e2;
}

/* --- 4. System Architecture Section --- */
.landing-architecture-section {
  padding: 72px 0 36px;
  border-top: 1px solid var(--border);
}

.architecture-visual-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  padding: 40px 36px;
  max-width: 900px;
  margin: 0 auto;
}

.arch-flow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 40px;
}

.arch-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.node-icon-bubble {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px solid;
  margin-bottom: 12px;
}

.node-icon-bubble.cobalt {
  background: rgba(0, 120, 215, 0.14);
  border-color: rgba(0, 120, 215, 0.5);
  color: #60cdff;
}

.node-icon-bubble.cyan {
  background: rgba(0, 183, 195, 0.14);
  border-color: rgba(0, 183, 195, 0.5);
  color: #4ee2ec;
}

.node-icon-bubble.emerald {
  background: rgba(16, 124, 65, 0.14);
  border-color: rgba(16, 124, 65, 0.5);
  color: #6ccb5f;
}

.node-icon-bubble.purple {
  background: rgba(136, 23, 152, 0.14);
  border-color: rgba(136, 23, 152, 0.5);
  color: #d189e2;
}

.arch-flow-node strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.arch-flow-node span {
  font-size: 12px;
  color: var(--text-muted);
}

.arch-flow-arrow {
  font-size: 22px;
  color: var(--text-muted);
  opacity: 0.6;
  flex-shrink: 0;
  margin-bottom: 24px;
}

/* DevOps Continuous Delivery Strip */
.devops-pipeline-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}

.devops-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.devops-num {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0078d7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0 !important;
}

.devops-arrow {
  font-size: 14px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* --- Light Mode Adaptations --- */
[data-theme="light"] .hero-acrylic-glow {
  background: radial-gradient(ellipse 65% 55% at 50% 35%, rgba(0, 120, 215, 0.16), rgba(0, 183, 195, 0.06) 45%, transparent 75%);
}

[data-theme="light"] .hero-mockup-frame {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 120, 215, 0.1);
}

[data-theme="light"] .mockup-header {
  background: rgba(0, 0, 0, 0.04);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mock-kpi {
  background: #fcfcfc;
  border-color: #e0e0e0;
}

[data-theme="light"] .sample-chip {
  background: #fbfbfb;
  border-color: #dedede;
}

[data-theme="light"] .sample-chip:hover {
  background: #f0f0f0;
}

/* --- Responsive Breakpoints for Landing Page --- */
@media (max-width: 900px) {
  .landing-title {
    font-size: 38px;
  }
  .mockup-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .landing-stats-strip .stat-divider {
    display: none;
  }
  .features-three-col {
    grid-template-columns: 1fr;
  }
  .samples-pill-row {
    grid-template-columns: 1fr;
  }
  .arch-flow-row {
    flex-direction: column;
    gap: 20px;
  }
  .arch-flow-arrow {
    transform: rotate(90deg);
    margin-bottom: 0;
  }
  .devops-pipeline-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .devops-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .landing-title {
    font-size: 30px;
  }
  .landing-subtitle {
    font-size: 15px;
  }
  .landing-cta-row {
    flex-direction: column;
    width: 100%;
  }
  .landing-cta-primary,
  .landing-cta-secondary,
  .landing-cta-ghost {
    width: 100%;
    justify-content: center;
  }
  .mockup-kpi-grid {
    grid-template-columns: 1fr;
  }
  .ingest-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   24. Windows 10 Fluent Interstitial Loading Overlay & Indeterminate Progress
   ========================================================================== */
.win-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 18, 0.82);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.loading-modal-card {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--accent);
  padding: 32px 28px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 32px rgba(0, 120, 215, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 0 !important;
}

.loading-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loading-card-header .loading-icon {
  font-size: 26px;
  color: var(--accent);
}

.loading-card-header strong {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.2px;
}

.win-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  border-radius: 0 !important;
}

.win-progress-bar-indeterminate {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: win10-indeterminate 1.8s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes win10-indeterminate {
  0% { left: -35%; width: 35%; }
  50% { left: 40%; width: 50%; }
  100% { left: 105%; width: 25%; }
}

.loading-modal-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.loading-footer-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.loading-footer-status .pulse-beacon {
  width: 8px;
  height: 8px;
  background: #107c41;
  border-radius: 0 !important;
  box-shadow: 0 0 8px #107c41;
  animation: live-pulse-anim 1.5s infinite;
}

/* ==========================================================================
   24. Cloud Operations & DevOps Telemetry Dashboard (Windows 10 Fluent 1)
   ========================================================================== */
.telemetry-viewport {
  padding: 24px 32px 48px;
  background: var(--bg);
  min-height: calc(100vh - 100px);
}

.telemetry-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.telemetry-top-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.telemetry-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.telemetry-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.commit-badge, .vm-uptime-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.5px;
  border-radius: 0 !important;
}

.commit-badge strong {
  color: #d1b8fc;
  font-family: 'Consolas', monospace;
}

.vm-uptime-badge strong {
  color: #00bcf2;
}

.win-btn.accent-orange {
  background: rgba(255, 140, 0, 0.15);
  border: 1px solid rgba(255, 140, 0, 0.5);
  color: #ffa726;
}

.win-btn.accent-orange:hover {
  background: rgba(255, 140, 0, 0.3);
  border-color: #ffa726;
  color: #ffffff;
}

.telemetry-main-glyph {
  font-size: 28px;
  color: var(--accent);
}

.telemetry-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
}

.pulse-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 124, 65, 0.2);
  border: 1px solid rgba(16, 124, 65, 0.6);
  color: #70df7b;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.8px;
  border-radius: 0 !important;
}

.pulse-live-badge .pulse-dot {
  width: 7px;
  height: 7px;
  background: #107c41;
  box-shadow: 0 0 8px #70df7b;
  animation: live-pulse-anim 1.5s infinite;
  display: inline-block;
}

.telemetry-subhead {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 820px;
  line-height: 1.5;
}

.telemetry-action-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Win10 Toast Banner */
.win-toast-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 500;
  animation: slideDownToast 0.25s ease-out;
}

.win-toast-banner.toast-success {
  background: rgba(16, 124, 65, 0.25);
  border: 1px solid #107c41;
  color: #70df7b;
}

.win-toast-banner.toast-warn {
  background: rgba(255, 185, 0, 0.25);
  border: 1px solid #ffb900;
  color: #ffe066;
}

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

/* Top 4 KPI Tiles Grid */
.telemetry-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

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

@media (max-width: 640px) {
  .telemetry-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.telemetry-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.telemetry-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.telemetry-card.kpi-cpu { border-top: 3px solid #00bcf2; }
.telemetry-card.kpi-ram { border-top: 3px solid #0078d7; }
.telemetry-card.kpi-azure { border-top: 3px solid #107c41; }
.telemetry-card.kpi-gateway { border-top: 3px solid #8661c5; }

.card-header-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-mini .card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
}

.card-header-mini .card-icon-badge {
  font-size: 18px;
  color: var(--text-secondary);
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kpi-number {
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: -0.5px;
}

.kpi-subtext {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: right;
}

.telemetry-meter-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0 !important;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 0 !important;
  transition: width 0.35s ease;
}

.meter-cpu { background: #00bcf2; box-shadow: 0 0 8px rgba(0, 188, 242, 0.6); }
.meter-ram { background: #0078d7; box-shadow: 0 0 8px rgba(0, 120, 215, 0.6); }
.meter-storage { background: #107c41; box-shadow: 0 0 8px rgba(16, 124, 65, 0.6); }
.meter-gateway { background: #8661c5; box-shadow: 0 0 8px rgba(134, 97, 197, 0.6); }

.kpi-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.badge-safe {
  background: rgba(16, 124, 65, 0.2);
  color: #70df7b;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 0 !important;
}

.badge-status.status-connected {
  background: rgba(16, 124, 65, 0.25);
  border: 1px solid #107c41;
  color: #70df7b;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 0 !important;
}

.badge-status.status-offline {
  background: rgba(255, 185, 0, 0.25);
  border: 1px solid #ffb900;
  color: #ffe066;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 0 !important;
}

.badge-pill {
  background: rgba(134, 97, 197, 0.2);
  color: #d1b8fc;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 0 !important;
}

/* Chart Panel (Windows 10 Fluent Project Neon) */
.telemetry-chart-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.chart-title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.chart-glyph {
  font-size: 20px;
  color: var(--accent);
  margin-top: 2px;
}

.chart-subtitle {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.chart-controls-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 0 !important;
}

.legend-cpu {
  background: rgba(0, 188, 242, 0.15);
  border: 1px solid rgba(0, 188, 242, 0.4);
  color: #00bcf2;
}

.legend-cpu .legend-dot {
  width: 6px;
  height: 6px;
  background: #00bcf2;
  border-radius: 0 !important;
}

.legend-ram {
  background: rgba(0, 120, 215, 0.15);
  border: 1px solid rgba(0, 120, 215, 0.4);
  color: #5cacf5;
}

.legend-ram .legend-dot {
  width: 6px;
  height: 6px;
  background: #0078d7;
  border-radius: 0 !important;
}

.cache-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(0, 188, 242, 0.12);
  border: 1px solid rgba(0, 188, 242, 0.3);
  color: #00bcf2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 0 !important;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-cat {
  font-weight: 700;
  color: #88c0d0;
  margin-right: 4px;
}

/* Panels Grid: 2 Columns */
.telemetry-panels-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

@media (max-width: 1024px) {
  .telemetry-panels-grid {
    grid-template-columns: 1fr;
  }
}

.telemetry-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

.panel-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--card-header, rgba(255, 255, 255, 0.03));
  border-bottom: 1px solid var(--border);
}

.panel-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.panel-inner-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Container Subcard */
.container-subcard {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.subcard-name-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.subcard-name-group .folder-icon {
  color: var(--accent);
}

.subcard-pill {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border-radius: 0 !important;
}

.subcard-stats {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-sep {
  margin: 0 4px;
  opacity: 0.5;
}

/* Telemetry Table */
.blob-table-wrapper {
  overflow-x: auto;
}

.telemetry-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border-radius: 0 !important;
}

.telemetry-data-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.telemetry-data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.font-code {
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 11px;
}

.text-cyan { color: #00bcf2 !important; }
.text-green { color: #70df7b !important; }
.text-purple { color: #d1b8fc !important; }
.text-muted { color: var(--text-secondary) !important; }
.text-center { text-align: center !important; }

/* Spec Section */
.spec-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 4px;
}

.spec-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.spec-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-val {
  font-size: 14px;
  color: var(--text);
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 12px;
}

.spec-row-k {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.spec-row-v {
  color: var(--text);
  font-size: 12px;
  text-align: right;
}

/* Event Console Card */
.telemetry-console-card {
  background: #0c0e12;
  border: 1px solid var(--border);
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

.console-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #14171e;
  border-bottom: 1px solid var(--border);
}

.console-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.console-badge-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

.console-clock {
  font-size: 12px;
  color: #70df7b;
  background: rgba(16, 124, 65, 0.2);
  padding: 2px 8px;
  border: 1px solid rgba(16, 124, 65, 0.4);
  border-radius: 0 !important;
}

.win-btn-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 0 !important;
  transition: all 0.15s ease;
}

.win-btn-sm:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: var(--accent);
}

.console-output-box {
  padding: 14px 16px;
  height: 180px;
  overflow-y: auto;
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #090b0e;
  color: #cccccc;
}

.log-line {
  line-height: 1.4;
  word-break: break-all;
}

.log-time {
  color: #666666;
  margin-right: 6px;
}

.log-info { color: #88c0d0; }
.log-success { color: #a3be8c; }
.log-warn { color: #ebcb8b; }
.log-cyan { color: #81a1c1; }

.spin-glyph {
  display: inline-block;
  animation: spinGlyphAnim 0.75s linear infinite;
}

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

/* ==========================================================================
   25. Windows 10 Fluent Animation & Reveal Highlight System
   Authentic Windows 10 Enterprise LTSC 2021 (Build 19044) Fluent Design 1 (Project Neon)
   ========================================================================== */

/* Animation Variables & Motion Curves */
:root {
  --win-ease: cubic-bezier(0.1, 0.9, 0.2, 1);
  --win-ease-press: cubic-bezier(0.1, 0.9, 0.2, 1);
  --win-dur-hover: 0.14s;
  --win-dur-press: 0.08s;
  --win-dur-enter: 0.24s;
  --win-dur-flyout: 0.16s;
  --win-dur-toast: 0.24s;
}

/* --------------------------------------------------------------------------
   25.1. Fluent Reveal Highlight (Authentic Pointer Spotlight & Border Glow)
   -------------------------------------------------------------------------- */
.win-button, .win-btn, .cmd-pill-link, .cmd-pill-btn, .nav-link,
.metro-tile, .preset-card, .telemetry-card, .quick-sample-card,
.console-tab-btn, .subtab-btn, .filter-pill, .enterprise-drop-target,
.cleaning-rule-item, .arch-flow-box, .sla-card {
  position: relative;
  overflow: hidden;
}

.win-button::before, .win-btn::before, .cmd-pill-link::before, .cmd-pill-btn::before,
.nav-link::before, .metro-tile::before, .preset-card::before, .telemetry-card::before,
.quick-sample-card::before, .console-tab-btn::before, .subtab-btn::before,
.filter-pill::before, .enterprise-drop-target::before, .cleaning-rule-item::before,
.arch-flow-box::before, .sla-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle 95px at var(--reveal-x, -300px) var(--reveal-y, -300px), rgba(255, 255, 255, 0.11), transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease-out;
  z-index: 1;
}

[data-theme="light"] .win-button::before,
[data-theme="light"] .win-btn::before,
[data-theme="light"] .cmd-pill-link::before,
[data-theme="light"] .cmd-pill-btn::before,
[data-theme="light"] .nav-link::before,
[data-theme="light"] .metro-tile::before,
[data-theme="light"] .preset-card::before,
[data-theme="light"] .telemetry-card::before,
[data-theme="light"] .quick-sample-card::before,
[data-theme="light"] .console-tab-btn::before,
[data-theme="light"] .subtab-btn::before,
[data-theme="light"] .filter-pill::before,
[data-theme="light"] .enterprise-drop-target::before,
[data-theme="light"] .cleaning-rule-item::before,
[data-theme="light"] .arch-flow-box::before,
[data-theme="light"] .sla-card::before {
  background: radial-gradient(circle 95px at var(--reveal-x, -300px) var(--reveal-y, -300px), rgba(0, 120, 215, 0.09), transparent 75%);
}

/* Surface Reveal active */
.has-reveal::before {
  opacity: 1 !important;
}

/* Border Reveal active (Proximity illumination) */
.has-reveal-border {
  border-color: rgba(0, 188, 242, 0.45) !important;
  transition: border-color 0.14s ease-out;
}

[data-theme="light"] .has-reveal-border {
  border-color: rgba(0, 120, 215, 0.45) !important;
}

/* --------------------------------------------------------------------------
   25.2. Interactive Buttons (Smooth Hover, Pressed Feedback, Focus & Disabled)
   -------------------------------------------------------------------------- */
.win-button, .win-btn, .cmd-pill-btn, .cmd-pill-link, .btn-load-named-sample,
.theme-toggle-btn, .header-tool-btn, .nav-toggle-btn, .flyout-btn-item {
  transition: background-color var(--win-dur-hover) ease-out,
              border-color var(--win-dur-hover) ease-out,
              color var(--win-dur-hover) ease-out,
              box-shadow var(--win-dur-hover) ease-out,
              transform var(--win-dur-press) var(--win-ease-press);
}

/* Authentic Windows 10 Tactile Pressed Feedback */
.win-button:active, .win-btn:active, .cmd-pill-btn:active, .cmd-pill-link:active,
.btn-load-named-sample:active, .flyout-btn-item:active {
  transform: scale(0.98) !important;
  transition: transform var(--win-dur-press) var(--win-ease-press) !important;
}

.win-button.primary:hover, .win-btn.primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: 0 2px 10px rgba(0, 120, 215, 0.35);
}

.win-button:focus-visible, .win-btn:focus-visible, .cmd-pill-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.win-button:disabled, .win-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   25.3. Smooth Page & Content Entrances (Restrained Staggered 6px Slide)
   -------------------------------------------------------------------------- */
@keyframes winSlideFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-heading, .breadcrumb, .workspace-header, .telemetry-top-header {
  animation: winSlideFadeIn var(--win-dur-enter) var(--win-ease) both;
}

.surface-panel, .metro-tile, .sla-card, .telemetry-card, .metric-card,
.report-section, .compare-upload, .presets-panel, .recipe-section {
  animation: winSlideFadeIn var(--win-dur-enter) var(--win-ease) both;
}

/* Subtle staggered delays across grid items */
.surface-panel:nth-child(1), .metro-tile:nth-child(1), .telemetry-card:nth-child(1) { animation-delay: 0.02s; }
.surface-panel:nth-child(2), .metro-tile:nth-child(2), .telemetry-card:nth-child(2) { animation-delay: 0.05s; }
.surface-panel:nth-child(3), .metro-tile:nth-child(3), .telemetry-card:nth-child(3) { animation-delay: 0.08s; }
.surface-panel:nth-child(4), .metro-tile:nth-child(4), .telemetry-card:nth-child(4) { animation-delay: 0.11s; }
.surface-panel:nth-child(5), .metro-tile:nth-child(5) { animation-delay: 0.14s; }
.surface-panel:nth-child(6), .metro-tile:nth-child(6) { animation-delay: 0.17s; }

/* --------------------------------------------------------------------------
   25.4. Dashboard Cards, Metric Tiles & Progress Meters
   -------------------------------------------------------------------------- */
.surface-panel, .metro-tile, .sla-card, .telemetry-card, .preset-card, .quick-sample-card {
  transition: border-color var(--win-dur-hover) ease-out,
              background-color var(--win-dur-hover) ease-out,
              box-shadow var(--win-dur-hover) ease-out;
}

.surface-panel:hover, .metro-tile:hover, .telemetry-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .surface-panel:hover,
[data-theme="light"] .metro-tile:hover,
[data-theme="light"] .telemetry-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Progress bar fill animations */
.meter-fill, .sla-fill, .progress-fill, .meter-cpu, .meter-ram, .meter-disk, .tile-progress-fill {
  transition: width 0.45s var(--win-ease);
}

/* Pulsing Status Indicators */
@keyframes winStatusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.88);
  }
}

.cluster-pulse, .pulse-dot, .pulse-beacon {
  animation: winStatusPulse 2.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   25.5. Input Fields, Focus Rings & Form Controls
   -------------------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="file"], select, textarea,
.win-select, .win-select-sm, .global-search-container {
  transition: border-color var(--win-dur-hover) ease-out,
              background-color var(--win-dur-hover) ease-out,
              box-shadow var(--win-dur-hover) ease-out;
}

input[type="text"]:hover, input[type="search"]:hover, select:hover, textarea:hover,
.win-select:hover, .win-select-sm:hover {
  border-color: var(--border-strong);
}

input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus,
.win-select:focus, .win-select-sm:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important;
}

.global-search-container:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Smooth Drag & Drop Target Highlighting */
.enterprise-drop-target {
  transition: border-color 0.16s ease-out,
              background-color 0.16s ease-out,
              box-shadow 0.16s ease-out,
              transform 0.16s var(--win-ease) !important;
}

.enterprise-drop-target:hover {
  border-color: var(--accent-light) !important;
  background-color: rgba(0, 120, 215, 0.06) !important;
  box-shadow: 0 0 20px rgba(0, 120, 215, 0.22) !important;
}

.enterprise-drop-target.dragover {
  border-color: #00bcf2 !important;
  background-color: rgba(0, 188, 242, 0.12) !important;
  box-shadow: 0 0 28px rgba(0, 188, 242, 0.35) !important;
  transform: scale(1.004) !important;
}

/* Checkboxes and Radios */
.recipe-option {
  transition: background-color 0.12s ease-out;
}

.recipe-option:hover {
  background-color: var(--card-hover);
}

.recipe-option input[type="checkbox"],
.recipe-option input[type="radio"] {
  transition: transform 0.12s var(--win-ease), accent-color 0.12s ease-out;
}

.recipe-option input[type="checkbox"]:active,
.recipe-option input[type="radio"]:active {
  transform: scale(0.92);
}

/* --------------------------------------------------------------------------
   25.6. Navigation Pane & Tab Transitions
   -------------------------------------------------------------------------- */
.side-pane {
  transition: width 0.2s var(--win-ease);
}

.nav-link {
  transition: background-color var(--win-dur-hover) ease-out,
              color var(--win-dur-hover) ease-out,
              border-color var(--win-dur-hover) ease-out;
}

.nav-link:hover {
  background-color: var(--card-hover);
  color: var(--text);
}

.nav-link.selected {
  border-left: 4px solid var(--accent);
  background: var(--card-hover);
}

/* Animated Bottom Selection Indicator on Tabs */
.console-tab-btn, .subtab-btn, .filter-pill, .cmd-pill-link {
  position: relative;
  transition: background-color var(--win-dur-hover) ease-out,
              border-color var(--win-dur-hover) ease-out,
              color var(--win-dur-hover) ease-out;
}

.console-tab-btn::after, .subtab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.16s var(--win-ease);
}

.console-tab-btn.active::after, .subtab-btn.active::after {
  transform: scaleX(1);
}

@keyframes winTabFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.analytics-tab-pane.active, .subtab-pane.active, .workbench-tab-pane.active {
  animation: winTabFade 0.18s var(--win-ease) both;
}

/* --------------------------------------------------------------------------
   25.7. Charts & Table Rows
   -------------------------------------------------------------------------- */
.charts-row-dual, .chart-card, .dist-chart-container, .scatter-box {
  animation: winSlideFadeIn var(--win-dur-enter) var(--win-ease) both;
}

.data-table tbody tr {
  transition: background-color 0.1s ease-out;
}

.data-table tbody tr:hover {
  background-color: var(--card-hover) !important;
}

/* --------------------------------------------------------------------------
   25.8. Loading & Processing States (Authentic Windows 10 Indeterminate Stream)
   -------------------------------------------------------------------------- */
.win-loading-overlay {
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  background: rgba(10, 10, 12, 0.72) !important;
  transition: opacity 0.2s var(--win-ease);
}

[data-theme="light"] .win-loading-overlay {
  background: rgba(240, 240, 240, 0.8) !important;
}

@keyframes winModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.loading-modal-card {
  animation: winModalSlideIn 0.2s var(--win-ease) both;
}

/* Windows 10 Indeterminate Multi-Bar Acceleration */
@keyframes win10ProgressStream {
  0% {
    left: -40%;
    width: 30%;
  }
  50% {
    left: 35%;
    width: 50%;
  }
  100% {
    left: 105%;
    width: 25%;
  }
}

.win-progress-bar-indeterminate {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: win10ProgressStream 1.9s var(--win-ease) infinite;
}

/* --------------------------------------------------------------------------
   25.9. Modals, Flyouts & Action Center Toast Notifications
   -------------------------------------------------------------------------- */
/* Action Center Toast Notification: slide in from right edge */
.win-toast {
  position: fixed;
  bottom: 34px;
  right: 20px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-width: 320px;
  max-width: 440px;
  z-index: 9999;
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--win-dur-toast) var(--win-ease),
              opacity 0.2s ease-out;
}

.win-toast.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Windows 10 Flyout Menus */
.win-flyout-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--win-dur-flyout) var(--win-ease),
              opacity var(--win-dur-flyout) ease-out;
  z-index: 1000;
}

.win-flyout-menu.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   25.10. Acrylic Material Translucency
   -------------------------------------------------------------------------- */
.enterprise-global-header {
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  background: rgba(24, 24, 24, 0.88);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .enterprise-global-header {
  background: rgba(255, 255, 255, 0.92);
}

.enterprise-command-bar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(30, 30, 30, 0.85);
  border-bottom: 1px solid var(--border);
}

[data-theme="light"] .enterprise-command-bar {
  background: rgba(247, 247, 247, 0.9);
}

.side-pane {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(27, 27, 27, 0.92);
}

[data-theme="light"] .side-pane {
  background: rgba(235, 235, 235, 0.92);
}

/* --------------------------------------------------------------------------
   25.11. Strict prefers-reduced-motion Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
}

/* ==========================================================================
   26. Print Mode
   ========================================================================== */
@media print {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --card: #ffffff;
    --text: #000000;
    --border: #cccccc;
    --text-secondary: #333333;
    --text-muted: #555555;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
  .enterprise-global-header, .enterprise-command-bar, .side-pane, .statusbar,
  .report-actions, .win-toast, .table-toolbar, .table-pagination, .scatter-controls {
    display: none !important;
  }
  .workspace {
    max-width: none;
    padding: 0;
    width: 100%;
  }
  .report-section {
    display: block !important;
    break-inside: avoid;
    margin-top: 25px;
  }
  .surface-panel, .metro-tile, .sla-card, .metro-feature-card {
    border: 1px solid #999999;
    background: #ffffff;
    color: #000000;
  }
  .metro-kpi-grid, .metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .charts-row-dual, .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .data-table th {
    background: #eeeeee;
    color: #000000;
  }
  .data-table td {
    color: #111111;
  }
}