:root{
      --bg:#f4f7fb;
      --panel:#ffffff;
      --ink:#1f2937;
      --muted:#5b6473;
      --line:#d8dfeb;
      --brand:#2563eb;
      --brand-2:#0ea5e9;
      --good:#15803d;
      --bad:#b91c1c;
      --accent:#eef4ff;
      --shadow:0 10px 30px rgba(15,23,42,.08);
      --radius:18px;
      --gold:#f59e0b;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
    body[data-module-id="main"]{min-height:100vh}
    #app-shell{max-width:980px;margin:0 auto;padding:76px 16px 24px}
    header.lesson-header{text-align:center;margin-bottom:14px}
    header.lesson-header h1{margin:0;font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800}
    header.lesson-header p{margin:.45rem auto 0;max-width:760px;color:var(--muted)}
    .meta-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 16px}
    .pill{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 14px;text-align:center;font-size:.94rem;box-shadow:var(--shadow)}
    .progress-wrap{background:#dbe5f3;border-radius:999px;height:12px;overflow:hidden;margin:8px 0 16px}
    #progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .25s ease}
    main#content-area{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;min-height:540px;max-height:70vh;overflow-y:auto}
    .lesson-page{display:none;animation:fade .22s ease}
    .lesson-page.active{display:block}
    @keyframes fade{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
    .page-tag{display:inline-block;background:var(--accent);color:var(--brand);border:1px solid #cfe0ff;border-radius:999px;padding:6px 10px;font-size:.82rem;font-weight:700;margin-bottom:10px}
    h2{margin:.2rem 0 .7rem;font-size:1.55rem}
    p,li{line-height:1.5}
    .lesson-intro{background:#f8fbff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0 16px}
    .two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
    .card,.visual,.option-btn,.mini-box,.takeaway,.source-card,.hook-strip,.eq-card{border:1px solid var(--line);border-radius:14px;background:#fff}
    .card,.visual,.mini-box,.takeaway,.source-card,.hook-strip,.eq-card{padding:14px}
    .visual{background:linear-gradient(180deg,#fafcff,#eef5ff)}
    .equation-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
    .tray{flex:1;min-height:90px;border:2px dashed #b7c7e5;border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;background:#fff}
    .beam{width:82px;height:6px;background:#7c8aa5;border-radius:999px;position:relative}
    .beam:before{content:'';position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:8px;height:42px;background:#7c8aa5;border-radius:99px}
    .chip{padding:8px 12px;border-radius:999px;background:#e8f0ff;color:#123a84;font-weight:700;border:1px solid #bfd0ff}
    .step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
    .step{padding:12px;border-radius:14px;background:#f9fbff;border:1px solid var(--line)}
    .interactive-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .hook-strip{background:linear-gradient(90deg,#eff6ff,#fefce8);display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
    .hook-score{font-size:1.6rem;font-weight:800;color:var(--gold)}
    .eq-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
    .eq-card{text-align:center;background:#fbfdff}
    .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
    .dot{width:16px;height:16px;border-radius:50%;background:var(--brand);display:inline-block;margin-right:6px}
    .line-box{height:120px;border:1px solid #bfd0ff;border-radius:12px;position:relative;background:linear-gradient(180deg,#ffffff,#f3f8ff)}
    .line-box:before,.line-box:after{content:'';position:absolute;background:#c7d2fe}
    .line-box:before{left:14px;right:14px;top:60px;height:2px}
    .line-box:after{top:12px;bottom:12px;left:58px;width:2px}
    .line-path{position:absolute;left:42px;top:78px;width:120px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transform:rotate(-27deg);transform-origin:left center;border-radius:999px}
    .plot-point{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 1px #f59e0b}
    button,.btn{font:inherit}
    .btn{border:none;border-radius:12px;padding:11px 15px;font-weight:700;cursor:pointer;transition:.2s transform,.2s background,.2s opacity;background:#e8eef9;color:#17315c}
    .btn:hover{transform:translateY(-1px)}
    .btn:focus,.option-btn:focus,input:focus{outline:3px solid #93c5fd;outline-offset:2px}
    .btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
    .btn-secondary{background:#eef2f7}
    .feedback{margin-top:10px;padding:10px 12px;border-radius:12px;font-weight:600;display:none}
    .feedback.show{display:block}
    .feedback.good{background:#ecfdf3;color:var(--good);border:1px solid #a7f3d0}
    .feedback.try{background:#fef2f2;color:var(--bad);border:1px solid #fecaca}
    .options{display:grid;gap:10px;margin-top:12px}
    .option-btn{padding:13px 14px;text-align:left;cursor:pointer;transition:.2s;background:#fff;width:100%}
    .option-btn:hover{background:#f8fbff}
    .option-btn.selected{background:#eaf3ff;border-color:#93c5fd;box-shadow:inset 0 0 0 1px #60a5fa}
    .option-btn.correctish{background:#eefcf3;border-color:#86efac}
    .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:0;background:rgba(244,247,251,.96);backdrop-filter:blur(4px);padding:14px 0 6px;margin-top:10px}
    .nav-left,.nav-right{display:flex;gap:10px;align-items:center}
    #page-indicator{font-weight:700;color:var(--muted)}
    .muted{color:var(--muted)}
    .takeaways{display:grid;gap:10px}
    .result-box{background:#f8fbff;border:1px solid var(--line);border-radius:16px;padding:18px;text-align:center}
    #certificate{border:6px solid #dbeafe;border-radius:18px;padding:24px;margin-top:14px;background:white}
    #certificate h3{margin:0 0 10px;font-size:1.6rem}
    .name-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
    input[type="text"]{padding:11px 12px;border:1px solid var(--line);border-radius:12px;min-width:220px;flex:1}
    .sources{display:grid;gap:10px;margin-top:10px}
    footer.lesson-footer{text-align:center;color:var(--muted);font-size:.88rem;padding:16px 8px 8px}
    @media (max-width: 800px){.two-col,.meta-strip,.step-list,.eq-cards,.mini-grid{grid-template-columns:1fr}.name-row{flex-direction:column}}
    @media print{
      body *{visibility:hidden !important}
      #certificate, #certificate *{visibility:visible !important}
      #certificate{position:absolute;left:0;top:0;width:100%;border-width:4px;box-shadow:none}
      .nav-bar, header.lesson-header, .meta-strip, .progress-wrap, footer.lesson-footer, #app-auth-root{display:none !important}
      @page{size:auto;margin:.4in}
    }

body {
    min-height: 100vh;
    overflow-y: auto !important;
  }
  .content-area,
  .content,
  .lesson-content,
  .main-content {
    overflow-y: auto !important;
    min-height: calc(100vh - 140px);
  }
  .bottom-bar, .nav-container, .nav-bar, .story-nav {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    display: flex !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    flex-wrap: wrap;
  }