@import url("./maliou-tokens.css");

/* Shared baseline for the current static pages. Page-specific selectors below
   keep existing markup and behavior intact while normalizing the visual layer. */
html,
body {
  letter-spacing: 0 !important;
}

body:has(.bg-orbs) {
  --ml-canvas: #0b0f17;
  --ml-surface: #131a25;
  --ml-surface-soft: #182130;
  --ml-text: #f3f0e8;
  --ml-text-muted: #a1abb7;
  --ml-border: #293548;
  --ml-brand: #67c5d8;
  --ml-brand-soft: #172e39;
  --ml-accent: #c7a360;
  min-height: 100vh;
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.bg-orbs) .bg-orbs {
  display: none !important;
}

body:has(.bg-orbs) nav {
  border-bottom: 1px solid var(--ml-border) !important;
  background: rgba(11, 15, 23, .92) !important;
  backdrop-filter: blur(16px);
}

body:has(.bg-orbs) .nav-inner {
  padding: 14px 24px !important;
}

body:has(.bg-orbs) .nav-logo .grad,
body:has(.bg-orbs) .hero h1 .grad {
  background: none !important;
  color: var(--ml-brand) !important;
}

body:has(.bg-orbs) .nav-links a {
  color: var(--ml-text-muted) !important;
}

body:has(.bg-orbs) .nav-links a:hover {
  color: var(--ml-text) !important;
}

body:has(.bg-orbs) .hero {
  padding-top: 144px !important;
}

body:has(.bg-orbs) .hero-tag {
  border-color: color-mix(in srgb, var(--ml-brand) 45%, var(--ml-border)) !important;
  border-radius: 999px !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.bg-orbs) .stat,
body:has(.bg-orbs) .project-card {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}

body:has(.bg-orbs) .project-card:hover {
  border-color: color-mix(in srgb, var(--ml-brand) 65%, var(--ml-border)) !important;
  background: var(--ml-surface-soft) !important;
}

body:has(.bg-orbs) .project-card.accent-purple,
body:has(.bg-orbs) .project-card.accent-pink,
body:has(.bg-orbs) .project-card.accent-cyan,
body:has(.bg-orbs) .project-card.accent-blue,
body:has(.bg-orbs) .project-card.accent-gold {
  border-top-color: var(--ml-brand) !important;
}

body:has(.bg-orbs) .project-emoji {
  border-radius: 8px !important;
  background: var(--ml-surface-soft) !important;
}

body:has(.bg-orbs) .section-sub,
body:has(.bg-orbs) .project-desc,
body:has(.bg-orbs) footer {
  color: var(--ml-text-muted) !important;
}

body:has(.hub-shell) {
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.hub-shell) .hub-top {
  border-bottom-color: var(--ml-border) !important;
}

body:has(.hub-shell) .hero-copy,
body:has(.hub-shell) .status-card,
body:has(.hub-shell) .site-card {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.hub-shell) .site-card:hover,
body:has(.hub-shell) .site-card:focus-visible {
  border-color: var(--ml-brand) !important;
  background: var(--ml-surface-soft) !important;
  box-shadow: var(--ml-shadow-md) !important;
}

body:has(.hub-shell) .wordmark span,
body:has(.hub-shell) .eyebrow,
body:has(.hub-shell) .site-code {
  color: var(--ml-brand) !important;
}

body:has(.hub-shell) .site-tag {
  border-color: var(--ml-border) !important;
  border-radius: 999px !important;
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text-muted) !important;
}

body:has(.hub-shell) .live-dot {
  background: var(--ml-success) !important;
  box-shadow: 0 0 0 4px var(--ml-success-soft) !important;
}

body:has(.invest-hero) {
  --ml-canvas: #0b0f17;
  --ml-surface: #131a25;
  --ml-surface-soft: #182130;
  --ml-text: #f3f0e8;
  --ml-text-muted: #a1abb7;
  --ml-border: #293548;
  --ml-brand: #67c5d8;
  --ml-brand-soft: #172e39;
  --ml-accent: #c7a360;
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.invest-hero) .header,
body:has(.invest-hero) .top {
  border-bottom-color: var(--ml-border) !important;
  background: rgba(11, 15, 23, .94) !important;
}

body:has(.invest-hero) .invest-hero-main,
body:has(.invest-hero) .invest-hero-side,
body:has(.invest-hero) .section,
body:has(.invest-hero) .panel,
body:has(.invest-hero) .kpi-card,
body:has(.invest-hero) .risk-card,
body:has(.invest-hero) .action-card,
body:has(.invest-hero) .card,
body:has(.invest-hero) .rule,
body:has(.invest-hero) .month-card,
body:has(.invest-hero) .metric,
body:has(.invest-hero) .plan div {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.invest-hero) .invest-hero-main,
body:has(.invest-hero) .invest-hero-side {
  background: var(--ml-surface) !important;
}

body:has(.invest-hero) .invest-hero-kicker,
body:has(.invest-hero) .logo span,
body:has(.invest-hero) .brand span,
body:has(.invest-hero) .header-link:hover,
body:has(.invest-hero) .nav a:hover,
body:has(.invest-hero) .radar-actions a:hover {
  color: var(--ml-brand) !important;
}

body:has(.invest-hero) .tabs {
  border-bottom-color: var(--ml-border) !important;
}

body:has(.invest-hero) .tab {
  border-color: transparent !important;
  border-radius: 6px !important;
  color: var(--ml-text-muted) !important;
}

body:has(.invest-hero) .tab.active,
body:has(.invest-hero) .tab.active:hover {
  border-color: color-mix(in srgb, var(--ml-brand) 42%, var(--ml-border)) !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.invest-hero) table {
  border-color: var(--ml-border) !important;
}

body:has(.invest-hero) th {
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text-muted) !important;
}

body:has(.invest-hero) td {
  border-bottom-color: var(--ml-border) !important;
}

body:has(.top-inner) {
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.top-inner) .top {
  border-bottom-color: var(--ml-border) !important;
  background: rgba(242, 245, 242, .94) !important;
}

body:has(.top-inner) .panel,
body:has(.top-inner) .decision-card,
body:has(.top-inner) .market-panel,
body:has(.top-inner) .card {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.top-inner) .panel,
body:has(.top-inner) .decision-card,
body:has(.top-inner) .card {
  background: var(--ml-surface) !important;
}

body:has(.top-inner) .title,
body:has(.top-inner) .market-title {
  border-bottom-color: var(--ml-border) !important;
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text) !important;
}

body:has(.top-inner) .box,
body:has(.top-inner) .decision div,
body:has(.top-inner) .tags span,
body:has(.top-inner) .agent-verdict > div,
body:has(.top-inner) .agent-detail,
body:has(.top-inner) .strategy-review span,
body:has(.top-inner) .summary-card,
body:has(.top-inner) .cmd {
  border-color: var(--ml-border) !important;
  border-radius: 6px !important;
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text) !important;
}

body:has(.top-inner) .box span,
body:has(.top-inner) .agent-verdict span,
body:has(.top-inner) .agent-detail p,
body:has(.top-inner) .summary-card span,
body:has(.top-inner) .summary-card small,
body:has(.top-inner) .ai-body p,
body:has(.top-inner) .dim,
body:has(.top-inner) .empty {
  color: var(--ml-text-muted) !important;
}

body:has(.top-inner) .ai-body h3,
body:has(.top-inner) .ai-body h4,
body:has(.top-inner) .ai-body h5 {
  color: var(--ml-text) !important;
}

body:has(.top-inner) .summary-card b,
body:has(.top-inner) .box b {
  color: var(--ml-text) !important;
}

body:has(.top-inner) .brand span,
body:has(.top-inner) .nav a:hover,
body:has(.top-inner) .nav summary:hover,
body:has(.top-inner) .status-good,
body:has(.top-inner) .pos {
  color: var(--ml-success) !important;
}

body:has(.top-inner) .nav a,
body:has(.top-inner) .nav summary {
  border-radius: 6px !important;
}

body:has(.wrap):not(:has(.modebar)) {
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.wrap):not(:has(.modebar)) .wrap {
  max-width: var(--ml-content) !important;
}

body:has(.wrap):not(:has(.modebar)) .top {
  border-bottom: 1px solid var(--ml-border) !important;
  background: rgba(242, 245, 242, .94) !important;
}

body:has(.wrap):not(:has(.modebar)) .panel,
body:has(.wrap):not(:has(.modebar)) .card,
body:has(.wrap):not(:has(.modebar)) .summary-card {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.wrap):not(:has(.modebar)) .summary-card span,
body:has(.wrap):not(:has(.modebar)) .summary-card small {
  color: var(--ml-text-muted) !important;
}

body:has(.wrap):not(:has(.modebar)) .summary-card b {
  color: var(--ml-text) !important;
}

body:has(.wrap):not(:has(.modebar)) .title {
  border-bottom-color: var(--ml-border) !important;
  background: var(--ml-surface-soft) !important;
}

body:has(.wrap):not(:has(.modebar)) .nav a {
  border-color: var(--ml-border) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ml-text-muted) !important;
}

body:has(.wrap):not(:has(.modebar)) .nav a:hover {
  border-color: var(--ml-brand) !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.top-inner),
body:has(.wrap):not(:has(.modebar)) {
  overflow-x: hidden !important;
}

body:has(.top-inner) .grid,
body:has(.wrap):not(:has(.modebar)) .grid {
  min-width: 0 !important;
}

body:has(.wrap):not(:has(.modebar)) .grid > .card,
body:has(.wrap):not(:has(.modebar)) .panel,
body:has(.wrap):not(:has(.modebar)) .pad {
  min-width: 0 !important;
}

body:has(.wrap):not(:has(.modebar)) .panel {
  overflow: hidden !important;
}

body:has(.wrap):not(:has(.modebar)) .panel > .pad {
  overflow-x: auto !important;
}

body:has(.wrap):not(:has(.modebar)) .grid > .card span {
  overflow-wrap: anywhere;
}

body:has(.md-container) {
  --ml-canvas: #f2f5f2;
  --ml-surface: #ffffff;
  --ml-surface-soft: #f7f9f7;
  --ml-text: #16231e;
  --ml-text-muted: #61716a;
  --ml-border: #d9e1dc;
  --ml-border-strong: #bdcbc3;
  --ml-brand: #3c6d9d;
  --ml-brand-soft: #edf4fa;
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.md-container) .md-header,
body:has(.md-container) .md-tabs {
  background: var(--ml-surface) !important;
  border-bottom: 1px solid var(--ml-border) !important;
  box-shadow: none !important;
}

body:has(.md-container) .md-tabs {
  background: var(--ml-surface-soft) !important;
}

body:has(.md-container) .md-nav__link,
body:has(.md-container) .md-tabs__link,
body:has(.md-container) .md-header__topic,
body:has(.md-container) .md-header__title {
  color: var(--ml-text-muted) !important;
}

body:has(.md-container) .md-nav__link:hover,
body:has(.md-container) .md-nav__link--active,
body:has(.md-container) .md-tabs__link:hover,
body:has(.md-container) .md-tabs__item--active .md-tabs__link {
  color: var(--ml-brand) !important;
}

body:has(.md-container) .md-content__inner,
body:has(.md-container) .md-sidebar__inner {
  color: var(--ml-text) !important;
}

body:has(.md-container) .md-typeset h1,
body:has(.md-container) .md-typeset h2,
body:has(.md-container) .md-typeset h3,
body:has(.md-container) .md-typeset h4 {
  color: var(--ml-text) !important;
}

body:has(.md-container) .md-typeset a {
  color: var(--ml-brand) !important;
}

body:has(.md-container) .md-typeset code,
body:has(.md-container) .md-typeset pre {
  border: 1px solid var(--ml-border) !important;
  border-radius: 6px !important;
  background: var(--ml-surface-soft) !important;
}

body:has(.md-container) .md-typeset table:not([class]) {
  border: 1px solid var(--ml-border) !important;
  background: var(--ml-surface) !important;
}

body:has(.md-container) .md-container {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body:has(.md-container) .md-content,
body:has(.md-container) .md-content__inner {
  background: var(--ml-canvas) !important;
}

body:has(.md-container) :where(.md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td) {
  border-bottom-color: var(--ml-border) !important;
}

body:has(.app-shell) {
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.app-shell) .topbar,
body:has(.app-shell) .sidebar,
body:has(.app-shell) .right-rail,
body:has(.app-shell) .panel,
body:has(.app-shell) .card-panel,
body:has(.app-shell) .lesson-card,
body:has(.app-shell) .practice-card,
body:has(.app-shell) .roadmap-card,
body:has(.app-shell) .review-card,
body:has(.app-shell) .note-card,
body:has(.app-shell) .module-item,
body:has(.app-shell) .demo-card,
body:has(.app-shell) .stage-card,
body:has(.app-shell) .topic-card,
body:has(.app-shell) .visualizer-panel,
body:has(.app-shell) .code-panel,
body:has(.app-shell) .content-panel {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.app-shell) .main-nav a.active,
body:has(.app-shell) .main-nav a:hover,
body:has(.app-shell) .tab.active,
body:has(.app-shell) .lesson-tabs a.active {
  border-radius: 6px !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.modebar) {
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.modebar) .hero,
body:has(.modebar) .pass-card,
body:has(.modebar) .q-card,
body:has(.modebar) .plan-card,
body:has(.modebar) .subject-card,
body:has(.modebar) .weak-item,
body:has(.modebar) .note-section,
body:has(.modebar) .year-card,
body:has(.modebar) .paper-card {
  border-color: var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
}

body:has(.modebar) .mode.active,
body:has(.modebar) .tab.active,
body:has(.modebar) .chip.active,
body:has(.modebar) .btn-primary {
  border-color: color-mix(in srgb, var(--ml-brand) 42%, var(--ml-border)) !important;
  border-radius: 6px !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.modebar) .modebar,
body:has(.modebar) .tabs {
  border: 1px solid var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface-soft) !important;
  box-shadow: none !important;
}

body:has(.modebar) .mode,
body:has(.modebar) .tab,
body:has(.modebar) .chip {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--ml-text-muted) !important;
}

body:has(.modebar) .mode:hover,
body:has(.modebar) .tab:hover,
body:has(.modebar) .chip:hover {
  border-color: var(--ml-border) !important;
  background: var(--ml-surface) !important;
  color: var(--ml-text) !important;
}

body:has(.modebar) .btn-ghost {
  border-color: var(--ml-border) !important;
  border-radius: 6px !important;
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text-muted) !important;
}

body:has(.layout) {
  --ml-canvas: #f2f5f2;
  --ml-surface: #ffffff;
  --ml-surface-soft: #f7f9f7;
  --ml-text: #16231e;
  --ml-text-muted: #61716a;
  --ml-border: #d9e1dc;
  --ml-brand: #3c6d9d;
  --ml-brand-soft: #edf4fa;
  background: var(--ml-canvas) !important;
  color: var(--ml-text) !important;
  font-family: var(--ml-font-ui) !important;
}

body:has(.layout) header,
body:has(.layout) .layout {
  max-width: var(--ml-content) !important;
}

body:has(.layout) nav.side,
body:has(.layout) .card,
body:has(.layout) .grp-head {
  border: 1px solid var(--ml-border) !important;
  border-radius: 8px !important;
  background: var(--ml-surface) !important;
  box-shadow: var(--ml-shadow-sm) !important;
  color: var(--ml-text) !important;
}

body:has(.layout) nav.side {
  padding: 14px !important;
}

body:has(.layout) .search,
body:has(.layout) .filters button,
body:has(.layout) .pill,
body:has(.layout) .nav-grp a,
body:has(.layout) .card code {
  border: 1px solid var(--ml-border) !important;
  border-radius: 6px !important;
  background: var(--ml-surface-soft) !important;
  color: var(--ml-text) !important;
}

body:has(.layout) .filters button.on,
body:has(.layout) .nav-grp a.active {
  border-color: var(--ml-brand) !important;
  background: var(--ml-brand-soft) !important;
  color: var(--ml-brand) !important;
}

body:has(.layout) .card:hover,
body:has(.layout) .grp-head:hover {
  border-color: var(--ml-brand) !important;
  box-shadow: var(--ml-shadow-md) !important;
}

body:has(.layout) .card h2,
body:has(.layout) .card h3,
body:has(.layout) .grp-name,
body:has(.layout) .card b {
  color: var(--ml-text) !important;
}

body:has(.layout) .card h3,
body:has(.layout) .pill b {
  color: var(--ml-brand) !important;
}

@media (max-width: 700px) {
  body:has(.bg-orbs) .nav-inner {
    padding: 12px 16px !important;
  }

  body:has(.bg-orbs) .nav-links {
    gap: 14px !important;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body:has(.bg-orbs) .hero {
    padding: 126px 20px 56px !important;
  }

  body:has(.bg-orbs) .hero h1 {
    font-size: 48px !important;
  }

  body:has(.bg-orbs) .project-grid {
    grid-template-columns: 1fr !important;
  }

  body:has(.invest-hero) .header-inner,
  body:has(.top-inner) .top-inner {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body:has(.invest-hero) .header-meta,
  body:has(.invest-hero) .tabs,
  body:has(.top-inner) .nav {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  body:has(.top-inner) .grid {
    grid-template-columns: 1fr !important;
  }

  body:has(.md-container) .md-header__inner,
  body:has(.md-container) .md-tabs__list {
    overflow-x: auto !important;
  }

  body:has(.md-container) .md-main__inner {
    min-width: 0 !important;
  }

  body:has(.md-container) .data-flow {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body:has(.layout) {
    padding: 16px !important;
  }

  body:has(.layout) .layout {
    grid-template-columns: 1fr !important;
  }

  body:has(.layout) nav.side {
    position: static !important;
  }
}