:root {
  --bg-main: #030712;
  --bg: #030712;
  --bg-color: #030712;
  --bg-panel: rgba(8, 21, 36, 0.78);
  --surface: rgba(8, 21, 36, 0.72);
  --surface-color: rgba(8, 21, 36, 0.68);
  --surface-light: rgba(17, 37, 59, 0.78);
  --surface-hover: rgba(22, 47, 73, 0.82);
  --card-bg: rgba(8, 21, 36, 0.68);
  --sidebar-bg: rgba(7, 18, 31, 0.78);
  --glass-bg: rgba(8, 21, 36, 0.64);
  --border: rgba(205, 234, 255, 0.14);
  --border-color: rgba(205, 234, 255, 0.14);
  --glass-border: rgba(205, 234, 255, 0.16);
  --text: #edf7ff;
  --text-main: #edf7ff;
  --text-muted: #8fa5b9;
  --primary: #4fa8ff;
  --primary-hover: #72bcff;
  --cyan: #63e8f0;
  --violet: #ad8cff;
  --emerald: #58dfa7;
  --glass-shadow:
    0 26px 72px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html {
  color-scheme: dark;
}

body {
  color: var(--text-main);
  background:
    radial-gradient(circle at 88% 5%, rgba(116, 83, 255, 0.14), transparent 29rem),
    radial-gradient(circle at 5% 85%, rgba(52, 218, 239, 0.09), transparent 31rem),
    linear-gradient(150deg, #02060d, #07111e 53%, #030812) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(112deg, transparent 0 3px, rgba(255, 255, 255, 0.009) 3px 4px),
    linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  opacity: 0.52;
  mix-blend-mode: screen;
}

.navbar,
.top-nav,
.body-nav,
body > nav,
.header-section,
.tabs-header,
.hud {
  border-color: rgba(207, 236, 255, 0.15) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(99, 232, 240, 0.11), transparent 32%),
    linear-gradient(135deg, rgba(16, 35, 56, 0.88), rgba(6, 15, 28, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 18px 48px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(24px) saturate(165%);
}

.navbar,
.top-nav,
body > nav {
  margin: 10px;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(207, 236, 255, 0.15) !important;
  border-radius: 20px;
}

.logo,
.navbar-brand,
.project-title,
.doc-title,
.title {
  color: #f1f9ff !important;
}

.logo {
  text-shadow: 0 0 24px rgba(99, 232, 240, 0.28);
}

.back-link,
.nav-links a,
.nav-item {
  color: #a9bdd0 !important;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 360ms cubic-bezier(0.16, 1.25, 0.32, 1) !important;
}

.back-link:hover,
.nav-links a:hover,
.nav-item:hover,
.nav-item.active {
  color: #effaff !important;
  background: rgba(102, 226, 241, 0.08) !important;
  transform: translateY(-1px);
}

.panel,
.palette,
.canvas-area,
.code-panel,
.editor-section,
.results-area,
.wizard-panel,
.score-card,
.output-panel,
.document-page,
.diagram,
.sidebar,
.terminal,
.terminal-window,
.terminal-wrapper,
.terminal-block,
.topo-panel,
.code-panel,
.compare-card,
.card,
.chart-card,
.stat-card,
.course-card,
.login-box,
.argo-app,
.node-box,
.resource-tree,
.yaml-diff,
.hcl-panel,
.cost-summary,
.control-group,
.tabs-wrapper,
.scenario-container,
.certificate,
.report,
.action-item,
.breakdown-item,
.topology,
.warning-box,
.demo-notice,
.status-card,
.fact-card {
  border-color: rgba(207, 236, 255, 0.15) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(100, 222, 255, 0.085), transparent 31%),
    radial-gradient(circle at 96% 100%, rgba(143, 99, 255, 0.075), transparent 34%),
    linear-gradient(145deg, rgba(14, 32, 52, 0.76), rgba(5, 15, 27, 0.7)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 20px 0 42px rgba(58, 216, 240, 0.018),
    inset -20px 0 42px rgba(138, 93, 255, 0.026),
    0 24px 66px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(22px) saturate(155%);
}

.panel,
.wizard-panel,
.score-card,
.output-panel,
.document-page,
.diagram,
.terminal,
.terminal-window,
.terminal-wrapper,
.topo-panel,
.compare-card,
.card,
.chart-card,
.stat-card,
.course-card,
.argo-app,
.control-group,
.status-card {
  border-radius: 18px !important;
}

.header-section {
  border-radius: 18px;
}

.diagram {
  color: #9fb2c3 !important;
}

.component-item,
.node-props,
.form-control,
.input-group,
.option-label,
.option-btn,
.topology-node,
.check-item,
.checkbox-label,
.resource-graph,
.rules-table,
.graph-row,
.wizard-step,
.quick-btn,
.quick-endpoints,
.metric,
.panel-detail-row,
.action-items,
.verification-list li {
  border-color: rgba(204, 234, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.032) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.component-item:hover,
.option-btn:hover,
.option-label:hover,
.quick-btn:hover,
.wizard-step:hover,
.course-card:hover,
.stat-card:hover,
.chart-card:hover {
  border-color: rgba(104, 228, 242, 0.29) !important;
  background: rgba(68, 188, 216, 0.075) !important;
  transform: translateY(-3px);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-cta,
.btn-audit,
.btn-copy,
.btn-download,
.start-btn,
.cert-btn,
.sync-btn,
.back-btn,
.time-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 222, 255, 0.2) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(115deg, #167edc, #346ff0 52%, #7458e7) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 30px rgba(39, 109, 231, 0.24) !important;
  transition:
    transform 420ms cubic-bezier(0.16, 1.35, 0.32, 1),
    box-shadow 220ms ease,
    filter 220ms ease !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-cta:hover,
.btn-audit:hover,
.btn-copy:hover,
.btn-download:hover,
.start-btn:hover,
.cert-btn:hover,
.sync-btn:hover,
.back-btn:hover,
.time-btn:hover {
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    0 18px 42px rgba(43, 117, 242, 0.31) !important;
  transform: translateY(-3px) scale(1.012);
}

.btn-outline {
  background: rgba(10, 25, 42, 0.66) !important;
}

.btn-success,
.btn-emerald {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(115deg, #168b70, #1eb787) !important;
}

.tab-btn,
.code-tab,
.toc-item,
.time-btn {
  border-radius: 10px !important;
  color: #8fa5b9 !important;
  transition:
    color 180ms ease,
    background 180ms ease,
    transform 300ms ease !important;
}

.tab-btn:hover,
.tab-btn.active,
.code-tab:hover,
.code-tab.active,
.toc-item:hover,
.toc-item.active,
.time-btn:hover,
.time-btn.active {
  color: #f2faff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 232, 240, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

input,
textarea,
select,
.search-box,
.cert-input {
  border-color: rgba(207, 235, 255, 0.14) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)) !important;
  color: #edf7ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input:focus,
textarea:focus,
select:focus,
.search-box:focus,
.cert-input:focus {
  border-color: rgba(92, 221, 240, 0.56) !important;
  outline: 3px solid rgba(92, 221, 240, 0.12) !important;
  outline-offset: 1px;
}

.document-page,
.content-area {
  color: #dce8f2 !important;
}

.document-page p,
.document-page li,
.doc-subtitle,
.doc-meta,
.sign-text,
.verification-list small {
  color: #95a9ba !important;
}

.section-title,
.doc-title,
.sign-title,
.sign-name,
.status-card h2,
.verification-list strong {
  color: #eff9ff !important;
}

.doc-header,
.section-title,
.sign-off,
.verification-list li {
  border-color: rgba(205, 234, 255, 0.12) !important;
}

.status-pill,
.status-good,
.pass,
.success {
  border-color: rgba(83, 225, 169, 0.26) !important;
  background: rgba(56, 199, 145, 0.1) !important;
  color: #8fecc6 !important;
}

.uptime-demo i {
  box-shadow: 0 0 10px rgba(78, 185, 139, 0.18);
}

.status-legend,
.status-card p {
  color: #8fa3b6 !important;
}

.critical,
.alert-banner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 44px rgba(255, 51, 102, 0.12);
}

.terminal-body,
.code-content,
.env-output,
.script-output,
.response-panel,
pre,
code {
  background-color: rgba(2, 8, 17, 0.82) !important;
}

.progress-bar-wrap,
.bar-bg,
.progress-container {
  background: rgba(255, 255, 255, 0.07) !important;
}

@media (hover: hover) and (pointer: fine) {
  .panel,
  .wizard-panel,
  .score-card,
  .output-panel,
  .document-page,
  .topo-panel,
  .compare-card,
  .card,
  .chart-card,
  .stat-card,
  .course-card,
  .argo-app,
  .status-card {
    transition:
      transform 560ms cubic-bezier(0.16, 1.25, 0.32, 1),
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .chart-card:hover,
  .stat-card:hover,
  .course-card:hover,
  .compare-card:hover,
  .status-card:hover {
    border-color: rgba(103, 226, 241, 0.29) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 30px 76px rgba(0, 0, 0, 0.43) !important;
    transform: translateY(-5px);
  }
}

@media (max-width: 720px) {
  .navbar,
  .top-nav,
  body > nav {
    margin: 7px;
    border-radius: 16px;
  }

  .panel,
  .wizard-panel,
  .score-card,
  .output-panel,
  .document-page,
  .topo-panel,
  .compare-card,
  .card,
  .chart-card,
  .stat-card,
  .course-card,
  .argo-app,
  .status-card {
    border-radius: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared home and theme controls ------------------------------------------- */

.navbar,
.top-nav,
body > nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.global-site-actions {
  position: relative;
  z-index: 20;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}

.global-home-link,
.theme-toggle {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(206, 235, 255, 0.14);
  border-radius: 11px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.11), transparent 43%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #b6c8d9 !important;
  font: 740 0.73rem/1 var(--font-sans, Inter, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 360ms cubic-bezier(0.16, 1.25, 0.32, 1);
}

.global-home-link:hover,
.global-home-link[aria-current="page"],
.theme-toggle:hover {
  border-color: rgba(98, 225, 239, 0.31);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 43%),
    rgba(78, 198, 218, 0.09);
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 10px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.global-action-icon {
  min-width: 15px;
  color: #6de6ed;
  line-height: 1;
  text-align: center;
}

.global-action-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle[aria-pressed="true"] .global-action-icon {
  color: #7665dc;
}

.floating-site-actions {
  position: fixed;
  z-index: 1200;
  top: 14px;
  right: 14px;
  padding: 6px;
  border: 1px solid rgba(205, 234, 255, 0.15);
  border-radius: 15px;
  background: rgba(7, 18, 31, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 44px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(22px) saturate(155%);
}

/* Complete light presentation for labs, tools, and project demos ----------- */

html[data-theme="light"] {
  --bg-main: #edf4f8;
  --bg: #edf4f8;
  --bg-color: #edf4f8;
  --bg-panel: rgba(248, 252, 255, 0.8);
  --surface: rgba(248, 252, 255, 0.77);
  --surface-color: rgba(248, 252, 255, 0.77);
  --surface-light: rgba(232, 243, 249, 0.84);
  --surface-hover: rgba(221, 239, 247, 0.88);
  --card-bg: rgba(248, 252, 255, 0.78);
  --sidebar-bg: rgba(235, 245, 250, 0.82);
  --glass-bg: rgba(244, 250, 253, 0.74);
  --border: rgba(42, 94, 130, 0.17);
  --border-color: rgba(42, 94, 130, 0.17);
  --glass-border: rgba(42, 94, 130, 0.18);
  --text: #172d40;
  --text-main: #172d40;
  --text-muted: #5f7487;
  --primary: #147e9a;
  --primary-hover: #0e6a82;
  --cyan: #11869a;
  --violet: #7259cc;
  --emerald: #167d59;
  --glass-shadow:
    0 25px 68px rgba(59, 89, 111, 0.16),
    inset 0 1px 0 #fff;
  color-scheme: light;
}

html[data-theme="light"] body {
  color: #172d40 !important;
  background:
    radial-gradient(circle at 88% 5%, rgba(120, 97, 220, 0.13), transparent 29rem),
    radial-gradient(circle at 5% 85%, rgba(41, 170, 198, 0.1), transparent 31rem),
    linear-gradient(150deg, #f8fcfd, #e8f2f7 53%, #f5f9fb) !important;
}

html[data-theme="light"] body::before {
  background:
    repeating-linear-gradient(112deg, transparent 0 3px, rgba(23, 67, 96, 0.013) 3px 4px),
    linear-gradient(rgba(23, 67, 96, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 67, 96, 0.02) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  opacity: 0.56;
  mix-blend-mode: multiply;
}

html[data-theme="light"] :is(.navbar, .top-nav, body > nav, .header-section, .tabs-header, .hud) {
  border-color: rgba(43, 95, 131, 0.18) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(55, 183, 208, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(253, 255, 255, 0.89), rgba(229, 241, 248, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 48px rgba(62, 92, 113, 0.15) !important;
}

html[data-theme="light"] :is(.logo, .navbar-brand, .project-title, .doc-title, .title, h1, h2, h3, h4, strong) {
  color: #172d40 !important;
}

html[data-theme="light"] :is(.back-link, .nav-links a, .nav-item, .nav-right a, body > nav a) {
  color: #526b7e !important;
}

html[data-theme="light"] :is(.back-link, .nav-links a, .nav-item, .nav-right a, body > nav a):hover {
  color: #163348 !important;
  background: rgba(59, 184, 208, 0.09) !important;
}

html[data-theme="light"] :is(.global-home-link, .theme-toggle, .floating-site-actions) {
  border-color: rgba(41, 94, 130, 0.17);
  background:
    radial-gradient(circle at 20% 0%, #fff, transparent 44%),
    rgba(237, 247, 251, 0.82);
  color: #38576d !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(62, 91, 112, 0.12);
}

html[data-theme="light"] :is(.global-home-link:hover, .global-home-link[aria-current="page"], .theme-toggle:hover) {
  border-color: rgba(38, 151, 177, 0.29);
  background: rgba(210, 239, 246, 0.88);
  color: #14364b !important;
}

html[data-theme="light"] .global-action-icon {
  color: #12849a;
}

html[data-theme="light"] :is(
    .panel,
    .palette,
    .canvas-area,
    .code-panel,
    .editor-section,
    .results-area,
    .wizard-panel,
    .score-card,
    .output-panel,
    .document-page,
    .diagram,
    .sidebar,
    .topo-panel,
    .compare-card,
    .card,
    .chart-card,
    .stat-card,
    .course-card,
    .login-box,
    .argo-app,
    .node-box,
    .resource-tree,
    .yaml-diff,
    .hcl-panel,
    .cost-summary,
    .control-group,
    .tabs-wrapper,
    .scenario-container,
    .certificate,
    .report,
    .action-item,
    .breakdown-item,
    .topology,
    .warning-box,
    .demo-notice,
    .status-card,
    .fact-card
  ) {
  border-color: rgba(42, 94, 130, 0.17) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(46, 177, 203, 0.11), transparent 31%),
    radial-gradient(circle at 96% 100%, rgba(125, 93, 218, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(253, 255, 255, 0.84), rgba(228, 240, 247, 0.77)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 20px 0 42px rgba(48, 178, 203, 0.025),
    inset -20px 0 42px rgba(125, 92, 218, 0.03),
    0 24px 64px rgba(63, 92, 113, 0.14) !important;
  color: #1a3145 !important;
}

html[data-theme="light"] :is(
    p,
    li,
    label,
    .description,
    .subtitle,
    .text-muted,
    .muted,
    .status-legend,
    .status-card p,
    .verification-list span,
    .doc-meta,
    .meta
  ) {
  color: #5a7184 !important;
}

html[data-theme="light"] :is(input, select, textarea) {
  border-color: rgba(42, 94, 130, 0.19) !important;
  background: rgba(255, 255, 255, 0.69) !important;
  color: #183348 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html[data-theme="light"] :is(input, textarea)::placeholder {
  color: #7a8f9f !important;
  opacity: 1;
}

html[data-theme="light"] select option {
  background: #f6fafc;
  color: #183348;
}

html[data-theme="light"] :is(button, .btn, .start-btn, .action-button, .tab-btn) {
  border-color: rgba(42, 94, 130, 0.18);
}

html[data-theme="light"] :is(.tab, .tab-btn, .nav-tab):not(.active) {
  color: #526b7e !important;
  background: rgba(239, 247, 251, 0.74) !important;
}

html[data-theme="light"] :is(.doc-header, .section-title, .sign-off, .verification-list li) {
  border-color: rgba(42, 94, 130, 0.14) !important;
}

html[data-theme="light"] :is(.status-pill, .status-good, .pass, .success) {
  border-color: rgba(21, 128, 88, 0.22) !important;
  background: rgba(35, 165, 113, 0.1) !important;
  color: #116f4d !important;
}

html[data-theme="light"] :is(.progress-bar-wrap, .bar-bg, .progress-container) {
  background: rgba(31, 74, 104, 0.09) !important;
}

html[data-theme="light"] :is(.terminal-body, .code-content, .env-output, .script-output, .response-panel, pre, code) {
  background-color: #0b1825 !important;
  color: #e6f4ff !important;
}

@media (max-width: 1100px) {
  .global-action-label {
    display: none;
  }

  .global-home-link,
  .theme-toggle {
    width: 38px;
    padding-inline: 8px;
  }
}

@media (max-width: 720px) {
  .global-site-actions {
    gap: 5px;
  }

  .global-home-link,
  .theme-toggle {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
  }

  .navbar > .back-link,
  body > nav > .back-link {
    display: none;
  }

  .floating-site-actions {
    top: 9px;
    right: 9px;
  }
}

/* Warm off-white glass refinement ------------------------------------------ */

.global-brand-home {
  cursor: pointer;
}

.global-brand-home:focus-visible {
  outline: 3px solid rgba(64, 190, 211, 0.32);
  outline-offset: 5px;
  border-radius: 10px;
}

html[data-theme="light"] {
  --bg-main: #f3efe7;
  --bg: #f3efe7;
  --bg-color: #f3efe7;
  --bg-panel: rgba(255, 253, 248, 0.81);
  --surface: rgba(255, 253, 248, 0.79);
  --surface-color: rgba(255, 253, 248, 0.79);
  --surface-light: rgba(242, 237, 228, 0.86);
  --surface-hover: rgba(236, 230, 219, 0.9);
  --card-bg: rgba(255, 253, 248, 0.79);
  --sidebar-bg: rgba(245, 240, 231, 0.84);
  --glass-bg: rgba(252, 249, 242, 0.75);
  --border: rgba(34, 43, 50, 0.16);
  --border-color: rgba(34, 43, 50, 0.16);
  --glass-border: rgba(34, 43, 50, 0.17);
  --text: #11171c;
  --text-main: #11171c;
  --text-muted: #545e67;
  --primary: #0f7b94;
  --primary-hover: #0a667c;
  --cyan: #0d8196;
  --violet: #6d54c9;
  --emerald: #127550;
}

html[data-theme="light"] body {
  color: #11171c !important;
  background:
    radial-gradient(circle at 88% 4%, rgba(123, 97, 220, 0.11), transparent 30rem),
    radial-gradient(circle at 5% 88%, rgba(37, 169, 191, 0.1), transparent 32rem),
    linear-gradient(145deg, #fffdf8 0%, #f2eee6 50%, #faf7f0 100%) !important;
}

html[data-theme="light"] :is(.navbar, .top-nav, body > nav, .header-section, .tabs-header, .hud) {
  border-color: rgba(34, 43, 50, 0.16) !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(55, 188, 209, 0.14), transparent 32%),
    radial-gradient(circle at 97% 100%, rgba(126, 98, 220, 0.09), transparent 28%),
    linear-gradient(135deg, rgba(255, 254, 250, 0.89), rgba(240, 235, 226, 0.81)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 48px rgba(55, 58, 60, 0.14) !important;
}

html[data-theme="light"] :is(
    .panel,
    .palette,
    .canvas-area,
    .code-panel,
    .editor-section,
    .results-area,
    .wizard-panel,
    .score-card,
    .output-panel,
    .document-page,
    .diagram,
    .sidebar,
    .topo-panel,
    .compare-card,
    .card,
    .chart-card,
    .stat-card,
    .course-card,
    .login-box,
    .argo-app,
    .node-box,
    .resource-tree,
    .yaml-diff,
    .hcl-panel,
    .cost-summary,
    .control-group,
    .tabs-wrapper,
    .scenario-container,
    .certificate,
    .report,
    .action-item,
    .breakdown-item,
    .topology,
    .warning-box,
    .demo-notice,
    .status-card,
    .fact-card
  ) {
  border-color: rgba(34, 43, 50, 0.15) !important;
  background:
    radial-gradient(circle at 11% 0%, rgba(50, 184, 205, 0.105), transparent 31%),
    radial-gradient(circle at 96% 100%, rgba(126, 96, 219, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(255, 254, 250, 0.85), rgba(239, 234, 225, 0.76)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 20px 0 42px rgba(48, 178, 200, 0.025),
    inset -20px 0 42px rgba(124, 93, 217, 0.026),
    0 25px 66px rgba(55, 58, 60, 0.13) !important;
  color: #131a20 !important;
}

html[data-theme="light"] :is(.logo, .navbar-brand, .project-title, .doc-title, .title, h1, h2, h3, h4, strong) {
  color: #11171c !important;
}

html[data-theme="light"] :is(
    p,
    li,
    label,
    .description,
    .subtitle,
    .text-muted,
    .muted,
    .status-legend,
    .status-card p,
    .verification-list span,
    .doc-meta,
    .meta
  ) {
  color: #525c65 !important;
}

html[data-theme="light"] :is(input, select, textarea) {
  border-color: rgba(31, 40, 47, 0.17) !important;
  background: rgba(255, 254, 250, 0.75) !important;
  color: #111820 !important;
}

html[data-theme="light"] :is(.global-home-link, .theme-toggle, .floating-site-actions) {
  border-color: rgba(34, 43, 50, 0.16);
  background:
    radial-gradient(circle at 20% 0%, #fff, transparent 44%),
    rgba(246, 241, 232, 0.83);
  color: #2d3c47 !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px rgba(53, 57, 59, 0.11);
}

html[data-theme="light"] :is(.tab-btn.active, .tab.active, .nav-tab.active) {
  border-color: rgba(30, 131, 153, 0.24) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(135deg, rgba(47, 184, 208, 0.24), rgba(124, 94, 216, 0.17)) !important;
  color: #102b38 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 26px rgba(52, 74, 86, 0.1) !important;
}

/* Light-mode contrast contract for every standalone lab -------------------- */

html[data-theme="light"] body {
  color: #11171c !important;
}

html[data-theme="light"] :is(h1, h2, h3, h4, h5, h6, legend, label, strong, th, dt) {
  color: #11171c !important;
}

html[data-theme="light"] :is(p, li, small, dd, td, .hint, .helper-text) {
  color: #4f5962 !important;
}

html[data-theme="light"] :is(a, .back-link, .nav-links a, .nav-right a) {
  color: #185d70 !important;
}

html[data-theme="light"] :is(a, .back-link, .nav-links a, .nav-right a):hover {
  color: #0b3f4e !important;
}

html[data-theme="light"] button {
  color: #14242e;
}

html[data-theme="light"] :is(
    .btn-primary,
    .btn-audit,
    .btn-download,
    .btn-emerald,
    .btn-success,
    .start-btn,
    .sync-btn
  ) {
  color: #fff !important;
}

html[data-theme="light"] :is(.terminal-body, .code-content, .env-output, .script-output, .response-panel, pre, code),
html[data-theme="light"] :is(.terminal-body, .code-content, .env-output, .script-output, .response-panel, pre, code) * {
  color: #e6f4ff !important;
}

html[data-theme="light"] ::selection {
  background: rgba(42, 169, 193, 0.24);
  color: #10161b;
}

/* Component-level light contrast. These controls use translucent surfaces
   instead of the dark code panes above, so their labels must stay ink-dark. */
html[data-theme="light"] :is(.code-tab, .toc-item, .time-btn) {
  border-color: rgba(34, 43, 50, 0.15) !important;
  background: rgba(255, 253, 248, 0.72) !important;
  color: #43515b !important;
}

html[data-theme="light"] :is(
    .code-tab:hover,
    .code-tab.active,
    .toc-item:hover,
    .toc-item.active,
    .time-btn:hover,
    .time-btn.active
  ) {
  border-color: rgba(18, 126, 150, 0.25) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(135deg, rgba(45, 177, 201, 0.2), rgba(116, 87, 206, 0.13)) !important;
  color: #102b38 !important;
}

html[data-theme="light"] :is(.section-title, .cert-name, .cert-body) {
  color: #172229 !important;
}

html[data-theme="light"] .certificate {
  border-color: rgba(117, 88, 28, 0.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 224, 132, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 254, 249, 0.96), rgba(242, 234, 213, 0.9)) !important;
}