/* ============================================================
   Урок · Тест · ДЗ — scoped .ls-host (interactive flow)
   lesson → test start → test question → result · lesson → homework
   Warm-beige, native 390×844, scaled to fit.
   ============================================================ */
.ls-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); --surface-2:#FFFFFF; --line:rgba(120,90,55,0.13);
  --accent:#C2683D; --accent-2:#E0962F; --accent-soft:rgba(194,104,61,0.12);
  --prog:linear-gradient(90deg,#E0962F,#C2683D); --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; --blue:#2C7E96;
  color:var(--text-1); overflow:hidden; background:linear-gradient(180deg,#FBF4E8 0%,#F4E9D7 100%);
}
.ls-host .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); }
.ls-host .sb-time{ font:700 16px/1 'Montserrat',sans-serif; }
.ls-host .sb-right{ display:flex; align-items:center; gap:7px; }

.ls-host .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); }
.ls-host .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%); }
.ls-host .head-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.ls-host .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); }
.ls-host .head-tt{ flex:1; min-width:0; }
.ls-host .head-tt .l{ font:600 10.5px/1 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(59,42,20,.56); }
.ls-host .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; }
.ls-host .head-next{ font:700 12.5px/1 'Montserrat',sans-serif; color:var(--hero-ink); display:inline-flex; align-items:center; gap:5px; cursor:pointer; flex:none; }
.ls-host .head-prog{ position:relative; z-index:1; display:flex; align-items:center; gap:11px; margin-top:16px; }
.ls-host .head-prog .ptrack{ flex:1; height:8px; border-radius:9999px; background:rgba(120,70,30,0.16); overflow:hidden; }
.ls-host .head-prog .pfill{ height:100%; border-radius:9999px; background:linear-gradient(90deg,#fff,rgba(255,255,255,0.7)); }
.ls-host .head-prog .ppct{ font:800 13px/1 'Montserrat',sans-serif; color:var(--hero-ink); }

.ls-host .scroll{ position:absolute; left:0; right:0; z-index:20; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.ls-host .scroll::-webkit-scrollbar{ display:none; } .ls-host .scroll{ scrollbar-width:none; }
.ls-host .body{ padding:18px 16px 30px; }

/* video */
.ls-host .video{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow); background:linear-gradient(135deg,#244A6B,#16314C); }
.ls-host .video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ls-host .video .scrim{ position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,30,50,0.05),rgba(10,25,45,0.45)); }
.ls-host .video .play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%; cursor:pointer; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.32); }
.ls-host .video .vdur{ position:absolute; right:10px; bottom:10px; font:700 11px/1 'Montserrat',sans-serif; color:#fff; padding:5px 9px; border-radius:8px; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); }
.ls-host .video .vbar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,0.25); }
.ls-host .video .vbar > i{ display:block; height:100%; background:var(--accent); transition:width .2s; }

/* rich text */
.ls-host .rt h3{ font:700 17px/1.3 'Montserrat',sans-serif; color:var(--text-1); margin:0 0 8px; }
.ls-host .rt p{ font:400 14.5px/1.6 'Montserrat',sans-serif; color:var(--text-1); margin:0 0 10px; text-wrap:pretty; }

/* lesson task entries */
.ls-host .tasklist{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.ls-host .taskc{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:18px; cursor:pointer; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; }
.ls-host .taskc:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(120,90,55,0.18); }
.ls-host .taskc .tic{ width:46px; height:46px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }
.ls-host .taskc .tic.test{ background:linear-gradient(140deg,#4FA39A,#2F7F76); }
.ls-host .taskc .tic.hw{ background:linear-gradient(140deg,#E0962F,#C2683D); }
.ls-host .taskc .tcbd{ flex:1; min-width:0; }
.ls-host .taskc .tct{ font:700 15px/1.2 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .taskc .tcs{ margin-top:6px; font:600 12.5px/1 'Montserrat',sans-serif; display:inline-flex; align-items:center; gap:7px; }
.ls-host .taskc .tcs .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.ls-host .taskc .go{ flex:none; color:var(--text-3); }

/* block card + badge */
.ls-host .blockcard{ border-radius:22px; background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--shadow); padding:18px; }
.ls-host .bc-sep{ height:1px; background:var(--line); margin:15px -18px; }
.ls-host .cmt:last-child{ padding-bottom:0; }
.ls-host .cmt .cact{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; margin-left:9px; padding:8px 12px; border-radius:10px; background:rgba(120,90,55,0.07); font:600 12px/1 'Montserrat',sans-serif; color:var(--text-2); cursor:pointer; }
.ls-host .bc-head{ display:flex; align-items:center; gap:10px; }
.ls-host .bc-head .bt{ font:800 19px/1.1 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .badge{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font:700 11.5px/1 'Montserrat',sans-serif; padding:7px 11px; border-radius:9999px; }
.ls-host .badge.prog, .ls-host .badge.review{ background:rgba(224,150,47,0.16); color:var(--amber); }
.ls-host .badge.done{ background:var(--green); color:#fff; }

/* test start facts */
.ls-host .ts-intro{ font:400 14px/1.55 'Montserrat',sans-serif; color:var(--text-2); margin-top:12px; text-wrap:pretty; }
.ls-host .ts-facts{ display:flex; flex-direction:column; gap:1px; margin-top:14px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.ls-host .ts-fact{ display:flex; align-items:center; gap:11px; padding:13px 14px; background:rgba(255,255,255,0.55); }
.ls-host .ts-fact svg{ color:var(--accent); flex:none; }
.ls-host .ts-fact .fl{ font:500 13.5px/1 'Montserrat',sans-serif; color:var(--text-2); }
.ls-host .ts-fact .fv{ margin-left:auto; font:700 13.5px/1 'Montserrat',sans-serif; color:var(--text-1); }

/* buttons */
.ls-host .btns{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.ls-host .btn{ display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; border:0; width:100%; padding:15px; border-radius:16px; font:700 15px/1 'Montserrat',sans-serif; transition:transform .15s, box-shadow .2s; }
.ls-host .btn:active{ transform:translateY(1px); }
.ls-host .btn.primary{ background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(194,104,61,0.28); }
.ls-host .btn.ghost{ background:var(--surface); color:var(--text-1); border:1px solid var(--line); box-shadow:var(--shadow); }
.ls-host .btn.green{ background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(62,142,90,0.26); }

/* test question */
.ls-host .test-top{ display:flex; align-items:center; gap:11px; }
.ls-host .test-top .tt{ font:800 17px/1.1 'Montserrat',sans-serif; color:var(--hero-ink); }
.ls-host .tbar{ margin-top:14px; position:relative; z-index:1; }
.ls-host .tbar-meta{ display:flex; justify-content:space-between; font:600 11.5px/1 'Montserrat',sans-serif; color:rgba(59,42,20,.6); margin-bottom:7px; }
.ls-host .tbar-meta .time{ color:var(--hero-ink); display:inline-flex; align-items:center; gap:5px; }
.ls-host .tbar .track{ height:7px; border-radius:9999px; background:rgba(120,70,30,0.18); overflow:hidden; }
.ls-host .tbar .track > i{ display:block; height:100%; border-radius:9999px; background:linear-gradient(90deg,#fff,rgba(255,255,255,.75)); transition:width .3s; }
.ls-host .q-num{ font:700 12px/1 'Montserrat',sans-serif; color:var(--accent); margin-top:6px; }
.ls-host .q-text{ font:700 16.5px/1.35 'Montserrat',sans-serif; color:var(--text-1); margin-top:8px; text-wrap:pretty; }
.ls-host .opts{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.ls-host .opt{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px; cursor:pointer; background:var(--surface-2); border:1.5px solid var(--line); transition:.15s; }
.ls-host .opt .box{ width:24px; height:24px; border-radius:7px; flex:none; border:2px solid var(--text-3); display:flex; align-items:center; justify-content:center; color:#fff; transition:.15s; }
.ls-host .opt.on{ border-color:var(--accent); background:var(--accent-soft); }
.ls-host .opt.on .box{ background:var(--accent); border-color:var(--accent); }
.ls-host .opt .box svg{ opacity:0; } .ls-host .opt.on .box svg{ opacity:1; }
.ls-host .opt .ol{ font:600 14.5px/1.3 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .test-nav{ display:flex; gap:11px; margin-top:22px; }
.ls-host .test-nav .btn{ flex:1; }

/* test result */
.ls-host .res-hero{ text-align:center; padding:10px 0 4px; }
.ls-host .res-ring{ width:120px; height:120px; margin:0 auto 14px; position:relative; }
.ls-host .res-ring .pct{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ls-host .res-ring .pct b{ font:800 30px/1 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .res-ring .pct span{ font:600 10px/1 'Montserrat',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-top:4px; }
.ls-host .res-title{ font:800 19px/1.2 'Montserrat',sans-serif; color:var(--green); }
.ls-host .res-sub{ font:500 13px/1.45 'Montserrat',sans-serif; color:var(--text-2); margin-top:6px; }
.ls-host .res-rows{ display:flex; flex-direction:column; gap:1px; margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.ls-host .res-row{ display:flex; align-items:center; gap:11px; padding:13px 14px; background:rgba(255,255,255,0.55); }
.ls-host .res-row .rl{ font:500 13.5px/1 'Montserrat',sans-serif; color:var(--text-2); }
.ls-host .res-row .rv{ margin-left:auto; font:700 13.5px/1 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .res-row .rv.ok{ color:var(--green); }

/* homework */
.ls-host .hw-task{ margin-top:4px; }
.ls-host .hw-task-head{ display:flex; align-items:center; gap:10px; }
.ls-host .hw-task-head .hw-task-t{ font:800 19px/1.1 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .hw-task-head .badge{ margin-left:auto; }
.ls-host .hw-desc{ font:400 14px/1.6 'Montserrat',sans-serif; color:var(--text-1); margin-top:12px; text-wrap:pretty; }
.ls-host .hw-cap{ margin:20px 2px 4px; font:700 10.5px/1 'Montserrat',sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.ls-host .cmt{ display:flex; gap:11px; padding:14px 0; }
.ls-host .cmt + .cmt{ border-top:1px solid var(--line); }
.ls-host .cmt .cav{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font:700 14px/1 'Montserrat',sans-serif; }
.ls-host .cmt .cbd{ flex:1; min-width:0; }
.ls-host .cmt .ctop{ display:flex; align-items:center; gap:8px; }
.ls-host .cmt .cn{ font:700 13.5px/1 'Montserrat',sans-serif; color:var(--text-1); }
.ls-host .cmt .crole{ font:600 9px/1 'Montserrat',sans-serif; letter-spacing:.04em; text-transform:uppercase; padding:3px 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent); }
.ls-host .cmt .cdate{ margin-left:auto; font:500 11px/1 'Montserrat',sans-serif; color:var(--text-3); }
.ls-host .cmt .ctx{ font:400 13.5px/1.5 'Montserrat',sans-serif; color:var(--text-1); margin-top:7px; text-wrap:pretty; }
.ls-host .cmt .cfile{ display:inline-flex; align-items:center; gap:8px; margin-top:9px; padding:9px 12px; border-radius:11px; background:rgba(44,126,150,0.08); border:1px solid rgba(44,126,150,0.18); font:600 12.5px/1 'Montserrat',sans-serif; color:var(--blue); }
.ls-host .cmt .cedit{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; margin-left:9px; padding:9px 12px; border-radius:11px; background:rgba(120,90,55,0.07); font:600 12.5px/1 'Montserrat',sans-serif; color:var(--text-2); cursor:pointer; }
.ls-host .hw-composer{ margin-top:18px; display:flex; align-items:center; gap:10px; }
.ls-host .hw-field{ flex:1; display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:22px; background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--shadow); }
.ls-host .hw-field .clip{ color:var(--text-3); flex:none; display:flex; }
.ls-host .hw-field .ph{ flex:1; min-width:0; font:400 14px/1.4 'Montserrat',sans-serif; color:var(--text-3); }
.ls-host .hw-send{ width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; border:0; cursor:pointer; box-shadow:0 6px 16px rgba(194,104,61,0.3); }

/* tab bar */
.ls-host .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); }
.ls-host .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); }
.ls-host .tab .lab{ font:600 9.5px/1 'Montserrat',sans-serif; }
.ls-host .tab.on{ color:var(--accent); background:var(--accent-soft); }

/* interactive caption under the phone mock */
.fr-interactive{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:22px; font:italic 500 14px/1.5 'Inter',system-ui,sans-serif; color:var(--fg3); }
.fr-interactive .lic{ color:var(--app-accent,var(--primary)); font-style:normal; }