/* ═══════════════════════════════════════════════════════════════════
   ROADRUNNERS UNIVERSITY — LIGHT "STUDY" THEME
   Scoped ENTIRELY under .uni-page so the rest of Rocket Intelligence
   stays dark (we never touch the global theme). Premium-textbook feel:
   white / off-white surfaces, near-black text, generous type, neon
   pink/cyan as ACCENTS only (never as a background behind body text).
   Media-first lessons · one continuous scroll · no toggles.
   ═══════════════════════════════════════════════════════════════════ */

.uni-page {
  /* Phase 5: muted dark-purple "work" palette — calm, restful, on-brand.
     A balance of RoadRunners' vibrant brand purple and neutral charcoal. */
  --u-bg:        #14111C;   /* muted dark-purple work surface (page) */
  --u-surface:   #1C1828;   /* cards / media / steps */
  --u-surface-2: #251F34;   /* elevated rows / headers */
  --u-ink:       #F3F1F8;   /* primary text */
  --u-ink-soft:  rgba(236,232,246,.72);
  --u-dim:       rgba(236,232,246,.56);
  --u-line:      rgba(188,158,255,.10);    /* hairlines */
  --u-line-2:    rgba(188,158,255,.18);
  --u-pink:      #F472FB;    /* readable pink on dark */
  --u-pink-fill: #F239F7;    /* brand neon — fills, glows, progress */
  --u-magenta:   #C13A86;
  --u-cyan:      #58F9F4;    /* readable cyan on dark */
  --u-cyan-fill: #58F9F4;    /* brand neon — fills, progress */
  --u-amber:     #FFD166;    /* readable amber on dark */
  --u-green:     #2BFF95;
  --u-red:       #FF6FA0;
  --u-radius:    16px;
  --u-radius-sm: 10px;
  --u-shadow:    0 1px 3px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.35);
  --u-shadow-sm: 0 1px 2px rgba(0,0,0,.30);

  /* Neon Glass (Phase 2): the page itself is a frosted pane over the app's neon wash */
  background: var(--ng-sheen), var(--ng-tint-card);
  -webkit-backdrop-filter: blur(var(--ng-blur-card)) saturate(var(--ng-sat));
  backdrop-filter: blur(var(--ng-blur-card)) saturate(var(--ng-sat));
  border: 1px solid var(--ng-edge-pink);
  box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan), var(--ng-shadow), var(--ng-glow);
  color: var(--u-ink);
  border-radius: 18px;
  padding: 22px 22px 40px;
  max-width: 1120px;
  margin: 0 auto;
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.uni-page * { box-sizing: border-box; }

/* page header */
.uni-page .rr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.uni-page .rr-page-title { font-size: 26px; font-weight: 700; color: var(--u-ink); letter-spacing: -.01em; }
.uni-page .rr-page-sub { color: var(--u-dim); font-size: 13.5px; margin-top: 2px; }
.uni-dim { color: var(--u-dim); }
.uni-sm { font-size: 12.5px; }
.uni-sp { height: 8px; }
.uni-ul { margin: 6px 0 10px 20px; padding: 0; }
.uni-ul li { margin: 4px 0; }

/* ── Neon Glass (Phase 2): the module's own card surfaces share the frosted recipe;
      accent borders (safety amber, summary cyan, empty dashed) re-apply below ── */
.uni-stepcard, .uni-qblock, .uni-summary, .uni-empty {
  background: var(--ng-sheen), var(--ng-tint-card);
  -webkit-backdrop-filter: blur(var(--ng-blur-card)) saturate(var(--ng-sat));
  backdrop-filter: blur(var(--ng-blur-card)) saturate(var(--ng-sat));
  border: 1px solid var(--ng-edge-pink);
  box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px var(--ng-edge-cyan), var(--ng-shadow), var(--ng-glow);
}

/* ── top tabs (course / graduation / free drink / director / edit) ── */
.uni-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; border: 0; }
.uni-page .ri-tab {
  background: var(--u-surface); color: var(--u-ink-soft); border: 1px solid var(--u-line-2);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uni-page .ri-tab:hover { border-color: var(--u-pink); color: var(--u-pink); }
.uni-page .ri-tab.active { background: var(--u-pink-fill); border-color: var(--u-pink-fill); color: #fff; box-shadow: 0 4px 14px rgba(242,57,247,.28); }

.uni-flash { margin: 0 0 14px; padding: 11px 15px; border-radius: var(--u-radius-sm); font-weight: 600; font-size: 14px; border: 1px solid; }
.uni-flash-ok   { background: rgba(43,255,149,.12); border-color: rgba(43,255,149,.30); color: #2BFF95; }
.uni-flash-warn { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.30); color: #FFD166; }
.uni-empty { padding: 44px 20px; text-align: center; color: var(--u-dim); border: 1px dashed var(--u-line-2); border-radius: var(--u-radius); }

/* ── shared component overrides (light) ── */
/* bg/border/shadow (and the hover glow) come from the shared Neon Glass .rr-card recipe in styles.css */
.uni-page .rr-card { border-radius: var(--u-radius); color: var(--u-ink); }
.uni-page .rr-card--tap { cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s; }
.uni-page .rr-card--tap:hover { transform: translateY(-2px); }
.uni-page .rr-btn { background: var(--u-surface); color: var(--u-ink); border: 1px solid var(--u-line-2); border-radius: var(--u-radius-sm); padding: 10px 18px; font-weight: 600; font-size: 14.5px; cursor: pointer; font-family: inherit; transition: filter .12s, transform .12s, border-color .12s; }
.uni-page .rr-btn:hover { transform: translateY(-1px); }
.uni-page .rr-btn--primary { background: linear-gradient(135deg, var(--u-pink-fill), var(--u-magenta)); border: 0; color: #fff; box-shadow: 0 6px 18px rgba(242,57,247,.30); }
.uni-page .rr-btn--ghost { background: transparent; border: 1px solid var(--u-line-2); color: var(--u-ink-soft); }
.uni-page .rr-btn--ghost:hover { border-color: var(--u-pink); color: var(--u-pink); }
.uni-page .rr-btn--block { display: block; width: 100%; }
.uni-page .rr-btn--sm { padding: 6px 12px; font-size: 13px; }
.uni-page .rr-btn.is-disabled, .uni-page .rr-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.uni-page .rr-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--u-line-2); color: var(--u-ink-soft); background: var(--u-surface-2); }
.uni-page .rr-pill--ok { background: rgba(43,255,149,.12); border-color: rgba(43,255,149,.30); color: #2BFF95; }
.uni-page .rr-pill--warn { background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.30); color: #FFD166; }
.uni-page .rr-pill--danger { background: rgba(255,111,160,.13); border-color: rgba(255,111,160,.32); color: #FF6FA0; }
.uni-page .rr-pill--info { background: rgba(88,249,244,.10); border-color: rgba(88,249,244,.28); color: var(--u-cyan); }

.uni-page .rr-field { margin: 12px 0; }
.uni-page .rr-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--u-dim); margin-bottom: 6px; }
.uni-page .rr-input, .uni-page .rr-textarea, .uni-page .rr-select { width: 100%; background: var(--u-surface); border: 1px solid var(--u-line-2); border-radius: var(--u-radius-sm); padding: 11px 13px; font-size: 16px; color: var(--u-ink); font-family: inherit; }
.uni-page .rr-textarea { min-height: 90px; resize: vertical; }
.uni-page .rr-input:focus, .uni-page .rr-textarea:focus, .uni-page .rr-select:focus { outline: none; border-color: var(--u-pink-fill); box-shadow: 0 0 0 3px rgba(242,57,247,.14); }

.uni-page .ri-table-wrap { overflow-x: auto; }
.uni-page .ri-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.uni-page .ri-table th { text-align: left; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--u-dim); padding: 8px 10px; border-bottom: 2px solid var(--u-line); }
.uni-page .ri-table td { padding: 9px 10px; border-bottom: 1px solid var(--u-line); color: var(--u-ink-soft); }
.uni-page .ri-table tr:hover td { background: #2E2740; }
.uni-page .ri-num { text-align: right; font-family: 'JetBrains Mono', monospace; }

/* ── module grid ── */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 16px; }
.uni-modcard { display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 140px; }
.uni-modtop { display: flex; align-items: center; justify-content: space-between; }
.uni-modicon { font-size: 32px; line-height: 1; }
.uni-modtitle { font-weight: 700; font-size: 17px; color: var(--u-ink); }
.uni-modsub { font-size: 13px; color: var(--u-dim); line-height: 1.45; }

/* ── module detail (lesson list) ── */
.uni-detail { animation: uni-fade .18s ease; }
@keyframes uni-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.uni-back { margin-bottom: 12px; }
.uni-dhead { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.uni-dhead h2 { margin: 0; font-size: 24px; color: var(--u-ink); }
.uni-summary { border-left: 4px solid var(--u-cyan-fill); border-radius: var(--u-radius-sm); padding: 14px 18px; margin: 12px 0; color: var(--u-ink-soft); line-height: 1.65; }
.uni-lessonlist { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.uni-lessonrow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow-sm); transition: border-color .14s, transform .14s; }
.uni-lessonrow:hover { border-color: var(--u-pink); transform: translateX(2px); }
.uni-quizrow { background: rgba(88,249,244,.06); border-color: rgba(88,249,244,.22); }
.uni-lessoncheck { font-size: 16px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: var(--u-surface-2); color: var(--u-cyan); font-weight: 700; }
.uni-lessonname { flex: 1; font-weight: 600; color: var(--u-ink); }
.uni-go { color: var(--u-dim); font-size: 22px; }

/* ── LESSON (continuous scroll, media-first) ── */
.uni-lesson { animation: uni-fade .18s ease; }
/* floats over scrolled lesson content → strong overlay glass (was a light-theme off-white remnant) */
.uni-stickybar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 4px; margin: -6px 0 10px; background: var(--ng-sheen), var(--ng-tint-overlay); -webkit-backdrop-filter: blur(var(--ng-blur-overlay)) saturate(var(--ng-sat)); backdrop-filter: blur(var(--ng-blur-overlay)) saturate(var(--ng-sat)); border-bottom: 1px solid var(--ng-edge-pink); }
.uni-crumb { background: none; border: 0; color: var(--u-pink); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 4px 6px; white-space: nowrap; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.uni-stickprog { flex: 1; height: 7px; background: var(--u-line); border-radius: 999px; overflow: hidden; }
.uni-stickfill { height: 100%; background: linear-gradient(90deg, var(--u-pink-fill), var(--u-cyan-fill)); border-radius: 999px; transition: width .3s ease; }
.uni-stickcount { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--u-dim); white-space: nowrap; }
.uni-lhead h1 { font-size: 30px; line-height: 1.18; letter-spacing: -.015em; color: var(--u-ink); margin: 8px 0 18px; max-width: 760px; }

/* reading body — generous, comfortable column */
.uni-body { max-width: 720px; color: var(--u-ink); font-size: 17px; line-height: 1.78; }
.uni-body p { margin: 0 0 14px; }
.uni-body h1, .uni-body h2 { font-size: 21px; line-height: 1.3; color: var(--u-ink); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--u-line); }
.uni-body strong { color: var(--u-ink); font-weight: 700; }
.uni-body em { color: var(--u-ink-soft); }
.uni-body code { background: #251F34; color: var(--u-magenta); padding: 1px 6px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.uni-body ul { margin: 8px 0 14px 22px; }
.uni-body li { margin: 6px 0; }
/* blockquotes become accent callouts */
.uni-body blockquote { margin: 16px 0; padding: 12px 18px; background: rgba(242,57,247,.10); border-left: 4px solid var(--u-pink-fill); border-radius: 0 var(--u-radius-sm) var(--u-radius-sm) 0; color: var(--u-ink); font-size: 16.5px; }
.uni-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.uni-body th, .uni-body td { border: 1px solid var(--u-line-2); padding: 8px 11px; text-align: left; }
.uni-body th { background: var(--u-surface-2); }

.uni-procnote { max-width: 720px; color: var(--u-cyan); font-weight: 600; font-size: 14px; margin: 14px 0; padding: 10px 14px; background: rgba(88,249,244,.06); border: 1px solid rgba(88,249,244,.22); border-radius: var(--u-radius-sm); }

/* ── step cards (media leads) ── */
.uni-stepcard { border-radius: var(--u-radius); overflow: hidden; margin: 16px 0; }
.uni-safety { border-color: rgba(255,209,102,.30); box-shadow: inset 0 1px 0 var(--ng-edge-spec), inset 0 0 0 1px rgba(255,209,102,.20), var(--ng-shadow), var(--ng-glow); }
.uni-steprow { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.uni-stepnum { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--u-pink-fill), var(--u-magenta)); color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; }
.uni-safety .uni-stepnum { background: linear-gradient(135deg, #f6b73c, #c97e00); }
.uni-steptext { flex: 1; color: var(--u-ink); font-size: 16px; line-height: 1.65; }
.uni-steplead { font-weight: 600; font-size: 16.5px; }
.uni-steptext p { margin: 0 0 10px; }
.uni-steptext strong { font-weight: 700; }
.uni-steptime { display: inline-block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; color: var(--u-amber); background: rgba(255,209,102,.12); border: 1px solid rgba(255,209,102,.30); padding: 2px 9px; border-radius: 999px; }
.uni-callout { margin-top: 10px; padding: 10px 14px; background: rgba(88,249,244,.06); border-left: 3px solid var(--u-cyan-fill); border-radius: 0 8px 8px 0; color: var(--u-ink-soft); font-size: 14.5px; line-height: 1.55; }

/* ── media blocks (large, inline) ── */
.uni-media { display: block; }
.uni-mediablock { width: 100%; background: #0d0a12; border-bottom: 1px solid var(--u-line); }
.uni-photo { display: block; width: 100%; height: auto; max-height: 540px; object-fit: cover; }
.uni-video { display: block; width: 100%; max-height: 560px; background: #000; }
.uni-addmedia { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; background: repeating-linear-gradient(45deg, #2E2740, #2E2740 10px, #251F34 10px, #251F34 20px); border-bottom: 1px dashed var(--u-line-2); }
.uni-addbtn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: #fff; background: linear-gradient(135deg, var(--u-cyan), #077e8a); border-radius: 999px; padding: 8px 16px; box-shadow: 0 3px 10px rgba(10,152,168,.25); }
.uni-addbtn:hover { filter: brightness(1.06); }
.uni-addbtn input { display: none; }

.uni-lessonfoot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 6px; max-width: 760px; }
.uni-cta { padding: 12px 22px; font-size: 15px; }
.uni-next { margin-left: auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── quiz (light) ── */
.uni-quizform { display: flex; flex-direction: column; gap: 16px; margin: 16px 0; max-width: 760px; }
.uni-qblock { border-radius: var(--u-radius); padding: 18px; }
.uni-qprompt { font-weight: 700; color: var(--u-ink); margin-bottom: 12px; font-size: 16px; line-height: 1.5; }
.uni-optpick { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; margin: 8px 0; cursor: pointer; border: 1.5px solid var(--u-line-2); border-radius: var(--u-radius-sm); color: var(--u-ink); font-size: 15.5px; line-height: 1.45; transition: border-color .12s, background .12s; }
.uni-optpick:hover { border-color: var(--u-cyan); background: rgba(88,249,244,.06); }
.uni-optpick.sel { border-color: var(--u-pink-fill); background: rgba(242,57,247,.10); }
.uni-optpick input { margin-top: 3px; accent-color: var(--u-pink-fill); width: 18px; height: 18px; }
.uni-quizresult { text-align: center; padding: 24px; border-radius: var(--u-radius); margin: 8px 0 18px; border: 1px solid; max-width: 760px; }
.uni-quizresult.pass { background: rgba(43,255,149,.12); border-color: rgba(43,255,149,.30); }
.uni-quizresult.fail { background: rgba(255,111,160,.13); border-color: rgba(255,111,160,.32); }
.uni-quizscore { font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 700; color: var(--u-ink); }
.uni-quizverdict { font-weight: 600; font-size: 16px; margin-top: 4px; color: var(--u-ink-soft); }
.uni-quizreview { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-width: 760px; }
.uni-qrev { padding: 14px 16px; border-radius: var(--u-radius-sm); border: 1px solid var(--u-line); border-left: 4px solid; background: var(--u-surface); }
.uni-qrev.ok { border-left-color: var(--u-green); }
.uni-qrev.no { border-left-color: var(--u-red); }
.uni-opt { padding: 6px 10px; margin: 4px 0; border-radius: 7px; font-size: 14.5px; color: var(--u-ink-soft); }
.uni-opt.correct { background: rgba(43,255,149,.12); color: #2BFF95; font-weight: 600; }
.uni-opt.wrongpick { background: rgba(255,111,160,.13); color: #FF6FA0; text-decoration: line-through; }
.uni-qexpl { margin-top: 8px; font-size: 14px; color: var(--u-ink-soft); background: var(--u-surface-2); padding: 8px 12px; border-radius: 8px; }

/* ── free drink ── */
.uni-fd { display: grid; grid-template-columns: minmax(280px,1fr) minmax(280px,1.2fr); gap: 16px; align-items: start; }
.uni-fdform, .uni-fdlog { padding: 18px; }
.uni-fdform h3, .uni-fdlog h3, .uni-dash h3, .uni-admin h3 { margin: 0 0 6px; color: var(--u-ink); font-size: 18px; }

/* ── director + admin ── */
.uni-dash { display: flex; flex-direction: column; gap: 16px; }
.uni-dash2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uni-dash .rr-card, .uni-admin .rr-card { padding: 18px; }
.uni-adminhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.uni-adminlist { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.uni-adminrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); box-shadow: var(--u-shadow-sm); }
.uni-adminname { flex: 1; font-weight: 600; color: var(--u-ink); }
.uni-adminbtns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.uni-ibtn { background: var(--u-surface-2); color: var(--u-ink-soft); border: 1px solid var(--u-line-2); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; font-weight: 600; }
.uni-ibtn:hover { border-color: var(--u-cyan); color: var(--u-cyan); }
.uni-ibtn.uni-del:hover { border-color: var(--u-red); color: var(--u-red); }

/* ── graduation ── */
.uni-grad { display: flex; flex-direction: column; gap: 16px; }
.uni-gradhero { text-align: center; padding: 26px; }
.uni-gradhero.certified { border-color: rgba(255,209,102,.30); } /* amber accent over the .rr-card glass */
.uni-badge { font-size: 23px; font-weight: 800; color: var(--u-amber); margin-bottom: 16px; }
.uni-badge.dim { color: var(--u-cyan); }
.uni-gradbars { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.uni-gradline { display: grid; grid-template-columns: 130px 1fr 48px; gap: 12px; align-items: center; text-align: left; }
.uni-gradline span { font-size: 13.5px; color: var(--u-ink-soft); }
.uni-gradline b { font-family: 'JetBrains Mono', monospace; color: var(--u-ink); text-align: right; }
.uni-path { margin: 8px 0 0 20px; color: var(--u-ink-soft); line-height: 1.75; }
.uni-path b { color: var(--u-pink); }
.uni-grad-done { margin-top: 12px; color: var(--u-amber); font-weight: 700; }
/* progress bars from riBar() use dark-token fills; recolor inside the course */
.uni-page .ri-bartrack, .uni-bartrack { height: 10px; border-radius: 999px; background: var(--u-line); overflow: hidden; }
.uni-page .ri-barfill, .uni-barfill { height: 100%; background: linear-gradient(90deg, var(--u-pink-fill), var(--u-cyan-fill)); border-radius: 999px; }

/* ── diagram (keg SVG is dark-on-dark by design — give it a dark panel) ── */
.uni-svgwrap { margin: 18px 0; overflow-x: auto; background: #140a1e; border: 1px solid #2a1838; border-radius: var(--u-radius); padding: 14px; }
.uni-svg { width: 100%; min-width: 520px; height: auto; display: block; }

/* ── mobile ── */
@media (max-width: 760px) {
  .uni-fd, .uni-dash2 { grid-template-columns: 1fr; }
  .uni-page { padding: 16px 14px 32px; border-radius: 14px; }
  .uni-lhead h1 { font-size: 25px; }
  .uni-body { font-size: 16.5px; }
  .uni-next { margin-left: 0; max-width: 100%; }
  .uni-gradline { grid-template-columns: 96px 1fr 40px; }
}

/* no backdrop-filter support → fall back to the flat Phase-5 surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .uni-page { background: var(--u-bg); }
  .uni-stepcard, .uni-qblock, .uni-summary, .uni-empty { background: var(--u-surface); }
  .uni-stickybar { background: var(--u-surface-2); }
}