/* ==========================================================================
   DESIGN SYSTEM EDITORIAL DE ALTO LUXO - PDF EDUCAÇÃO (VERSÃO 2.0)
   Calibração Espacial de Alta Mancha Gráfica (Padrão Mari Dayrell)
   Tipografia Encorpada, Títulos Imponentes, Zero Vazio e Zero Overflow
   Cores Oficiais: Azul Petróleo (#1C475C), Ouro Nobre (#C59B58), Rubi (#990000)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Italianno&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Paleta Nobre Oficial */
  --color-petrol: #1C475C;
  --color-petrol-dark: #0D222D;
  --color-petrol-deep: #08161D;
  --color-petrol-light: #2A627E;
  --color-petrol-soft: #EEF5F8;
  --color-slate: #244061;
  --color-ruby: #990000;
  --color-ruby-soft: #FDF2F2;
  --color-gold: #C59B58;
  --color-gold-deep: #A37A3E;
  --color-gold-bright: #D4AF37;
  --color-gold-light: #E4CCA1;
  --color-gold-soft: #FAF5EC;
  --color-wine: #990000;
  --color-paper: #FAF8F3;
  --color-paper-alt: #F3EFE8;
  --color-text: #1A242B;
  --color-text-muted: #5C6B73;
  --color-border: rgba(197, 155, 88, 0.4);

  /* Tipografia Editorial */
  --font-serif-title: 'Playfair Display', Georgia, serif;
  --font-serif-body: 'Cormorant Garamond', Garamond, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-script: 'Italianno', cursive;
}

@page {
  size: 210mm 297mm;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: #E8E5DF;
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   ESTRUTURA DE PÁGINA A4
   ========================================================================== */

.pdf-container {
  width: 210mm;
  margin: 0 auto;
}

.pdf-page {
  width: 210mm;
  height: 297mm;
  max-height: 297mm;
  page-break-after: always;
  break-after: page;
  position: relative;
  overflow: hidden;
  background-color: var(--color-paper);
  background-image: url('../decor/paper_grain.png');
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.page-inner {
  padding: 13mm 16mm 11mm 16mm;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* ==========================================================================
   CAPA DE ALTO LUXO (COVER)
   ========================================================================== */

.pdf-page.page-cover {
  background: linear-gradient(145deg, #07141A 0%, #0E2531 40%, #1C475C 75%, #0B1C24 100%) !important;
  color: #FFFFFF !important;
}

.pdf-page.page-cover * {
  color: #FFFFFF;
}

.pdf-page.page-cover .cover-border {
  position: absolute;
  top: 9mm;
  left: 9mm;
  right: 9mm;
  bottom: 9mm;
  border: 1.5px solid rgba(197, 155, 88, 0.65);
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
}

.pdf-page.page-cover .cover-border::after {
  content: '';
  position: absolute;
  top: 3mm;
  left: 3mm;
  right: 3mm;
  bottom: 3mm;
  border: 1px solid rgba(197, 155, 88, 0.38);
  border-radius: 2px;
}

.cover-content {
  padding: 16mm 18mm 14mm 18mm;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
}

.cover-top-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2mm;
  margin-top: 2mm;
}

.cover-badge {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--color-gold-light) !important;
  font-weight: 700;
  margin-bottom: 0;
}

.cover-tag-pill {
  font-family: var(--font-sans);
  font-size: 7.2pt;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #FFFFFF !important;
  background: rgba(197, 155, 88, 0.22);
  padding: 1.2mm 4.5mm;
  border-radius: 10mm;
  border: 1px solid rgba(197, 155, 88, 0.5);
  font-weight: 600;
}

.cover-title-group {
  margin: 3mm 0;
}

.cover-title-main {
  font-family: var(--font-serif-title);
  font-size: 30pt;
  line-height: 1.15;
  color: #FFFFFF !important;
  margin: 0 0 3mm 0;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-shadow: 0 2mm 5mm rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

.cover-title-sub {
  font-family: var(--font-serif-title);
  font-size: 15pt;
  line-height: 1.35;
  color: var(--color-gold-light) !important;
  font-style: italic;
  margin: 0 0 3.5mm 0;
  font-weight: 400;
}

.cover-hook-pill {
  max-width: 145mm;
  margin: 0 auto;
  font-size: 9.2pt;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94) !important;
  font-family: var(--font-sans);
  border-left: 2.8px solid var(--color-gold);
  padding-left: 4mm;
  text-align: left;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0 3mm 3mm 0;
  padding: 2.5mm 4mm;
}

.cover-author-portrait-arch {
  margin: 2mm auto;
  position: relative;
  display: inline-block;
}

.cover-arch-frame {
  width: 64mm;
  height: 82mm;
  border-radius: 32mm 32mm 4mm 4mm;
  border: 2px solid var(--color-gold);
  overflow: hidden;
  box-shadow: 0 5mm 12mm rgba(0, 0, 0, 0.65), 0 0 10mm rgba(197, 155, 88, 0.4);
  position: relative;
  background: #09171F;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-arch-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.cover-bottom-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2mm;
  margin-bottom: 2mm;
}

.cover-gold-flourish {
  width: 42mm;
  height: auto;
  opacity: 0.95;
}

.cover-edition-tag {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-gold-light) !important;
  font-weight: 700;
}

.cover-seals-row {
  display: flex;
  justify-content: center;
  gap: 3.5mm;
  margin-top: 1.5mm;
}

.cover-seal-pill {
  font-family: var(--font-sans);
  font-size: 7.2pt;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold-light) !important;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(197, 155, 88, 0.45);
  padding: 1.2mm 4mm;
  border-radius: 2mm;
  font-weight: 600;
}

/* ==========================================================================
   CABEÇALHOS E RODAPÉS DE ALTA JOALHERIA
   ========================================================================== */

.page-header {
  font-family: var(--font-sans);
  font-size: 8pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-petrol);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.2px solid rgba(28, 71, 92, 0.28);
  padding-bottom: 3mm;
  margin-bottom: 4mm;
  font-weight: 700;
}

.page-header .header-topic {
  display: flex;
  align-items: center;
  gap: 2mm;
  color: var(--color-petrol);
}

.page-header .header-bullet {
  color: var(--color-gold);
  font-size: 8.5pt;
}

.page-header .header-chapter {
  color: var(--color-gold);
  font-weight: 700;
}

.page-footer {
  margin-top: auto;
  padding-top: 3mm;
  border-top: 1.2px solid rgba(28, 71, 92, 0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.2pt;
  color: var(--color-text-muted);
}

.page-footer .footer-tag {
  font-family: var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 7.5pt;
  font-weight: 700;
  color: var(--color-petrol);
}

.page-footer .page-number-wrap {
  display: flex;
  align-items: center;
  gap: 1.5mm;
}

.page-footer .page-num-circle {
  font-family: var(--font-serif-title);
  font-size: 9pt;
  color: var(--color-petrol);
  font-weight: 700;
  background: var(--color-paper-alt);
  border: 1.2px solid rgba(197, 155, 88, 0.6);
  width: 7.2mm;
  height: 7.2mm;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   TIPOGRAFIA E TÍTULOS DE CAPÍTULO (ESCALA AMPLIADA)
   ========================================================================== */

.chapter-opener {
  margin-bottom: 4mm;
  text-align: left;
}

.chapter-kicker {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--color-gold);
  font-weight: 800;
  margin-bottom: 1.8mm;
  display: flex;
  align-items: center;
  gap: 2.5mm;
}

.chapter-kicker::after {
  content: '';
  flex: 1;
  height: 1.2px;
  background: linear-gradient(90deg, rgba(197, 155, 88, 0.7) 0%, rgba(197, 155, 88, 0) 100%);
}

.chapter-title {
  font-family: var(--font-serif-title);
  font-size: 18pt;
  line-height: 1.22;
  color: var(--color-petrol);
  font-weight: 700;
  margin: 0 0 2.5mm 0;
}

.sub-section-title {
  font-family: var(--font-serif-title);
  font-size: 13pt;
  line-height: 1.32;
  color: var(--color-petrol);
  font-weight: 700;
  margin: 3mm 0 2mm 0;
  display: flex;
  align-items: center;
  gap: 2mm;
}

.sub-section-title .bullet-diamond {
  color: var(--color-gold);
  font-size: 9.5pt;
}

.sub-sub-title {
  font-family: var(--font-sans);
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin: 2.5mm 0 1.5mm 0;
  letter-spacing: 0.3px;
}

/* ==========================================================================
   PARÁGRAFOS E CORPO DE TEXTO (CALIBRAÇÃO DE ALTA MANCHA)
   ========================================================================== */

p {
  font-family: var(--font-sans);
  font-size: 9.8pt;
  line-height: 1.58;
  color: var(--color-text);
  margin-bottom: 3.2mm;
  text-align: justify;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

p:last-child {
  margin-bottom: 0;
}

.drop-cap {
  float: left;
  font-family: var(--font-serif-title);
  font-size: 33pt;
  line-height: 0.82;
  color: var(--color-petrol);
  padding-right: 3.2mm;
  padding-top: 1mm;
  font-weight: 700;
}

/* ==========================================================================
   CARDS CONCEITUAIS E BLOCOS ESTRUTURADOS
   ========================================================================== */

.concept-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 3.2mm;
  padding: 4.2mm 5mm;
  margin-bottom: 3.8mm;
  box-shadow: 0 2mm 5mm rgba(28, 71, 92, 0.05);
  position: relative;
}

.concept-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3mm;
  right: 3mm;
  height: 1.8px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.card-header-bar {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  margin-bottom: 2.6mm;
  font-family: var(--font-sans);
  font-size: 9.4pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--color-petrol);
}

.card-header-bar .card-icon {
  color: var(--color-gold-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.card-header-bar .card-icon svg {
  display: block;
}

.luxury-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.16em;
  flex-shrink: 0;
  line-height: 1;
}

.luxury-icon svg {
  display: block;
}

/* Box de Lei / Artigo */
.law-card {
  background: var(--color-petrol-soft);
  border-left: 4px solid var(--color-petrol);
  border-top: 1px solid rgba(28, 71, 92, 0.18);
  border-right: 1px solid rgba(28, 71, 92, 0.18);
  border-bottom: 1px solid rgba(28, 71, 92, 0.18);
  border-radius: 0 2.5mm 2.5mm 0;
  padding: 3.6mm 4.6mm;
  margin-bottom: 3.6mm;
}

.law-card-title {
  font-family: var(--font-sans);
  font-size: 8.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-petrol);
  margin-bottom: 1.6mm;
  display: flex;
  align-items: center;
  gap: 2mm;
}

/* Box de Atenção / Penal / Destaque Crítico */
.atencao-card {
  background: var(--color-ruby-soft);
  border-left: 4px solid var(--color-ruby);
  border-top: 1px solid rgba(153, 0, 0, 0.18);
  border-right: 1px solid rgba(153, 0, 0, 0.18);
  border-bottom: 1px solid rgba(153, 0, 0, 0.18);
  border-radius: 0 2.5mm 2.5mm 0;
  padding: 3.6mm 4.6mm;
  margin-bottom: 3.6mm;
}

.atencao-card-title {
  font-family: var(--font-sans);
  font-size: 8.8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-ruby);
  margin-bottom: 1.6mm;
  display: flex;
  align-items: center;
  gap: 2mm;
}

/* Box Mnemônico / Memorização */
.mnemonico-card {
  background: var(--color-gold-soft);
  border: 1px solid rgba(197, 155, 88, 0.55);
  border-left: 4px solid var(--color-gold);
  border-radius: 0 2.5mm 2.5mm 0;
  padding: 3.6mm 4.6mm;
  margin-bottom: 3.6mm;
}

.mnemonico-card-title {
  font-family: var(--font-sans);
  font-size: 8.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #8A6520;
  margin-bottom: 1.6mm;
  display: flex;
  align-items: center;
  gap: 2mm;
}

/* Citações / Doutrina (Quote Box) */
.quote-box {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 3.2mm;
  padding: 4.2mm 5.2mm 3.6mm 11mm;
  margin: 3.2mm 0 3.6mm 0;
  font-family: var(--font-serif-body);
  font-size: 11.2pt;
  line-height: 1.5;
  color: var(--color-petrol);
  font-style: italic;
}

.quote-box .quote-icon {
  position: absolute;
  top: 3.2mm;
  left: 3.2mm;
  width: 5.8mm;
  height: 5.8mm;
  opacity: 0.75;
}

.quote-author {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 2mm;
  display: block;
  text-align: right;
}

/* ==========================================================================
   TABELAS E MATRIZES COMPARATIVAS (EDITORIAL TABLES)
   ========================================================================== */

.table-editorial {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5mm 0 3mm 0;
  font-size: 8.8pt;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 2.5mm;
  overflow: hidden;
}

.table-editorial th {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 8pt;
  padding: 2.6mm 3.2mm;
  text-align: left;
  border-bottom: 1.8px solid var(--color-gold);
}

.table-editorial td {
  padding: 2.5mm 3.2mm;
  border-bottom: 1px solid rgba(197, 155, 88, 0.22);
  line-height: 1.45;
}

.table-editorial tr:last-child td {
  border-bottom: none;
}

.table-editorial tr:nth-child(even) td {
  background: #FAF8F3;
}

/* ==========================================================================
   LISTAS ESTRUTURADAS E HIERARQUIA VISUAL
   ========================================================================== */

.styled-list {
  list-style: none;
  padding: 0;
  margin: 2.5mm 0 3mm 0;
}

.styled-list-item {
  display: flex;
  align-items: flex-start;
  gap: 2.8mm;
  margin-bottom: 2.8mm;
  font-size: 9.6pt;
  line-height: 1.55;
}

.styled-list-item:last-child {
  margin-bottom: 0;
}

.list-marker-gold {
  color: var(--color-gold);
  font-size: 9.5pt;
  margin-top: 0.5mm;
  flex-shrink: 0;
}

.list-num-pill {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 8pt;
  font-weight: 700;
  width: 5.5mm;
  height: 5.5mm;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.6mm;
}

/* Grid de 2 e 3 colunas */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.8mm;
  margin: 2.5mm 0 3mm 0;
}

.grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3.2mm;
  margin: 2.5mm 0 3mm 0;
}

.grid-card {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.35);
  border-radius: 2.5mm;
  padding: 3mm 3.6mm;
}

.grid-card-title {
  font-weight: 700;
  color: var(--color-petrol);
  font-size: 8.8pt;
  margin-bottom: 1.2mm;
  text-transform: uppercase;
}

.grid-card p {
  font-size: 8.8pt !important;
  line-height: 1.48 !important;
  margin: 0 !important;
}

/* ==========================================================================
   SUMÁRIO EDITORIAL LUXUOSO (TABLE OF CONTENTS)
   ========================================================================== */

.toc-header {
  text-align: center;
  margin-bottom: 4.5mm;
}

.toc-title {
  font-family: var(--font-serif-title);
  font-size: 22pt;
  color: var(--color-petrol);
  font-weight: 700;
  margin: 0;
  letter-spacing: 1.2px;
}

.toc-grid {
  display: flex;
  flex-direction: column;
  gap: 2.8mm;
}

.toc-module-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 2.5mm;
  padding: 2.8mm 3.8mm;
  box-shadow: 0 1.5mm 3.5mm rgba(28, 71, 92, 0.04);
}

.toc-module-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(197, 155, 88, 0.28);
  padding-bottom: 1.5mm;
  margin-bottom: 1.8mm;
}

.toc-module-num {
  font-family: var(--font-sans);
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.toc-module-name {
  font-family: var(--font-serif-title);
  font-size: 11pt;
  font-weight: 700;
  color: var(--color-petrol);
}

.toc-subtopics {
  font-size: 8.2pt;
  color: var(--color-text-muted);
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 4mm;
}

.toc-subtopic-tag {
  display: inline-flex;
  align-items: center;
  gap: 1.2mm;
}

.toc-subtopic-tag::before {
  content: '▪';
  color: var(--color-gold);
  font-size: 6.5pt;
}

/* ==========================================================================
   CONTRACAPA EDITORIAL DE ALTO LUXO (BACK COVER)
   ========================================================================== */

.pdf-page.page-back-cover {
  background: linear-gradient(145deg, #07141A 0%, #0E2531 40%, #1C475C 75%, #0B1C24 100%) !important;
  color: #FFFFFF !important;
}

.pdf-page.page-back-cover * {
  color: #FFFFFF;
}

.back-cover-content {
  padding: 16mm 18mm 14mm 18mm;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  z-index: 4;
}

.back-cover-top {
  margin-top: 3mm;
}

.back-cover-pretitle {
  font-family: var(--font-sans);
  font-size: 8.5pt;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--color-gold-light) !important;
  font-weight: 700;
}

.back-cover-title {
  font-family: var(--font-serif-title);
  font-size: 19pt;
  line-height: 1.3;
  color: #FFFFFF !important;
  margin: 2.5mm 0 3.5mm 0;
  font-weight: 700;
}

.back-cover-lead {
  font-size: 9.6pt;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94) !important;
  margin-bottom: 4mm;
  max-width: 145mm;
  margin-left: auto;
  margin-right: auto;
}

.back-cover-pillars {
  display: flex;
  flex-direction: column;
  gap: 3mm;
  text-align: left;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(197, 155, 88, 0.45);
  border-radius: 3.5mm;
  padding: 5mm 6mm;
  margin: 3mm 0;
}

.back-pillar-item {
  display: flex;
  gap: 3mm;
  align-items: flex-start;
  font-size: 8.8pt;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.96) !important;
}

.back-pillar-icon {
  color: var(--color-gold-light) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.5mm;
}

.back-pillar-icon svg {
  display: block;
}

.back-footer-seal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5mm;
  margin-bottom: 3mm;
}

.back-seal-img {
  width: 26mm;
  height: 26mm;
  opacity: 0.95;
}

.back-footer-copy {
  font-size: 7.6pt;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold-light) !important;
  opacity: 0.88;
}

/* ==========================================================================
   12 ELEMENTOS VISUAIS TÉCNICOS NOBRES (PEDAGOGICAL VISUAL ELEMENTS)
   Preenchimento doutrinário de alto valor estético e rigor dogmático
   ========================================================================== */

.ve-container {
  background: #FFFFFF;
  border: 1px solid rgba(197, 155, 88, 0.45);
  border-radius: 2.8mm;
  padding: 2.8mm 3.6mm;
  margin-top: 3.2mm;
  margin-bottom: 0;
  box-shadow: 0 1.2mm 3.5mm rgba(7, 20, 26, 0.035);
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
  overflow: hidden;
}

.ve-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold) 0%, rgba(197, 155, 88, 0.3) 100%);
}

.ve-header {
  margin-bottom: 2mm;
  border-bottom: 1px solid rgba(197, 155, 88, 0.22);
  padding-bottom: 1.4mm;
}

.ve-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(197, 155, 88, 0.12);
  padding: 0.5mm 1.8mm;
  border-radius: 1mm;
  margin-bottom: 0.8mm;
}

.ve-title {
  font-family: var(--font-serif-title);
  font-size: 9.8pt;
  font-weight: 700;
  color: var(--color-petrol);
  line-height: 1.25;
}

.ve-subtitle {
  font-family: var(--font-sans);
  font-size: 7.2pt;
  color: var(--color-text-muted);
  margin-top: 0.4mm;
  font-style: italic;
}

.ve-bullet {
  color: var(--color-gold);
  font-size: 6.5pt;
  margin-right: 1.2mm;
  flex-shrink: 0;
}

/* 1. Mindmap */
.ve-mm-body {
  display: flex;
  flex-direction: column;
  gap: 1.8mm;
}

.ve-mm-center {
  display: flex;
  justify-content: center;
}

.ve-mm-center-badge {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  padding: 1.2mm 3.2mm;
  border-radius: 20px;
  border: 1.2px solid var(--color-gold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 1mm 2.5mm rgba(7, 20, 26, 0.1);
}

.ve-mm-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr));
  gap: 1.8mm;
}

.ve-mm-node {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.3);
  border-radius: 1.8mm;
  padding: 1.6mm 2.2mm;
}

.ve-mm-node-title {
  font-family: var(--font-sans);
  font-size: 7.8pt;
  font-weight: 700;
  color: var(--color-petrol);
  display: flex;
  align-items: center;
  gap: 1.2mm;
  margin-bottom: 0.8mm;
}

.ve-mm-node-title svg {
  width: 3.5mm;
  height: 3.5mm;
  color: var(--color-gold);
}

.ve-mm-node-desc {
  font-size: 7.2pt;
  line-height: 1.35;
  color: var(--color-text-main);
}

/* 2. Infographic */
.ve-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42mm, 1fr));
  gap: 2mm;
}

.ve-info-card {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.28);
  border-radius: 2mm;
  padding: 2mm 2.4mm;
  display: flex;
  flex-direction: column;
}

.ve-info-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1mm;
}

.ve-info-badge {
  font-size: 6.5pt;
  font-weight: 800;
  color: var(--color-gold);
  background: #FFFFFF;
  border: 0.8px solid var(--color-gold);
  border-radius: 1mm;
  padding: 0.2mm 1.4mm;
  text-transform: uppercase;
}

.ve-info-label {
  font-family: var(--font-sans);
  font-size: 7.4pt;
  font-weight: 700;
  color: var(--color-petrol);
}

.ve-info-value {
  font-family: var(--font-serif-title);
  font-size: 11pt;
  font-weight: 700;
  color: var(--color-petrol);
  line-height: 1.2;
  margin-bottom: 0.8mm;
}

.ve-info-desc {
  font-size: 7.1pt;
  line-height: 1.32;
  color: var(--color-text-muted);
}

/* 3. Canvas */
.ve-canvas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm;
}

.ve-canvas-quad {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.32);
  border-radius: 1.8mm;
  padding: 2mm 2.5mm;
}

.ve-canvas-quad-title {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 800;
  color: var(--color-petrol);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 1.2mm;
  border-bottom: 1px dashed rgba(197, 155, 88, 0.35);
  padding-bottom: 0.6mm;
}

.ve-canvas-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ve-canvas-li {
  display: flex;
  align-items: flex-start;
  font-size: 7.2pt;
  line-height: 1.35;
  margin-bottom: 1mm;
  color: var(--color-text-main);
}

.ve-canvas-li:last-child {
  margin-bottom: 0;
}

/* 4. Layers */
.ve-layers-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4mm;
}

.ve-layer-row {
  display: flex;
  align-items: stretch;
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.3);
  border-radius: 1.6mm;
  overflow: hidden;
}

.ve-layer-rank {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 6.8pt;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 1.4mm 2.6mm;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 18mm;
  border-right: 1.5px solid var(--color-gold);
}

.ve-layer-content {
  padding: 1.4mm 2.4mm;
  flex-grow: 1;
}

.ve-layer-name {
  font-family: var(--font-sans);
  font-size: 7.8pt;
  font-weight: 700;
  color: var(--color-petrol);
}

.ve-layer-desc {
  font-size: 7.2pt;
  line-height: 1.35;
  color: var(--color-text-main);
}

/* 5. Cycle */
.ve-cycle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5mm;
}

.ve-cycle-step {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.35);
  border-radius: 1.8mm;
  padding: 1.8mm 2mm;
  flex: 1;
  text-align: center;
}

.ve-cycle-num {
  width: 5mm;
  height: 5mm;
  background: var(--color-gold);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 7pt;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1mm auto;
}

.ve-cycle-name {
  font-family: var(--font-sans);
  font-size: 7.4pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin-bottom: 0.6mm;
}

.ve-cycle-desc {
  font-size: 6.8pt;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.ve-cycle-arrow {
  color: var(--color-gold);
  font-size: 9pt;
  font-weight: 700;
  flex-shrink: 0;
}

/* 6. Roadmap */
.ve-rm-track {
  position: relative;
  padding: 1mm 0;
}

.ve-rm-line {
  position: absolute;
  top: 10mm;
  left: 3mm;
  right: 3mm;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-gold) 0%, rgba(197, 155, 88, 0.3) 100%);
  z-index: 1;
}

.ve-rm-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34mm, 1fr));
  gap: 2mm;
  position: relative;
  z-index: 2;
}

.ve-rm-node {
  background: #FFFFFF;
  border: 1px solid rgba(197, 155, 88, 0.35);
  border-radius: 1.8mm;
  padding: 1.8mm 2mm;
  text-align: left;
}

.ve-rm-marker {
  width: 4.5mm;
  height: 4.5mm;
  background: var(--color-petrol);
  border: 1.2px solid var(--color-gold);
  border-radius: 50%;
  margin-bottom: 1.2mm;
}

.ve-rm-phase {
  font-family: var(--font-sans);
  font-size: 6.6pt;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-gold);
}

.ve-rm-name {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin-bottom: 0.6mm;
}

.ve-rm-desc {
  font-size: 7pt;
  line-height: 1.32;
  color: var(--color-text-muted);
}

/* 7. Sketchnotes */
.ve-sn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm;
}

.ve-sn-card {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.38);
  border-left: 3px solid var(--color-gold);
  border-radius: 1.6mm;
  padding: 1.8mm 2.4mm;
}

.ve-sn-topic {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 800;
  color: var(--color-petrol);
  margin-bottom: 0.8mm;
}

.ve-sn-detail {
  font-size: 7.2pt;
  line-height: 1.35;
  color: var(--color-text-main);
}

/* 8. Iceberg */
.ve-iceberg-body {
  display: flex;
  flex-direction: column;
  gap: 1.6mm;
}

.ve-iceberg-waterline,
.ve-iceberg-depthline {
  font-family: var(--font-sans);
  font-size: 6.5pt;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-gold);
  margin-bottom: 0.8mm;
}

.ve-iceberg-tip {
  background: #FAF8F3;
  border: 1px dashed rgba(197, 155, 88, 0.5);
  border-radius: 1.6mm;
  padding: 1.6mm 2.2mm;
}

.ve-iceberg-base {
  background: rgba(14, 37, 49, 0.05);
  border: 1px solid rgba(14, 37, 49, 0.2);
  border-radius: 1.6mm;
  padding: 1.6mm 2.2mm;
}

.ve-iceberg-label {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  color: var(--color-petrol);
  display: block;
  margin-bottom: 0.8mm;
}

.ve-iceberg-content ul {
  list-style: square;
  padding-left: 4mm;
  margin: 0;
  font-size: 7.1pt;
  line-height: 1.33;
}

/* 9. Exploded View */
.ve-ev-core {
  background: var(--color-petrol);
  color: #FFFFFF;
  border-radius: 1.6mm;
  padding: 1.4mm 2.4mm;
  margin-bottom: 2mm;
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
}

.ve-ev-core span {
  color: var(--color-gold-light);
}

.ve-ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr));
  gap: 1.8mm;
}

.ve-ev-part {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.3);
  border-radius: 1.6mm;
  padding: 1.6mm 2mm;
}

.ve-ev-badge {
  font-family: var(--font-sans);
  font-size: 6.6pt;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 0.6mm;
}

.ve-ev-role {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin-bottom: 0.6mm;
}

.ve-ev-spec {
  font-size: 7.1pt;
  line-height: 1.32;
  color: var(--color-text-main);
}

/* 10. Blueprint */
.ve-bp-table {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 7.2pt;
  border: 1px solid rgba(197, 155, 88, 0.35);
  border-radius: 1.6mm;
  overflow: hidden;
}

.ve-bp-table-head {
  display: grid;
  grid-template-columns: 28mm 40mm 1fr;
  background: var(--color-petrol);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 6.8pt;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1.4mm 2.4mm;
  border-bottom: 1.5px solid var(--color-gold);
}

.ve-bp-row {
  display: grid;
  grid-template-columns: 28mm 40mm 1fr;
  padding: 1.4mm 2.4mm;
  border-bottom: 1px solid rgba(197, 155, 88, 0.18);
  align-items: center;
  background: #FFFFFF;
}

.ve-bp-row:nth-child(even) {
  background: #FAF8F3;
}

.ve-bp-row:last-child {
  border-bottom: none;
}

.ve-bp-code {
  font-weight: 700;
  color: var(--color-gold);
}

.ve-bp-param {
  font-weight: 700;
  color: var(--color-petrol);
}

.ve-bp-req {
  color: var(--color-text-main);
  line-height: 1.3;
}

/* 11. Timeline */
.ve-tl-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(36mm, 1fr));
  gap: 2mm;
}

.ve-tl-event {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.3);
  border-radius: 1.6mm;
  padding: 1.8mm 2mm;
}

.ve-tl-year-pill {
  display: inline-block;
  background: var(--color-petrol);
  color: var(--color-gold-light);
  font-family: var(--font-sans);
  font-size: 7.2pt;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 0.4mm 1.8mm;
  border-radius: 1.2mm;
  margin-bottom: 1mm;
}

.ve-tl-title {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin-bottom: 0.6mm;
}

.ve-tl-desc {
  font-size: 7.1pt;
  line-height: 1.32;
  color: var(--color-text-main);
}

/* 12. Decision Matrix & Tree */
.ve-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.2pt;
}

.ve-matrix-table th {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 6.8pt;
  letter-spacing: 0.8px;
  padding: 1.6mm 2.2mm;
  text-align: left;
  border-bottom: 1.5px solid var(--color-gold);
}

.ve-matrix-table td {
  padding: 1.6mm 2.2mm;
  border-bottom: 1px solid rgba(197, 155, 88, 0.2);
  line-height: 1.33;
}

.ve-matrix-table tr:nth-child(even) td {
  background: #FAF8F3;
}

.ve-tree-body {
  display: flex;
  flex-direction: column;
  gap: 1.6mm;
}

.ve-tree-root {
  background: var(--color-petrol);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1.2mm 2.6mm;
  border-radius: 1.6mm;
  border-left: 3px solid var(--color-gold);
}

.ve-tree-branches-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr));
  gap: 1.8mm;
}

.ve-tree-branch {
  background: #FAF8F3;
  border: 1px solid rgba(197, 155, 88, 0.3);
  border-radius: 1.6mm;
  padding: 1.6mm 2.2mm;
}

.ve-tree-branch-name {
  font-family: var(--font-sans);
  font-size: 7.6pt;
  font-weight: 700;
  color: var(--color-petrol);
  margin-bottom: 0.8mm;
  border-bottom: 1px dashed rgba(197, 155, 88, 0.3);
  padding-bottom: 0.5mm;
}

.ve-tree-sublist {
  list-style: square;
  padding-left: 3.8mm;
  margin: 0;
  font-size: 7.1pt;
  line-height: 1.33;
  color: var(--color-text-main);
}