/* universe-expansion lesson-specific styles. Extracted during theme polish Phase 4. */
/* ── Page ─────────────────────────────────────────── */
    .ue-page { padding-bottom: 3.5rem; }

    /* ── Hero ─────────────────────────────────────────── */
    .ue-hero { padding: 0.4rem 0 1.3rem; }
    .ue-hero h1 { max-width: 30ch; margin-left: 0;
      font-size: clamp(1.55rem, 3.5vw, 2.3rem); }
    .ue-hero-meta { display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.4rem 0.7rem; margin: 0.5rem 0 0; font-size: 0.82rem; color: #64748b; }
    .ue-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%;
      background: currentColor; opacity: 0.4; display: inline-block; vertical-align: middle; }
    .ue-lede { margin: 0.65rem 0 0; max-width: 68ch; color: #3f4f65;
      font-size: 0.96rem; line-height: 1.62; }
    [data-theme="night"] .ue-lede { color: rgba(245,245,247,0.7); }

    /* ── Card ─────────────────────────────────────────── */
    .ue-card {
      background: var(--white,#fff);
      border: 1px solid var(--line,#d2d2d7);
      border-radius: 14px;
      padding: 1.4rem 1.5rem;
      margin-bottom: 1.1rem;
      --card-accent: #5856d6;
      border-left: 4px solid var(--card-accent);
    }
    [data-theme="night"] .ue-card {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
    }
    .ue-card h2, .ue-card h3 {
      margin: 0 0 0.55rem;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      font-weight: 700;
      color: var(--text-main);
    }
    .ue-card p { margin: 0 0 0.7rem; font-size: 0.92rem; line-height: 1.65; color: var(--text-main); }
    .ue-card p:last-child { margin-bottom: 0; }

    /* ── Eyebrow / label ─────────────────────────────── */
    .ue-eyebrow {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: #5856d6; margin: 0 0 0.4rem;
    }
    [data-theme="night"] .ue-eyebrow { color: #a29bfe; }

    /* ── Section heading ─────────────────────────────── */
    .ue-section-title {
      font-size: clamp(1.1rem, 2.2vw, 1.4rem);
      font-weight: 800; margin: 2.2rem 0 0.9rem;
    }

    /* ── Quote box ───────────────────────────────────── */
    .ue-quote {
      border-left: 4px solid #ff9500;
      background: rgba(255,149,0,0.07);
      border-radius: 0 10px 10px 0;
      padding: 1rem 1.2rem;
      margin: 1.2rem 0;
    }
    .ue-quote p { font-size: 1.05rem; font-style: italic; font-weight: 600;
      color: var(--text-main); margin: 0 0 0.3rem; }
    .ue-quote cite { font-size: 0.8rem; color: #64748b; font-style: normal; }
    [data-theme="night"] .ue-quote { background: rgba(255,149,0,0.12); }

    /* ── People grid ─────────────────────────────────── */
    .ue-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; margin: 1rem 0 1.4rem; }
    .ue-person {
      background: var(--white,#fff);
      border: 1px solid var(--line,#d2d2d7);
      border-radius: 12px; padding: 1rem 1.1rem;
    }
    [data-theme="night"] .ue-person { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
    .ue-person-name { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.15rem; }
    .ue-person-years { font-size: 0.72rem; color: #64748b; margin: 0 0 0.4rem; }
    .ue-person-role { font-size: 0.82rem; color: var(--text-main); line-height: 1.5; margin: 0; }

    /* ── Formula card ────────────────────────────────── */
    .ue-formula-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.4rem; }
    @media(max-width:540px){ .ue-formula-wrap { grid-template-columns: 1fr; } }
    .ue-formula-box {
      background: #0a0a1a;
      border-radius: 12px;
      padding: 1.2rem 1.4rem;
      text-align: center;
    }
    .ue-formula-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a29bfe; margin: 0 0 0.5rem; }
    .ue-formula-eq { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; color: #fff; font-family: 'Georgia', serif; margin: 0 0 0.4rem; }
    .ue-formula-desc { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }

    /* ── Redshift demo ───────────────────────────────── */
    .ue-spectrum-wrap { margin: 1rem 0 1.4rem; }
    .ue-spectrum-label { font-size: 0.78rem; color: #64748b; margin: 0 0 0.3rem; }
    .ue-spectrum-bar {
      height: 28px; border-radius: 6px;
      background: linear-gradient(to right, #7400ff, #4400ff, #0000ff, #00b7ff, #00ffb7, #00ff00, #aaff00, #ffff00, #ffaa00, #ff5500, #ff0000);
      position: relative; margin-bottom: 0.6rem;
    }
    .ue-spectrum-line {
      position: absolute; top: -3px; bottom: -3px; width: 3px;
      border-radius: 2px;
      background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.6);
      transition: left 0.4s ease;
    }
    .ue-spectrum-slider { width: 100%; margin: 0.4rem 0 0; }
    .ue-spectrum-readout { font-size: 0.82rem; color: var(--text-main); margin: 0.4rem 0 0; }

    /* ── Simulator ───────────────────────────────────── */
    .ue-sim-wrap {
      background: #060612;
      border-radius: 16px;
      padding: 1.2rem;
      margin: 1rem 0 1.4rem;
    }
    #ue-canvas {
      display: block;
      width: 100%;
      border-radius: 10px;
      cursor: default;
    }
    .ue-sim-controls {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.7rem 1.2rem; margin-top: 0.9rem;
    }
    .ue-sim-btn {
      padding: 0.45rem 1.1rem;
      border-radius: 8px; border: none; cursor: pointer;
      font-size: 0.84rem; font-weight: 600;
      background: #5856d6; color: #fff;
      transition: background 0.15s;
    }
    .ue-sim-btn:hover { background: #4340c0; }
    .ue-sim-btn.secondary { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
    .ue-sim-btn.secondary:hover { background: rgba(255,255,255,0.14); }
    .ue-sim-label { font-size: 0.78rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 0.4rem; }
    .ue-sim-label input[type=range] { width: 110px; accent-color: #ff9500; }
    .ue-sim-readout {
      margin-top: 0.7rem;
      display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0.5rem;
    }
    .ue-sim-stat {
      background: rgba(255,255,255,0.05);
      border-radius: 8px; padding: 0.5rem 0.75rem;
    }
    .ue-sim-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin: 0 0 0.15rem; }
    .ue-sim-stat-val { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; }

    /* ── View toggle ─────────────────────────────────── */
    .ue-view-toggle { display: flex; gap: 0.5rem; }
    .ue-view-btn {
      padding: 0.38rem 0.9rem;
      border-radius: 7px; border: 1.5px solid rgba(255,255,255,0.15);
      background: transparent; color: rgba(255,255,255,0.6);
      font-size: 0.78rem; font-weight: 600; cursor: pointer;
      transition: all 0.15s;
    }
    .ue-view-btn.active {
      background: #5856d6; border-color: #5856d6; color: #fff;
    }

    /* ── Timeline ────────────────────────────────────── */
    .ue-timeline { list-style: none; padding: 0; margin: 0.8rem 0 1.4rem; position: relative; }
    .ue-timeline::before {
      content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px;
      width: 2px; background: var(--line,#d2d2d7); border-radius: 1px;
    }
    .ue-timeline li {
      padding: 0 0 1.1rem 2.4rem; position: relative;
    }
    .ue-timeline li::before {
      content: ''; position: absolute; left: 4px; top: 5px;
      width: 14px; height: 14px; border-radius: 50%;
      border: 2.5px solid #5856d6;
      background: var(--bg-main,#fff);
    }
    .ue-timeline-year { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: #5856d6; margin: 0 0 0.1rem; }
    [data-theme="night"] .ue-timeline-year { color: #a29bfe; }
    .ue-timeline-title { font-size: 0.92rem; font-weight: 700; margin: 0 0 0.15rem; }
    .ue-timeline-body { font-size: 0.83rem; color: #64748b; margin: 0; line-height: 1.5; }
    [data-theme="night"] .ue-timeline-body { color: rgba(245,245,247,0.55); }

    /* ── Evidence grid ───────────────────────────────── */
    .ue-evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin: 0.8rem 0 1.4rem; }
    .ue-evidence-item {
      background: var(--white,#fff); border-radius: 12px;
      border: 1px solid var(--line,#d2d2d7);
      border-top: 4px solid var(--ev-color,#5856d6);
      padding: 1rem 1.1rem;
    }
    .ue-evidence-item--slipher { --ev-color: var(--accent); }
    .ue-evidence-item--hubble { --ev-color: var(--warning); }
    .ue-evidence-item--cmb { --ev-color: var(--success); }
    .ue-evidence-item--supernovae { --ev-color: var(--danger); }
    [data-theme="night"] .ue-evidence-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); border-top-color: var(--ev-color,#5856d6); }
    .ue-evidence-icon { font-size: 1.5rem; margin: 0 0 0.4rem; }
    .ue-evidence-title { font-size: 0.88rem; font-weight: 700; margin: 0 0 0.25rem; }
    .ue-evidence-body { font-size: 0.8rem; color: #64748b; line-height: 1.5; margin: 0; }
    [data-theme="night"] .ue-evidence-body { color: rgba(245,245,247,0.55); }

    /* ── Practice ────────────────────────────────────── */
    .ue-practice { counter-reset: ue-q; list-style: none; padding: 0; margin: 0.8rem 0 0; }
    .ue-practice li {
      counter-increment: ue-q;
      padding: 1rem 1.1rem 1rem 1.1rem;
      border-radius: 10px; border: 1px solid var(--line,#d2d2d7);
      margin-bottom: 0.7rem; font-size: 0.9rem;
      background: var(--white,#fff);
    }
    [data-theme="night"] .ue-practice li { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
    .ue-practice li::before {
      content: "Q" counter(ue-q) ".";
      font-weight: 700; margin-right: 0.5rem; color: #5856d6;
    }
    .ue-practice-input {
      display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; align-items: center;
    }
    .ue-practice-input input {
      padding: 0.35rem 0.6rem; border-radius: 7px;
      border: 1px solid var(--line,#d2d2d7);
      background: var(--bg-main,#fff); color: var(--text-main);
      font-size: 0.88rem; width: 120px;
    }
    .ue-check-btn {
      padding: 0.35rem 0.85rem; border-radius: 7px; border: none;
      background: #5856d6; color: #fff; font-size: 0.84rem;
      font-weight: 600; cursor: pointer;
    }
    .ue-check-btn:hover { background: #4340c0; }
    .ue-feedback { font-size: 0.82rem; font-weight: 600; margin-left: 0.4rem; }
    .ue-feedback.correct { color: #34c759; }
    .ue-feedback.wrong   { color: #ff3b30; }
    .ue-var-v { color: var(--accent); }
    .ue-var-h { color: var(--warning); }
    .ue-var-d { color: var(--info); }
    .ue-back-link {
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 600;
    }
    .ue-slider {
      width: 100%;
      accent-color: var(--accent);
    }
    .ue-slider--speed {
      accent-color: var(--warning);
    }

    /* ── Reflection box ──────────────────────────────── */
    .ue-reflection {
      border-left: 4px solid #34c759;
      background: rgba(52,199,89,0.07);
      border-radius: 0 12px 12px 0;
      padding: 1.1rem 1.3rem;
      margin: 1.4rem 0;
    }
    .ue-reflection h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.5rem; }
    .ue-reflection p { font-size: 0.88rem; line-height: 1.65; color: var(--text-main); margin: 0 0 0.5rem; }
    .ue-reflection p:last-child { margin: 0; }
    [data-theme="night"] .ue-reflection { background: rgba(52,199,89,0.1); }

    /* ── ll-viewport overrides (light theme — use defaults) ── */
    .ue-sim-wrap { max-height: calc(100dvh - 200px); }