/* ============================================================
   Программа курса — scoped .cp-host (разделы ⇄ блоки+уроки)
   Warm-beige design language, native 390×844, scaled to fit.
   ============================================================ */
.cp-host{
  position:absolute; top:0; left:0; width:390px; height:844px; transform-origin:top left;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --text-1:#2E2517; --text-2:#7C6A52; --text-3:#A6957A;
  --surface:rgba(255,255,255,0.74); --line:rgba(120,90,55,0.13);
  --accent:#C2683D; --accent-2:#E0962F; --accent-soft:rgba(194,104,61,0.12);
  --shadow:0 6px 20px rgba(120,90,55,0.13);
  --hero-grad:linear-gradient(135deg,#FBE4C6 0%,#F4CB97 60%,#EBB678 100%);
  --hero-ink:#3B2A14; --green:#3E8E5A; --amber:#B5722A; --red:#C0563F;
  color:var(--text-1); overflow:hidden;
  background:linear-gradient(180deg,#FBF4E8 0%,#F4E9D7 100%);
}
.cp-statusbar{ position:absolute; top:0; left:0; right:0; height:54px; z-index:40; display:flex; align-items:flex-end; justify-content:space-between; padding:0 30px 8px; pointer-events:none; color:var(--hero-ink); }
.cp-statusbar .t{ font:700 16px/1 'Montserrat',sans-serif; }
.cp-statusbar .r{ display:flex; align-items:center; gap:7px; }

/* sticky warm header */
.cp-head{ position:absolute; top:0; left:0; right:0; z-index:30; padding:58px 18px 18px; overflow:hidden; background:var(--hero-grad); box-shadow:0 6px 20px rgba(150,90,40,0.12); }
.cp-head::after{ content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 70%); }
.cp-head-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.cp-iconbtn{ width:42px; height:42px; border-radius:50%; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8); color:var(--hero-ink); box-shadow:0 3px 10px rgba(150,90,40,0.16); }
.cp-head-tt{ flex:1; min-width:0; }
.cp-head-tt .l{ font:600 10.5px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(59,42,20,0.56); }
.cp-head-tt .t{ font:800 20px/1.15 'Montserrat',sans-serif; color:var(--hero-ink); margin-top:5px; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-head-prog{ position:relative; z-index:1; display:flex; align-items:center; gap:11px; margin-top:16px; }
.cp-head-prog .ptrack{ flex:1; height:8px; border-radius:9999px; background:rgba(120,70,30,0.16); overflow:hidden; }
.cp-head-prog .pfill{ height:100%; border-radius:9999px; background:linear-gradient(90deg,#fff,rgba(255,255,255,0.7)); }
.cp-head-prog .ppct{ font:800 13px/1 'Montserrat',sans-serif; color:var(--hero-ink); font-variant-numeric:tabular-nums; }

/* scroll */
.cp-scroll{ position:absolute; left:0; right:0; z-index:20; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.cp-scroll::-webkit-scrollbar{ display:none; } .cp-scroll{ scrollbar-width:none; }
.cp-body{ padding:18px 16px 30px; }
.cp-intro{ font:500 14px/1.5 'Montserrat',sans-serif; color:var(--text-2); margin:2px 4px 16px; text-wrap:pretty; }

/* status pill */
.cp-st{ display:inline-flex; align-items:center; gap:7px; font:600 12.5px/1.35 'Montserrat',sans-serif; }
.cp-st .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.cp-st.done{ color:var(--green); } .cp-st.done .dot{ background:var(--green); }
.cp-st.open{ color:var(--amber); } .cp-st.open .dot{ background:var(--accent-2); }
.cp-st.lock{ color:var(--red); } .cp-st.lock .dot{ background:var(--red); }

/* section cards */
.cp-secs{ display:flex; flex-direction:column; gap:14px; }
.cp-sec{ display:flex; align-items:center; gap:15px; padding:15px; border-radius:22px; cursor:pointer; background:var(--surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .22s, box-shadow .22s; }
.cp-sec:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(120,90,55,0.18); }
.cp-sec.locked{ opacity:.66; cursor:default; }
.cp-sec-no{ width:62px; height:62px; border-radius:19px; flex:none; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(140deg,var(--accent-2),var(--accent)); }
.cp-sec-no::after{ content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,0.26),transparent 60%); }
.cp-sec-no.done{ background:linear-gradient(140deg,#5BB98A,#3E8E5A); }
.cp-sec-no.lock{ background:linear-gradient(140deg,#C9BBA6,#A6957A); }
.cp-sec-no svg, .cp-sec-no span{ position:relative; z-index:1; }
.cp-sec-bd{ flex:1; min-width:0; }
.cp-sec-tt{ font:700 16.5px/1.25 'Montserrat',sans-serif; color:var(--text-1); }
.cp-sec-ds{ font:500 12.5px/1.4 'Montserrat',sans-serif; color:var(--text-2); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cp-sec-mt{ margin-top:9px; }
.cp-sec-go{ flex:none; color:var(--accent); }
.cp-sec-lock{ flex:none; color:var(--text-3); }

/* block accordion */
.cp-blocks{ display:flex; flex-direction:column; gap:13px; }
.cp-block{ border-radius:20px; background:var(--surface); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.cp-bhead{ display:flex; align-items:center; gap:13px; padding:16px; cursor:pointer; user-select:none; }
.cp-bbd{ flex:1; min-width:0; }
.cp-blab{ font:700 10.5px/1 'Montserrat',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.cp-btt{ font:700 16px/1.25 'Montserrat',sans-serif; color:var(--text-1); margin-top:6px; }
.cp-bchev{ flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-2); background:rgba(120,90,55,0.07); transition:transform .28s ease; }
.cp-block.open .cp-bchev{ transform:rotate(180deg); }
.cp-blessons{ max-height:0; overflow:hidden; transition:max-height .38s ease; }
.cp-block.open .cp-blessons{ max-height:1600px; }
.cp-blessons-in{ padding:0 14px 8px; border-top:1px solid var(--line); }

/* lesson row */
.cp-lesson{ display:flex; align-items:flex-start; gap:13px; padding:13px 4px; cursor:pointer; }
.cp-lesson + .cp-lesson{ border-top:1px solid var(--line); }
.cp-lst{ width:38px; height:38px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; font:700 14px/1 'Montserrat',sans-serif; margin-top:1px; }
.cp-lst.done{ background:rgba(62,142,90,0.15); color:var(--green); }
.cp-lst.open{ background:rgba(194,104,61,0.13); color:var(--accent); }
.cp-lst.lock{ background:rgba(120,90,55,0.08); color:var(--text-3); }
.cp-lbd{ flex:1; min-width:0; padding-top:1px; }
.cp-ltt{ font:700 14.5px/1.3 'Montserrat',sans-serif; color:var(--text-1); }
.cp-lesson.lock .cp-ltt{ color:var(--text-2); }
.cp-ldesc{ font:500 12.5px/1.4 'Montserrat',sans-serif; color:var(--text-2); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cp-lmt{ margin-top:7px; }
.cp-lgo{ flex:none; color:var(--text-3); align-self:center; }
.cp-lockline{ display:inline-flex; align-items:center; gap:6px; color:var(--red); font:600 12.5px/1.35 'Montserrat',sans-serif; }

/* floating tab bar (oval island) */
.cp-tabbar{ position:absolute; bottom:18px; left:16px; right:16px; z-index:35; height:66px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; border-radius:30px; background:rgba(255,255,255,0.82); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--line); box-shadow:0 8px 26px rgba(120,90,55,0.16), inset 0 1px 0 rgba(255,255,255,0.7); }
.cp-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; height:52px; border-radius:16px; color:var(--text-3); }
.cp-tab .lab{ font:600 9.5px/1 'Montserrat',sans-serif; }
.cp-tab.on{ color:var(--accent); background:var(--accent-soft); }