/* Animated product scenes — the app's own light UI, framed on the dark site */
.sw-host{min-width:0}
.sw{position:relative;background:#F8FAFC;color:#0F172A;border-radius:16px;overflow:hidden;border:1px solid #3F3F46;height:468px;font-size:13px;line-height:1.4;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.03),0 40px 90px -40px rgba(124,58,237,.7)}
.sw *{box-sizing:border-box}
.sw-bar{height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#EEF1F6;border-bottom:1px solid #E2E8F0}
.sw-bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.sw-bar span{margin-left:10px;font-size:11px;color:#64748B;background:#fff;border:1px solid #E2E8F0;border-radius:6px;padding:2px 12px}
.sw-body{display:grid;grid-template-columns:132px minmax(0,1fr);height:calc(100% - 36px)}
.sw-rail{background:#3B0764;padding:14px 8px;color:#EDE9FE;font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:2px}
.sw-rail b{padding:4px 8px 12px;color:#fff;font-size:14px;font-weight:800}
.sw-rail div{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;white-space:nowrap}
.sw-rail div.on{background:rgba(255,255,255,.14);color:#fff}
.sw-rail .ms{font-size:17px}
.sw-main{position:relative;padding:16px 18px;min-width:0;overflow:hidden}
.sw .ms{visibility:visible}
.sw h5{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:#0F172A}
.sw small{color:#64748B;font-size:11.5px;font-weight:500}
.sw label{display:block;font-size:11.5px;font-weight:700;color:#334155;margin:14px 0 6px}
.sw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sw-actions{display:flex;align-items:center;gap:8px}
.sw-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;transition:background .3s,color .3s}
.sw-pill.draft{background:#FEF3C7;color:#B45309}.sw-pill.pub{background:#D1FAE5;color:#047857}
.sw-pill.blue{background:#EDE9FE;color:#5B21B6}.sw-pill.green{background:#D1FAE5;color:#047857}.sw-pill.amber{background:#FEF3C7;color:#B45309}.sw-pill.red{background:#FEE2E2;color:#B91C1C}.sw-pill.gray{background:#E2E8F0;color:#475569}
.sw-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid transparent;border-radius:9px;padding:7px 12px;font:inherit;font-size:12px;font-weight:700;cursor:default;white-space:nowrap;transition:background .2s,transform .15s,box-shadow .2s}
.sw-btn .ms{font-size:16px}
.sw-btn.p{background:#5412C4;color:#fff}.sw-btn.o{background:#fff;border-color:#CBD5E1;color:#0F172A}
.sw-btn.o.ai{border-color:#D3BEF9;color:#5412C4;background:#F5F3FF}
.sw-btn.hov{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(84,18,196,.6)}
.sw-btn.press{transform:scale(.95)}
.sw-btn.dis{opacity:.45}
.sw-row{display:flex;gap:8px;align-items:stretch}
.sw-input{flex:1;min-width:0;display:flex;align-items:center;gap:1px;background:#fff;border:1.5px solid #CBD5E1;border-radius:9px;padding:8px 11px;font-weight:600;min-height:36px;transition:border-color .2s,box-shadow .2s;overflow:hidden;white-space:nowrap}
.sw-input.focus{border-color:#5412C4;box-shadow:0 0 0 3px #EDE9FE}
.sw-input .ph{font-style:normal;color:#94A3B8;font-weight:500}.sw-input .t:not(:empty)+.caret+.ph,.sw-input.has .ph{display:none}
.sw-input .caret{display:none;width:1.5px;height:15px;background:#5412C4;margin-left:1px;animation:blink 1s steps(2) infinite}
.sw-input.focus .caret{display:inline-block}
.sw-list{margin-top:14px;display:flex;flex-direction:column;gap:7px;min-height:150px}
.sw-empty{border:1.5px dashed #CBD5E1;border-radius:12px;padding:30px 12px;text-align:center;color:#64748B;font-weight:600;display:grid;gap:8px;justify-items:center}
.sw-empty .ms{font-size:28px;color:#A78BFA}
.sw-lesson{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E2E8F0;border-radius:11px;padding:9px 11px;font-weight:700;color:#0F172A}
.sw-lesson .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:#EDE9FE;color:#5412C4}
.sw-lesson .ic .ms{font-size:18px}
.sw-lesson .g{flex:1;min-width:0}.sw-lesson .g small{display:block}
.sw-lesson>.ms.h{color:#94A3B8;font-size:18px}
.sw-lesson.in{animation:swIn .5s both cubic-bezier(.16,1,.3,1)}
.sw-lesson.flash{animation:swFlash 1.4s ease}
.sw-lesson.sk{height:50px;position:relative;overflow:hidden;background:#E2E8F0;border-color:#E2E8F0}
.sw-lesson.sk>*{opacity:0}
.sw-lesson.sk:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transform:translateX(-100%);animation:shimmer 1.1s infinite}
@keyframes swIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes swFlash{0%{box-shadow:0 0 0 0 rgba(84,18,196,.5);border-color:#5412C4}60%{box-shadow:0 0 0 8px rgba(84,18,196,0);border-color:#5412C4}100%{border-color:#E2E8F0}}
.ic.c1{background:#DBEAFE;color:#1D4ED8}.ic.c2{background:#FCE7F3;color:#BE185D}.ic.c3{background:#FEF3C7;color:#B45309}.ic.c4{background:#D1FAE5;color:#047857}.ic.c5{background:#CFFAFE;color:#0E7490}
.sw-pal{position:absolute;left:18px;right:18px;bottom:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sw-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #E2E8F0;background:#fff;border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;color:#334155;transition:.2s}
.sw-chip .ms{font-size:15px;color:#5412C4}.sw-chip.hov{border-color:#5412C4;background:#F5F3FF;transform:translateY(-1px)}

/* table / enroll */
.sw-table{margin-top:12px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:2px 12px;position:relative}
.sw-tr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #F1F5F9;font-weight:700}
.sw-tr:last-child{border:0}
.sw-tr .g{flex:1;min-width:0}.sw-tr .g small{display:block}
.sw-av{width:28px;height:28px;border-radius:50%;background:#EDE9FE;color:#5B21B6;display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:none}
.sw-bar2{width:84px;height:6px;border-radius:9px;background:#E2E8F0;overflow:hidden;flex:none}.sw-bar2 i{display:block;height:100%;width:0;background:#5412C4;transition:width 1.6s cubic-bezier(.16,1,.3,1),background .3s}
.sw-tr .sw-pill{min-width:76px;text-align:center}
.sw-modal{position:absolute;inset:0;background:rgba(15,23,42,.45);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s;z-index:5}
.sw-modal.open{opacity:1}
.sw-card{width:min(330px,88%);background:#fff;border-radius:14px;padding:16px;box-shadow:0 30px 60px -20px rgba(15,23,42,.6);transform:translateY(14px) scale(.96);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.sw-modal.open .sw-card{transform:none}
.sw-card h6{margin:0 0 10px;font-size:14px;font-weight:800}
.sw-user{display:flex;align-items:center;gap:9px;padding:7px 4px;border-radius:9px;font-weight:700;transition:opacity .3s,max-height .3s;max-height:48px;overflow:hidden}
.sw-user small{display:block}.sw-user.dim{opacity:0;max-height:0;padding:0}
.sw-cb{margin-left:auto;width:18px;height:18px;border-radius:5px;border:1.5px solid #94A3B8;display:grid;place-items:center;transition:.2s;color:transparent}
.sw-cb .ms{font-size:14px}.sw-user.sel .sw-cb{background:#5412C4;border-color:#5412C4;color:#fff;animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
.sw-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid #E2E8F0}

/* engage (learner) */
.sw-coin{display:inline-flex;align-items:center;gap:5px;background:#FEF9C3;color:#713F12;font-weight:800;border-radius:999px;padding:5px 12px;font-size:12px;position:relative}
.sw-coin.pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.sw-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:14px}
.sw-panel{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:13px;position:relative}
.sw-panel h6{margin:0 0 8px;font-size:12.5px;font-weight:800}
.sw-cover{height:64px;border-radius:9px;background:linear-gradient(135deg,#4F46E5,#7C3AED);display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;margin-bottom:10px}
.sw-meter{height:7px;border-radius:9px;background:#CBD5E1;overflow:hidden;margin:6px 0 10px}.sw-meter i{display:block;height:100%;background:#5412C4;border-radius:9px;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.sw-float{position:absolute;left:50%;top:0;font-weight:800;color:#B45309;background:#FEF9C3;border-radius:999px;padding:3px 10px;font-size:12px;pointer-events:none;animation:floatUp 1.6s both cubic-bezier(.16,1,.3,1)}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-44px)}}
.sw-lb{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid #F1F5F9;font-weight:700}.sw-lb:last-child{border:0}
.sw-lb .rk{width:18px;color:#94A3B8;font-weight:800}.sw-lb .g{flex:1}.sw-lb .cn{font-variant-numeric:tabular-nums;color:#713F12}
.sw-lb.me{background:#F5F3FF;border-radius:8px;padding-inline:6px;margin-inline:-4px}

/* assess */
.sw-q{margin:14px 0 4px;font-size:15px;font-weight:800;line-height:1.35}
.sw-opt{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #CBD5E1;border-radius:11px;padding:9px 12px;margin-top:7px;font-weight:600;transition:.2s}
.sw-opt .lt{width:24px;height:24px;border-radius:7px;background:#F1F5F9;display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none;transition:.2s}
.sw-opt.hov{border-color:#A78BFA;background:#FAF8FF}
.sw-opt.sel{border-color:#5412C4;background:#F5F3FF}.sw-opt.sel .lt{background:#5412C4;color:#fff}
.sw-opt.ok{border-color:#047857;background:#ECFDF5}.sw-opt.ok .lt{background:#047857;color:#fff}
.sw-fb{margin-top:10px;border-radius:11px;background:#ECFDF5;border:1px solid #A7F3D0;padding:10px 12px;color:#065F46;font-weight:600;display:none}
.sw-fb.show{display:block;animation:swIn .5s both cubic-bezier(.16,1,.3,1)}
.sw-fb b{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.sw-res{position:absolute;inset:0;background:#F8FAFC;padding:18px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;z-index:3}
.sw-res.show{display:flex;animation:swIn .5s both}
.sw-ring{position:relative;width:104px;height:104px}.sw-ring svg{transform:rotate(-90deg)}
.sw-ring circle{fill:none;stroke-width:10}.sw-ring .bg{stroke:#E2E8F0}.sw-ring .fg{stroke:#5412C4;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1)}
.sw-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:800}
.sw-cert{display:none;align-items:center;gap:12px;background:#fff;border:2px solid #D3BEF9;border-radius:14px;padding:12px 16px;text-align:left}
.sw-cert.show{display:flex;animation:swIn .6s both cubic-bezier(.34,1.4,.64,1)}
.sw-cert .seal{width:40px;height:40px;border-radius:50%;background:#5412C4;color:#fff;display:grid;place-items:center;flex:none}

/* measure */
.sw-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.sw-kpi{background:#fff;border:1px solid #E2E8F0;border-radius:11px;padding:9px 10px}
.sw-kpi small{display:block;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.sw-kpi b{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sw-chart{position:relative;background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:12px 12px 8px;margin-top:10px}
.sw-bars{height:128px;display:flex;align-items:flex-end;gap:6px}
.sw-bars i{flex:1;height:100%;background:linear-gradient(#7C3AED,#A78BFA);border-radius:5px 5px 0 0;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .2s}
.sw-bars i.hot{filter:brightness(1.25) saturate(1.2)}
.sw-tip{position:absolute;top:8px;left:0;background:#0F172A;color:#fff;border-radius:8px;padding:5px 9px;font-weight:700;font-size:11px;opacity:0;transform:translate(-50%,6px);transition:opacity .2s,transform .2s,left .3s;pointer-events:none;white-space:nowrap}
.sw-tip.show{opacity:1;transform:translate(-50%,0)}
.sw-sel{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #CBD5E1;background:#fff;border-radius:9px;padding:6px 10px;font-weight:700;font-size:12px;transition:.2s}.sw-sel.hov{border-color:#5412C4}
.sw-sel .ms{font-size:16px}

/* cursor, ripple, toast, caption */
.sw-cur{position:absolute;left:0;top:0;width:22px;height:22px;z-index:9;pointer-events:none;transition:transform .8s cubic-bezier(.65,0,.35,1);filter:drop-shadow(0 3px 5px rgba(15,23,42,.35))}
.sw-cur svg{width:22px;height:22px;transition:transform .12s}.sw-cur.press svg{transform:scale(.8)}
.sw-rip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #7C3AED;z-index:8;pointer-events:none;animation:rip .6s both ease-out}
@keyframes rip{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}
.sw-toasts{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;z-index:7;align-items:flex-end}
.sw-toast{display:flex;align-items:center;gap:9px;background:#0F172A;color:#fff;border-radius:11px;padding:9px 13px 9px 10px;font-weight:700;font-size:12px;box-shadow:0 14px 30px -10px rgba(15,23,42,.6);animation:toastIn .5s both cubic-bezier(.34,1.56,.64,1)}
.sw-toast.out{animation:toastOut .3s both}
.sw-toast .ms{background:#047857;border-radius:50%;padding:3px;font-size:16px;width:22px;height:22px}.sw-toast .ms.gold{background:#B45309}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.95)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.sw-cap{margin-top:14px;display:flex;align-items:center;gap:14px}
.sw-dots{display:flex;gap:6px;flex:none}.sw-dots i{width:22px;height:4px;border-radius:4px;background:#3F3F46;transition:background .3s,width .3s}.sw-dots i.on{background:var(--brand-200);width:36px}.sw-dots i.done{background:#7C3AED}
.sw-cap p{margin:0;color:#D4D4D8;font-weight:600;font-size:.95rem;transition:opacity .25s}

@media (max-width:980px){.sw{height:480px}.sw-body{grid-template-columns:minmax(0,1fr)}.sw-rail{display:none}.sw-two{grid-template-columns:minmax(0,1fr)}.sw-two .sw-panel:last-child{display:none}.sw-btn .lbl-hide{display:none}}
@media (max-width:480px){.sw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.sw-bars{height:96px}.sw-main{padding:14px}}
@media (prefers-reduced-motion:reduce){.sw-cur{display:none}}

.sw .spin{animation:spin .8s linear infinite}

/* main UI only: no sidebar */
.sw-body{grid-template-columns:minmax(0,1fr)}
.sw-main{padding:18px 20px}

/* ---------- dark variant of the app windows (the real app has a dark mode) ---------- */
html[data-theme="dark"] .sw{background:#0F0F12;color:#E4E4E7;border-color:#3F3F46}
html[data-theme="dark"] .sw-bar{background:#18181B;border-color:#27272A}
html[data-theme="dark"] .sw-bar i{background:#3F3F46}
html[data-theme="dark"] .sw-bar span{background:#0F0F12;border-color:#27272A;color:#A1A1AA}
html[data-theme="dark"] .sw h5,html[data-theme="dark"] .sw b{color:#FAFAFA}
html[data-theme="dark"] .sw small{color:#A1A1AA}
html[data-theme="dark"] .sw label{color:#D4D4D8}
html[data-theme="dark"] .sw-input{background:#18181B;border-color:#3F3F46;color:#FAFAFA}
html[data-theme="dark"] .sw-input.focus{border-color:#A78BFA;box-shadow:0 0 0 3px rgba(124,58,237,.3)}
html[data-theme="dark"] .sw-input .caret{background:#C4B5FD}
html[data-theme="dark"] .sw-btn.o{background:#18181B;border-color:#3F3F46;color:#FAFAFA}
html[data-theme="dark"] .sw-btn.o.ai{background:rgba(124,58,237,.16);border-color:#7C3AED;color:#C4B5FD}
html[data-theme="dark"] .sw-btn.p{background:#7C3AED}
html[data-theme="dark"] .sw-empty{border-color:#3F3F46;color:#A1A1AA}
html[data-theme="dark"] .sw-lesson,html[data-theme="dark"] .sw-table,html[data-theme="dark"] .sw-panel,html[data-theme="dark"] .sw-kpi,html[data-theme="dark"] .sw-chart,html[data-theme="dark"] .sw-opt,html[data-theme="dark"] .sw-chip,html[data-theme="dark"] .sw-sel{background:#18181B;border-color:#27272A;color:#FAFAFA}
html[data-theme="dark"] .sw-lesson.sk{background:#27272A;border-color:#27272A}
html[data-theme="dark"] .sw-lesson.sk:after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.12) 50%,transparent 80%)}
html[data-theme="dark"] .sw-lesson .ic{background:rgba(124,58,237,.2);color:#C4B5FD}
html[data-theme="dark"] .ic.c1{background:rgba(59,130,246,.2);color:#93C5FD}html[data-theme="dark"] .ic.c2{background:rgba(236,72,153,.2);color:#F9A8D4}html[data-theme="dark"] .ic.c3{background:rgba(245,158,11,.2);color:#FCD34D}html[data-theme="dark"] .ic.c4{background:rgba(16,185,129,.2);color:#6EE7B7}
html[data-theme="dark"] .sw-chip{color:#E4E4E7}html[data-theme="dark"] .sw-chip .ms{color:#C4B5FD}html[data-theme="dark"] .sw-chip.hov{background:rgba(124,58,237,.2);border-color:#A78BFA}
html[data-theme="dark"] .sw-tr{border-color:#27272A}html[data-theme="dark"] .sw-av{background:rgba(124,58,237,.25);color:#DDD6FE}
html[data-theme="dark"] .sw-bar2,html[data-theme="dark"] .sw-meter{background:#3F3F46}
html[data-theme="dark"] .sw-bar2 i,html[data-theme="dark"] .sw-meter i{background:#A78BFA}
html[data-theme="dark"] .sw-card{background:#18181B;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
html[data-theme="dark"] .sw-modal{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .sw-user.sel .sw-cb{background:#7C3AED;border-color:#7C3AED}
html[data-theme="dark"] .sw-foot{border-color:#27272A}
html[data-theme="dark"] .sw-pill.draft,html[data-theme="dark"] .sw-pill.amber{background:rgba(245,158,11,.18);color:#FCD34D}
html[data-theme="dark"] .sw-pill.pub,html[data-theme="dark"] .sw-pill.green{background:rgba(16,185,129,.18);color:#6EE7B7}
html[data-theme="dark"] .sw-pill.blue{background:rgba(124,58,237,.25);color:#DDD6FE}
html[data-theme="dark"] .sw-pill.gray{background:#27272A;color:#A1A1AA}
html[data-theme="dark"] .sw-coin{background:rgba(250,204,21,.14);color:#FDE047}
html[data-theme="dark"] .sw-cover{background:linear-gradient(135deg,#4F46E5,#7C3AED)}
html[data-theme="dark"] .sw-float{background:rgba(250,204,21,.2);color:#FDE047}
html[data-theme="dark"] .sw-lb{border-color:#27272A}html[data-theme="dark"] .sw-lb .cn{color:#FDE047}html[data-theme="dark"] .sw-lb.me{background:rgba(124,58,237,.2)}
html[data-theme="dark"] .sw-opt .lt{background:#27272A;color:#E4E4E7}
html[data-theme="dark"] .sw-opt.hov{border-color:#A78BFA;background:rgba(124,58,237,.12)}
html[data-theme="dark"] .sw-opt.sel{border-color:#A78BFA;background:rgba(124,58,237,.2)}html[data-theme="dark"] .sw-opt.sel .lt{background:#7C3AED;color:#fff}
html[data-theme="dark"] .sw-opt.ok{border-color:#10B981;background:rgba(16,185,129,.14)}html[data-theme="dark"] .sw-opt.ok .lt{background:#10B981;color:#fff}
html[data-theme="dark"] .sw-fb{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);color:#A7F3D0}
html[data-theme="dark"] .sw-res{background:#0F0F12}
html[data-theme="dark"] .sw-ring .bg{stroke:#3F3F46}html[data-theme="dark"] .sw-ring .fg{stroke:#A78BFA}
html[data-theme="dark"] .sw-cert{background:#18181B;border-color:#7C3AED}
html[data-theme="dark"] .sw-bars i{background:linear-gradient(#8B5CF6,#C4B5FD)}
html[data-theme="dark"] .sw-tip{background:#FAFAFA;color:#18181B}
html[data-theme="dark"] .sw-toast{background:#FAFAFA;color:#18181B}
html[data-theme="dark"] .sw-sel.hov{border-color:#A78BFA}
html[data-theme="dark"] .sw-cur svg path{fill:#fff}

/* build scene: tighter rows, one-line palette so nothing overlaps */
.sw-list{gap:5px;margin-top:10px}
.sw-lesson{padding:6px 10px}.sw-lesson .ic{width:28px;height:28px}
.sw-lesson.sk{height:44px}
.sw-pal{flex-wrap:nowrap;gap:5px;overflow:hidden;padding-top:4px}
.sw-chip{padding:4px 8px;white-space:nowrap}
.sw-main label{margin:10px 0 5px}

/* fit tuning: quiz is a little tighter everywhere; phones get a taller window and a shorter chip row */
.sw-q{margin:10px 0 2px;font-size:14.5px}
.sw-opt{padding:7px 12px;margin-top:6px}
@media (max-width:640px){
  .sw{height:540px}
  .sw-pal .sw-chip:nth-child(n+5){display:none}
}

/* final fit: desktop +8px for the quiz; phones grow with content and keep the chip row in the flow */
.sw{height:476px}
@media (max-width:640px){
  .sw{height:auto;min-height:560px}
  .sw-body{height:auto;min-height:524px}
  .sw-main{min-height:524px}
  .sw-pal{position:static;margin-top:14px}
  .sw-pal .sw-chip:nth-child(n+5){display:none}
}

.sw-fb{margin-top:8px;padding:7px 12px}
.sw-main .sw-btn.p[data-sub]{padding:6px 12px}