.demo-mode {
  --paper: #f4f8f6;
  --paper-strong: #e9f1ed;
  --sand: #d5e4dd;
  --sand-deep: #9cb7ac;
  --ink: #171519;
  --muted: #62716b;
  --line: #d7e2dd;
  --soft: #ffffff;
  --accent: #66577c;
  --accent-strong: #493d5a;
  --blue: #66577c;
  --green: #66577c;
  --amber: #a47d3d;
  --shadow: 0 18px 45px rgba(28, 73, 62, .10);
  --shadow-strong: 0 26px 70px rgba(20, 57, 49, .20);
  --cabinet-bg: #f4f8f6;
  --cabinet-surface: #ffffff;
  --cabinet-surface-soft: #f8faf9;
  --cabinet-border: #d7e2dd;
  --cabinet-border-strong: #bfd1c9;
  --cabinet-text: #171519;
  --cabinet-muted: #62716b;
  --cabinet-primary: #66577c;
  --cabinet-primary-weak: #f0ebf4;
  --cabinet-accent: #66577c;
  --cabinet-accent-soft: #f0ebf4;
  --cabinet-success: #66577c;
  --cabinet-warning: #a55a25;
}

.demo-toolbar {
  position: fixed;
  z-index: 100000;
  inset: 0 0 auto 0;
  min-height: 36px;
  padding: 5px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #f8f8f3;
  background: #171519;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font: 700 11px/1.2 Inter, Arial, sans-serif;
}
.demo-toolbar > span { margin-right: 8px; letter-spacing: .08em; text-transform: uppercase; }
.demo-toolbar a { padding: 6px 10px; color: inherit; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; text-decoration: none; }
.demo-toolbar a[aria-current="page"] { color: #fff; background: #66577c; border-color: #8d7ba5; }
.demo-toolbar .demo-back { margin-left: 8px; color: #ddd0e7; border-color: transparent; }

:is(body[data-page="student"], .student-preview) .student-lesson-hero {
  background: linear-gradient(135deg,#211d22,#33242b) !important;
}
:is(body[data-page="student"], .student-preview) .student-lesson-hero::after {
  background: #c5a66a !important;
}
:is(body[data-page="student"], .student-preview) .student-home-kicker {
  color: #66577c !important;
}
body.demo-mode { padding-top: 36px; background: var(--cabinet-bg); color: var(--cabinet-text); }
body.demo-mode .topbar { top: 36px; }
body.demo-mode .brand-mark { width: 32px; height: 32px; overflow: visible; border: 0; background: transparent; }
body.demo-mode .brand-mark img { display: block; width: 32px; height: 32px; }
body.demo-mode .brand-mark::before { display: none; content: none; }
body.demo-mode .demo-brand-copy { min-width: 0; display: grid; gap: 2px; line-height: 1.05; }
body.demo-mode .demo-brand-copy strong { overflow: hidden; color: var(--cabinet-text); font: 750 12px/1.1 Inter, Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
body.demo-mode .demo-brand-copy small { color: var(--cabinet-muted); font: 600 9px/1.1 Inter, Arial, sans-serif; }
body.demo-mode .dashboard-nav .nav-button.active {
  color: var(--cabinet-primary);
  background: var(--cabinet-primary-weak);
  box-shadow: inset 3px 0 0 var(--cabinet-primary);
}
body.demo-mode :where(.eyebrow, .text-button, .notification-button, .notification-icon, .product-notification-read) {
  color: var(--cabinet-primary) !important;
}
body.demo-mode :where(.avatar, .product-notification-dot) {
  background: var(--cabinet-primary) !important;
}
body.demo-mode .product-notification-content em,
body.demo-mode .dashboard time {
  color: var(--cabinet-primary) !important;
  background: var(--cabinet-primary-weak) !important;
}
body.demo-mode .dashboard time * { color: inherit !important; }
body.demo-mode :where(.notification-count, .mini-dot) { background: var(--cabinet-primary) !important; }
body.demo-mode .sidebar-logout { color: var(--cabinet-primary) !important; }
body.demo-mode .demo-disabled { cursor: default; opacity: .68; pointer-events: none; }
body.demo-mode .student-home-kicker::before { background: #c7ab73 !important; box-shadow: none !important; }
body.demo-mode .hero-live::before { display: none !important; content: none !important; }
body.demo-embed { padding-top: 0; }
body.demo-embed .demo-toolbar { display: none; }
body.demo-embed .topbar { top: 0; }
@media (max-width: 620px) {
  .demo-toolbar { padding-inline: 8px; gap: 5px; }
  .demo-toolbar > span { display: none; }
  .demo-toolbar a { padding-inline: 8px; font-size: 10px; }
  body.demo-mode .demo-brand-copy small { display: none; }
  body.demo-mode .demo-brand-copy strong { max-width: 145px; }
}