:root{
  --bg:#f5f1ea;--card:rgba(255,255,255,.82);--text:#0f172a;--muted:#64748b;
  --border:rgba(15,23,42,.10);--accent:#F25C54;--shadow:0 16px 40px rgba(0,0,0,.08);
  --shadow2:0 10px 24px rgba(0,0,0,.06);--radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
body{
  font-size:16px;
  background:radial-gradient(circle at 10% 15%, rgba(0,0,0,.04) 2px, transparent 2.2px) 0 0/38px 38px,
             linear-gradient(180deg,#fbf8f3,var(--bg));
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:18px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(251,248,243,.86);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 7px rgba(242,92,84,.12)}
.brand-title{font-weight:950;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav a{font-weight:900;text-decoration:none;color:rgba(15,23,42,.80)}
.nav a:hover{opacity:.88}
.small{font-size:12px;color:var(--muted)}
.footer{padding:22px 0;color:var(--muted);text-align:center;font-size:12px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.h1{font-size:36px;line-height:1.12;margin:12px 0 10px;font-weight:980;letter-spacing:-.2px}
@media(max-width:520px){.h1{font-size:30px}}
.h2{font-size:18px;margin:0 0 8px;font-weight:950}
.accent{color:var(--accent)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.70);border:1px solid var(--border);font-weight:950;font-size:13px}

.block{background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:18px;padding:14px;margin-top:12px;box-shadow:var(--shadow2)}
.parent{background:rgba(242,92,84,.10);border:1px solid rgba(242,92,84,.22);border-radius:18px;padding:14px;margin-top:12px}

.lesson-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.lesson-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px;border-radius:18px;background:rgba(255,255,255,.65);border:1px solid var(--border);text-decoration:none;box-shadow:var(--shadow2)}
.lesson-list a b{font-size:16px}
.lesson-list a:hover{outline:2px solid rgba(0,0,0,.06)}

.hero-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:900px){.hero-grid{grid-template-columns:1.2fr .8fr}}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid var(--border);font-size:13px;font-weight:800}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:16px;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.75);font-weight:950;box-shadow:var(--shadow2)}
.btn-primary{border-left:7px solid var(--accent)}
.btn:hover{outline:2px solid rgba(0,0,0,.06)}

.hero-illustration{border-radius:18px;background:radial-gradient(circle at 18% 30%, rgba(0,0,0,.06) 2px, transparent 2.2px) 0 0/34px 34px,
                  linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
                  border:1px solid var(--border);padding:16px}
.hero-hero-grid{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hero-img{width:64px;height:64px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.70);box-shadow:var(--shadow2)}
.hero-card{display:flex;gap:12px;align-items:center}
.list{margin:10px 0 0;padding-left:18px}
.module{margin-top:18px}
.module-title{display:flex;align-items:center;gap:10px;margin-top:8px}

@media print{
  body{background:white!important}
  .header,.nav,.footer,.cta-row,.btn{display:none!important}
  .card{box-shadow:none!important;border:none!important;page-break-inside:avoid;margin:0 0 18mm 0}
  .pill{border:none;background:none}
  a{text-decoration:none}
}
img{max-width:100%}


/* Book view */
.book-shell{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:980px){.book-shell{grid-template-columns:340px 1fr}}
.toc{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 110px);overflow:auto}
.toc a{display:block;padding:10px 12px;margin:6px 0;border-radius:14px;text-decoration:none;background:rgba(255,255,255,.60);border:1px solid var(--border);box-shadow:var(--shadow2)}
.toc a:hover{outline:2px solid rgba(0,0,0,.06)}
.toc a.active{border-left:7px solid var(--accent);font-weight:950}
.page-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:8px}
.progress{height:10px;border-radius:999px;background:rgba(0,0,0,.06);border:1px solid var(--border);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--accent);width:0%}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px;padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.70);border:1px solid var(--border)}


/* ---- v2.3 additions ---- */
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.section-title .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}
.grid-3{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card-mini{background:rgba(255,255,255,.68);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow2)}
.kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kpi .pill{background:rgba(242,92,84,.08);border-color:rgba(242,92,84,.18)}
.module-card{display:flex;flex-direction:column;gap:10px}
.module-card .pill{align-self:flex-start}
.module-card ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.banner{padding:18px;border-radius:22px;border:1px solid var(--border);background:
  radial-gradient(circle at 12% 20%, rgba(242,92,84,.16), transparent 40%),
  radial-gradient(circle at 80% 30%, rgba(245,158,11,.12), transparent 45%),
  rgba(255,255,255,.55);
  box-shadow: var(--shadow2);
}
.banner h1{margin:0;font-size:38px;line-height:1.1;letter-spacing:-.3px}
@media(max-width:520px){.banner h1{font-size:30px}}
.banner .sub{margin-top:10px;color:var(--muted);font-weight:600}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.link{color:rgba(15,23,42,.80);font-weight:900;text-decoration:none}
.link:hover{opacity:.85}
/* Make lesson list less "flat" */
.lesson-list a{transition:transform .08s ease}
.lesson-list a:hover{transform:translateY(-1px)}


/* ---- v2.4 accordion modules ---- */
.accordion{display:flex;flex-direction:column;gap:12px}
.acc-item{background:rgba(255,255,255,.70);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;user-select:none}
.acc-head .title{font-weight:950}
.acc-head .meta{color:var(--muted);font-size:12px}
.acc-body{display:none;padding:0 16px 14px}
.acc-body.open{display:block}
.acc-links{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.acc-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px;border-radius:14px;background:rgba(255,255,255,.72);border:1px solid var(--border);text-decoration:none}
.acc-links a:hover{outline:2px solid rgba(0,0,0,.06)}
.chev{font-weight:950;color:rgba(15,23,42,.60)}