/* ============================================
   LIVE CHARACTER GUIDE - SHELL STYLES v6.0.0
   ============================================ */

/* === FONT FACES === */
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
}

/* === CSS DESIGN TOKENS === */
:root {
  /* Semantic colors */
  --color-primary: #38bdf8;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;

  /* Spacing scale */
  --space-xs: 0.25em;
  --space-sm: 0.5em;
  --space-md: 1em;
  --space-lg: 1.5em;
  --space-xl: 2em;

  /* Border radius */
  --radius-sm: 0.25em;
  --radius-md: 0.5em;
  --radius-lg: 1em;

  /* Base theme colors */
  --bg: #121212;
  --bg-surface: #1a1a1a;
  --bg-elevated: #222222;
  --text: #E8E8E8;
  --text-muted: #B0B0B0;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --border: #1f232b;
  --code-bg: #1a1a1a;
  --table-header: #1e1e1e;
  --table-row-alt: #161616;
  --warning-bg: rgba(234, 179, 8, 0.08);
  --warning-border: #eab308;
  --tip-bg: rgba(34, 197, 94, 0.08);
  --tip-border: #22c55e;

  /* Typography */
  --font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --max-width: min(1000px, 85ch);
  --spacing: clamp(1rem, 2.5vw, 1.5rem);

  /* Layer system colors */
  --layer-0-clr: #B0B0B0;
  --layer-1-clr: #22c55e;
  --layer-2-clr: #38bdf8;
  --layer-3-clr: #8b5cf6;

  /* Layout variables */
  --toc-width: 320px;
  --header-height: 60px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Panel system */
  --panel-bg: var(--bg-surface);
  --panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --panel-border-radius: 8px;
  --panel-header-height: 48px;
  --panel-min-width: 220px;
  --panel-min-height: 150px;
  --panel-z-base: 1000;
  --panel-transition: 200ms ease;

  /* Z-index hierarchy */
  --z-glossary-tab: 999;
  --z-fab-group: 1000;
  --z-panel: 1001;
  --z-progress: 1002;
  --z-modal: 9999;
  --z-loading: 10000;

  /* MBTI Temperament colors */
  --temperament-nt: #7c4dff;   /* Analysts - purple */
  --temperament-nf: #ff6b9d;   /* Diplomats - pink */
  --temperament-sj: #4dc3ff;   /* Sentinels - blue */
  --temperament-sp: #ffb84d;   /* Explorers - orange */
}

/* === LIGHT THEME VARIABLES === */
:root {
  --bg-light: #fafafa;
  --bg-surface-light: #ffffff;
  --bg-elevated-light: #f3f4f6;
  --text-light: #1a1a1a;
  --text-muted-light: #6b7280;
  --accent-light: #0284c7;
  --border-light: #e5e7eb;

  /* OLED theme */
  --bg-oled: #000000;
  --bg-surface-oled: #0a0a0a;
  --bg-elevated-oled: #111111;
  --border-oled: #1a1a1a;
  --code-bg-oled: #0a0a0a;
  --table-header-oled: #0a0a0a;
  --table-row-alt-oled: #050505;
  --panel-shadow-oled: 0 8px 32px rgba(0, 0, 0, 0.8);
}

/* === LIGHT THEME === */
body.theme-light {
  --bg: var(--bg-light);
  --bg-surface: var(--bg-surface-light);
  --bg-elevated: var(--bg-elevated-light);
  --text: var(--text-light);
  --text-muted: var(--text-muted-light);
  --accent: var(--accent-light);
  --border: var(--border-light);
  --code-bg: #f3f4f6;
  --table-header: #e5e7eb;
  --table-row-alt: #f9fafb;
  --accent-soft: rgba(2, 132, 199, 0.08);
  color-scheme: light;
}

/* === OLED THEME === */
body.theme-oled {
  --bg: var(--bg-oled);
  --bg-surface: var(--bg-surface-oled);
  --bg-elevated: var(--bg-elevated-oled);
  --border: var(--border-oled);
  --code-bg: var(--code-bg-oled);
  --table-header: var(--table-header-oled);
  --table-row-alt: var(--table-row-alt-oled);
  --panel-shadow: var(--panel-shadow-oled);
  --accent-soft: rgba(56, 189, 248, 0.15);
  color-scheme: dark;
}

/* === BASE STYLES === */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { 
  font-size: clamp(16px, 3.5vw, 18px);
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  color-scheme: dark light;
}

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: var(--spacing);
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4 { color: var(--text); margin: 2.2em 0 0.8em; line-height: 1.25; font-weight: 600; }
h1 { font-size: 2rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5em; letter-spacing: -0.02em; }
h2 { font-size: 1.6rem; color: var(--accent); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; letter-spacing: -0.005em; }
h4 { font-size: 1.1rem; }
p { margin: 0.8em 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; clear: both; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
a:hover { border-bottom-style: solid; }

/* Lists */
ul, ol { margin: 0.8em 0; padding-left: 1.6em; }
li { margin: 0.4em 0; }
li::marker { color: var(--accent); }

/* Code */
code {
  font-family: var(--font-mono);
  background: var(--code-bg);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid var(--border);
  color: #93c5fd;
  letter-spacing: 0.02em;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1em;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  margin: 1.2em 0;
  line-height: 1.5;
  font-size: 0.9rem;
  tab-size: 2;
  -moz-tab-size: 2;
}

pre code { background: none; border: none; padding: 0; color: inherit; }

/* Tables */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
th, td { padding: 0.75em 1em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
th { background: var(--table-header); font-weight: 600; color: var(--text); position: sticky; top: 0; }
.table-zebra tbody tr:nth-child(even) { background: var(--table-row-alt); }
tbody tr:hover { background: var(--accent-soft); }

/* Callouts */
.callout {
  padding: 1em 1.2em;
  margin: 1.2em 0;
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  background: var(--bg-surface);
}
.callout.tip { border-color: var(--tip-border); background: var(--tip-bg); }
.callout.warn { border-color: var(--warning-border); background: var(--warning-bg); }
.callout.important { border-color: #38bdf8; background: rgba(56, 189, 248, 0.1); }
.callout strong { display: block; margin-bottom: 0.4em; }

/* Tags */
.tag { display: inline-block; padding: 0.15em 0.5em; border-radius: 4px; font-size: 0.75em; font-weight: 600; margin-right: 0.4em; }
.tag.core { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.tag.opt { background: rgba(234, 179, 8, 0.12); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.25); }
.tag.risk { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.tag.advanced { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.3); }

/* Infographic */
.infographic, .dependency-map {
  margin: 2em 0;
  padding: 1.5em;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow-x: auto;
}

.infographic-title { font-weight: 600; margin-bottom: 1em; color: var(--accent); }

.inf-pipeline { display: flex; gap: 1em; flex-wrap: wrap; }
.inf-pipeline-step {
  flex: 1;
  min-width: 150px;
  padding: 1em;
  background: var(--bg-elevated);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.inf-step-id { font-size: 1.5em; font-weight: 700; color: var(--accent); }
.inf-step-label { font-weight: 600; margin: 0.3em 0; }
.inf-step-desc { font-size: 0.85em; color: var(--text-muted); }
.inf-step-code { font-family: var(--font-mono); font-size: 0.75em; color: var(--accent); margin-top: 0.5em; }

/* === LOADING OVERLAY === */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 1em;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* === LAYER MODAL === */
.layer-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 1rem;
  transition: opacity 0.3s ease;
}

.layer-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.layer-modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-title {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5em;
  border-bottom: none;
  font-size: 1.8rem;
}

.modal-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 2em;
}

/* ===== AUDIENCE INTRO ===== */
.audience-intro {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.2em;
  text-align: center;
}

/* ===== КОНТЕЙНЕР КАРТОЧЕК ===== */
.audience-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.2em;
}

@media (max-width: 768px) {
  .audience-cards {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* ===== ИНДИВИДУАЛЬНАЯ КАРТОЧКА СЛОЯ ===== */
.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 1rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: var(--text);
  min-height: 140px;
}

.audience-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.audience-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Активное состояние */
.audience-card.active,
.audience-card[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

/* Анимация выбора карточки */
@keyframes track-select-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.2);
  }
}

.audience-card.active {
  animation: track-select-pulse 0.4s ease-out;
}

/* ===== БЕЙДЖ "РЕКОМЕНДУЕТСЯ" ===== */
.audience-card.recommended {
  border-color: var(--accent);
}

.audience-card.recommended::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 10px 10px 0 0;
}

.track-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--accent), #22c55e);
  color: #000;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25em 0.8em;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== ИКОНКИ ТРЕКОВ И АНИМАЦИИ ===== */
.track-icon-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
}

.track-icon-scan {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  animation: track-scan 3s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

@keyframes track-scan {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* Анимации иконок */
.track-icon--basic {
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
  animation: track-breathe 3s infinite ease-in-out;
}

@keyframes track-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1; transform: scale(1.06); }
}

.track-icon--live {
  filter: drop-shadow(0 0 6px rgba(139, 233, 253, 0.4));
  animation: track-live-glow 2s infinite ease-in-out;
}

@keyframes track-live-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(139, 233, 253, 0.25)); opacity: 0.8; }
  50%      { filter: drop-shadow(0 0 12px rgba(139, 233, 253, 0.7)); opacity: 1; }
}

.pulse-line {
  stroke-dasharray: 5 3;
  animation: track-flow 1.2s linear infinite;
}

@keyframes track-flow {
  to { stroke-dashoffset: -8; }
}

.track-icon--neural {
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
  animation: track-neural-idle 3s infinite ease-in-out;
}

@keyframes track-neural-idle {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.25)); opacity: 0.8; }
  50%      { filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.55)); opacity: 1; }
}

.core-node {
  animation: track-pulse 2s infinite ease-in-out;
  animation-play-state: paused;
  transform-origin: center;
}

.track-icon--neural:hover .core-node,
.track-icon--neural:focus-within .core-node {
  animation-play-state: running;
}

@keyframes track-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* Тексты внутри карточки */
.track-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.track-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.track-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 0.3rem;
  text-align: center;
}

/* ===== КНОПКА "НЕ УВЕРЕН?" ===== */
.uncertain-path {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 auto;
}

.uncertain-path:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.uncertain-icon {
  font-size: 1.1rem;
}

/* ===== ИНДИКАТОР ТЕКУЩЕГО СЛОЯ (внутри layer-switcher) ===== */
.layer-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.7em;
  border-left: 1px solid var(--border);
  margin-left: 0.3em;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.layer-indicator-label {
  white-space: nowrap;
}

body[data-layer="1"] .layer-indicator { border-left-color: var(--layer-1-clr); color: var(--layer-1-clr); }
body[data-layer="2"] .layer-indicator { border-left-color: var(--layer-2-clr); color: var(--layer-2-clr); }
body[data-layer="3"] .layer-indicator { border-left-color: var(--layer-3-clr); color: var(--layer-3-clr); }

.layer-indicator-tooltip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  cursor: help;
  color: var(--text-muted);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.layer-indicator-tooltip:hover {
  background: var(--accent-soft);
  color: var(--text);
}

/* === UTILITY: HIDDEN CLASS === */
/* Generic hidden class — used by showFABs(), showLayerIndicator(), etc. */
.hidden {
  display: none !important;
}

/* Hide no-JS fallback content when JS is active (class added by inline <script>) */
.js .no-js-only {
  display: none !important;
}

/* Вспомогательный класс для скрытия заголовка */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === LAYER SWITCHER === */
.layer-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  z-index: var(--z-fab-group);
}

.layer-switcher.hidden { display: none; }

.layer-switch-btn {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5em 0.8em;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
  font-size: 0.85em;
}

.layer-switch-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.layer-switch-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.layer-switch-btn[data-layer="1"].active { border-color: var(--layer-1-clr); }
.layer-switch-btn[data-layer="2"].active { border-color: var(--layer-2-clr); }
.layer-switch-btn[data-layer="3"].active { border-color: var(--layer-3-clr); }

.switch-icon { font-size: 1.2em; }

/* === LAYER TOGGLE (V-14: Quick Reference toggle) === */
.layer-toggle-wrap {
  display: flex;
  gap: 0.25em;
  padding: 0.25em;
  border-left: 1px solid var(--border);
  margin-left: 0.3em;
}

.layer-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  transition: all var(--transition-fast);
  opacity: 0.5;
}

.layer-toggle-btn:hover {
  background: var(--accent-soft);
  opacity: 0.8;
}

.layer-toggle-btn.active {
  opacity: 1;
  background: var(--accent-soft);
}

.layer-toggle-btn[data-toggle-layer="1"].active { 
  border-color: var(--layer-1-clr); 
  color: var(--layer-1-clr); 
}
.layer-toggle-btn[data-toggle-layer="2"].active { 
  border-color: var(--layer-2-clr); 
  color: var(--layer-2-clr); 
}
.layer-toggle-btn[data-toggle-layer="3"].active { 
  border-color: var(--layer-3-clr); 
  color: var(--layer-3-clr); 
}

/* Layer toggle mode: show/hide sections by layer */
/* Support both formats: data-layer="1" and data-layer="l1" */
body.layer-toggle-mode #content [data-layer="1"],
body.layer-toggle-mode #content [data-layer="2"],
body.layer-toggle-mode #content [data-layer="3"],
body.layer-toggle-mode #content [data-layer="l1"],
body.layer-toggle-mode #content [data-layer="l2"],
body.layer-toggle-mode #content [data-layer="l3"] {
  content-visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.layer-toggle-mode.layer-hide-1 #content [data-layer="1"],
body.layer-toggle-mode.layer-hide-1 #content [data-layer="l1"] {
  opacity: 0.3;
  pointer-events: none;
}
body.layer-toggle-mode.layer-hide-2 #content [data-layer="2"],
body.layer-toggle-mode.layer-hide-2 #content [data-layer="l2"] {
  opacity: 0.3;
  pointer-events: none;
}
body.layer-toggle-mode.layer-hide-3 #content [data-layer="3"],
body.layer-toggle-mode.layer-hide-3 #content [data-layer="l3"] {
  opacity: 0.3;
  pointer-events: none;
}

/* === CONTENT AREA === */
#content {
  transition: opacity 0.3s ease;
}

#content.content-hidden {
  display: none;
}

/* === LAYER VISIBILITY (CUMULATIVE MODEL) === */
/* Scoped to #content to avoid hiding modal buttons with data-layer attributes */
/* Support both formats: data-layer="1" and data-layer="l1" */
#content [data-layer="1"], #content [data-layer="2"], #content [data-layer="3"],
#content [data-layer="l1"], #content [data-layer="l2"], #content [data-layer="l3"] {
  content-visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

#content [data-layer="0"], #content [data-layer="l0"] {
  content-visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-layer="1"] #content [data-layer="1"],
body[data-layer="1"] #content [data-layer="l1"] {
  content-visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body[data-layer="2"] #content [data-layer="1"],
body[data-layer="2"] #content [data-layer="2"],
body[data-layer="2"] #content [data-layer="l1"],
body[data-layer="2"] #content [data-layer="l2"] {
  content-visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body[data-layer="3"] #content [data-layer="1"],
body[data-layer="3"] #content [data-layer="2"],
body[data-layer="3"] #content [data-layer="3"],
body[data-layer="3"] #content [data-layer="l1"],
body[data-layer="3"] #content [data-layer="l2"],
body[data-layer="3"] #content [data-layer="l3"] {
  content-visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body[data-layer="1"] #content [data-layer="2"],
body[data-layer="1"] #content [data-layer="3"],
body[data-layer="1"] #content [data-layer="l2"],
body[data-layer="1"] #content [data-layer="l3"] { display: none !important; }
body[data-layer="2"] #content [data-layer="3"],
body[data-layer="2"] #content [data-layer="l3"] { display: none !important; }

/* Layer badges */
.layer-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
}

.layer-badge.layer-1 { background: rgba(34, 197, 94, 0.15); color: var(--layer-1-clr); border: 1px solid rgba(34, 197, 94, 0.3); }
.layer-badge.layer-2 { background: rgba(56, 189, 248, 0.15); color: var(--layer-2-clr); border: 1px solid rgba(56, 189, 248, 0.3); }
.layer-badge.layer-3 { background: rgba(139, 92, 246, 0.15); color: var(--layer-3-clr); border: 1px solid rgba(139, 92, 246, 0.3); }
.layer-badge.layer-0 { background: rgba(156, 163, 175, 0.15); color: var(--layer-0-clr); border: 1px solid rgba(156, 163, 175, 0.3); font-size: 0.7em; }

/* === PANEL SYSTEM === */
.panel {
  position: fixed;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--panel-border-radius);
  box-shadow: var(--panel-shadow);
  z-index: var(--z-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: var(--panel-min-width);
  min-height: var(--panel-min-height);
  max-height: 60vh;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity var(--panel-transition), transform var(--panel-transition), visibility 0ms linear var(--panel-transition);
}

.panel.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity var(--panel-transition), transform var(--panel-transition), visibility 0ms linear 0ms;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 1em;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  cursor: move;
  touch-action: none;
  min-height: var(--panel-header-height);
  flex-shrink: 0;
}

.panel-header-title {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.panel-header-actions { display: flex; gap: 0.4rem; }

.panel-btn {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.panel-btn:hover { background: var(--accent-soft); color: var(--text); }

.panel-content {
  flex: 1;
  overflow: auto;
  padding: 0.8em 1em;
  font-size: 0.85rem;
  line-height: 1.5;
}

.panel-content ul { margin: 0; padding: 0 0 0 0.6em; list-style: none; }
.panel-content li { margin: 0.25em 0; }
.panel-content a { color: var(--text-muted); text-decoration: none; border-bottom: none; }
.panel-content a:hover { color: var(--accent); }
.panel-content .toc-indent { padding-left: 0.9em; font-size: 0.92em; opacity: 0.9; }
.panel-content .toc-indent-2 { padding-left: 1.8em; font-size: 0.88em; opacity: 0.85; }

#toc-panel .panel-content ul ul { padding-left: 1.2em; margin-top: 0.15em; }
#toc-panel .panel-content ul ul li a { font-size: 0.88em; opacity: 0.88; padding-left: 0.4em; border-left: 2px solid var(--border); }
#toc-panel .panel-content li.active > a { color: var(--accent); font-weight: 600; }

/* === Two-Tier Collapsible TOC (NAV-03) === */
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-part {
  margin: 0;
  padding: 0;
}

.toc-part-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--text-primary, var(--text));
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  border-radius: 4px;
  transition: background 0.15s;
}

.toc-part-toggle:hover {
  background: var(--bg-elevated);
}

.toc-part-arrow {
  display: inline-block;
  width: 1.2em;
  flex-shrink: 0;
  transition: transform 0.2s;
  font-size: 0.8em;
}

.toc-part-toggle[aria-expanded="true"] .toc-part-arrow {
  transform: rotate(90deg);
}

.toc-part-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-sections {
  list-style: none;
  padding: 0 0 4px 16px;
  margin: 0;
}

.toc-sections.hidden {
  display: none;
}

.toc-sections li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}

.toc-sections li a:hover {
  background: var(--bg-elevated);
  color: var(--text-primary, var(--text));
}

/* TOC text overflow (replaces JS substring truncation) */
#toc-content li a,
.toc-part-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Glossary abbreviation style (replaces inline style, FIX-03) */
.no-js-only .glossary-abbr {
  color: var(--accent);
}

.glossary-abbr {
  color: var(--accent);
}

/* Glossary item hidden (replaces inline style, FIX-04/§3.4) */
.glossary-item-hidden {
  display: none;
}

/* === Inline style extraction (IMP-23 compliance, FIX-06) === */
.clipboard-fallback-textarea {
  position: fixed;
  left: -9999px;
  top: 0;
}

.panel-statusbar {
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}

.widget-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  color: var(--text-primary, var(--text));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  font-size: 0.9rem;
  max-width: 90vw;
}

.widget-toast-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

.widget-toast-fadeout {
  transition: opacity 0.3s;
  opacity: 0;
}

.glossary-layer-badge {
  font-size: 0.7em;
  color: var(--accent);
  margin-left: 0.5em;
}

.glossary-section-hidden {
  display: none;
}

/* === Active Part highlighting in TOC (FIX-07, P3) === */
.toc-part-toggle.toc-part-active {
  color: var(--accent);
  background: var(--bg-elevated);
}

/* === FAB BUTTON GROUP === */
.fab-group {
  position: fixed;
  bottom: 2rem;
  z-index: var(--z-fab-group);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  right: max(1rem, calc((100vw - 900px) / 2 - 3rem));
}

.fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.fab-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
  transform: scale(1.1);
}

/* Theme icons */
body.theme-light .theme-icon-dark { display: none; }
body.theme-light .theme-icon-light { display: inline !important; }
body.theme-light .theme-icon-light[hidden] { display: inline !important; }
body.theme-oled .theme-icon-dark { display: none; }
body.theme-oled .theme-icon-light { display: none; }
body.theme-oled .theme-icon-oled { display: inline !important; }

/* === INTERACTIVE DETAILS === */
details.interactive {
  margin: 1em 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  overflow: visible;
}

details.interactive:not([open]) { overflow: hidden; }

details.interactive summary {
  padding: 1em 1.2em;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
}

details.interactive summary::after { content: '▾'; font-size: 0.8em; color: var(--text-muted); transition: transform 0.2s ease; }
details.interactive[open] summary::after { transform: rotate(180deg); }
details.interactive > div { padding: 1em 1.2em; }
details.interactive summary::-webkit-details-marker { display: none; }
details.interactive summary::marker { display: none; content: ''; }

/* === COPY BUTTON === */
.pre-wrapper { position: relative; }

.copy-btn {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 0.4em 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
  font-family: inherit;
}

.pre-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn.copied { color: var(--tip-border); border-color: var(--tip-border); }

/* === MOBILE ADAPTATIONS === */
@media (max-width: 768px) {
  .layer-modal-content { padding: 1.5rem; }
  .audience-cards { grid-template-columns: 1fr; }
  .audience-card { min-width: 100%; }
  .uncertain-path { width: 100%; justify-content: center; }
  
  .panel {
    width: calc(100vw - 2rem) !important;
    max-width: 320px;
    left: 1rem !important;
    top: 0;
    bottom: 0;
    height: 100%;
    max-height: 100%;
    transform: translateX(-100%);
    border-radius: 0;
  }
  
  .panel.open { transform: translateX(0); }
  .panel-header { cursor: default; }
  
  .fab-group { right: 1rem; bottom: 1rem; }
  
  .layer-indicator {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
  }
}

@media (max-width: 600px) {
  .layer-switcher {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    justify-content: center;
  }
  
  .switch-label { display: none; }
  
  .layer-indicator {
    font-size: 0.7rem;
  }
  
  .layer-indicator-label {
    display: none;
  }
}

/* === CONTENT WIDTH TOGGLE === */
body.content-wide {
  --max-width: min(1100px, 95ch);
}

body.content-wide .table-wrap,
body.content-wide pre {
  max-width: calc(100vw - 4rem);
}

/* === GLOSSARY SIDE TAB === */
.glossary-tab {
  position: fixed;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0.8em 0.35em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  z-index: var(--z-glossary-tab);
  transition: all var(--transition-fast);
  letter-spacing: 0.05em;
  user-select: none;
}

.glossary-tab:hover {
  background: var(--accent-soft);
  color: var(--accent);
  padding-right: 0.5em;
}

.glossary-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  .glossary-tab {
    display: none;  /* Hidden on mobile - accessible via FAB button */
  }
}

/* === PANEL TEXTAREA === */
.panel-textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  resize: none;
  padding: 0.8em 1em;
}

.panel-textarea:focus {
  outline: none;
}

.panel-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* === PANEL RESIZE HANDLE === */
.panel-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
  border-radius: 0 0 var(--panel-border-radius) 0;
}

.panel-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
}

/* === ANTIPATTERN CARD === */
.antipattern-card {
  margin: 1.5em 0;
  padding: 1em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.antipattern-card .problem-block {
  padding: 0.75em;
  margin-bottom: 0.75em;
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.05);
  border-radius: 0 4px 4px 0;
}

.antipattern-card .solution-block {
  padding: 0.75em;
  margin-bottom: 0.75em;
  border-left: 3px solid #22c55e;
  background: rgba(34, 197, 94, 0.05);
  border-radius: 0 4px 4px 0;
}

.antipattern-card .example-block {
  padding: 0.75em;
  border-left: 3px solid #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 0 4px 4px 0;
}

.antipattern-card h4 {
  margin: 0 0 0.5em;
  font-size: 0.9em;
}

/* === LAYER REMARK === */
.layer-remark {
  display: block;
  padding: 0.5em 0.75em;
  margin: 0.5em 0;
  background: rgba(156, 163, 175, 0.08);
  border-left: 2px solid var(--border);
  border-radius: 0 4px 4px 0;
  font-size: 0.85em;
  color: var(--text-muted);
}

.layer-remark .remark-icon {
  font-size: 1em;
  margin-right: 0.3em;
  vertical-align: middle;
}

.layer-remark a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: none;
}

.layer-remark a:hover {
  text-decoration: underline;
}

/* Fix nested layer-remark links (link inside layer-remark paragraph should be inline) */
p.layer-remark a.layer-remark,
td a.layer-remark {
  display: inline;
  padding: 0.1em 0.3em;
  margin: 0;
  background: rgba(56, 189, 248, 0.1);
  border-left: none;
  border-radius: 4px;
  font-size: 0.95em;
}

/* Inline layer-remark link (used inside paragraphs, not as block) */
.layer-remark-link {
  display: inline;
  padding: 0.15em 0.4em;
  margin: 0;
  background: rgba(56, 189, 248, 0.1);
  border-left: none;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  transition: all var(--transition-fast);
}

.layer-remark-link:hover {
  background: rgba(56, 189, 248, 0.2);
  border-bottom-style: solid;
}

/* === LAYER LINK DISABLED (§0.9: links to sections not in current layer) === */
.layer-link-disabled {
  color: var(--text-muted);
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
  font-style: italic;
}

.layer-link-disabled:hover::after {
  content: attr(title);
  position: absolute;
  background: var(--bg-elevated);
  color: var(--text);
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  white-space: nowrap;
  z-index: 10;
  border: 1px solid var(--border);
}

/* === TERM MARKER TOOLTIP (Phase 3: replaces inline data-layer-switch) === */
.term-marker {
  position: relative;
  display: inline;
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  cursor: help;
  font-weight: 500;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.term-marker:hover {
  color: var(--text);
  border-bottom-style: solid;
}

.term-marker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tooltip popup */
.term-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 280px;
  min-width: 180px;
  padding: 0.75em 1em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.5;
  z-index: var(--z-modal);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0ms linear 0.15s;
}

.term-marker:hover .term-tooltip,
.term-marker:focus-within .term-tooltip {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0ms linear 0ms;
}

/* Tooltip arrow (pointing down to marker) */
.term-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg-elevated);
}

/* Tooltip content */
.term-tooltip-summary {
  margin-bottom: 0.5em;
  color: var(--text);
}

.term-tooltip-link {
  display: inline-block;
  color: var(--accent);
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: none;
}

.term-tooltip-link:hover {
  text-decoration: underline;
  border-bottom-style: none;
}

/* Layer badge inside tooltip */
.term-tooltip .layer-badge {
  margin-left: 0.3em;
  vertical-align: middle;
}

/* Prevent tooltip from going off-screen on left/right edges */
.term-marker:first-child .term-tooltip,
.term-tooltip.term-tooltip-left {
  left: 0;
  transform: none;
}

.term-marker:last-child .term-tooltip,
.term-tooltip.term-tooltip-right {
  left: auto;
  right: 0;
  transform: none;
}

/* Mobile: tap to show tooltip (no hover) */
@media (max-width: 768px) {
  .term-tooltip {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    z-index: var(--z-modal);
  }

  .term-tooltip::after {
    display: none;
  }

  .term-marker.tooltip-active .term-tooltip {
    opacity: 1;
    visibility: visible;
  }
}

/* No-JS fallback: hide tooltip, show noscript link */
noscript .term-marker-noscript-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}

/* === OCEAN CSS VARIABLES === */
:root {
  --ocean-O: #7c4dff;
  --ocean-C: #4dc3ff;
  --ocean-E: #ff6b6b;
  --ocean-A: #6bff8c;
  --ocean-N: #ffb84d;
}

/* === OCEAN EMBED === */
.ocean-embed {
  padding: 0.4em 0.8em 1.4em;
}

.ocean-static-fallback { margin-bottom: 1em; }

.ocean-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
}

.diagram-wrap {
  position: relative;
  flex-shrink: 0;
}

.ocean-embed svg#ocean-svg {
  width: min(420px, 90vw);
  height: auto;
  display: block;
}

.pentagon-node {
  cursor: pointer;
  transition: all 0.2s;
}

.pentagon-node circle {
  stroke-width: 2;
  transition: all 0.25s;
}

.pentagon-node:hover circle,
.pentagon-node.active circle {
  filter: drop-shadow(0 0 12px currentColor);
  stroke-width: 3;
}

.pentagon-node text {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 16px;
  fill: #fff;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
  font-weight: 700;
}

.pentagon-axis {
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.25;
}

.pentagon-outline {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.4;
}

.ocean-panel {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-surface);
}

.ocean-panel .panel-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.ocean-panel .panel-header .trait-letter {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 4px;
}

.ocean-panel .panel-header .trait-name {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ocean-panel .panel-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ocean-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.8;
}

/* === OCEAN VALIDATOR === */
.ocean-validator-panel {
  margin: 1.5em 0;
  padding: 1em 1.2em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.ocean-validator-panel h4 {
  margin: 0 0 0.8em;
  color: var(--text);
}

.ocean-validator-intro {
  margin-bottom: 1em;
  font-size: 0.85rem;
}

.ocean-validator-intro ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.ocean-validator-green { color: #22c55e; font-weight: 600; }
.ocean-validator-yellow { color: #f59e0b; font-weight: 600; }
.ocean-validator-red { color: #ef4444; font-weight: 600; }

.ocean-slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.ocean-slider-label {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: 0.85rem;
}

.ocean-slider-label .trait-letter {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.2rem;
  font-weight: 700;
  min-width: 24px;
}

.ocean-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}

.ocean-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.15s;
}

.ocean-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.slider-value {
  min-width: 30px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.ocean-validator-status {
  margin-top: 1em;
  padding: 0.6em 0.8em;
  border-radius: 4px;
  font-weight: 500;
  text-align: center;
}

.ocean-validator-status.validator-green {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.ocean-validator-status.validator-yellow {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.ocean-validator-status.validator-red {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.ocean-validator-details {
  margin-top: 0.5em;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ocean-extreme-tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  margin: 0.15em;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ocean-extreme-tag.extreme-low {
  background: rgba(107, 255, 140, 0.15);
  color: #6bff8c;
}

.ocean-extreme-tag.extreme-high {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

/* === STEPS GRID === */
.steps-grid {
  display: grid;
  gap: 0.8em;
  margin: 1.2em 0;
}

.step-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1em 1.2em;
  border-left: 3px solid var(--accent);
}

.step-card .step-num {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.2rem;
  color: var(--accent);
  margin-bottom: 0.2em;
}

/* === ENNEAGRAM EMBED (fix 5.5: unified .ennea-embed → .enneagram-embed) === */
.enneagram-embed {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  padding: 0.4em 0.8em 1.4em;
}

.ennea-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.enneagram-embed svg#ennea-svg {
  width: min(380px, 100%);
  height: min(380px, 100%);
  display: block;
  flex-shrink: 0;
}

.enneagram-embed .node {
  cursor: pointer;
  transition: all 0.2s;
}

.enneagram-embed .node circle {
  stroke-width: 2;
  transition: all 0.25s;
}

.enneagram-embed .node:hover circle,
.enneagram-embed .node.active circle {
  filter: drop-shadow(0 0 10px currentColor);
  stroke-width: 3;
}

.enneagram-embed .node text {
  pointer-events: none;
}

.enneagram-embed .inner-lines line {
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.3;
}

.ennea-panel {
  flex: 1;
  min-width: 230px;
  max-width: 360px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

.ennea-panel-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
}

.ennea-type-num {
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 3px;
}

/* fix 5.5: unified .ennea-type-name → .enneagram-type-name */
.enneagram-type-name {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ennea-panel-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ennea-row-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.ennea-fear-val { font-size: 0.78rem; line-height: 1.5; color: #e87a7a; }
.ennea-desire-val { font-size: 0.78rem; line-height: 1.5; color: #7ae89a; }

.ennea-wings-row { display: flex; gap: 8px; margin-top: 2px; }

.ennea-wing-chip {
  flex: 1;
  border-radius: 3px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.ennea-wing-chip .wn {
  font-size: 0.9rem;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  margin-bottom: 2px;
}

.ennea-wing-chip .wd {
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ennea-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.8;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .ocean-layout {
    flex-direction: column;
    align-items: center;
  }

  .ocean-panel {
    max-width: 100%;
    width: 100%;
  }

  .enneagram-embed .ennea-layout {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .enneagram-embed svg#ennea-svg {
    width: min(320px, 90vw);
    height: min(320px, 90vw);
  }

  .ennea-panel {
    max-width: 100%;
    width: 100%;
  }
}


/* ============================================
   MBTI INTERACTIVE STYLES
   ============================================ */

/* MBTI filter grid */
.mbti-filter-grid {
  display: grid;
  gap: 16px;
  margin: 16px 0;
}

.mbti-axis {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: 8px;
}

.mbti-axis .axis-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.mbti-axis .pole-label {
  text-align: center;
  font-size: 0.9em;
  line-height: 1.2;
}

.mbti-axis .pole-label small {
  font-size: 0.75em;
  color: var(--text-muted);
}

.mbti-axis .axis-track {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mbti-slider {
  width: 100%;
  max-width: 200px;
  accent-color: var(--accent);
}

.mbti-axis input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mbti-axis label {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.mbti-axis label:hover {
  background: var(--bg-surface);
}

.mbti-axis input[type="radio"]:checked + .pole-label {
  background: var(--accent);
  color: var(--bg-elevated);
  border-radius: 4px;
}

/* MBTI result display */
.mbti-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  margin-top: 16px;
  background: var(--bg-surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
}

.mbti-type-display {
  font-size: 2em;
  font-weight: 700;
  color: var(--accent);
  font-family: monospace;
}

.mbti-type-name {
  font-size: 1.1em;
  margin-top: 4px;
}

.mbti-type-hint {
  font-size: 0.9em;
  color: var(--text-muted);
  margin-top: 8px;
}

/* Temperament groups */
.temperament-group {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.temperament-group > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-elevated);
}

.temperament-group > summary:hover {
  background: var(--bg-surface);
}

.temperament-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}

.temperament-badge.temperament-nt {
  background: rgba(124, 77, 255, 0.15);
  color: var(--temperament-nt);
}

.temperament-badge.temperament-nf {
  background: rgba(255, 107, 157, 0.15);
  color: var(--temperament-nf);
}

.temperament-badge.temperament-sj {
  background: rgba(77, 195, 255, 0.15);
  color: var(--temperament-sj);
}

.temperament-badge.temperament-sp {
  background: rgba(255, 184, 77, 0.15);
  color: var(--temperament-sp);
}

/* Temperament cell colors (MBTI table in Part 5) */
td.temperament-nt {
  background: rgba(124, 77, 255, 0.2);
}
td.temperament-nf {
  background: rgba(255, 107, 157, 0.2);
}
td.temperament-sj {
  background: rgba(77, 195, 255, 0.2);
}
td.temperament-sp {
  background: rgba(255, 184, 77, 0.2);
}

.temperament-desc {
  font-size: 0.9em;
  color: var(--text-muted);
}

/* Types grid inside temperament */
.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px;
}

/* Type card */
.type-card {
  padding: 12px;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.type-card:hover {
  border-color: var(--accent);
}

.type-card.highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.type-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.type-code {
  font-size: 1.1em;
  font-weight: 700;
  font-family: monospace;
  margin: 0;
}

.type-name {
  font-weight: 500;
}

.type-short {
  font-size: 0.9em;
  color: var(--text-muted);
  margin: 0;
}

.type-details {
  margin-top: 8px;
  font-size: 0.9em;
}

.type-details summary {
  cursor: pointer;
  color: var(--accent);
  padding: 4px 0;
}

.type-details summary:hover {
  text-decoration: underline;
}

.type-content {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.type-content p {
  margin: 4px 0;
}

.type-content ul {
  margin: 8px 0;
  padding-left: 20px;
}

.type-content code {
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* MBTI table improvements */
.mbti-fallback-table {
  width: 100%;
  border-collapse: collapse;
}

.mbti-fallback-table th,
.mbti-fallback-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.mbti-fallback-table th {
  background: var(--bg-elevated);
  font-weight: 600;
}

.mbti-fallback-table tr:hover td {
  background: var(--bg-surface);
}

/* Cross-link styling */
.cross-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9em;
  color: var(--accent);
  text-decoration: none;
}

.cross-link:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .mbti-axis {
    flex-direction: column;
    gap: 8px;
  }

  .mbti-axis .axis-track {
    width: 100%;
  }

  .mbti-slider {
    max-width: 100%;
  }

  .types-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .type-card,
  .temperament-group > summary,
  .mbti-axis label {
    transition: none;
  }
}
/* === GLOSSARY ITEMS === */
.glossary-item {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.glossary-item:last-child {
  border-bottom: none;
}

.glossary-item:hover {
  background: var(--accent-soft);
}

.glossary-item.highlight {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 0.5em;
}

/* === FAB ACTIVE STATES === */
#fab-scratchpad.active,
#fab-glossary.active,
#fab-toc.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* === PANEL DRAGGING STATE === */
.panel.dragging {
  transition: none;
  user-select: none;
}

/* ============================================
   ENNEAGRAM SVG INTERACTIVE STYLES
   ============================================ */

#ennea-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
}

#ennea-svg .inner-lines {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}

#ennea-svg:hover .inner-lines {
  opacity: 0.55;
}

#ennea-svg .node {
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

#ennea-svg .node:hover circle {
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--accent));
}

#ennea-svg .node:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

#ennea-svg .node circle {
  fill: var(--bg-elevated);
  stroke: var(--accent);
  stroke-width: 2;
  transition: stroke-width var(--transition-fast);
}

#ennea-svg .node-num {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
}

#ennea-svg .node-label {
  font-size: 10px;
  fill: var(--text-muted);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  #ennea-svg .node,
  #ennea-svg .inner-lines {
    transition: none;
  }
  #ennea-svg .node:hover circle {
    filter: none;
  }
}


/* ============================================
   OCEAN SVG INTERACTIVE STYLES (from plan)
   ============================================ */

#ocean-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

#ocean-svg .ocean-pentagon {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.4;
  fill: none;
}

#ocean-svg .ocean-profile {
  stroke-width: 2;
  fill: none;
  opacity: 0.6;
  transition: d 200ms ease;
}

#ocean-svg .ocean-connections {
  stroke: var(--text-muted);
  stroke-width: 1;
  opacity: 0.25;
}

#ocean-svg .ocean-node {
  cursor: pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

#ocean-svg .ocean-node:hover circle,
#ocean-svg .ocean-node.active circle {
  stroke-width: 3;
  filter: drop-shadow(0 0 8px currentColor);
}

#ocean-svg .ocean-node:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

#ocean-svg .ocean-node.active circle {
  r: 26;
  stroke-width: 3;
}

#ocean-svg .ocean-node circle {
  fill: var(--bg-elevated);
  stroke-width: 2;
  transition: stroke-width var(--transition-fast), r var(--transition-fast);
}

/* Unified OCEAN text styles (fix 5.2: removed #ocean-svg .ocean-letter and #ocean-svg .ocean-label) */
.ocean-trait-letter {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
}

.ocean-label {
  font-size: 9px;
  fill: var(--text-muted);
  pointer-events: none;
  user-select: none;
}

/* OCEAN trait-specific colors */
#ocean-svg .ocean-node[data-trait="O"] circle { stroke: var(--ocean-O); }
#ocean-svg .ocean-node[data-trait="O"] .ocean-trait-letter { fill: var(--ocean-O); }
#ocean-svg .ocean-node[data-trait="C"] circle { stroke: var(--ocean-C); }
#ocean-svg .ocean-node[data-trait="C"] .ocean-trait-letter { fill: var(--ocean-C); }
#ocean-svg .ocean-node[data-trait="E"] circle { stroke: var(--ocean-E); }
#ocean-svg .ocean-node[data-trait="E"] .ocean-trait-letter { fill: var(--ocean-E); }
#ocean-svg .ocean-node[data-trait="A"] circle { stroke: var(--ocean-A); }
#ocean-svg .ocean-node[data-trait="A"] .ocean-trait-letter { fill: var(--ocean-A); }
#ocean-svg .ocean-node[data-trait="N"] circle { stroke: var(--ocean-N); }
#ocean-svg .ocean-node[data-trait="N"] .ocean-trait-letter { fill: var(--ocean-N); }

/* OCEAN panel styles */
.ocean-panel .trait-title {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 8px;
}

.ocean-panel .trait-low,
.ocean-panel .trait-high {
  margin: 8px 0;
  padding: 8px;
  border-radius: 4px;
}

.ocean-panel .trait-low {
  background: rgba(255,107,107,0.1);
  border-left: 3px solid var(--ocean-E);
}

.ocean-panel .trait-high {
  background: rgba(107,255,140,0.1);
  border-left: 3px solid var(--ocean-A);
}

/* OCEAN quick links */
.ocean-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ocean-quick-links .trait-link {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
}

.ocean-quick-links .trait-link:hover {
  background: var(--bg-surface);
}

/* OCEAN trait reference sections */
.ocean-trait-reference {
  margin-top: 24px;
}

.trait-details {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.trait-details summary {
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trait-details summary:hover {
  background: var(--bg-elevated);
}

.trait-badge {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--trait-color, var(--accent));
  color: var(--trait-color, var(--accent));
}

.trait-content {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* OCEAN validator panel enhanced */
.ocean-validator-panel .validator-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.ocean-validator-panel .validator-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ocean-validator-panel .validator-actions button:hover {
  background: var(--bg-surface);
}

.ocean-validator-panel .validator-actions button.btn-primary {
  background: var(--accent);
  color: var(--bg-elevated);
}

.ocean-validator-details {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 4px;
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  #ocean-svg .ocean-node,
  #ocean-svg .ocean-profile {
    transition: none;
  }
  #ocean-svg .ocean-node:hover circle,
  #ocean-svg .ocean-node.active circle {
    filter: none;
  }
}

/* ============================================================================
   PERSONA-CROSS — OCEAN×Enneagram Correlation Matrix (§0.8)
   ============================================================================ */

#persona-cross {
  margin: 1.5em 0;
}

.cross-header h4 {
  margin: 0 0 0.3em;
  font-size: 1.1em;
  color: var(--text);
}

.cross-legend {
  display: flex;
  gap: 1em;
  margin: 0 0 1em;
  font-size: 0.85em;
}

.legend-item {
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.cross-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cross-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85em;
}

.cross-matrix th,
.cross-matrix td {
  padding: 0.5em 0.7em;
  text-align: center;
  border: 1px solid var(--border);
  transition: background 0.15s ease;
}

.cross-trait-header {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cross-trait-header small {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8em;
}

.cross-type-header {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  text-align: left;
  white-space: nowrap;
}

.cross-type-header small {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75em;
}

.cross-cell {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 3.5em;
}

.cross-cell:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

.cross-cell.hover-col {
  outline: 1px solid var(--accent);
  opacity: 0.85;
}

.cross-cell.hover-row {
  outline: 1px solid var(--accent);
  opacity: 0.85;
}

.cross-cell.selected {
  outline: 3px solid var(--accent);
  outline-offset: -2px;
  font-weight: 700;
}

.cross-trait-header.selected,
.cross-type-header.selected {
  background: var(--accent-soft);
}

.cross-strong {
  font-weight: 700;
}

.cross-moderate {
  font-weight: 500;
}

.cross-weak {
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .cross-matrix {
    font-size: 0.75em;
  }
  
  .cross-matrix th,
  .cross-matrix td {
    padding: 0.3em 0.4em;
  }
}

/* === VERTICAL PIPELINE (V-02) === */
.inf-pipeline-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: relative;
}
.inf-pipeline-vertical .inf-pipeline-step {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  padding: 1em;
  background: var(--bg-elevated);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  position: relative;
}
.inf-pipeline-vertical .inf-pipeline-step::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 100%;
  width: 3px;
  height: 0.5em;
  background: var(--accent);
  opacity: 0.3;
}
.inf-pipeline-vertical .inf-pipeline-step:last-child::before {
  display: none;
}

/* === DIFF VIEW (V-03) === */
.diff-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1.5em 0;
}
@media (max-width: 768px) {
  .diff-view {
    grid-template-columns: 1fr;
  }
}
.diff-card {
  padding: 1em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}
.diff-del {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}
.diff-del .diff-label { color: #ef4444; }
.diff-add {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.05);
}
.diff-add .diff-label { color: #22c55e; }
.diff-label {
  font-size: 0.85em;
  font-weight: 600;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === SPINE STACK (V-06) === */
.spine-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.5em 0;
}
.spine-stack-item {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.8em 1em;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
}
.spine-stack-item + .spine-stack-item {
  border-top: 1px solid var(--border);
}
.spine-stack-label {
  font-weight: 700;
  min-width: 80px;
  color: var(--accent);
}
.spine-stack-desc {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* === TOKEN CALCULATOR (V-08) === */
.token-calc {
  margin: 1.5em 0;
  padding: 1.2em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.token-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-bottom: 1em;
}

.token-calc-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.token-calc-label {
  min-width: 100px;
  font-size: 0.9em;
  color: var(--text-muted);
}

.token-calc-range {
  flex: 1;
  min-width: 100px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  appearance: none;
  -webkit-appearance: none;
}

.token-calc-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.token-calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.token-calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

.token-calc-val {
  min-width: 45px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
}

.token-calc-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8em;
  border-top: 1px solid var(--border);
  font-size: 0.95em;
}

.token-calc-result strong {
  color: var(--accent);
  font-size: 1.2em;
}

.token-calc-result .tag {
  font-size: 0.8em;
}

.token-calc-result .tag.layer-1 { background: rgba(34, 197, 94, 0.2); color: var(--layer-1-clr); }
.token-calc-result .tag.layer-2 { background: rgba(56, 189, 248, 0.2); color: var(--layer-2-clr); }
.token-calc-result .tag.layer-3 { background: rgba(139, 92, 246, 0.2); color: var(--layer-3-clr); }
.token-calc-result .tag.over { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* === PROGRESS BAR (V-09) === */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--border);
  z-index: var(--z-progress);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--layer-1-clr), var(--layer-2-clr), var(--layer-3-clr));
  transition: width 0.1s ease;
}

/* === SPINE VALIDATOR (V-15) === */
.spine-validator {
  padding: 1em;
  margin-top: 1em;
}

.spine-validator-intro {
  margin-bottom: 1em;
  color: var(--text-muted);
  font-size: 0.9em;
}

.spine-validator-intro p {
  margin: 0;
}

.spine-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.spine-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.spine-input-group label {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--text);
}

.spine-input-group label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4em;
}

.spine-input-group:nth-child(1) label::before { background: var(--layer-3-clr); }
.spine-input-group:nth-child(2) label::before { background: #a855f7; }
.spine-input-group:nth-child(3) label::before { background: #f59e0b; }
.spine-input-group:nth-child(4) label::before { background: #22c55e; }
.spine-input-group:nth-child(5) label::before { background: var(--layer-1-clr); }

.spine-input-group textarea {
  width: 100%;
  padding: 0.6em 0.8em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9em;
  resize: vertical;
  min-height: 50px;
  transition: border-color var(--transition-fast);
}

.spine-input-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.spine-input-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.spine-validator-actions {
  display: flex;
  gap: 0.6em;
  margin-top: 1em;
}

.spine-validate-btn,
.spine-clear-btn {
  padding: 0.6em 1.2em;
  border-radius: 6px;
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--border);
}

.spine-validate-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.spine-validate-btn:hover {
  background: #0ea5e9;
}

.spine-clear-btn {
  background: transparent;
  color: var(--text-muted);
}

.spine-clear-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.spine-validator-result {
  margin-top: 1em;
  padding: 1em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
}

.spine-validator-result.hidden {
  display: none;
}

.spine-result-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--border);
}

.spine-result-item:last-child {
  border-bottom: none;
}

.spine-result-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.spine-result-icon.pass { color: var(--tip-border); }
.spine-result-icon.warn { color: var(--warning-border); }
.spine-result-icon.fail { color: #ef4444; }

.spine-result-text {
  flex: 1;
}

.spine-result-label {
  font-weight: 600;
  margin-bottom: 0.2em;
}

.spine-result-desc {
  color: var(--text-muted);
  font-size: 0.9em;
}

.spine-result-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.8em;
  margin-top: 0.5em;
  border-top: 2px solid var(--border);
  font-weight: 600;
}

.spine-result-summary.valid {
  color: var(--tip-border);
}

.spine-result-summary.invalid {
  color: #ef4444;
}

.spine-result-summary.needs-work {
  color: var(--warning-border);
}

/* === OCEAN INSIGHT WIDGET (§4.1 Persona Synthesis Framework) === */
.ocean-widget {
  margin: 1.5em 0;
  padding: 1.2em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.ocean-header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.8em;
}

.ocean-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.ocean-level-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ocean-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1em;
}

.ocean-pentagon-container {
  display: flex;
  justify-content: center;
  margin: 1em 0;
}

.ocean-pentagon-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* Pentagon frame */
.ocean-outer-frame {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 2;
}

/* Axis lines */
.ocean-axis {
  stroke: var(--border);
  stroke-width: 0.5;
  opacity: 0.5;
}

/* Inner shape (current profile) */
.ocean-inner-shape {
  fill: rgba(56, 189, 248, 0.12);
  stroke: var(--accent);
  stroke-width: 1.5;
  transition: all 0.2s ease;
}

/* Vertex dots */
.ocean-vertex {
  cursor: pointer;
  stroke: var(--bg);
  stroke-width: 2;
  transition: all 0.15s ease;
}

.ocean-vertex:hover {
  transform-origin: center;
  filter: brightness(1.3);
  stroke-width: 3;
}

.ocean-vertex-low {
  fill: #ef4444;
}

.ocean-vertex-medium {
  fill: #6b7280;
}

.ocean-vertex-high {
  fill: #22c55e;
}

/* State labels */
.ocean-label {
  font-size: 9px;
  font-family: var(--font-sans);
  pointer-events: none;
  transition: fill 0.15s ease;
}

.ocean-label-low {
  fill: #fca5a5;
  font-weight: 600;
}

.ocean-label-medium {
  fill: var(--text-muted);
}

.ocean-label-high {
  fill: #86efac;
  font-weight: 600;
}

/* Trait letter labels */
.ocean-trait-letter {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
  font-family: var(--font-sans);
  pointer-events: none;
}

/* Legend */
.ocean-legend {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 0.8em;
  flex-wrap: wrap;
}

.ocean-legend-item {
  font-size: 0.8rem;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.ocean-legend-low {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.ocean-legend-medium {
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.ocean-legend-high {
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

/* Error state */
.ocean-error {
  color: var(--color-error);
  text-align: center;
  padding: 1em;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ocean-pentagon-svg {
    max-width: 260px;
  }
  .ocean-legend {
    gap: 0.5em;
  }
  .ocean-legend-item {
    font-size: 0.75rem;
  }
}

/* === OCEAN INSIGHT M2 STYLES === */
.ocean-widget-m2 .ocean-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.5em 0;
}

.ocean-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.ocean-slider-label {
  font-size: 0.8em;
  color: var(--text-muted);
  min-width: 2em;
  font-weight: 600;
}

.ocean-slider-name {
  font-size: 0.75em;
  color: var(--text);
  min-width: 100px;
  white-space: nowrap;
}

.ocean-slider-input {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
}

.ocean-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.ocean-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.ocean-slider-value {
  font-size: 0.75em;
  min-width: 2.5em;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--accent);
}

.ocean-slider-value.ocean-value-low { color: var(--color-error); }
.ocean-slider-value.ocean-value-high { color: var(--color-success); }

.ocean-extremum-counter {
  padding: 0.4em 0.6em;
  font-size: 0.8em;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 0.3em;
}

.ocean-extremum-warning {
  color: var(--color-warning);
  font-weight: 500;
  margin-top: 0.3em;
}

.ocean-forecast {
  padding: 0.5em 0.6em;
  font-size: 0.8em;
  border-top: 1px solid var(--border);
}

.ocean-forecast-title {
  font-weight: 600;
  margin-bottom: 0.3em;
  color: var(--text);
}

.ocean-forecast-types {
  color: var(--text-muted);
  margin-bottom: 0.3em;
}

.ocean-forecast-types strong {
  color: var(--accent);
}

.ocean-actions {
  padding: 0.5em 0;
  border-top: 1px solid var(--border);
}

.ocean-copy-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4em 1em;
  color: var(--text);
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ocean-copy-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.ocean-copy-btn.ocean-copied {
  border-color: var(--color-success);
  color: var(--color-success);
}


/* === ENNEAGRAM SMART BUILDER STYLES === */
.enneagram-widget {
  max-width: 480px;
  width: 100%;
  margin: 1em auto;
  padding: 0.8em;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.enneagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.enneagram-title {
  font-size: 1em;
  margin: 0;
  color: var(--accent);
}

.enneagram-level-badge {
  font-size: 0.7em;
  padding: 0.15em 0.5em;
  background: var(--accent-soft);
  border-radius: 4px;
  color: var(--accent);
  font-weight: 600;
}

.enneagram-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5em;
  scrollbar-width: thin;
}

.enneagram-tab {
  padding: 0.4em 0.8em;
  font-size: 0.8em;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}

.enneagram-tab:hover {
  color: var(--text);
  background: var(--accent-soft);
}

.enneagram-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.enneagram-tab-content {
  display: none;
}

.enneagram-tab-content.active {
  display: block;
}

/* Ring diagram */
.enneagram-ring-svg {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
}

.enneagram-ring-point {
  cursor: pointer;
  transition: all 0.15s;
}

.enneagram-ring-point:hover circle {
  r: 14;
  fill: var(--accent);
}

.enneagram-ring-point.selected circle {
  fill: var(--accent);
  r: 14;
}

.enneagram-ring-point text {
  font-size: 12px;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  font-weight: 600;
}

.enneagram-ring-point.selected text {
  fill: var(--bg);
}

.enneagram-connection-line {
  stroke: var(--border);
  stroke-width: 1;
  fill: none;
  opacity: 0.4;
}

.enneagram-connection-line.active {
  stroke: var(--accent);
  opacity: 0.8;
  stroke-width: 2;
}

/* Type info */
.enneagram-type-info {
  margin-top: 0.5em;
  padding: 0.5em;
  background: var(--bg-elevated);
  border-radius: 4px;
}

.enneagram-type-name {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.3em;
}

.enneagram-type-alt {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-bottom: 0.3em;
}

.enneagram-type-fear,
.enneagram-type-desire {
  font-size: 0.8em;
  margin-bottom: 0.2em;
}

.enneagram-type-directions {
  display: flex;
  gap: 0.8em;
  margin-top: 0.3em;
  font-size: 0.75em;
}

.enneagram-growth {
  color: var(--color-success);
}

.enneagram-stress {
  color: var(--color-error);
}

.enneagram-type-wings {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 0.2em;
}

.enneagram-confirm-btn {
  display: block;
  width: 100%;
  margin-top: 0.5em;
  padding: 0.5em;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-size: 0.85em;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.15s;
}

.enneagram-confirm-btn:hover {
  opacity: 0.9;
}

.enneagram-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.enneagram-hint {
  font-size: 0.8em;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5em;
}

.enneagram-error {
  color: var(--color-error);
  font-size: 0.85em;
  text-align: center;
}

/* SPINE fields */
.enneagram-spine-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.enneagram-spine-field {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.enneagram-spine-label {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.enneagram-spine-label.label-WANT { color: var(--color-success); }
.enneagram-spine-label.label-NEED { color: var(--color-info); }
.enneagram-spine-label.label-FLAW { color: var(--color-error); }
.enneagram-spine-label.label-LIE { color: var(--color-warning); }
.enneagram-spine-label.label-GHOST { color: #a78bfa; }

.enneagram-spine-input {
  padding: 0.4em 0.6em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85em;
  font-family: inherit;
  resize: vertical;
  min-height: 2em;
}

.enneagram-spine-input:focus {
  border-color: var(--accent);
  outline: none;
}

/* FLAW anchors */
.enneagram-flaw-anchors {
  margin-top: 0.5em;
  border-top: 1px solid var(--border);
  padding-top: 0.5em;
}

.enneagram-flaw-anchors h5 {
  font-size: 0.8em;
  color: var(--text-muted);
  margin-bottom: 0.3em;
}

.enneagram-flaw-anchor {
  padding: 0.4em;
  margin-bottom: 0.3em;
  background: var(--bg);
  border-radius: 4px;
  border-left: 3px solid var(--color-error);
}

.anchor-trigger {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text);
}

.anchor-action {
  font-size: 0.75em;
  color: var(--text-muted);
  margin-top: 0.15em;
}

.anchor-cost {
  font-size: 0.7em;
  color: var(--color-warning);
  margin-top: 0.1em;
  font-style: italic;
}

.enneagram-l3-hint {
  margin-top: 0.5em;
  text-align: center;
}

/* Export */
.enneagram-export-format {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}

.enneagram-export-preview {
  padding: 0.5em;
  background: var(--bg);
  border-radius: 4px;
  font-size: 0.8em;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
}

.enneagram-export-actions {
  display: flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

.enneagram-copy-btn {
  padding: 0.3em 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.8em;
  cursor: pointer;
  font-family: inherit;
}

.enneagram-copy-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* === MBTI COMPOSER === */
.mbti-widget{max-width:480px;width:100%;margin:1em auto;padding:.8em;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px}
.mbti-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5em}
.mbti-title{font-size:1em;margin:0;color:var(--accent)}
.mbti-level-badge{font-size:.7em;padding:.15em .5em;background:var(--accent-soft);border-radius:4px;color:var(--accent);font-weight:600}
.mbti-mode-toggle{display:flex;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:.8em}
.mbti-mode-btn{flex:1;padding:.4em .6em;border:none;background:var(--bg);color:var(--text-muted);font-size:.8em;cursor:pointer;font-family:inherit}
.mbti-mode-btn.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.mbti-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mbti-grid-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5em .3em;border-radius:4px;cursor:pointer;transition:all .15s;min-height:50px}
.mbti-grid-cell:hover{transform:scale(1.05);filter:brightness(1.2)}
.mbti-grid-cell.selected{outline:2px solid var(--accent);outline-offset:2px}
.mbti-grid-cell[data-temperament="NT"]{background:rgba(124,77,255,.2)}
.mbti-grid-cell[data-temperament="NF"]{background:rgba(255,107,157,.2)}
.mbti-grid-cell[data-temperament="SJ"]{background:rgba(77,195,255,.2)}
.mbti-grid-cell[data-temperament="SP"]{background:rgba(255,184,77,.2)}
.mbti-cell-code{font-size:.85em;font-weight:700;color:var(--text)}
.mbti-cell-name{font-size:.6em;color:var(--text-muted);text-align:center;line-height:1.2;margin-top:.15em}
.mbti-axis-sliders{display:flex;flex-direction:column;gap:.6em}
.mbti-axis-row{display:flex;align-items:center;gap:.4em}
.mbti-axis-label{font-size:.75em;font-weight:600;min-width:14px;text-align:center}
.mbti-axis-label-left{color:var(--text-muted)}
.mbti-axis-label-right{color:var(--accent)}
.mbti-axis-input{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:3px;outline:none}
.mbti-axis-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}
.mbti-axis-input::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}
.mbti-result-card{margin-top:.8em;padding:.8em;background:var(--bg-elevated);border-radius:6px;border:1px solid var(--border);text-align:center}
.mbti-result-code{font-size:1.4em;font-weight:700;color:var(--accent);letter-spacing:.05em}
.mbti-result-name{font-size:.95em;color:var(--text);margin-top:.2em}
.mbti-result-temperament{font-size:.8em;color:var(--text-muted);margin-top:.15em}
.mbti-result-functions{font-size:.8em;font-family:var(--font-mono);color:var(--accent);margin-top:.3em;letter-spacing:.03em}
.mbti-result-hint{font-size:.8em;color:var(--text-muted);margin-top:.3em;font-style:italic}
.mbti-empty-state{text-align:center;padding:1.5em;color:var(--text-muted);font-size:.85em}

/* ============================================================
   PHASE 3: M2/M3 WIDGET CSS ADDITIONS
   ============================================================ */

/* --- Enneagram Builder M2: OCEAN Tab --- */
.enneagram-ocean-tab { padding: 0.5em 0; }
.enneagram-ocean-defaults { margin: 0.5em 0; }
.enneagram-ocean-bar-row { display: flex; align-items: center; gap: 0.4em; margin: 0.3em 0; }
.enneagram-ocean-bar-label { font-size: 0.8em; font-weight: 700; width: 1.2em; text-align: center; }
.enneagram-ocean-bar-track { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: 4px; position: relative; overflow: hidden; }
.enneagram-ocean-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.enneagram-ocean-bar-value { font-size: 0.75em; color: var(--text-muted); width: 2.5em; text-align: right; }
.enneagram-ocean-fill-O { background: var(--ocean-O); }
.enneagram-ocean-fill-C { background: var(--ocean-C); }
.enneagram-ocean-fill-E { background: var(--ocean-E); }
.enneagram-ocean-fill-A { background: var(--ocean-A); }
.enneagram-ocean-fill-N { background: var(--ocean-N); }
.enneagram-ocean-correlation { margin: 0.8em 0 0.4em; font-size: 0.8em; }
.enneagram-ocean-correlation table { min-width: auto; width: 100%; border-collapse: collapse; }
.enneagram-ocean-correlation th, .enneagram-ocean-correlation td { padding: 0.3em 0.5em; font-size: 0.85em; border-bottom: 1px solid var(--border); }
.enneagram-ocean-fill-btn { display: inline-block; margin: 0.5em 0; padding: 0.4em 0.8em; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 0.8em; cursor: pointer; transition: all var(--transition-fast); }
.enneagram-ocean-fill-btn:hover { background: var(--accent); color: #fff; }
/* --- Enneagram Builder M2: OCEAN Tab (JS-generated class aliases) --- */
.enneagram-ocean-sliders { padding: 0.5em 0; }
.enneagram-ocean-slider-row { display: flex; align-items: center; gap: 0.4em; margin: 0.3em 0; }
.enneagram-ocean-trait-letter { font-size: 0.8em; font-weight: 700; width: 1.2em; text-align: center; color: var(--accent); }
.enneagram-ocean-trait-name { font-size: 0.8em; color: var(--text-muted); min-width: 7em; }
.enneagram-ocean-bar-container { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: 4px; position: relative; overflow: hidden; }
.enneagram-ocean-bar { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.enneagram-ocean-value { font-size: 0.75em; color: var(--text-muted); width: 2.5em; text-align: right; }
.enneagram-ocean-actions { margin-top: 0.5em; text-align: center; }
.enneagram-ocean-suggest-btn { display: inline-block; padding: 0.4em 0.8em; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); font-size: 0.8em; cursor: pointer; transition: all var(--transition-fast); }
.enneagram-ocean-suggest-btn:hover { background: var(--accent); color: #fff; }

/* --- Enneagram Builder M2: FLAW Anchor Tags & Toggle --- */
.enneagram-flaw-toggle { display: inline-block; margin: 0.5em 0; padding: 0.3em 0.7em; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-size: 0.8em; cursor: pointer; transition: all var(--transition-fast); }
.enneagram-flaw-toggle:hover { border-color: var(--accent); color: var(--accent); }
.enneagram-flaw-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ocean-tag { display: inline-block; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.7em; font-weight: 600; margin: 0 0.15em; }
.ocean-tag-high { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.3); }
.ocean-tag-low { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); }
.ocean-tag-moderate { background: rgba(156, 163, 175, 0.15); color: #d1d5db; border: 1px solid rgba(156, 163, 175, 0.3); }

/* --- Enneagram Builder M2: MBTI Hints --- */
.enneagram-mbti-hints { margin: 0.6em 0; padding: 0.5em; background: var(--bg-elevated); border-radius: 6px; border: 1px solid var(--border); }
.enneagram-mbti-hints-title { font-size: 0.8em; color: var(--text-muted); margin-bottom: 0.3em; }
.enneagram-mbti-hint-chip { display: inline-block; padding: 0.2em 0.5em; margin: 0.15em; background: var(--accent-soft); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 4px; font-size: 0.8em; color: var(--accent); cursor: default; transition: background var(--transition-fast); }
.enneagram-mbti-hint-chip:hover { background: rgba(56, 189, 248, 0.2); }

/* --- Enneagram Builder M2: Examples Tab --- */
.enneagram-examples-tab { padding: 0.5em 0; }
.enneagram-examples-list { display: flex; flex-direction: column; gap: 0.5em; }
.enneagram-example-item { padding: 0.5em; margin: 0.4em 0; background: var(--bg-elevated); border-radius: 6px; border: 1px solid var(--border); }
.enneagram-example-trigger { font-size: 0.85em; color: var(--accent); margin-bottom: 0.2em; }
.enneagram-example-action { font-size: 0.8em; color: var(--text); }
.enneagram-example-cost { font-size: 0.75em; color: var(--text-muted); margin-top: 0.15em; }
/* JS-generated example card classes */
.enneagram-example-card { padding: 0.5em; margin: 0.4em 0; background: var(--bg-elevated); border-radius: 6px; border: 1px solid var(--border); }
.enneagram-example-row { font-size: 0.8em; margin: 0.15em 0; }
.enneagram-example-row .example-label { font-weight: 600; color: var(--text-muted); }
.enneagram-example-ocean-tags { margin-top: 0.3em; }
.ocean-tag-badge { display: inline-block; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.7em; font-weight: 600; margin: 0 0.15em; }
/* JS-generated anchor toggle button */
.enneagram-anchor-toggle-btn { display: inline-block; margin: 0.5em 0; padding: 0.3em 0.7em; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-size: 0.8em; cursor: pointer; transition: all var(--transition-fast); }
.enneagram-anchor-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.anchor-ocean-tags { margin-top: 0.2em; }

/* --- MBTI Composer M2: OCEAN Cross-Reference --- */
.mbti-ocean-section { margin: 0.8em 0; padding: 0.6em; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; }
.mbti-ocean-checkbox { display: flex; align-items: center; gap: 0.4em; cursor: pointer; font-size: 0.85em; color: var(--text); margin-bottom: 0.4em; }
.mbti-ocean-checkbox input { accent-color: var(--accent); }
.mbti-ocean-bars { margin-top: 0.4em; }
.mbti-ocean-bar-row { display: flex; align-items: center; gap: 0.4em; margin: 0.2em 0; }
.mbti-ocean-bar-label { font-size: 0.75em; font-weight: 700; width: 1.2em; text-align: center; }
.mbti-ocean-bar-track { flex: 1; height: 6px; background: var(--bg-elevated); border-radius: 3px; position: relative; overflow: hidden; }
.mbti-ocean-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.mbti-ocean-bar-fill-O { background: var(--ocean-O); }
.mbti-ocean-bar-fill-C { background: var(--ocean-C); }
.mbti-ocean-bar-fill-E { background: var(--ocean-E); }
.mbti-ocean-bar-fill-A { background: var(--ocean-A); }
.mbti-ocean-bar-fill-N { background: var(--ocean-N); }
.mbti-ocean-bar-value { font-size: 0.7em; color: var(--text-muted); width: 2.5em; text-align: right; }
.mbti-ocean-apply-btn { display: inline-block; margin-top: 0.5em; padding: 0.4em 0.8em; background: var(--accent); color: #fff; border: none; border-radius: 4px; font-size: 0.8em; cursor: pointer; transition: opacity var(--transition-fast); }
.mbti-ocean-apply-btn:hover { opacity: 0.85; }

/* --- MBTI Composer M2: SPINE Patterns --- */
.mbti-spine-section { margin: 0.8em 0; padding: 0.6em; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; }
.mbti-spine-checkbox { display: flex; align-items: center; gap: 0.4em; cursor: pointer; font-size: 0.85em; color: var(--text); margin-bottom: 0.4em; }
.mbti-spine-checkbox input { accent-color: var(--accent); }
.mbti-spine-field { display: flex; align-items: flex-start; gap: 0.4em; margin: 0.3em 0; }
.mbti-spine-field-label { font-size: 0.75em; font-weight: 700; min-width: 3.5em; padding: 0.2em 0; border-radius: 3px; text-align: center; }
.mbti-spine-field-label.label-WANT { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.mbti-spine-field-label.label-FLAW { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.mbti-spine-field-label.label-LIE { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.mbti-spine-field-label.label-GHOST { background: rgba(139, 92, 246, 0.15); color: #c4b5fd; }
.mbti-spine-field-value { font-size: 0.8em; color: var(--text); flex: 1; line-height: 1.4; }
.mbti-spine-copy-btn { background: transparent; border: 1px solid var(--border); border-radius: 3px; color: var(--text-muted); font-size: 0.7em; cursor: pointer; padding: 0.15em 0.3em; transition: all var(--transition-fast); flex-shrink: 0; }
.mbti-spine-copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- MBTI Composer M2: Enneagram Hints --- */
.mbti-enneagram-hints { margin: 0.6em 0; padding: 0.5em; background: var(--bg-elevated); border-radius: 6px; border: 1px solid var(--border); }
.mbti-enneagram-hints-title { font-size: 0.8em; color: var(--text-muted); margin-bottom: 0.3em; }
.mbti-enneagram-hint-chip { display: inline-block; padding: 0.2em 0.5em; margin: 0.15em; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 4px; font-size: 0.8em; color: #c4b5fd; cursor: default; transition: background var(--transition-fast); }
.mbti-enneagram-hint-chip:hover { background: rgba(139, 92, 246, 0.2); }

/* --- OCEAN Insight M3: Comfort Zones & Conflict Markers --- */
.ocean-slider-track-wrapper { position: relative; margin: 0.2em 0; }
.ocean-comfort-zone { position: absolute; top: 50%; transform: translateY(-50%); height: 100%; background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 2px; pointer-events: none; z-index: 1; transition: left 0.3s ease, width 0.3s ease; }
.ocean-conflict-marker { position: absolute; top: -2px; width: 4px; height: calc(100% + 4px); border-radius: 2px; pointer-events: none; z-index: 2; }
.ocean-conflict-marker-marker-orange { background: #f59e0b; }
.ocean-conflict-marker-marker-red { background: #ef4444; }
.ocean-comfort-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 0.4em 0.6em; font-size: 0.75em; color: var(--text); white-space: nowrap; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.ocean-slider-track-wrapper:hover .ocean-comfort-tooltip { opacity: 1; }

/* --- OCEAN Insight M3: Comment Fields --- */
.ocean-comment-row { margin: 0.15em 0 0.4em; padding-left: 2em; }
.ocean-comment-input { width: 100%; padding: 0.3em 0.5em; font-size: 0.75em; font-family: var(--font-sans); background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: 4px; resize: none; transition: border-color var(--transition-fast); }
.ocean-comment-input:focus { outline: none; border-color: var(--accent); }
.ocean-comment-input::placeholder { color: var(--text-muted); opacity: 0.5; }

/* --- OCEAN Insight M3: Highlight Notification --- */
.ocean-highlight-notification { position: relative; margin: 0.5em 0; padding: 0.5em 0.8em; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px; font-size: 0.8em; color: var(--color-success); text-align: center; animation: ocean-notification-fadein 0.3s ease; }
@keyframes ocean-notification-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ocean-highlight-notification.fadeout { opacity: 0; transition: opacity 0.5s ease; }

/* ============================================================
   PHASE 4 — M3 EXTENSIONS
   ============================================================ */

/* --- Enneagram Builder M3: Conflict Warnings --- */
.enneagram-conflict-warnings { margin: 0.6em 0; padding: 0.5em; background: var(--warning-bg); border-radius: 6px; }
.enneagram-conflict-warnings h5 { font-size: 0.85em; color: var(--warning-border); margin: 0 0 0.4em; }

.conflict-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.15);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  margin: 8px 0;
  font-size: 0.9em;
}

.conflict-warning .warning-icon { flex-shrink: 0; }
.conflict-warning .warning-question { font-style: italic; opacity: 0.8; color: var(--text-muted); }

/* --- Enneagram Builder M3: MBTI Live Compatibility --- */
.enneagram-mbti-live { margin: 0.5em 0; padding: 0.5em; background: var(--accent-soft); border-radius: 6px; border: 1px solid rgba(56, 189, 248, 0.3); }
.enneagram-mbti-live-label { font-size: 0.8em; color: var(--text-muted); }
.enneagram-mbti-live-value { font-weight: bold; color: var(--accent); margin-left: 0.3em; }
.enneagram-mbti-compat { display: inline-block; margin-left: 0.5em; padding: 0.15em 0.5em; border-radius: 4px; font-size: 0.8em; font-weight: bold; }
.enneagram-mbti-compat.compat-yes { background: rgba(34, 197, 94, 0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.3); }
.enneagram-mbti-compat.compat-no { background: rgba(239, 68, 68, 0.15); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); }

/* --- Enneagram Builder M3: MBTI Match Highlight --- */
.mbti-match-highlight { box-shadow: 0 0 0 2px var(--accent) !important; background: rgba(56, 189, 248, 0.2) !important; }

/* --- MBTI Composer M3: Enneagram Link Section --- */
.mbti-enneagram-link-section { margin: 0.6em 0; padding: 0.5em; background: var(--bg-elevated); border-radius: 6px; border: 1px solid var(--border); }
.mbti-enneagram-checkbox { display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: var(--text); cursor: pointer; }
.mbti-enneagram-checkbox input[type="checkbox"] { accent-color: #c4b5fd; }
.mbti-enneagram-links { margin-top: 0.5em; padding-top: 0.5em; border-top: 1px solid var(--border); }
.mbti-enneagram-links-label { font-size: 0.8em; color: var(--text-muted); display: block; margin-bottom: 0.3em; }
.mbti-enneagram-link-btn { display: inline-block; padding: 0.25em 0.6em; margin: 0.15em; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 4px; font-size: 0.8em; color: #c4b5fd; cursor: pointer; transition: all var(--transition-fast); }
.mbti-enneagram-link-btn:hover { background: rgba(139, 92, 246, 0.25); border-color: rgba(139, 92, 246, 0.5); }
.mbti-enneagram-link-btn.enneagram-match-highlight { box-shadow: 0 0 0 2px #c4b5fd; background: rgba(139, 92, 246, 0.3); }

/* --- MBTI Composer M3: Enneagram Compatibility --- */
.mbti-enneagram-compat { margin-top: 0.4em; padding: 0.4em; background: rgba(139, 92, 246, 0.08); border-radius: 4px; }
.mbti-enneagram-compat-label { font-size: 0.8em; color: var(--text-muted); }
.mbti-enneagram-compat-status { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.8em; font-weight: bold; }
.mbti-enneagram-compat-status.compat-yes { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.mbti-enneagram-compat-status.compat-no { background: rgba(239, 68, 68, 0.15); color: var(--color-error); }

/* --- MBTI Composer M3: OCEAN Compatibility --- */
.mbti-ocean-compat { margin: 0.6em 0; padding: 0.5em; background: var(--accent-soft); border-radius: 6px; border: 1px solid rgba(56, 189, 248, 0.2); }
.mbti-ocean-compat-label { font-size: 0.8em; color: var(--text-muted); }
.mbti-ocean-compat-value { display: inline-block; margin-left: 0.4em; padding: 0.15em 0.5em; border-radius: 4px; font-size: 1em; font-weight: bold; }
.mbti-ocean-compat-value.compat-yes { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.mbti-ocean-compat-value.compat-partial { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.mbti-ocean-compat-value.compat-no { background: rgba(239, 68, 68, 0.15); color: var(--color-error); }
.mbti-ocean-compat-traits { margin-top: 0.4em; display: flex; flex-wrap: wrap; gap: 0.3em; }
.mbti-ocean-compat-trait { display: inline-flex; align-items: center; gap: 0.2em; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.75em; }
.mbti-ocean-compat-trait.trait-match { background: rgba(34, 197, 94, 0.1); color: var(--color-success); }
.mbti-ocean-compat-trait.trait-partial { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); }
.mbti-ocean-compat-trait.trait-conflict { background: rgba(239, 68, 68, 0.1); color: var(--color-error); }
.compat-trait-letter { font-weight: bold; }
.compat-trait-arrow { color: var(--text-muted); font-size: 0.8em; }

/* --- MBTI Composer M3: Enneagram Hint Match --- */
.mbti-enneagram-hint-chip.enneagram-match-highlight { box-shadow: 0 0 0 2px #c4b5fd; background: rgba(139, 92, 246, 0.3); }

/* --- MBTI Composer M3: Full Export --- */
.mbti-export-section { margin: 0.6em 0; padding-top: 0.5em; border-top: 1px solid var(--border); }
.mbti-export-btn { width: 100%; padding: 0.5em; background: var(--accent-soft); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 6px; color: var(--accent); font-size: 0.85em; cursor: pointer; transition: all var(--transition-fast); }
.mbti-export-btn:hover { background: rgba(56, 189, 248, 0.2); border-color: var(--accent); }

/* ============================================================
   PHASE 5 — PERSONA SYNTHESIS DASHBOARD (L3 only)
   ============================================================ */

/* --- Persona Synthesis: Container --- */
.persona-synthesis-widget {
  display: none;
  margin: 1.5em 0;
  padding: 1.2em;
  background: var(--bg-surface);
  border: 2px solid var(--layer-3-clr, #a78bfa);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(139, 92, 246, 0.1);
}

body[data-layer="3"] .persona-synthesis-widget { display: block; }

/* --- Persona Synthesis: Header --- */
.synthesis-header {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border);
}
.synthesis-header h3 { margin: 0; font-size: 1.1em; color: var(--text); }
.synthesis-level-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: bold;
  color: #c4b5fd;
}

/* --- Persona Synthesis: Status Bar --- */
.synthesis-status-bar {
  display: flex;
  gap: 0.5em;
  margin-bottom: 1em;
  flex-wrap: wrap;
}
.synthesis-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.synthesis-status-chip.active {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--color-success);
}
.synthesis-status-chip.inactive {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* --- Persona Synthesis: Waiting State --- */
.synthesis-waiting {
  text-align: center;
  padding: 2em 1em;
  color: var(--text-muted);
}
.synthesis-waiting p { margin: 0.3em 0; font-size: 0.95em; }
.synthesis-waiting-hint { font-size: 0.8em !important; opacity: 0.7; }

/* --- Persona Synthesis: Conflict Map --- */
.synthesis-conflict-map {
  margin: 1em 0;
  padding: 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.synthesis-conflict-map h4 {
  margin: 0 0 0.6em;
  font-size: 0.95em;
  color: var(--text);
}
.synthesis-conflict-group {
  margin: 0.5em 0;
  padding: 0.5em;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.synthesis-conflict-title {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.3em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.synthesis-conflict-item {
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-size: 0.85em;
  margin: 0.2em 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.synthesis-conflict-item.compat-yes {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
  border-left: 3px solid var(--color-success);
}
.synthesis-conflict-item.compat-partial {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
}
.synthesis-conflict-item.compat-conflict {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border-left: 3px solid var(--color-error);
}
.conflict-warning-icon { flex-shrink: 0; }

/* --- Persona Synthesis: Narrative Preview --- */
.synthesis-narrative {
  margin: 1em 0;
  padding: 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.synthesis-narrative h4 {
  margin: 0 0 0.6em;
  font-size: 0.95em;
  color: var(--text);
}
.synthesis-narrative-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0.35em 0;
  padding: 0.3em 0.5em;
  background: var(--bg-surface);
  border-radius: 4px;
}
.synthesis-narrative-value {
  font-size: 0.85em;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

/* --- Persona Synthesis: OCEAN Vocabulary --- */
.synthesis-vocab {
  margin-top: 0.6em;
  padding: 0.5em;
  background: var(--bg-surface);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.synthesis-vocab-title {
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.3em;
}
.synthesis-vocab-entry {
  font-size: 0.8em;
  color: var(--text);
  margin: 0.2em 0;
}
.synthesis-vocab-key {
  font-weight: 600;
  color: var(--accent);
}

/* --- Persona Synthesis: Export --- */
.synthesis-export {
  margin: 1em 0;
  padding: 0.8em;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.synthesis-export h4 {
  margin: 0 0 0.6em;
  font-size: 0.95em;
  color: var(--text);
}
.synthesis-export-preview {
  margin-bottom: 0.6em;
  padding: 0.6em;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.synthesis-export-preview pre {
  margin: 0;
  font-size: 0.75em;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.synthesis-export-actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}
.synthesis-export-btn {
  flex: 1;
  min-width: 120px;
  padding: 0.5em 0.8em;
  background: var(--accent-soft);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  color: #c4b5fd;
  font-size: 0.85em;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}
.synthesis-export-btn:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
}
.synthesis-copy-btn {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: var(--color-success) !important;
}
.synthesis-copy-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
}

/* --- Persona Synthesis: Mobile Responsive --- */
@media (max-width: 768px) {
  .persona-synthesis-widget { padding: 0.8em; margin: 1em 0; }
  .synthesis-export-actions { flex-direction: column; }
  .synthesis-export-btn { min-width: 100%; }
}

/* ===== PERSONA CROSS MATRIX ===== */
.persona-cross-embed {
  margin: 1.5rem 0;
  overflow-x: auto;
}
.cross-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}
.cross-matrix th,
.cross-matrix td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cross-matrix th {
  background: var(--surface);
  font-weight: 600;
}
.cross-cell-positive {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}
.cross-cell-negative {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
}
.cross-cell-neutral {
  background: var(--surface);
  color: var(--text-muted);
}
.cross-trait-header {
  font-weight: 700;
  color: var(--accent);
}
.cross-type-header {
  font-weight: 600;
  color: var(--text-secondary);
}
.cross-matrix td:hover {
  filter: brightness(1.2);
}
.cross-matrix td.highlighted {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cross-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.cross-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.cross-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* ===== WIDGET EMBED CONTAINERS ===== */
.enneagram-embed {
  margin: 1.5rem 0;
  min-height: 100px;
}
.mbti-embed {
  margin: 1.5rem 0;
  min-height: 100px;
}
.persona-synthesis-embed {
  margin: 1.5rem 0;
  min-height: 100px;
}

/* === WIDGET FOCUS-VISIBLE (fix 10.3) === */
.ocean-slider-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copy-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.pre-wrapper:focus-within .copy-btn { opacity: 1; }
.pentagon-node:focus-visible circle { stroke: var(--accent); stroke-width: 3; }
.enneagram-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cross-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mbti-grid-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ocean-vertex:focus-visible { stroke: var(--accent); stroke-width: 3; }

/* === WIDGET RESPONSIVE BREAKPOINTS === */
@media (max-width: 768px) {
  .enneagram-widget { max-width: 100%; }
  .mbti-widget { max-width: 100%; }
  .enneagram-ring-svg { max-width: 220px; }
  .enneagram-type-directions { flex-direction: column; gap: 0.3em; }
}
@media (max-width: 480px) {
  .enneagram-widget { padding: 0.5em; }
  .mbti-widget { padding: 0.5em; }
  .enneagram-tab { padding: 0.3em 0.5em; font-size: 0.7em; }
  .enneagram-ring-svg { max-width: 180px; }
  .mbti-grid-cell { min-height: 40px; }
  .mbti-cell-name { font-size: 0.5em; }
}

/* === PRINT STYLES === */
@media print {
  /* Hide fixed/interactive elements */
  .layer-switcher, .fab-group, .glossary-tab,
  .panel, .loading-overlay, .progress-bar,
  .layer-modal, .widget-toast, .toc-part-toggle,
  .copy-btn, .ocean-slider, .ocean-slider-input,
  button, .uncertain-path { display: none !important; }

  /* Light theme for printing */
  :root { --bg: #fff; --bg-surface: #f5f5f5; --text: #000; --text-muted: #555; --border: #ccc; }

  /* Expand all <details> */
  details[open], details { display: block; }
  details > summary { font-weight: bold; margin-bottom: 0.5em; }
  details > :not(summary) { display: block; }

  /* SVG: black and white, no background */
  svg { fill: none; stroke: #000; }
  .ocean-node circle { stroke: #000; fill: #eee; }

  /* Remove background colors */
  body, main, section, article, .callout { background: #fff !important; color: #000 !important; }

  /* Page breaks */
  h2, h3 { page-break-after: avoid; }
  section { page-break-inside: avoid; }
  pre, table { page-break-inside: auto; }
}

/* === SMALL SCREEN ADAPTATIONS (<480px) === */
@media (max-width: 480px) {
  .ocean-slider-row { flex-direction: column; gap: 4px; }
  .ocean-slider-label { min-width: auto; }
  .ocean-pentagon-svg { max-width: 240px; }
  .cross-matrix-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .enneagram-ring-svg { max-width: 200px; }
}