/* LoOPCode — luxury gold learning theme */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --lux-bg: #0a0a0b;
  --lux-bg-2: #111113;
  --lux-card: #141416;
  --lux-card-2: #1a1a1c;
  --lux-line: rgba(255, 255, 255, 0.07);
  --lux-line-gold: rgba(196, 165, 116, 0.28);
  --lux-text: #f4f1ea;
  --lux-muted: #8a8680;
  --lux-gold: #c4a574;
  --lux-gold-bright: #e4c99a;
  --lux-gold-dim: #8f7344;
  --lux-font: 'DM Sans', system-ui, sans-serif;
  --lux-display: 'Cormorant Garamond', Georgia, serif;
  --lux-mono: 'JetBrains Mono', ui-monospace, monospace;
  --lux-radius: 16px;
  --lux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--lux-font) !important;
  background: var(--lux-bg) !important;
  background-image: none !important;
  color: var(--lux-text) !important;
  min-height: 100vh;
  padding: 16px !important;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0;
}

/* Top nav links on chapters */
.top {
  max-width: 920px;
  margin: 0 auto 16px !important;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.top a {
  color: var(--lux-gold-bright) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: var(--lux-card) !important;
  border: 1px solid var(--lux-line-gold) !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.top a:hover {
  background: rgba(196, 165, 116, 0.12) !important;
  border-color: var(--lux-gold) !important;
  color: var(--lux-gold-bright) !important;
}

/* Main glass section → dark luxury card */
.section {
  background: var(--lux-card) !important;
  backdrop-filter: none !important;
  padding: 28px clamp(16px, 3vw, 32px) !important;
  border-radius: 20px !important;
  max-width: 920px;
  margin: 0 auto !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--lux-line-gold) !important;
}

.section h1,
.section h2,
h1 {
  font-family: var(--lux-display) !important;
  color: var(--lux-gold-bright) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.section h2,
h2 {
  color: var(--lux-text) !important;
  font-family: var(--lux-display) !important;
}

.sub,
.section .sub {
  color: var(--lux-muted) !important;
}

.topics {
  background: var(--lux-bg-2) !important;
  border: 1px solid var(--lux-line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
.topics strong {
  color: var(--lux-gold) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topics ul,
.topics li {
  color: var(--lux-muted) !important;
}

p, li {
  color: var(--lux-muted);
  line-height: 1.65;
}
.section p {
  color: var(--lux-muted) !important;
}

/* Code editors */
textarea,
.code-area,
pre,
code {
  font-family: var(--lux-mono) !important;
}
textarea {
  background: #0d0d0f !important;
  color: #e8e4dc !important;
  border: 1px solid var(--lux-line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}
textarea:focus {
  outline: none !important;
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(196, 165, 116, 0.15) !important;
}
iframe {
  background: #fff !important;
  border: 1px solid var(--lux-line) !important;
  border-radius: 12px !important;
}

/* Buttons */
button,
.btn-run,
.run-btn,
button[onclick] {
  background: linear-gradient(135deg, #d4b896, #c4a574) !important;
  color: #1a1510 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-family: var(--lux-font) !important;
  padding: 10px 20px !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(196, 165, 116, 0.2) !important;
  transition: transform 0.2s var(--lux-ease), filter 0.2s;
}
button:hover,
.btn-run:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Mark complete */
.mark-complete,
button.complete,
#markComplete,
.btn-complete {
  background: transparent !important;
  color: var(--lux-gold-bright) !important;
  border: 1px solid var(--lux-line-gold) !important;
  box-shadow: none !important;
}
.mark-complete:hover,
.btn-complete:hover {
  background: rgba(196, 165, 116, 0.1) !important;
}

/* Boxes / callouts inside chapters */
.box, .tip, .note, .example-box {
  background: var(--lux-bg-2) !important;
  border: 1px solid var(--lux-line) !important;
  border-left: 3px solid var(--lux-gold) !important;
  border-radius: 12px !important;
  color: var(--lux-muted) !important;
}

/* Roadmap overrides when linked with styles.css */
body .rm-hero {
  background:
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(196, 165, 116, 0.14), transparent 55%),
    var(--lux-bg) !important;
  border-bottom: 1px solid var(--lux-line) !important;
}
.rm-hero .badge {
  background: rgba(196, 165, 116, 0.12) !important;
  color: var(--lux-gold-bright) !important;
  border: 1px solid var(--lux-line-gold);
}
.rm-hero h1 {
  font-family: var(--lux-display) !important;
  color: var(--lux-text) !important;
}
.rm-hero p { color: var(--lux-muted) !important; }

.progress-mini,
.ch-card,
.chapter-card {
  background: var(--lux-card) !important;
  border: 1px solid var(--lux-line) !important;
  border-radius: 14px !important;
}
.ch-card:hover,
.chapter-card:hover {
  border-color: var(--lux-line-gold) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.ch-card h3,
.chapter-card h3 {
  color: var(--lux-text) !important;
  font-family: var(--lux-display) !important;
}
.ch-card p,
.chapter-card p {
  color: var(--lux-muted) !important;
}

.bar-track,
.progress-bar-bg {
  background: var(--lux-bg-2) !important;
}
.bar-fill,
.progress-bar-fill {
  background: linear-gradient(90deg, var(--lux-gold-dim), var(--lux-gold-bright)) !important;
}

a {
  color: var(--lux-gold);
}
a:hover {
  color: var(--lux-gold-bright);
}

/* Fix high-contrast text that was dark on teal */
.section strong,
.section b {
  color: var(--lux-gold-bright) !important;
}

h3, h4 {
  color: var(--lux-text) !important;
  font-family: var(--lux-display) !important;
}

@media (min-width: 900px) {
  body {
    padding-bottom: 40px !important;
  }
}



/* ========== Visibility + glass editor (fix) ========== */

/* Kill leftover light-theme greens / dark blues that vanish on black */
.section,
.section * {
  /* don't force every color — only rescue common bad combos via overrides below */
}

.section p,
.section li,
.section td,
.section th,
.section span,
.section label,
.sub,
.explain,
.note,
.desc {
  color: #d4d0c8 !important;
}

.section h1,
.section h2,
.section h3,
.section h4 {
  color: #e4c99a !important;
}

.section strong,
.section b {
  color: #f0e6d4 !important;
}

/* Old green / teal text classes */
[style*="color:#0"],
[style*="color: #0"],
[style*="color:green"],
[style*="color: green"],
[style*="#0d4a54"],
[style*="#063540"],
[style*="#1a3a42"],
[style*="#0a5c63"] {
  color: #d4d0c8 !important;
}

/* Topics list */
.topics,
.topics li,
.topics p {
  color: #c8c4bc !important;
}
.topics strong {
  color: #e4c99a !important;
}

/* —— Run Code: glass panels —— */
textarea,
.code-area,
.code-input,
.editor-box textarea,
#code1, #code2, #code3, #code4, #code5,
#code6, #code7, #code8, #code9, #code10 {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f2efe8 !important;
  border: 1px solid rgba(196, 165, 116, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  caret-color: #e4c99a;
}

textarea::placeholder {
  color: #7a766e !important;
}



/* Glass wrapper around practice blocks if structure allows */
.practice,
.code-block,
.live-box,
.try-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(196, 165, 116, 0.18) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px !important;
}

/* Pre/code readable */
pre, code {
  color: #e8e4dc !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px;
}

/* Lists and bullets */
.section ul li::marker {
  color: #c4a574;
}

/* Links in content */
.section a {
  color: #e4c99a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons stay gold; complete outline */
button {
  color: #1a1510 !important;
}
.mark-complete,
button.complete,
.btn-complete,
button[data-complete] {
  color: #e4c99a !important;
  background: rgba(196, 165, 116, 0.08) !important;
}

.explain, .explain p { color: #d4d0c8 !important; }
.explain code {
  background: rgba(196,165,116,0.12) !important;
  color: #e4c99a !important;
  border: 1px solid rgba(196,165,116,0.2);
}
h3 { color: #e4c99a !important; border-top-color: rgba(255,255,255,0.08) !important; }
.ch-nav a {
  background: linear-gradient(135deg, #d4b896, #c4a574) !important;
  color: #1a1510 !important;
}
.mark-complete {
  border-color: rgba(196,165,116,0.4) !important;
  color: #e4c99a !important;
  background: rgba(196,165,116,0.08) !important;
}
.mark-complete.is-done {
  background: #2d6a4f !important;
  border-color: #2d6a4f !important;
  color: #fff !important;
}

/* Output: light glass so black text is visible + neon blue-black border */
iframe,
.output,
.preview,
[id^="output"] {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(40, 120, 255, 0.55) !important;
  box-shadow:
    0 0 0 1px #0a0a0c,
    0 0 0 2px rgba(50, 130, 255, 0.4),
    0 0 16px rgba(40, 100, 255, 0.28),
    0 0 36px rgba(0, 40, 140, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  color-scheme: light;
}