/* Basic Reset & Typography */
@page {
  size: A4 portrait;
  margin: 15mm;
}

html {
  scroll-behavior: smooth;
}

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background-color: #0f766e;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 10px;
  outline: 2px solid #5eead4;
  outline-offset: 2px;
}

/* Keyboard Focus Ring Standard (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #e5e7eb;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Control Bar (Fixed at top) */
.controls {
  width: 100%;
  background-color: #115e59;
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

.nav-index-btn {
  background-color: rgba(255, 255, 255, 0.12);
  color: #f0fdfa;
  border: 1px solid rgba(153, 246, 228, 0.35);
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.nav-index-btn:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.controls button {
  background-color: #0d9488;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
}

.controls button:hover {
  background-color: #0f766e;
  transform: translateY(-1px);
}

/* Page Container & Stage */
.page-container {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  counter-reset: page-counter;
}

/* Document Printable Boundary (A4 Standard Dimensions) */
.page-boundary {
  width: 210mm;
  min-height: 297mm;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  padding: 20mm; /* Standard page margin */
  position: relative;
  outline: 1px dashed #cbd5e1; /* Boundary margin guideline */
  outline-offset: -20mm;
  counter-increment: page-counter;
}

.page-boundary:not(#page1)::after {
  content: "Andymcdreamy.com  ·  Language Tool – English Guide   |   Pág. " counter(page-counter) " de 21";
  position: absolute;
  bottom: 8mm;
  left: 20mm;
  right: 20mm;
  text-align: right;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  border-top: 1px solid #ccfbf1;
  padding-top: 4px;
  pointer-events: none;
}

/* Document Header (Logo & Brand) */
.doc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #0d9488;
  margin-bottom: 28px;
}

.doc-header.mini {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccfbf1;
  margin-bottom: 20px;
}

.doc-logo {
  height: 60px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.doc-logo-sm {
  height: 38px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0f766e;
  letter-spacing: -0.5px;
}

.brand-title-sm {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #115e59;
}

/* Generic Page Section Title & Divider */
.section-header {
  margin-bottom: 22px;
}

.page-title {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 6px;
}

.page-divider {
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  border-radius: 2px;
}

/* ==========================================================================
   TOC (ÍNDICE) Teal Styling
   ========================================================================== */

.toc-container {
  padding: 10px 0;
}

.toc-header {
  margin-bottom: 28px;
}

.toc-title {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #0f766e;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.toc-divider {
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  border-radius: 2px;
}

/* TOC Main List */
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  padding: 4px 0;
}

.toc-item.has-subitems {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.toc-main-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.toc-main-link:hover {
  background-color: #f0fdfa;
}

.toc-link-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.toc-page-num {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #0d9488;
  background-color: #ccfbf1;
  border: 1px solid #99f6e4;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.toc-bullet {
  width: 34px;
  height: 34px;
  background-color: #ccfbf1;
  color: #0d9488;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid #99f6e4;
}

.toc-text {
  font-size: 16.5px;
  font-weight: 600;
  color: #1e293b;
}

.toc-text.highlight {
  color: #0f766e;
  font-size: 17.5px;
  font-weight: 700;
}

/* TOC Sublist */
.toc-sublist {
  list-style: none;
  width: 100%;
  padding-left: 20px;
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 7px;
  border-left: 2px solid #99f6e4;
  margin-left: 16px;
}

.toc-sublist li {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: #115e59;
  transition: all 0.15s ease;
}

.toc-sublist li a.toc-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5.5px 12px;
  text-decoration: none;
  color: inherit;
}

.toc-sublink-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toc-sublist li:hover {
  background-color: #ccfbf1;
  border-color: #5eead4;
  color: #0f766e;
}

.sub-num {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  background-color: #0d9488;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
}

/* ==========================================================================
   PAGE 3: REGLAS UNIVERSALES STYLING (Teal Palette)
   ========================================================================== */

.rules-container {
  padding: 5px 0;
}

.rules-header {
  margin-bottom: 16px;
}

.rules-title {
  font-family: 'Outfit', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 6px;
}

.rules-divider {
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  border-radius: 2px;
}

/* Formula Cards Stack */
.formulas-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.formula-card {
  padding: 11px 15px;
  border-radius: 8px;
  border-left: 5px solid #99f6e4;
  background-color: #f0fdfa;
  border-top: 1px solid #ccfbf1;
  border-right: 1px solid #ccfbf1;
  border-bottom: 1px solid #ccfbf1;
}

.formula-card.pos {
  border-left-color: #0d9488;
  background-color: #f0fdfa;
}

.formula-card.neg {
  border-left-color: #14b8a6;
  background-color: #f4fbfb;
}

.formula-card.int {
  border-left-color: #2dd4bf;
  background-color: #ffffff;
}

.formula-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.formula-card.pos .formula-badge { color: #0f766e; }
.formula-card.neg .formula-badge { color: #115e59; }
.formula-card.int .formula-badge { color: #0d9488; }

.formula-desc {
  font-size: 13.5px;
  color: #115e59;
  margin-bottom: 8px;
  line-height: 1.4;
}

.formula-box {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  display: inline-block;
  color: #0f766e;
}

/* Horizontal Examples Table Section */
.examples-section {
  margin-top: 20px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.examples-table-container {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #99f6e4;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.05);
}

.examples-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.examples-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 2px solid #5eead4;
}

.examples-table th.col-aux {
  width: 18%;
}

.examples-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0fdfa;
  color: #1e293b;
  line-height: 1.4;
}

.examples-table tr:nth-child(even) td {
  background-color: #f0fdfa;
}

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

.aux-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aux-cell strong {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0d9488;
}

.aux-cell small {
  font-size: 11px;
  color: #115e59;
  font-weight: 500;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: middle;
}

.tag.pos { background-color: #ccfbf1; color: #0f766e; }
.tag.neg { background-color: #99f6e4; color: #115e59; }
.tag.int { background-color: #e6fffa; color: #0d9488; }

/* Pronunciation Tips Section (Page 3) */
.pron-section {
  margin-top: 16px;
}

.pron-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.pron-card {
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-top: 3px solid #0d9488;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pron-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0fdfa;
  padding-bottom: 4px;
}

.pron-letters {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0f766e;
  background-color: #ccfbf1;
  padding: 2px 9px;
  border-radius: 6px;
}

.pron-sound {
  font-size: 11px;
  font-weight: 700;
  color: #0d9488;
}

.pron-desc {
  font-size: 11.5px;
  color: #334155;
  line-height: 1.35;
}

.pron-examples {
  font-size: 11.5px;
  font-weight: 600;
  color: #0f766e;
  background-color: #f0fdfa;
  padding: 4px 8px;
  border-radius: 5px;
  margin-top: auto;
}

/* ==========================================================================
   PAGE 4: LISTADO DE VERBOS STYLING
   ========================================================================== */

.verbs-container {
  padding: 5px 0;
}

.verbs-header {
  margin-bottom: 18px;
}

.verbs-title {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 6px;
}

.verbs-divider {
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf);
  border-radius: 2px;
}

.verbs-table-container {
  border-radius: 8px;
  border: 1px solid #5eead4;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.05);
}

.verbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  text-align: left;
}

.verbs-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-right: 1px solid #99f6e4;
  border-bottom: 2px solid #5eead4;
}

.verbs-table th:last-child {
  border-right: none;
}

.verbs-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #e6fffa;
  border-right: 1px solid #f0fdfa;
  color: #1e293b;
  line-height: 1.3;
}

.verbs-table td:last-child {
  border-right: none;
}

.verbs-table tr:nth-child(even) td {
  background-color: #f0fdfa;
}

/* Core Auxiliaries Highlight Rows */
.verbs-table tr.highlight-row td {
  background-color: #e6fffa !important;
  color: #0f766e;
  font-weight: 600;
}

/* Lighter Teal Section Header Rows */
.verbs-table tr.separator-row td {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 5px;
}

.verbs-table tr.separator-row.aux-header td {
  background-color: #0d9488 !important;
  color: #ffffff !important;
}

.verbs-table tr.separator-row.irregular-header td {
  background-color: #14b8a6 !important;
  color: #ffffff !important;
  border-top: 1px solid #0f766e;
  border-bottom: 1px solid #0f766e;
}

.verbs-table tr.separator-row.regular-header td {
  background-color: #2dd4bf !important;
  color: #042f2e !important;
  border-top: 1px solid #0d9488;
  border-bottom: 1px solid #0d9488;
}

/* ==========================================================================
   PAGE 5: TABLA DE LA MANZANITA STYLING
   ========================================================================== */

.manzanita-container {
  padding: 5px 0;
}

.manzanita-table-wrapper {
  border-radius: 8px;
  border: 1px solid #5eead4;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.06);
  margin-bottom: 20px;
}

.manzanita-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
}

.manzanita-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 8px;
  border-right: 1px solid #99f6e4;
  border-bottom: 2px solid #5eead4;
  line-height: 1.3;
}

.manzanita-table th small {
  font-weight: 500;
  font-size: 11px;
  color: #115e59;
}

.manzanita-table th:last-child {
  border-right: none;
}

.manzanita-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #e6fffa;
  border-right: 1px solid #f0fdfa;
  color: #1e293b;
  font-size: 13.5px;
}

.manzanita-table td:last-child {
  border-right: none;
}

.manzanita-table tr:nth-child(even) td {
  background-color: #f0fdfa;
}

/* Center Apple Column */
.manzanita-table th.apple-col {
  background-color: #f0fdfa;
  color: #0d9488;
  font-size: 16px;
  width: 14%;
}

.apple-cell {
  background-color: #ffffff !important;
  vertical-align: middle;
  padding: 0 !important;
}

.apple-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #0d9488;
  padding: 12px 4px;
}

.apple-icon {
  font-size: 38px;
  color: #0d9488;
  filter: drop-shadow(0 2px 4px rgba(13, 148, 136, 0.2));
}

.apple-badge span {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0f766e;
}

/* Action Flow Banner */
.action-flow-banner {
  background: linear-gradient(90deg, #f0fdfa, #ccfbf1, #f0fdfa);
  border: 1px dashed #5eead4;
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 24px;
}

.flow-step {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f766e;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #99f6e4;
}

.flow-action {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  background: #0d9488;
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.3);
}

.flow-arrow {
  color: #0d9488;
  font-size: 18px;
}

/* Manzanita Examples Grid */
.manzanita-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.m-example-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.m-tag.p-sujeto { background-color: #d1fae5; color: #065f46; }
.m-tag.p-adj { background-color: #ccfbf1; color: #0f766e; }
.m-tag.p-poss { background-color: #e0e7ff; color: #3730a3; }
.m-tag.p-obj { background-color: #fef3c7; color: #92400e; }

.m-example-card p {
  font-size: 13.5px;
  color: #1e293b;
  line-height: 1.4;
}

.m-example-card small {
  font-size: 11.5px;
  color: #64748b;
}

/* ==========================================================================
   PAGE 6: EL VERBO GET STYLING
   ========================================================================== */

.get-container {
  padding: 5px 0;
}

.get-intro {
  font-size: 13.5px;
  color: #334155;
  margin-top: 6px;
  line-height: 1.5;
}

.get-section {
  margin-bottom: 22px;
}

.get-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.num-badge {
  width: 24px;
  height: 24px;
  background-color: #0d9488;
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.get-desc {
  font-size: 13px;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.4;
}

.get-part1-wrapper {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  align-items: stretch;
}

.get-meanings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.meaning-chip {
  background-color: #f0fdfa;
  border: 1px solid #99f6e4;
  color: #0f766e;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chip-pct {
  background-color: #ccfbf1;
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.chart-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.05);
}

.chart-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pie-chart {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: conic-gradient(
    #0d9488 0% 35%,
    #14b8a6 35% 50%,
    #2dd4bf 50% 62%,
    #5eead4 62% 72%,
    #99f6e4 72% 82%,
    #cbd5e1 82% 100%
  );
  box-shadow: 0 3px 8px rgba(13, 148, 136, 0.15);
  flex-shrink: 0;
}

.chart-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: #334155;
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.dot-1 { background-color: #0d9488; }
.legend-dot.dot-2 { background-color: #14b8a6; }
.legend-dot.dot-3 { background-color: #2dd4bf; }
.legend-dot.dot-4 { background-color: #5eead4; }
.legend-dot.dot-5 { background-color: #99f6e4; }
.legend-dot.dot-6 { background-color: #cbd5e1; }

.formula-banner {
  background: #ccfbf1;
  border: 1px solid #5eead4;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}

.mini-banner {
  font-size: 13.5px;
  padding: 6px 10px;
  margin-top: 10px;
  margin-bottom: 0;
}

.get-table-container {
  border-radius: 8px;
  border: 1px solid #99f6e4;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
}

.get-examples-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.get-examples-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 10px;
  border-bottom: 2px solid #5eead4;
  border-right: 1px solid #99f6e4;
}

.get-examples-table th:last-child {
  border-right: none;
}

.get-examples-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0fdfa;
  border-right: 1px solid #f0fdfa;
  color: #334155;
  line-height: 1.35;
}

.get-examples-table td:last-child {
  border-right: none;
}

.get-examples-table tr:nth-child(even) td {
  background-color: #f0fdfa;
}

/* Part 1: Replacement Examples Grid */
.get-rep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.get-rep-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rep-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.rep-equiv {
  font-size: 11px;
  font-weight: 600;
  color: #0f766e;
}

.rep-sentence {
  font-size: 12.5px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.35;
}

.rep-sentence u {
  color: #0d9488;
  font-weight: 700;
}

.rep-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}

/* Sub-captions in Tables */
.cell-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 3px;
  font-weight: 400;
  line-height: 1.3;
}

/* Part 3: Phrasal Verbs Grid & Cards */
.phrasal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.phrasal-item {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phrasal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0fdfa;
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.phrasal-verb {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0d9488;
  display: flex;
  align-items: center;
  gap: 5px;
}

.phrasal-verb i {
  font-size: 11px;
  color: #14b8a6;
}

.phrasal-meaning {
  font-size: 10.5px;
  font-weight: 600;
  color: #0f766e;
  background-color: #f0fdfa;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #ccfbf1;
}

.phrasal-sentence {
  font-size: 12px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.35;
}

.phrasal-sentence u {
  color: #0d9488;
  font-weight: 700;
}

.phrasal-trans {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}

/* ==========================================================================
   PAGE 7: LISTADO DE HERRAMIENTAS LINGÜÍSTICAS STYLING
   ========================================================================== */

.tools-overview-container {
  padding: 5px 0;
}

.philosophy-card {
  background-color: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-left: 5px solid #0d9488;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
}

.philosophy-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.philosophy-card p {
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}

.philosophy-highlight {
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #0f766e;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
  margin-top: 4px;
}

.philosophy-highlight i {
  color: #0d9488;
  font-size: 15px;
  margin-top: 2px;
}

.units-grid-section {
  margin-top: 10px;
}

.units-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.unit-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.unit-card:hover {
  background-color: #f0fdfa;
  border-color: #5eead4;
  color: #0f766e;
  transform: translateY(-1px);
}

.u-badge {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  background-color: #0d9488;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ==========================================================================
   UNITS 1 to 14 UNIVERSAL STYLING (Pages 8 - 21)
   ========================================================================== */

.unit-container {
  padding: 5px 0;
}

.unit-top-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

.unit-desc-box {
  background-color: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.unit-purpose-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  background-color: #ccfbf1;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-desc-box p {
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
}

.aux-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.aux-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0d9488;
  display: flex;
  align-items: center;
  gap: 6px;
}

.aux-tense {
  font-size: 11.5px;
  color: #0f766e;
  border-bottom: 1px solid #f0fdfa;
  padding-bottom: 4px;
}

.aux-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.aux-table td {
  padding: 4px 0;
  color: #334155;
  border-bottom: 1px dashed #e2e8f0;
}

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

.aux-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #0d9488;
}

/* Unit Key Tools & Sub-cards Section */
.unit-mid-section {
  margin-bottom: 16px;
}

.unit-sub-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.unit-tools-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.unit-tools-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.unit-tools-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.unit-tool-card {
  background-color: #ffffff;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0fdfa;
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.tool-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0d9488;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tool-card-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: #0f766e;
  background-color: #f0fdfa;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #ccfbf1;
}

.tool-card-body {
  font-size: 12px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.35;
}

.tool-card-body u {
  color: #0d9488;
  font-weight: 700;
}

.tool-card-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}

/* Frequency Bar for Unit 5 */
.freq-scale-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.freq-pill {
  background-color: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.freq-pct {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #0d9488;
}

.freq-word {
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
}

.freq-es {
  font-size: 10.5px;
  color: #64748b;
}

/* Unit 6: Inverted Pyramid for Prepositions (IN, ON, AT) */
.prep-pyramid-container {
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.05);
}

.prep-pyramid-headers {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: center;
  border-bottom: 2px solid #0d9488;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.prep-col-header {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #0f766e;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prep-col-header.right {
  justify-content: flex-end;
}

.prep-center-header {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0d9488;
  text-transform: uppercase;
}

.prep-tier {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #99f6e4;
}

.prep-tier:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.prep-side {
  font-size: 11.5px;
  color: #1e293b;
  line-height: 1.35;
}

.prep-side.right {
  text-align: right;
}

.prep-side strong {
  color: #0f766e;
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}

.prep-side small {
  color: #64748b;
  font-size: 10.5px;
  display: block;
  margin-top: 2px;
}

.prep-funnel-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.funnel-badge {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 3px 8px rgba(13, 148, 136, 0.2);
}

.funnel-badge span {
  font-size: 17px;
  line-height: 1.1;
}

.funnel-badge small {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.funnel-in {
  width: 150px;
  height: 54px;
  background: linear-gradient(135deg, #0f766e, #0d9488);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
  border-radius: 4px 4px 0 0;
}

.funnel-on {
  width: 102px;
  height: 52px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%);
}

.funnel-at {
  width: 56px;
  height: 52px;
  background: linear-gradient(135deg, #14b8a6, #2dd4bf);
  color: #0f766e;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  padding-bottom: 10px;
}

.funnel-at span {
  font-size: 15px;
  color: #042f2e;
}

/* ==========================================================================
   PAGE 1: COVER PAGE (PORTADA) STYLING
   ========================================================================== */
.cover-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220mm;
  padding: 10px 0 4px 0;
}

.cover-hero {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border: 2px solid #5eead4;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(13, 148, 136, 0.08);
}

.cover-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #0d9488;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.cover-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #0f766e;
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.cover-subtitle {
  font-size: 15.5px;
  color: #115e59;
  font-weight: 500;
  max-width: 520px;
  margin: 0 auto 22px auto;
  line-height: 1.5;
}

.cover-highlight-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  padding: 10px 22px;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0d9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.06);
}

.cover-pillars-section {
  margin: 22px 0;
}

.cover-pillars-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 14px;
}

.cover-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cover-pillar-card {
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-top: 4px solid #0d9488;
  border-radius: 10px;
  padding: 16px 14px;
  box-shadow: 0 4px 10px rgba(13, 148, 136, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #ccfbf1;
  color: #0d9488;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.cover-pillar-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f766e;
}

.cover-pillar-card p {
  font-size: 12px;
  color: #334155;
  line-height: 1.45;
}

.cover-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background-color: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 10px;
  padding: 14px 16px;
}

.cover-stat-item {
  text-align: center;
  border-right: 1px solid #ccfbf1;
  padding: 0 6px;
}

.cover-stat-item:last-child {
  border-right: none;
}

.stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #0d9488;
  display: block;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #0f766e;
}

.cover-footer {
  border-top: 2px solid #ccfbf1;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #0f766e;
  font-weight: 600;
}

/* ==========================================================================
   UNIT 9: BOTTLE QUANTITY SCALE DIAGRAM
   ========================================================================== */
.bottle-scale-container {
  background-color: #ffffff;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.04);
}

.bottle-scale-headers {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  border-bottom: 2px solid #0d9488;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.bottle-row {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed #ccfbf1;
}

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

.bottle-side {
  font-size: 12px;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0fdfa;
  border: 1px solid #ccfbf1;
  padding: 5px 10px;
  border-radius: 6px;
}

.bottle-side strong {
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
}

.bottle-side small {
  color: #64748b;
  font-size: 11px;
}

.bottle-level-center {
  display: flex;
  justify-content: center;
}

.bottle-segment {
  width: 76px;
  height: 26px;
  border-left: 2px solid #0f766e;
  border-right: 2px solid #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

.bottle-seg-100 {
  width: 46px;
  border-top: 3px solid #0f766e;
  border-radius: 6px 6px 0 0;
  background-color: #0f766e;
}

.bottle-seg-80 { background-color: #0d9488; }
.bottle-seg-50 { background-color: #14b8a6; }
.bottle-seg-20 { background-color: #5eead4; color: #0f766e; }
.bottle-seg-0 {
  border-bottom: 3px solid #0f766e;
  border-radius: 0 0 8px 8px;
  background-color: #f0fdfa;
  color: #0f766e;
}

/* Near/Far Table */
.near-far-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #99f6e4;
}

.near-far-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  padding: 4px 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
}

.near-far-table td {
  padding: 4px 8px;
  text-align: center;
  border-top: 1px solid #f0fdfa;
  border-right: 1px solid #f0fdfa;
}

/* Genitive 'S Box */
.genitive-box {
  background-color: #f0fdfa;
  border: 1px dashed #5eead4;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  text-align: center;
  margin-top: 4px;
}

.genitive-title {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0f766e;
  display: block;
  margin-bottom: 4px;
}

.genitive-arrow-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0;
}

.g-node {
  background: #ffffff;
  border: 1px solid #99f6e4;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.g-node.highlight {
  background: #0d9488;
  color: #ffffff;
  border-color: #0d9488;
}

.g-result {
  color: #0d9488;
  font-size: 12px;
  margin-top: 2px;
}

/* Unit Examples Table */
.unit-examples-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.unit-examples-table th {
  background-color: #ccfbf1;
  color: #0f766e;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 2px solid #5eead4;
  border-right: 1px solid #99f6e4;
}

.unit-examples-table th:last-child {
  border-right: none;
}

.unit-examples-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #e6fffa;
  border-right: 1px solid #f0fdfa;
  color: #1e293b;
  vertical-align: top;
  line-height: 1.45;
}

.unit-examples-table td:last-child {
  border-right: none;
}

.unit-examples-table tr:nth-child(even) td {
  background-color: #f0fdfa;
}

/* Print Styles */
@media print {
  body {
    background-color: transparent !important;
    display: block !important;
  }

  .no-print {
    display: none !important;
  }

  .page-container {
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
  }

  .page-boundary {
    width: 100% !important;
    min-height: 100vh !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    page-break-after: always;
    break-after: page;
  }

  .page-boundary:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .page-boundary:not(#page1)::after {
    bottom: 3mm;
    left: 0;
    right: 0;
  }

  .toc-sublist li, .formula-card, .examples-table-container, .verbs-table-container, .manzanita-table-wrapper, .m-example-card, .get-table-container, .phrasal-item, .meaning-chip, .chart-card, .philosophy-card, .unit-card, .aux-card, .unit-desc-box, .unit-example-card, .qa-item, .rep-ex-item, .get-rep-card, .unit-tool-card, .freq-pill, .prep-pyramid-container, .bottle-scale-container, .cover-pillar-card, .pron-card {
    background-color: #ffffff !important;
    border: 1px solid #99f6e4 !important;
  }

  .verbs-table th, .examples-table th, .manzanita-table th, .get-examples-table th, .formula-banner, .near-far-table th, .card-tag, .pron-letters, .toc-page-num {
    background-color: #ccfbf1 !important;
    color: #0f766e !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .verbs-table tr.separator-row td, .flow-action, .num-badge, .pie-chart, .u-badge, .g-node.highlight, .card-tag.pos-tag, .card-tag.neg-tag, .card-tag.int-tag, .funnel-badge, .bottle-segment, .cover-hero, .cover-badge, .pillar-icon, .cover-stats-strip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   RESPONSIVE VIEWPORT ADAPTATION (Tablet & Mobile Screen Viewing)
   ========================================================================== */
@media screen and (max-width: 840px) {
  .controls {
    padding: 10px 14px;
    justify-content: space-between;
  }

  .nav-index-btn,
  .controls button {
    padding: 8px 12px;
    font-size: 12.5px;
    flex: 1;
    justify-content: center;
  }

  .page-container {
    width: 100%;
    padding: 12px 8px;
    gap: 16px;
  }

  .page-boundary {
    width: 100%;
    min-height: auto;
    padding: 18px 14px 44px 14px;
    outline: none;
    border-radius: 10px;
  }

  .page-boundary:not(#page1)::after {
    left: 14px;
    right: 14px;
    bottom: 10px;
    text-align: center;
    font-size: 10px;
  }

  /* Cover Page Mobile Adjustments */
  .cover-wrapper {
    min-height: auto;
    gap: 18px;
  }

  .cover-hero {
    padding: 22px 16px;
  }

  .cover-main-title {
    font-size: 27px;
  }

  .cover-subtitle {
    font-size: 13.5px;
    margin-bottom: 16px;
  }

  .cover-highlight-bar {
    font-size: 12.5px;
    padding: 8px 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cover-footer {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  /* Headings & Titles */
  .toc-title,
  .rules-title,
  .verbs-title,
  .page-title {
    font-size: 21px;
  }

  .toc-text {
    font-size: 14.5px;
  }

  .toc-text.highlight {
    font-size: 15px;
  }

  .toc-sublist {
    padding-left: 12px;
    margin-left: 8px;
  }

  /* Collapse Multi-Column Grids on Mobile */
  .unit-top-grid,
  .cover-pillars-grid,
  .unit-tools-grid-4,
  .unit-tools-grid-3,
  .unit-tools-grid-2,
  .pron-grid,
  .get-rep-grid,
  .phrasal-grid,
  .get-part1-wrapper,
  .manzanita-examples-grid {
    grid-template-columns: 1fr;
  }

  .cover-stats-strip,
  .units-grid,
  .get-meanings-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cover-stat-item:nth-child(2) {
    border-right: none;
  }

  .freq-scale-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Action Flow Banner (Page 5 Manzanita) */
  .action-flow-banner {
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    justify-content: center;
  }

  /* Prepositions Pyramid (Unit 6) & Bottle Scale (Unit 9) on Mobile */
  .prep-pyramid-headers,
  .prep-tier {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }

  .prep-col-header,
  .prep-col-header.right {
    justify-content: center;
  }

  .prep-side,
  .prep-side.right {
    text-align: center;
  }

  .bottle-scale-headers,
  .bottle-row {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  /* Smooth Horizontal Scroll for Wide Grammar Tables on Mobile */
  .examples-table-container,
  .verbs-table-container,
  .manzanita-table-wrapper,
  .get-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .examples-table,
  .verbs-table,
  .manzanita-table,
  .get-examples-table,
  .unit-examples-table {
    min-width: 540px;
  }
}

@media screen and (max-width: 480px) {
  .units-grid,
  .get-meanings-grid {
    grid-template-columns: 1fr;
  }
}