/* === V53 FLAGSHIP ENTERPRISE DESIGN SYSTEM === */
:root {
  --v53-emerald: #006c55;
  --v53-emerald-dark: #004d3c;
  --v53-teal-glow: rgba(0, 131, 106, 0.14);
  --v53-gold: #c86412;
  --v53-ink: #0f2532;
  --v53-surface: rgba(255, 255, 255, 0.86);
  --v53-border: rgba(15, 37, 50, 0.11);
  --v53-shadow-sm: 0 4px 16px rgba(15, 37, 50, 0.05);
  --v53-shadow-md: 0 14px 38px rgba(15, 37, 50, 0.08);
  --v53-shadow-lg: 0 24px 60px rgba(15, 37, 50, 0.12);
}

/* Subtle ambient hero mesh backdrop */
body.sci-v48 {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(0, 121, 92, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(214, 166, 101, 0.09) 0%, transparent 36%);
  background-attachment: fixed;
}

/* Glassmorphic Header Enhancement */
.s-header {
  background: rgba(247, 248, 244, 0.85) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid rgba(15, 37, 50, 0.09) !important;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.s-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 30px rgba(15, 37, 50, 0.07);
}

/* Command Palette Search Trigger Shortcut Badge */
.s-cmd-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #425852;
  background: #e9efe8;
  border: 1px solid #c8d6c9;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Elevated Interactive Cards & Buttons */
.s-tool, .s-path a, .s-feature-reading, .s-reading-list a, .c-track-card, .c-panel {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease !important;
}
.s-tool:hover, .s-path a:hover, .s-feature-reading:hover, .c-track-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--v53-shadow-md) !important;
}

/* Hero Workbench Scenario Pills */
.s-lab {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  box-shadow: var(--v53-shadow-lg) !important;
  border: 1px solid rgba(0, 108, 85, 0.18) !important;
}
.s-scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 12px;
  padding-top: 10px;
  border-top: 1px dashed #d7e2d8;
}
.s-scenario-bar small {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4e645d;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.s-scenario-chip {
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #c5d6cc;
  background: #f5f9f6;
  color: #1c3d35;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.s-scenario-chip:hover, .s-scenario-chip.is-active {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
}

/* Animated Executive Metrics Bar */
.s-metrics-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 26px 0 42px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #0f2532 0%, #163847 100%);
  color: #f3f8f6;
  border-radius: 20px;
  box-shadow: var(--v53-shadow-md);
}
.s-metric-cell {
  padding: 8px 10px;
  border-left: 2px solid rgba(158, 226, 210, 0.25);
}
.s-metric-cell:first-child {
  border-left: 0;
}
.s-metric-cell strong {
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: #a8f0dc;
  line-height: 1.1;
  margin-bottom: 4px;
}
.s-metric-cell span {
  display: block;
  font-size: 0.76rem;
  color: #d0e4df;
  line-height: 1.3;
}

/* Interactive 5-Stage End-to-End Architecture Storyteller */
.s-story-shell {
  background: #ffffff;
  border: 1px solid #cfe0d8;
  border-radius: 24px;
  padding: 30px;
  margin: 22px 0 10px;
  box-shadow: var(--v53-shadow-sm);
}
.s-story-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.s-story-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1.5px solid #d5e3dc;
  background: #f7faf8;
  color: #193342;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s ease;
}
.s-story-tab span {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #006c55;
}
.s-story-tab b {
  font-size: 0.92rem;
  color: #132a36;
}
.s-story-tab small {
  font-size: 0.75rem;
  color: #526773;
}
.s-story-tab:hover {
  border-color: #006c55;
  background: #eef7f4;
}
.s-story-tab[aria-selected="true"] {
  background: #0f2532;
  border-color: #0f2532;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 37, 50, 0.18);
}
.s-story-tab[aria-selected="true"] span {
  color: #8ce8d0;
}
.s-story-tab[aria-selected="true"] b {
  color: #ffffff;
}
.s-story-tab[aria-selected="true"] small {
  color: #c2dce4;
}
.s-story-stage {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background: #f4f9f7;
  border-radius: 18px;
  border: 1px solid #cde0d8;
}
.s-story-stage h3 {
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: #0f2532;
}
.s-story-stage p {
  font-size: 0.95rem;
  color: #2c4654;
  margin: 0 0 14px;
}
.s-story-formula {
  padding: 12px 16px;
  background: #ffffff;
  border-left: 4px solid #006c55;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: #0f2532;
  margin-bottom: 14px;
}
.s-story-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.s-story-kpi {
  background: #ffffff;
  border: 1px solid #d4e4dd;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}
.s-story-kpi small {
  display: block;
  font-size: 0.72rem;
  color: #556c78;
  margin-bottom: 4px;
}
.s-story-kpi strong {
  font-size: 1.25rem;
  color: #006c55;
}

/* Intelligent Feature: Deterministic Supply Chain Diagnostic & Recommendation Co-Pilot */
.s-copilot-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f8f5 100%);
  border: 1.5px solid #b8d8cc;
  border-radius: 24px;
  padding: 32px;
  margin: 18px 0 40px;
  box-shadow: var(--v53-shadow-md);
}
.s-copilot-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 28px;
  align-items: start;
  margin-top: 20px;
}
.s-copilot-form {
  background: #ffffff;
  border: 1px solid #d2e2dc;
  border-radius: 18px;
  padding: 22px;
}
.s-copilot-field {
  margin-bottom: 14px;
}
.s-copilot-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  font-weight: 700;
  color: #16303d;
  margin-bottom: 6px;
}
.s-copilot-field select, .s-copilot-field input[type="range"] {
  width: 100%;
}
.s-copilot-field select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #9ab5ad;
  background: #f9fbfa;
  color: #0f2532;
  font-weight: 600;
}
.s-copilot-output {
  background: #0f2532;
  color: #f1f7f8;
  border-radius: 18px;
  padding: 24px;
}
.s-copilot-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}
.s-copilot-metric {
  background: #173647;
  border: 1px solid #2b546b;
  border-radius: 12px;
  padding: 12px;
}
.s-copilot-metric small {
  display: block;
  font-size: 0.72rem;
  color: #9ec8c2;
  margin-bottom: 4px;
}
.s-copilot-metric strong {
  font-size: 1.3rem;
  color: #ffffff;
}
.s-copilot-recs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.s-copilot-recs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #00795c;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}
.s-copilot-recs a:hover {
  background: #009470;
}
.s-copilot-privacy {
  font-size: 0.74rem;
  color: #97b5c0;
  margin-top: 14px;
  margin-bottom: 0;
}

/* Interactive FAQ Section */
.s-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}
.s-faq-item {
  border: 1px solid #cfe0d8;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px 20px;
}
.s-faq-item summary {
  font-weight: 700;
  color: #0f2532;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.s-faq-item summary::-webkit-details-marker {
  display: none;
}
.s-faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 800;
  color: #006c55;
}
.s-faq-item[open] summary::after {
  content: "−";
}
.s-faq-item p {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: #37515f;
  line-height: 1.6;
}

/* Universal Command Palette Modal (Ctrl+K / Cmd+K) */
.s-cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 37, 50, 0.58);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: start center;
  padding: 8vh 16px 24px;
}
.s-cmd-modal {
  width: 100%;
  max-width: 680px;
  background: #ffffff;
  border: 1px solid #c5d8d0;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(10, 26, 36, 0.32);
  overflow: hidden;
}
.s-cmd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #dfeae4;
  background: #f7faf8;
}
.s-cmd-head input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: #0f2532;
  outline: none;
}
.s-cmd-close {
  border: 1px solid #c6d6ce;
  background: #ffffff;
  color: #36505d;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.s-cmd-list {
  max-height: 56vh;
  overflow-y: auto;
  padding: 10px;
}
.s-cmd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #0f2532;
  transition: background 0.12s ease;
}
.s-cmd-item:hover, .s-cmd-item.is-selected {
  background: #e8f5f0;
}
.s-cmd-item small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #006c55;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.s-cmd-item b {
  display: block;
  font-size: 0.94rem;
  color: #0f2532;
}
.s-cmd-item span {
  font-size: 0.8rem;
  color: #536873;
}

/* Scroll-triggered reveal animation (zero CLS) */
@media (prefers-reduced-motion: no-preference) {
  .s-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .s-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 920px) {
  .s-metrics-strip { grid-template-columns: repeat(3, 1fr); }
  .s-story-tabs { grid-template-columns: 1fr 1fr; }
  .s-story-stage, .s-copilot-grid, .s-faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .s-metrics-strip { grid-template-columns: 1fr 1fr; padding: 16px; }
  .s-story-tabs, .s-story-kpis, .s-copilot-metrics { grid-template-columns: 1fr; }
  .s-copilot-card, .s-story-shell { padding: 20px 16px; }
}


/* === V54 MASTERPIECE STUDIO REFINEMENT & DESIGN TOKENS === */
:root {
  --sci-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --sci-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sci-dur-fast: 150ms;
  --sci-dur-med: 260ms;
  --sci-dur-slow: 450ms;
  --sci-bg: #f7f8f4;
  --sci-surface: #ffffff;
  --sci-surface-2: #f2f7f5;
  --sci-ink: #0f2532;
  --sci-muted: #4e646e;
  --sci-border: #cfe0d8;
  --sci-accent: #006c55;
  --sci-accent-bright: #009675;
}

/* Accessible Dark Studio Theme */
html[data-theme="dark"] body.sci-v48 {
  --sci-bg: #0b1820;
  --sci-surface: #122430;
  --sci-surface-2: #172e3c;
  --sci-ink: #edf5f3;
  --sci-muted: #9eb7c2;
  --sci-border: #254354;
  background-color: #0b1820 !important;
  color: #edf5f3 !important;
}
html[data-theme="dark"] .s-header {
  background: rgba(11, 24, 32, 0.88) !important;
  border-bottom-color: #234050 !important;
}
html[data-theme="dark"] .s-brand span,
html[data-theme="dark"] .s-nav a,
html[data-theme="dark"] .s-toolmenu summary,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] .c-main, html[data-theme="dark"] .article-static, html[data-theme="dark"] .guide-page {
  color: #edf5f3 !important;
}
html[data-theme="dark"] .s-lab,
html[data-theme="dark"] .s-tool,
html[data-theme="dark"] .s-path a,
html[data-theme="dark"] .s-feature-reading,
html[data-theme="dark"] .s-reading-list a,
html[data-theme="dark"] .s-story-shell,
html[data-theme="dark"] .s-copilot-card,
html[data-theme="dark"] .s-copilot-form,
html[data-theme="dark"] .s-faq-item,
html[data-theme="dark"] .s-showdown-shell,
html[data-theme="dark"] .c-panel,
html[data-theme="dark"] .c-worked,
html[data-theme="dark"] .c-track-card,
html[data-theme="dark"] .c-lesson-card,
html[data-theme="dark"] details:not(.s-toolmenu):not(.s-mobile) {
  background: #122430 !important;
  border-color: #254354 !important;
  color: #e6f2ef !important;
}
html[data-theme="dark"] .s-story-stage,
html[data-theme="dark"] .s-story-kpi,
html[data-theme="dark"] .s-story-formula,
html[data-theme="dark"] .s-showdown-chart-box,
html[data-theme="dark"] .s-showdown-stat {
  background: #172e3c !important;
  border-color: #2b4c5e !important;
  color: #edf5f3 !important;
}
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] small {
  color: #b7cdd6;
}

/* Signature Top Reading & Scroll Progress Ribbon */
.sci-scroll-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.sci-scroll-ribbon-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #006c55 0%, #19b394 55%, #e09f3e 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* Header Theme Toggle Button */
.s-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 99px;
  border: 1px solid rgba(15, 37, 50, 0.14);
  background: rgba(255, 255, 255, 0.75);
  color: #0f2532;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform var(--sci-dur-fast) var(--sci-ease-spring), background var(--sci-dur-fast) ease;
}
.s-theme-btn:hover {
  transform: scale(1.06);
  background: #ffffff;
}
html[data-theme="dark"] .s-theme-btn {
  background: #172e3c;
  border-color: #2d5063;
  color: #f3f8f6;
}

/* Smart "Continue Your Learning Trail" Resume Banner */
.s-resume-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 12px 20px;
  margin: 0 0 22px;
  border-radius: 14px;
  background: linear-gradient(90deg, #e6f4ef 0%, #f5faf7 100%);
  border: 1px solid #a9d4c5;
  font-size: 0.86rem;
  color: #0f2532;
}
.s-resume-bar strong {
  color: #006c55;
  margin-right: 6px;
}
.s-resume-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  background: #006c55;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
}
.s-resume-bar a:hover {
  background: #005240;
}

/* Interactive Forecasting Method Showdown & Holdout Comparison Workbench */
.s-showdown-shell {
  background: #ffffff;
  border: 1.5px solid #c5d9d0;
  border-radius: 24px;
  padding: 30px;
  margin: 22px 0 38px;
  box-shadow: var(--v53-shadow-sm);
}
.s-showdown-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.s-showdown-tab {
  padding: 9px 16px;
  border-radius: 99px;
  border: 1.5px solid #c8dad2;
  background: #f6faf8;
  color: #16303d;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--sci-dur-fast) var(--sci-ease-spring);
}
.s-showdown-tab:hover {
  border-color: #006c55;
  background: #eaf5f1;
}
.s-showdown-tab[aria-selected="true"] {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 108, 85, 0.22);
}
.s-showdown-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
}
.s-showdown-chart-box {
  background: #f8fbf9;
  border: 1px solid #d5e4dd;
  border-radius: 16px;
  padding: 18px;
}
.s-showdown-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.s-showdown-stat {
  background: #f4f9f7;
  border: 1px solid #cde0d8;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.s-showdown-stat small {
  display: block;
  font-size: 0.72rem;
  color: #526773;
  margin-bottom: 4px;
}
.s-showdown-stat strong {
  font-size: 1.2rem;
  color: #0f2532;
}

/* Command Palette Category Filter Pills */
.s-cmd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid #e3ece7;
  background: #ffffff;
}
.s-cmd-filter {
  padding: 4px 11px;
  border-radius: 99px;
  border: 1px solid #cbdcd3;
  background: #f5f9f7;
  color: #27424f;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.s-cmd-filter[aria-pressed="true"] {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
}

/* Desktop Cursor-Responsive Spotlight Effect */
@media (hover: hover) and (pointer: fine) {
  .s-tool, .s-path a, .c-track-card {
    position: relative;
    overflow: hidden;
  }
  .s-tool::before, .s-path a::before, .c-track-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(0, 131, 106, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .s-tool:hover::before, .s-path a:hover::before, .c-track-card:hover::before {
    opacity: 1;
  }
}

/* Harmonize Legacy Article / Guide / Tool Pages into the Cohesive Studio Design System */
.article-static, .guide-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 22px 72px;
}
.article-static article, .guide-page article {
  background: var(--sci-surface);
  border: 1px solid var(--sci-border);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--v53-shadow-sm);
}
.crumbs {
  font-size: 0.8rem;
  color: var(--sci-muted);
  margin-bottom: 18px;
}
.crumbs a {
  color: #006c55;
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 900px) {
  .s-showdown-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .s-showdown-stats { grid-template-columns: 1fr; }
  .s-button, .c-button { min-height: 48px; }
}

/* === V55 PHASE 3 ECOSYSTEM EVOLUTION & DIGITAL TWIN LAB === */
/* 5-Node Animated Hero Network Flow */
.s-net-svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 8px 0 12px;
  background: #f8fbf9;
  border: 1px solid #d5e4dd;
  border-radius: 12px;
  padding: 6px;
}
html[data-theme="dark"] .s-net-svg {
  background: #152a38;
  border-color: #28495c;
}
@media (prefers-reduced-motion: no-preference) {
  .s-flow-pulse {
    stroke-dasharray: 6 6;
    animation: sciFlowDash 1.4s linear infinite;
  }
  .s-info-pulse {
    stroke-dasharray: 4 6;
    animation: sciFlowDashRev 1.8s linear infinite;
  }
}
@keyframes sciFlowDash {
  to { stroke-dashoffset: -24; }
}
@keyframes sciFlowDashRev {
  to { stroke-dashoffset: 20; }
}
.s-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.s-status-badge.normal { background: #e3f5ec; color: #08664e; border: 1px solid #9ad9c5; }
.s-status-badge.shortage { background: #fdeCE8; color: #9c2b1b; border: 1px solid #f1b3a7; }
.s-status-badge.excess { background: #fff6e0; color: #8a5300; border: 1px solid #ebca83; }
.s-status-badge.bottleneck { background: #f3e8fd; color: #5b258a; border: 1px solid #d2b2f0; }

/* 3 Primary Homepage Journeys (Learn, Experiment, Explore) */
.s-journeys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 36px;
}
.s-journey-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--sci-surface, #ffffff);
  border: 1.5px solid var(--sci-border, #cfe0d8);
  border-radius: 18px;
  padding: 22px;
  text-decoration: none;
  color: var(--sci-ink, #0f2532);
  box-shadow: var(--v53-shadow-sm);
  transition: transform 0.22s var(--sci-ease-spring), box-shadow 0.22s ease;
}
.s-journey-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v53-shadow-md);
  border-color: #006c55;
}
.s-journey-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: #e6f4ef;
  color: #006c55;
  margin-bottom: 10px;
}
.s-journey-card h3 {
  font-size: 1.2rem;
  margin: 0 0 6px;
}
.s-journey-card p {
  font-size: 0.88rem;
  color: var(--sci-muted, #4e646e);
  margin: 0 0 14px;
}
.s-journey-card b {
  font-size: 0.84rem;
  color: #006c55;
}

/* Signature Supply Chain Digital Twin Lab */
.s-twin-lab {
  background: var(--sci-surface, #ffffff);
  border: 2px solid #006c55;
  border-radius: 24px;
  padding: 30px;
  margin: 28px 0 42px;
  box-shadow: var(--v53-shadow-md);
}
.s-twin-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  background: var(--sci-surface-2, #f2f7f5);
  border-radius: 16px;
  border: 1px solid var(--sci-border, #cfe0d8);
}
.s-twin-control label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.s-twin-control input[type="range"], .s-twin-control select {
  width: 100%;
}
.s-twin-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.s-twin-kpi {
  background: #0f2532;
  color: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
}
.s-twin-kpi small {
  display: block;
  font-size: 0.72rem;
  color: #9ec8c2;
  margin-bottom: 4px;
}
.s-twin-kpi strong {
  font-size: 1.3rem;
  color: #a8f0dc;
}
.s-twin-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--sci-border, #cfe0d8);
  border-radius: 14px;
}
.s-twin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.s-twin-table th, .s-twin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sci-border, #cfe0d8);
  text-align: right;
}
.s-twin-table th:first-child, .s-twin-table td:first-child {
  text-align: left;
  font-weight: 700;
}
.s-twin-table thead th {
  background: #e8f3ef;
  color: #0f2532;
}
.s-twin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

/* Course Interactive Concept Sandbox & Difficulty Filters */
.c-sandbox-card {
  background: linear-gradient(135deg, #ffffff 0%, #eef7f4 100%);
  border: 1.5px solid #9ec8bd;
  border-radius: 20px;
  padding: 26px;
  margin: 24px 0 36px;
}
.c-sandbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.c-sandbox-field {
  background: #ffffff;
  border: 1px solid #cde0d8;
  border-radius: 12px;
  padding: 12px 14px;
}
.c-sandbox-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.c-sandbox-field input[type="range"] {
  width: 100%;
}
.c-diff-pills, .s-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}
.c-diff-pill, .s-cat-pill {
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid #bcd2c9;
  background: #ffffff;
  color: #16303d;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.c-diff-pill[aria-pressed="true"], .s-cat-pill[aria-pressed="true"] {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
}

@media (max-width: 900px) {
  .s-journeys-grid, .s-twin-controls, .s-twin-kpis, .c-sandbox-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .s-journeys-grid, .s-twin-controls, .s-twin-kpis, .c-sandbox-grid {
    grid-template-columns: 1fr;
  }
}

/* === V56 WORLD-CLASS LEARNING ENGINE, GANTT & DECISION ACADEMY === */
:root {
  --sem-demand: #2b6cb0;
  --sem-inventory: #006c55;
  --sem-supply: #0d7a5f;
  --sem-capacity: #b86224;
  --sem-risk: #b22b1d;
}

/* Course 3-Tier Offering Clarity Grid */
.c-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.c-tier-card {
  background: var(--sci-surface, #ffffff);
  border: 1px solid var(--sci-border, #cfe0d8);
  border-radius: 14px;
  padding: 16px 18px;
}
.c-tier-card span {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #006c55;
  background: #e6f4ef;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.c-tier-card b {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--sci-ink, #0f2532);
}
.c-tier-card p {
  font-size: 0.84rem;
  margin: 0;
  color: var(--sci-muted, #4e646e);
}

/* Digital Twin Baseline Comparison & Explanation Bar */
.s-twin-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.s-twin-preset-btn {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #b7d0c6;
  background: #f4f9f7;
  color: #15323f;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.s-twin-preset-btn:hover, .s-twin-preset-btn.is-active {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
}
.s-twin-delta-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: #eef6f3;
  border: 1px solid #c3ddd3;
  border-radius: 12px;
  margin: 10px 0 14px;
  font-size: 0.8rem;
}
html[data-theme="dark"] .s-twin-delta-bar {
  background: #172e3c;
  border-color: #2b4c5e;
}

/* Interactive Decision Academy (#decision-academy) */
.s-academy-shell {
  background: linear-gradient(135deg, #ffffff 0%, #f3f9f6 100%);
  border: 2px solid #163847;
  border-radius: 24px;
  padding: 30px;
  margin: 34px 0 42px;
  box-shadow: var(--v53-shadow-md);
}
.s-academy-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 22px;
}
.s-academy-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid #c8dad2;
  background: #ffffff;
  color: #0f2532;
  text-align: left;
  cursor: pointer;
}
.s-academy-tab[aria-selected="true"] {
  background: #0f2532;
  border-color: #0f2532;
  color: #ffffff;
}
.s-academy-tab small {
  font-size: 0.7rem;
  font-weight: 800;
  color: #006c55;
}
.s-academy-tab[aria-selected="true"] small {
  color: #8ce8d0;
}
.s-academy-card {
  background: #ffffff;
  border: 1px solid #cde0d8;
  border-radius: 18px;
  padding: 24px;
}
.s-academy-choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0;
}
.s-academy-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1.5px solid #cfe0d8;
  background: #f9fbfa;
  cursor: pointer;
  font-size: 0.9rem;
}
.s-academy-choice:hover {
  border-color: #006c55;
  background: #eef7f4;
}
.s-academy-feedback {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #eef7f3;
  border-left: 4px solid #006c55;
}
.s-academy-scorecard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.s-academy-metric {
  background: #ffffff;
  border: 1px solid #c6dcd3;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

/* Advanced Forecasting, MRP & Finite Gantt Workbench (/advanced-forecasting/) */
.s-adv-workbench {
  background: var(--sci-surface, #ffffff);
  border: 1.5px solid var(--sci-border, #cfe0d8);
  border-radius: 24px;
  padding: 28px;
  margin: 24px 0 38px;
  box-shadow: var(--v53-shadow-sm);
}
.s-adv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
}
.s-adv-tab {
  padding: 9px 16px;
  border-radius: 99px;
  border: 1.5px solid #c5d8cf;
  background: #f5faf8;
  color: #0f2532;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.s-adv-tab[aria-selected="true"] {
  background: #006c55;
  border-color: #006c55;
  color: #ffffff;
}
.s-adv-panel {
  background: #f7fbf9;
  border: 1px solid #d2e3dc;
  border-radius: 16px;
  padding: 22px;
}
html[data-theme="dark"] .s-academy-shell,
html[data-theme="dark"] .s-academy-card,
html[data-theme="dark"] .s-adv-workbench,
html[data-theme="dark"] .s-adv-panel,
html[data-theme="dark"] .c-tier-card {
  background: #122430 !important;
  border-color: #254354 !important;
  color: #edf5f3 !important;
}

@media (max-width: 900px) {
  .c-tier-grid, .s-academy-tabs, .s-academy-scorecard, .s-twin-delta-bar {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .c-tier-grid, .s-academy-tabs, .s-academy-scorecard, .s-twin-delta-bar {
    grid-template-columns: 1fr;
  }
}

/* === V57 FOUNDER PLG SUITE, CAREER PORTFOLIO & SME CSV WORKBENCH === */
.s-plg-suite, .s-sme-workbench, .c-career-hub {
  background: var(--sci-surface, #ffffff);
  border: 1.5px solid var(--sci-border, #cfe0d8);
  border-radius: 24px;
  padding: 30px;
  margin: 32px 0 40px;
  box-shadow: var(--v53-shadow-sm);
}
.s-plg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 20px 0;
}
.s-plg-card {
  background: var(--sci-surface-2, #f4f9f7);
  border: 1px solid var(--sci-border, #cfe0d8);
  border-radius: 16px;
  padding: 20px;
}
.s-plg-card h3 {
  font-size: 1.08rem;
  margin: 0 0 10px;
  color: var(--sci-ink, #0f2532);
}
.s-plg-field {
  margin-bottom: 10px;
}
.s-plg-field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.s-plg-field input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #9ab5ad;
  font-size: 0.86rem;
}
.s-plg-out {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #0f2532;
  color: #e9f5f2;
  font-size: 0.82rem;
  line-height: 1.5;
}
.s-plg-out strong {
  color: #8ce8d0;
  display: block;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.s-sme-textarea {
  width: 100%;
  min-height: 115px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #9ab5ad;
  background: #f9fbfa;
  color: #0f2532;
  margin: 10px 0;
}
.s-tier-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.s-tier-box {
  background: var(--sci-surface-2, #f4f9f7);
  border: 1px solid var(--sci-border, #cfe0d8);
  border-radius: 16px;
  padding: 18px;
}
.s-tier-box.featured {
  border: 2px solid #006c55;
}
.s-nl-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #c8dad2;
}
.s-nl-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.s-nl-row input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #9ab5ad;
  font-size: 0.86rem;
}
html[data-theme="dark"] .s-plg-suite,
html[data-theme="dark"] .s-sme-workbench,
html[data-theme="dark"] .c-career-hub,
html[data-theme="dark"] .s-plg-card,
html[data-theme="dark"] .s-tier-box {
  background: #122430 !important;
  border-color: #254354 !important;
  color: #edf5f3 !important;
}
@media (max-width: 920px) {
  .s-plg-grid, .s-tier-compare { grid-template-columns: 1fr; }
}