/* ============================================================
   premium_v11_FINAL.css — EA Redhat Warp V11 REAL APPLE-GRADE
   SINGLE SOURCE OF TRUTH · merges R5 contrast (AAA preserved)
   Apple typography STRICT · 8pt grid · unified CTA system
   Strategic !important to defeat legacy inline styles
   ============================================================ */

/* ---------- 1 · RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

/* ---------- 2 · DESIGN TOKENS ---------- */
:root,
:root[data-theme],
:root[data-theme="dark"],
:root[data-theme="light"],
html,
html[data-theme],
html[data-theme="dark"],
html[data-theme="light"] {
  /* Page colors (R5 dark base preserved) */
  --bg: #0a0a0c !important;
  --bg-page: #0a0a0c !important;
  --bg-section: transparent !important;
  --bg-card: rgba(255,255,255,0.04) !important;
  --bg-card-hover: rgba(255,255,255,0.06) !important;

  --card: #12121a !important;
  --card-alt: #1a1a24 !important;

  /* Text scale (AAA contrast on #0a0a0c) */
  --text: #e8e8e8 !important;
  --text-primary: #ffffff !important;
  --text-body: #e8e8e8 !important;
  --text-secondary: #a8a8a8 !important;
  --text-caption: #8a8a8a !important;
  --muted: #a8a8b8 !important;

  /* Borders */
  --border: #333 !important;
  --border-subtle: rgba(255,255,255,0.06) !important;
  --border-strong: rgba(255,255,255,0.12) !important;
  --border-gold-subtle: rgba(212,168,83,0.20) !important;

  /* Accent — muted gold (NOT loud #ffd700) */
  --gold: #d4a853 !important;
  --accent: #c41e3a !important;
  --accent-gold: #d4a853 !important;
  --accent-gold-hover: #e6bd6e !important;

  /* Spacing 8pt */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-pill: 26px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 250ms;

  color-scheme: dark !important;
}

body, html {
  background: #0a0a0c !important;
  color: var(--text-body) !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- 3 · APPLE TYPOGRAPHY (STRICT) ---------- */
h1, .h1, body.premium-v11 h1, .hero-v11 h1 {
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 var(--sp-5) 0 !important;
  color: var(--text-primary) !important;
  max-width: 22ch;
}
h2, .h2, body.premium-v11 h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.2px !important;
  margin: 0 0 var(--sp-4) 0 !important;
  color: var(--text-primary) !important;
}
h3, .h3, body.premium-v11 h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--sp-3) 0 !important;
  color: var(--text-primary) !important;
}
p { font-size: 17px; line-height: 1.6; margin: 0 0 var(--sp-4) 0; color: var(--text-body); }
.caption { font-size: 13px; color: var(--text-caption); }
.micro { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-caption); }

/* ---------- 4 · BETA BANNER (subdued gold) ---------- */
.beta-banner, .premium-v11 .beta-banner {
  background: linear-gradient(180deg, rgba(212,168,83,0.12) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  text-align: center !important;
  letter-spacing: 0.3px;
  font-size: 14px !important;
  color: var(--text-body) !important;
}

/* ---------- 5 · HERO ---------- */
.hero, .hero-v11, .premium-v11 .hero-v11 {
  background: transparent !important;
  padding: var(--sp-9) var(--sp-5) var(--sp-8) !important;
  text-align: center !important;
  max-width: 1180px;
  margin: 0 auto;
}
.hero h1, .hero-v11 h1 {
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero p, .hero-v11 p, .hero-subtitle {
  max-width: 640px;
  margin: 0 auto var(--sp-5) auto !important;
  color: var(--text-body) !important;
  font-size: 17px !important;
}

/* ---------- 6 · UNIFIED CTA SYSTEM ---------- */
.cta-row, .mega-cta-row, .cta-primary-row, .cta-secondary-row {
  display: flex !important;
  gap: var(--sp-3) !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: var(--sp-5) auto !important;
  max-width: 800px !important;
  padding: 0 var(--sp-4) !important;
}

a.cta-primary, a.cta-primary-btn,
.cta-primary, .cta-primary-btn,
.demo-inline-actions .cta-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background: var(--accent-gold) !important;
  color: #1a1a1a !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px -10px rgba(212,168,83,0.45);
  white-space: nowrap;
}
a.cta-primary:hover, .cta-primary:hover,
a.cta-primary-btn:hover, .cta-primary-btn:hover {
  transform: scale(1.02) !important;
  background: var(--accent-gold-hover) !important;
}

a.cta-secondary, a.cta-secondary-btn,
.cta-secondary, .cta-secondary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 52px !important;
  padding: 0 28px !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all var(--dur) var(--ease) !important;
  white-space: nowrap;
}
a.cta-secondary:hover, .cta-secondary:hover,
a.cta-secondary-btn:hover, .cta-secondary-btn:hover {
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
}

a.cta-tertiary, .cta-tertiary,
.demo-inline-actions .cta-tertiary {
  display: inline-flex !important;
  align-items: center !important;
  height: 52px !important;
  padding: 0 var(--sp-3) !important;
  background: transparent !important;
  color: var(--accent-gold) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: none !important;
}
a.cta-tertiary:hover, .cta-tertiary:hover { text-decoration: underline; color: var(--accent-gold-hover) !important; }

/* Older v10 chaotic CTA classes — neutralize loud colors */
.cta-honest a, .cta-honest .btn-primary, .cta-honest .btn-secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 28px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* ---------- 7 · STATS INLINE (no box · subtle separators) ---------- */
.stats-inline, .stats-inline-v11, .stats-strip, .stats-premium {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--sp-6) !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 var(--sp-4) !important;
  margin: var(--sp-7) auto !important;
  max-width: 900px !important;
  font-size: 15px !important;
  color: var(--text-body) !important;
  text-align: center !important;
}
.stats-inline strong, .stats-inline-v11 strong, .stats-strip strong, .stats-premium strong {
  color: var(--accent-gold) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* ---------- 8 · YOUTUBE CARD (Apple — NOT dashed warning) ---------- */
.youtube-tutorial-placeholder, .yt-premium, .yt-premium-v11 {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  max-width: 600px !important;
  margin: var(--sp-8) auto !important;
  padding: var(--sp-7) var(--sp-6) !important;
  text-align: center !important;
}
.youtube-tutorial-placeholder h2, .yt-premium h2 {
  color: var(--text-primary) !important;
  font-size: 22px !important;
  margin: 0 0 var(--sp-4) 0 !important;
}
.yt-placeholder-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.yt-placeholder-card p, .yt-eta { color: var(--text-secondary) !important; font-size: 15px !important; }
.yt-icon { font-size: 40px !important; margin-bottom: var(--sp-3) !important; }
.yt-eta a { color: var(--accent-gold) !important; text-decoration: none !important; font-weight: 600; }
.yt-eta a:hover { text-decoration: underline; }

/* ---------- 9 · DISCLAIMER + LIMITATIONS (Apple cards · AAA preserved) ---------- */
.backtest-disclaimer, .disclaimer-box, .disclaimer-premium,
[class*="disclaimer"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--accent-gold) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-5) var(--sp-5) !important;
  margin: var(--sp-7) auto !important;
  max-width: 800px !important;
  color: var(--text-body) !important;
}
.backtest-disclaimer p, .disclaimer-box p, .disclaimer-premium p,
[class*="disclaimer"] p { color: var(--text-body) !important; }
.backtest-disclaimer strong, .disclaimer-box strong, .disclaimer-premium strong,
[class*="disclaimer"] strong {
  color: var(--accent-gold) !important;
  font-size: 16px !important;
}
.backtest-disclaimer ul, .disclaimer-box ul, .disclaimer-premium ul,
[class*="disclaimer"] ul {
  margin: var(--sp-3) 0 0 0 !important;
  padding-left: var(--sp-5) !important;
}
.backtest-disclaimer li, .disclaimer-box li, .disclaimer-premium li,
[class*="disclaimer"] li {
  color: var(--text-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: var(--sp-1) !important;
}
.backtest-disclaimer li::marker, [class*="disclaimer"] li::marker {
  color: var(--accent-gold) !important;
}

.limitations, .limitations-box, .limitations-premium,
[class*="limitation"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid rgba(220,100,100,0.55) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-5) !important;
  margin: var(--sp-7) auto !important;
  max-width: 800px !important;
  color: var(--text-body) !important;
}
.limitations strong, .limitations-box strong, .limitations-premium strong,
[class*="limitation"] strong {
  color: #ff8c42 !important;
  font-size: 16px !important;
}
.limitations p, .limitations-box p, .limitations-premium p,
[class*="limitation"] p { color: var(--text-body) !important; }
.limitations ul, .limitations-box ul, [class*="limitation"] ul {
  margin: var(--sp-3) 0 0 !important;
  padding-left: var(--sp-5) !important;
}
.limitations li, .limitations-box li, [class*="limitation"] li {
  color: var(--text-body) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ---------- 10 · CHAPTER GRID ---------- */
.grid, .chapters-grid-premium {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--sp-4) !important;
  max-width: 1180px !important;
  margin: var(--sp-7) auto !important;
  padding: 0 var(--sp-5) !important;
}
.card, .chapter-card, .chapter-card-premium {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--text-body) !important;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
  display: flex;
  flex-direction: column;
}
.card:hover, .chapter-card:hover, .chapter-card-premium:hover {
  transform: translateY(-2px) !important;
  background: var(--bg-card-hover) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
.card img, .chapter-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.chapter-title { font-size: 17px !important; font-weight: 600 !important; color: var(--text-primary) !important; margin: var(--sp-2) 0 !important; padding: 0 var(--sp-4); }
.chapter-meta, .chapter-card .chapter-meta, .chapter-card .reading-time {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  padding: 0 var(--sp-4) var(--sp-4);
}
.difficulty-badge {
  padding: 2px 8px !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- 11 · EA SHOWCASE ---------- */
.showcase-premium, .ea-showcase {
  max-width: 1200px !important;
  margin: var(--sp-9) auto !important;
  padding: 0 var(--sp-5);
}
.showcase-grid-premium, .ea-showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  gap: var(--sp-5) !important;
}
.showcase-premium figure, .ea-showcase-item {
  margin: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
.showcase-premium img, .ea-showcase-item img { width: 100%; height: auto; display: block; }
.showcase-premium figcaption, .ea-showcase-item figcaption {
  padding: var(--sp-4) var(--sp-5) !important;
  font-size: 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  color: var(--text-body) !important;
}
.ea-showcase-item figcaption strong { color: var(--accent-gold) !important; }
.ea-showcase-item figcaption span { color: var(--text-secondary) !important; }
.showcase-note { color: var(--text-secondary) !important; font-size: 13px !important; }

/* ---------- 12 · LINKS · DEMO INLINE · FOOTER ---------- */
a:not([class*="cta"]):not([class*="btn"]):not(.chapter-card):not(.card):not(.footer-nav-link) {
  color: var(--accent-gold) !important;
}
a:not([class*="cta"]):not([class*="btn"]):not(.chapter-card):not(.card):hover {
  color: var(--accent-gold-hover) !important;
}

.demo-cta-section, .demo-inline-v11 {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  max-width: 720px !important;
  margin: var(--sp-9) auto !important;
  padding: var(--sp-7) var(--sp-5) !important;
  text-align: center !important;
}
.demo-cta-section h2, .demo-inline-v11 h2 { color: var(--text-primary) !important; }
.demo-cta-section p, .demo-inline-v11 p, .demo-inline-text {
  color: var(--text-body) !important;
  margin: 0 0 var(--sp-4) 0;
}
.demo-cta-section .cta-primary, .demo-cta-section .cta-secondary,
.demo-inline-actions { gap: var(--sp-3) !important; justify-content: center !important; display: flex !important; flex-wrap: wrap !important; }

/* Footer (Apple quiet) */
.footer-v11-apple, .footer-premium, footer {
  max-width: 1200px;
  margin: var(--sp-9) auto 0 !important;
  padding: var(--sp-7) var(--sp-5) var(--sp-5) !important;
  border-top: 1px solid var(--border-subtle) !important;
  text-align: center !important;
  color: var(--text-secondary) !important;
}
.footer-v11-apple .footer-author { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.footer-v11-apple .author-avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-gold-subtle); object-fit: cover; }
.footer-v11-apple .author-meta { text-align: left; }
.footer-v11-apple .author-name { font-size: 17px; color: var(--text-primary); font-weight: 600; }
.footer-v11-apple .author-role { font-size: 13px; color: var(--text-secondary); }
.footer-v11-apple .footer-nav, .footer-premium .footer-nav {
  display: flex; gap: var(--sp-5); justify-content: center; margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.footer-v11-apple .footer-nav a, .footer-premium a, footer a {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border: none !important;
  transition: color var(--dur);
}
.footer-v11-apple .footer-nav a:hover, footer a:hover { color: var(--accent-gold) !important; }
.footer-v11-apple .footer-meta, .footer-meta {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-caption) !important;
}
.footer-v11-apple .footer-meta .separator { margin: 0 var(--sp-1); opacity: 0.4; }
.footer-v11-apple .footer-update { opacity: 0.7; }

/* ---------- 13 · GAP KILLERS ---------- */
.stats-inline + *, .stats-inline-v11 + *, .stats-strip + * { margin-top: var(--sp-7) !important; }
.yt-premium + *, .yt-premium-v11 + *, .youtube-tutorial-placeholder + * { margin-top: var(--sp-7) !important; }
section + section { margin-top: var(--sp-8); }
br + br { display: none; }

/* Promo row + various legacy clusters: tighten */
.promo-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; padding: var(--sp-5); max-width: 1180px; margin: 0 auto; }
.promo-row img { max-height: 280px; border-radius: var(--r-md); }

/* Author box cleanup */
.author-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-5) !important;
  max-width: 800px;
  margin: var(--sp-7) auto !important;
}

/* Share buttons quiet */
.share-buttons {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-4) !important;
  font-size: 14px !important;
}
.share-buttons a, .share-buttons button { color: var(--accent-gold) !important; }

/* Reading progress bar — keep but quiet */
.reading-progress-bar {
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-hover)) !important;
  height: 2px !important;
}

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent-gold) !important; outline-offset: 3px !important; border-radius: var(--r-sm); }

/* ---------- 14 · RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero, .hero-v11 { padding: var(--sp-8) var(--sp-5) var(--sp-7) !important; }
  .showcase-grid-premium, .ea-showcase-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  body { font-size: 15px !important; }
  body h1, body.premium-v11 h1, .hero h1, .hero-v11 h1, h1.h1 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
  }
  body h2, body.premium-v11 h2 { font-size: 22px !important; }
  body h3, body.premium-v11 h3 { font-size: 17px !important; }
  .hero, .hero-v11, .premium-v11 .hero-v11 { padding: var(--sp-7) var(--sp-4) var(--sp-6) !important; }

  .cta-row, .mega-cta-row, .cta-primary-row, .cta-secondary-row { gap: var(--sp-2) !important; padding: 0 var(--sp-4) !important; }
  body a.cta-primary, body .cta-primary, body a.cta-primary-btn, body .cta-primary-btn,
  body a.cta-secondary, body .cta-secondary, body a.cta-secondary-btn, body .cta-secondary-btn,
  .demo-inline-actions .cta-primary {
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
  }
  body a.cta-tertiary, body .cta-tertiary, .demo-inline-actions .cta-tertiary { height: 44px !important; font-size: 14px !important; }

  body .stats-inline, body .stats-inline-v11, body .stats-premium { gap: var(--sp-4) !important; font-size: 14px !important; }
  body .youtube-tutorial-placeholder, body .yt-premium, body .yt-premium-v11 { margin: var(--sp-7) var(--sp-4) !important; padding: var(--sp-5) var(--sp-4) !important; }
  body .backtest-disclaimer, body [class*="disclaimer"], body .limitations, body [class*="limitation"] {
    margin: var(--sp-5) var(--sp-4) !important;
    padding: var(--sp-4) !important;
  }
  .grid, .chapters-grid-premium { grid-template-columns: 1fr !important; padding: 0 var(--sp-4) !important; }
}

@media (max-width: 480px) {
  body h1, body.premium-v11 h1, .hero h1, .hero-v11 h1 { font-size: 28px !important; }
  body .stats-inline, body .stats-inline-v11, body .stats-premium { flex-direction: column; gap: var(--sp-3) !important; }
}

/* ---------- 15 · MOTION RESPECT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}