/**
 * Lab world skin — same room as lab.html.
 * Applied after each learning page's inline styles.
 * Homepage is not touched.
 */
:root {
  --bg: #3A0A14;
  --surface: rgba(16, 10, 16, 0.46);
  --ink: #f7f2f4;
  --mut: rgba(247, 242, 244, 0.82);
  --dim: rgba(236, 228, 232, 0.58);
  --burg: #5a1426;
  --burg-deep: #3A0A14;
  --blt: #faf7f5;
  --rule: rgba(255, 255, 255, 0.12);
  --steel: #8a96a4;
  --steel-hi: #c5cdd6;
  --glass: rgba(16, 10, 16, 0.46);
  --glass-edge: rgba(255, 255, 255, 0.16);
}

html {
  background: #3A0A14 !important;
}

body {
  background: #3A0A14 url("../assets/lab/lab-room.png") center / cover no-repeat fixed !important;
  color: #f7f2f4 !important;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #3A0A14 url("../assets/lab/lab-room.png") center / cover no-repeat;
}

.wrap,
.topbar,
.sticky-continue {
  position: relative;
  z-index: 2;
}

/* ——— Nav: Lab chrome ——— */
.topbar {
  background: linear-gradient(to bottom, rgba(20, 4, 8, 0.72), rgba(20, 4, 8, 0.28)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.logo {
  color: #faf7f5 !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.logo img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.top-links a {
  color: #ffffff !important;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.top-links a:hover {
  color: #ffffff !important;
  border-bottom: 1.5px solid #ffffff !important;
}
.top-links a.btn-lab-home,
a.btn-lab-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 600;
  color: #3A0A14 !important;
  background: linear-gradient(180deg, #f3f5f7 0%, #c5cdd6 100%) !important;
  border: 1px solid #e8ecf0 !important;
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  text-shadow: none;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.top-links a.btn-lab-home:hover,
a.btn-lab-home:hover {
  background: #ffffff !important;
  color: #3A0A14 !important;
  border-color: #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
}
.lab-home-row {
  position: relative;
  z-index: 2;
  margin: 0 0 1.6rem;
}

/* ——— Type ——— */
.eyebrow {
  color: rgba(236, 210, 220, 0.78);
  letter-spacing: 0.22em;
}
h1,
h2,
h3,
.lesson h2,
.lesson h3 {
  color: #f7f2f4;
}
h1 em {
  color: #e8c4d0;
}
.lead {
  color: var(--mut);
}
.lesson p,
.lesson li,
.lesson strong {
  color: var(--mut);
}
.lesson strong {
  color: #fff;
}

/* ——— Glass panels (Lab cards) ——— */
.lesson,
.hub-card,
.wizard,
.lab-panel,
.compare-col,
.final-out,
.feedback,
.coach-panel,
.scout-bubble,
.claim-card,
.gen-step,
.lane,
.step-card,
.mini-card,
.path-rail {
  background: rgba(16, 10, 16, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-radius: 16px;
}

.lesson {
  padding: 2.2rem 2rem;
}

.trail-stop,
.hub-card,
.path-card,
.step-card,
.mode-tab {
  position: relative;
  overflow: hidden;
}
.trail-stop::after,
.hub-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(197, 205, 214, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.trail-stop:hover::after {
  transform: translateX(120%);
}

.trail-stop {
  background: rgba(16, 10, 16, 0.44) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.trail-stop:hover {
  border-color: rgba(197, 205, 214, 0.4) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.stop-n { color: #e8c4d0; }
.stop-t { color: #f7f2f4; }
.stop-m { color: var(--dim); }
.stop-badge {
  color: #e8c4d0;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.trail-stop.done-mark .stop-badge {
  background: rgba(138, 150, 164, 0.22);
  color: #c5cdd6;
  border-color: rgba(197, 205, 214, 0.35);
}

.tip {
  background: rgba(90, 20, 38, 0.28);
  border-left-color: #c5cdd6;
  color: var(--mut);
}
.tip strong { color: #fff; }

/* Forms — dark glass wells */
textarea,
.lab-panel textarea,
.lab-panel input[type="text"],
.gen-controls select,
.gen-controls input[type="number"],
.notify-form input[type="email"],
.chat-compose input[type="text"] {
  background: rgba(8, 5, 10, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f7f2f4 !important;
  border-radius: 10px;
}
textarea:focus,
.lab-panel textarea:focus,
.lab-panel input:focus,
.notify-form input:focus {
  border-color: rgba(197, 205, 214, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(197, 205, 214, 0.12);
}

.btn-primary,
.hub-cta {
  background: var(--burg) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--blt) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  letter-spacing: 0.12em;
}
.btn-primary:hover,
.hub-cta:hover {
  background: #6e2030 !important;
  color: var(--blt) !important;
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f7f2f4 !important;
  border-radius: 999px !important;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #c5cdd6 !important;
  color: #fff !important;
}

.hub-stats strong { color: #e8c4d0; }
.progress-track { background: rgba(255, 255, 255, 0.1); }
.progress-fill { background: linear-gradient(90deg, #5a1426, #8a96a4); }

.privacy-warn {
  background: rgba(90, 20, 38, 0.28);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--dim);
}
.privacy-warn strong { color: #e8c4d0; }

.feedback,
.coach-panel {
  color: var(--ink);
}
.feedback h4,
.coach-panel h5 { color: #f7f2f4; }
.pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--mut);
}
.pill.good { background: rgba(40, 110, 60, 0.22); color: #b8e6c6; border-color: rgba(90, 180, 120, 0.35); }
.pill.mid { background: rgba(140, 110, 30, 0.2); color: #ead48a; border-color: rgba(200, 160, 60, 0.35); }
.pill.bad { background: rgba(90, 20, 38, 0.35); color: #f0b0b8; border-color: rgba(200, 80, 90, 0.35); }
.coach-panel pre {
  background: rgba(8, 5, 10, 0.5);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

.claim-text { color: var(--ink); }
.claim-btns button {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8c4d0;
}
.claim-btns button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.claim-btns button.picked {
  background: var(--burg);
  color: var(--blt);
  border-color: rgba(255, 255, 255, 0.22);
}
.claim-card.answered-right { background: rgba(40, 110, 60, 0.16) !important; }
.claim-card.answered-wrong { background: rgba(90, 20, 38, 0.22) !important; }
.claim-explain { color: var(--mut); }

.done-box {
  background: linear-gradient(165deg, #6b2032 0%, #3a1018 70%) !important;
  color: var(--blt);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.done-box a,
.done-box a.inline-trail {
  color: var(--blt);
  border-bottom-color: rgba(250, 247, 245, 0.45);
}

.wizard h3 { color: #f7f2f4; }
.wizard-lead { color: var(--mut); }
.wiz-options button,
.chip,
.mode-tab {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f7f2f4 !important;
}
.chip { color: #e8c4d0 !important; }
.chip:hover { background: rgba(255, 255, 255, 0.1) !important; }
.mode-tab[aria-selected="true"] {
  background: var(--burg) !important;
  color: var(--blt) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.scout-bubble { color: var(--mut); }
.scout-bubble strong { color: #e8c4d0; }
.scout-avatar {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bubble.bot {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--mut);
}
.bubble.user {
  background: var(--burg);
  color: var(--blt);
}
.step-card .st { color: var(--ink); }
.step-card .hint { color: var(--dim); }
.step-card .out { color: var(--mut); }
.lane-item,
.pool-item {
  background: rgba(8, 5, 10, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--ink) !important;
}
.lane.drag-over { background: rgba(90, 20, 38, 0.28) !important; }
.prob-row .tok { color: var(--ink); }
.prob-row .bar-wrap { background: rgba(255, 255, 255, 0.1); }
.prob-row .bar { background: linear-gradient(90deg, #5a1426, #8a96a4); }
.gen-step .chosen { color: #e8c4d0; }
.compare-col .tag { color: #e8c4d0; }
.compare-col .body,
.compare-note,
.mini-card p { color: var(--mut); }
.mini-card h4,
.compare-col h4,
.lab-panel h3 { color: #f7f2f4; }
.compare-note {
  background: rgba(90, 20, 38, 0.22);
  border-color: rgba(255, 255, 255, 0.12);
}
.final-out { color: var(--ink); }
.final-out strong { color: #e8c4d0; }

.part-link a {
  color: #e8c4d0;
  border-bottom: 1px solid rgba(232, 196, 208, 0.35);
  text-decoration: none;
}
.part-link a:hover { color: #fff; }

.footer {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: var(--dim);
}

.sticky-continue {
  background: var(--burg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--blt);
}
.sticky-continue:hover { background: #6e2030; }

.daily-done { color: #b8e6c6; }
.daily-text { color: var(--mut); }

.field-label { color: var(--dim); }

.notify-form button {
  background: #c5cdd6;
  color: #3A0A14;
}

a { color: #e8c4d0; }
.wrap a:not(.hub-cta):not(.trail-stop):not(.sticky-continue):not(.btn-primary):not(.btn-ghost):not(.path-rail-fwd):not(.path-rail-back) {
  color: #e8c4d0;
}

.path-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.2rem;
  margin: 0 0 2.2rem;
  padding: 0.85rem 1.1rem;
}
.path-rail-stage {
  font-family: var(--fe), Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8c4d0;
}
.path-rail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.2rem;
}
.path-rail-back {
  font-family: var(--fe), Georgia, serif;
  font-size: 0.98rem;
  color: rgba(247, 242, 244, 0.7) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.path-rail-back:hover {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.path-rail-fwd {
  font-family: var(--fe), Georgia, serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blt) !important;
  background: var(--burg);
  text-decoration: none;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.path-rail-fwd:hover {
  background: #6e2030;
  color: var(--blt) !important;
}

/* Forced card revert — earlier frosted glass, not solid burgundy */
.lesson,
.hub-card,
.wizard,
.lab-panel,
.compare-col,
.final-out,
.feedback,
.coach-panel,
.scout-bubble,
.claim-card,
.gen-step,
.lane,
.step-card,
.mini-card,
.path-rail,
.trail-stop {
  background: rgba(16, 10, 16, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}