/* ====== Vivialto: trzy projekty graficzne (1.0 uklad, 2.0 scena, 3.0 klasa) ====== */
/* --- kolory i kształty: 1.0 „Układ” (spokojny, granat + złoto, płaskie karty) --- */
html[data-layout="uklad"]{--bg1:#F5F6FB;--bg2:#F5F6FB;--surface:#FFFFFF;--surface-2:#ECEDF6;--ink:#1F1A4D;--muted:#4A4570;--line:#DCDDEA;--gold:#F2B630;--gold-deep:#B9840E;--radius:16px;--shadow:0 1px 0 #DCDDEA;--b-teal:#1C8C7E}
@media (prefers-color-scheme:dark){html[data-layout="uklad"]:not([data-theme="light"]){--bg1:#14122B;--bg2:#14122B;--surface:#1E1B3D;--surface-2:#26234A;--ink:#ECEAF7;--muted:#B5B1D3;--line:#36325E;--shadow:0 1px 0 #36325E;--b-teal:#4CC3B2}}
html[data-layout="uklad"][data-theme="dark"]{--bg1:#14122B;--bg2:#14122B;--surface:#1E1B3D;--surface-2:#26234A;--ink:#ECEAF7;--muted:#B5B1D3;--line:#36325E;--shadow:0 1px 0 #36325E;--b-teal:#4CC3B2}
/* --- kolory i kształty: 2.0 i 3.0 (kolorowe, wypukłe jak w grach) --- */
html[data-layout="scena"],html[data-layout="klasa"]{--bg1:#F3F1FB;--bg2:#F3F1FB;--surface:#FFFFFF;--surface-2:#E9E6F8;--ink:#1D1745;--muted:#575380;--line:#DAD6EE;--radius:24px;--shadow:0 5px 0 #C9C3E6;--lift:#C9C3E6}
@media (prefers-color-scheme:dark){html[data-layout="scena"]:not([data-theme="light"]),html[data-layout="klasa"]:not([data-theme="light"]){--bg1:#15122E;--bg2:#15122E;--surface:#231F4A;--surface-2:#1C1840;--ink:#F1EEFF;--muted:#B7B2DA;--line:#38336A;--shadow:0 5px 0 #0B0920;--lift:#0B0920}}
html[data-layout="scena"][data-theme="dark"],html[data-layout="klasa"][data-theme="dark"]{--bg1:#15122E;--bg2:#15122E;--surface:#231F4A;--surface-2:#1C1840;--ink:#F1EEFF;--muted:#B7B2DA;--line:#38336A;--shadow:0 5px 0 #0B0920;--lift:#0B0920}
html[data-layout] body{background:var(--bg1)}
html[data-layout] h1,html[data-layout] h2,html[data-layout] h3{font-family:var(--font-display);letter-spacing:-.01em}
html[data-layout] .page-head h1{font-size:clamp(28px,3vw,40px)}html[data-layout] .page-head p{color:var(--muted);max-width:66ch}

/* ====== 1.0 „Układ” ====== */
html[data-layout="uklad"] .top{background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:24px}
html[data-layout="uklad"] .mainmenu a,html[data-layout="uklad"] .mm-more{border-radius:999px;padding:8px 14px;font-weight:700;color:var(--muted)}
html[data-layout="uklad"] .mainmenu a.on{background:var(--surface-2);color:var(--ink)}
html[data-layout="uklad"] .icon-btn,html[data-layout="uklad"] .code-btn,html[data-layout="uklad"] .top .chip{border-radius:999px;border:1px solid var(--line);background:var(--surface)}
html[data-layout="uklad"] .btn.primary{background:var(--gold);color:#1F1A4D;border-radius:999px;box-shadow:inset 0 -3px 0 var(--gold-deep);border:0}
html[data-layout="uklad"] .btn.ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:999px;box-shadow:none}
html[data-layout="uklad"] .panel,html[data-layout="uklad"] .card,html[data-layout="uklad"] .pitem,html[data-layout="uklad"] .qcard{border-radius:var(--radius);box-shadow:none;border:1px solid var(--line);background:var(--surface)}
html[data-layout="uklad"] .tcard,html[data-layout="uklad"] .gcard{border-radius:16px;box-shadow:none;border:1px solid var(--line);background:var(--surface)}
html[data-layout="uklad"] .tcard .tile,html[data-layout="uklad"] .gcard .tile{border-radius:12px}
html[data-layout="uklad"] .seg{border-radius:999px;background:var(--surface-2);padding:4px}html[data-layout="uklad"] .seg button{border-radius:999px}
html[data-layout="uklad"] .seg button[aria-checked="true"]{background:var(--surface);box-shadow:0 1px 0 var(--line)}
/* ćwiczenie 1.0: pasek postępu, białe odpowiedzi z klawiszem, informacja zwrotna z kreską */
html[data-layout="uklad"] .trainer .dots{display:flex;gap:3px;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
html[data-layout="uklad"] .trainer .dots i{flex:1;height:100%;width:auto;border-radius:0;background:transparent;margin:0}
html[data-layout="uklad"] .trainer .dots i.done{background:var(--b-teal)}html[data-layout="uklad"] .trainer .dots i.now{background:var(--gold)}
html[data-layout="uklad"] .trainer .tq{font-size:clamp(26px,3vw,34px);text-align:center}
html[data-layout="uklad"] .trainer .tvis{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
html[data-layout="uklad"] .tbtn{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:14px;min-height:72px;font-size:19px;font-weight:700;box-shadow:none;text-align:left}
html[data-layout="uklad"] .tbtn .kn{border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted);font-size:14px}
html[data-layout="uklad"] .tbtn.ok{border-color:var(--b-teal);background:color-mix(in srgb,var(--b-teal) 15%,var(--surface))}html[data-layout="uklad"] .tbtn.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
html[data-layout="uklad"] .tfb:not(:empty){display:block;padding:14px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--b-teal);font-weight:700}

/* ====== 2.0 i 3.0: kolorowo, wypukle, z Vivi ====== */
:is(html[data-layout="scena"],html[data-layout="klasa"]) .top .icon-btn,:is(html[data-layout="scena"],html[data-layout="klasa"]) .top .code-btn,:is(html[data-layout="scena"],html[data-layout="klasa"]) .top .chip{border-radius:999px;background:var(--surface);border:1px solid var(--line)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .btn.primary{background:var(--gold);color:#1D1745;border-radius:20px;border:0;box-shadow:0 5px 0 var(--gold-deep)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--lift)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .panel,:is(html[data-layout="scena"],html[data-layout="klasa"]) .pitem,:is(html[data-layout="scena"],html[data-layout="klasa"]) .qcard{border-radius:24px;border:1px solid var(--line);box-shadow:0 5px 0 var(--lift);background:var(--surface)}
/* kafelki trenażerów, gier i narzędzi jak w grach */
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard){position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;align-content:space-between;gap:10px;min-height:190px;padding:18px;border:0;border-radius:26px;background:var(--lc);color:#fff;box-shadow:0 7px 0 color-mix(in srgb,var(--lc) 62%,#000);transition:transform .12s}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard):hover{transform:translateY(-3px)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard)::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard) .tile{width:72px;height:72px;border-radius:22px;background:rgba(255,255,255,.22);color:#fff;position:relative;z-index:1}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard) .tile svg{width:44px;height:44px}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard) b{font-family:var(--font-display);font-size:20px;color:#fff;line-height:1.15}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard) small{color:rgba(255,255,255,.9)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) :is(.tcard,.gcard) .stars svg{color:#FFE7A3}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .gcard.locked{filter:grayscale(.5) opacity(.75)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .seg{border-radius:20px;background:var(--surface-2);padding:5px}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .seg button{border-radius:16px;font-weight:800}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .seg button[aria-checked="true"]{background:var(--surface);box-shadow:0 3px 0 var(--lift)}
/* ćwiczenie 2.0/3.0: Vivi obok pytania, kropki, kolorowe odpowiedzi */
.trainer.with-vivi{display:grid;grid-template-columns:minmax(150px,.55fr) 2fr;column-gap:clamp(16px,3vw,40px);align-content:start}
.trainer.with-vivi>:not(.t-vivi):not(.tq):not(.tvis):not(.tans):not(.tfoot){grid-column:1/-1}
.trainer.with-vivi .t-vivi{grid-column:1;grid-row:span 4;display:grid;justify-items:center;align-content:start;gap:10px;position:sticky;top:12px}
.trainer.with-vivi .t-vivi .vivi{width:min(100%,170px);height:auto}
.trainer.with-vivi .t-bub{order:-1;background:var(--surface);border-radius:20px;padding:12px 16px;font-weight:700;box-shadow:0 4px 0 var(--lift);margin:0;text-align:center}
.trainer.with-vivi :is(.tq,.tvis,.tans,.tfoot){grid-column:2}
.trainer.with-vivi .tq{font-size:clamp(26px,3vw,38px);text-align:center}
.trainer.with-vivi .tvis{background:var(--surface);border-radius:28px;padding:22px;box-shadow:0 6px 0 var(--lift)}
.trainer.with-vivi .tfoot .tfb{display:none}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .trainer .dots i{width:18px;height:18px;border-radius:50%;background:var(--line)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .trainer .dots i.done{background:var(--ok)}:is(html[data-layout="scena"],html[data-layout="klasa"]) .trainer .dots i.now{background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 40%,transparent)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans:not(.dict):not(.gate):not(.wide) .tbtn{border:0;border-radius:22px;color:#fff;background:var(--ac);box-shadow:0 6px 0 color-mix(in srgb,var(--ac) 60%,#000);min-height:84px;font-size:21px;font-weight:800;text-align:left}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn:nth-child(4n+1){--ac:var(--b-blue)}:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn:nth-child(4n+2){--ac:var(--b-orange)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn:nth-child(4n+3){--ac:var(--b-teal)}:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn:nth-child(4n+4){--ac:var(--b-violet)}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn .kn{background:rgba(255,255,255,.25);color:#fff;border:0;border-radius:12px}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn.ok{outline:5px solid var(--ok);outline-offset:3px}:is(html[data-layout="scena"],html[data-layout="klasa"]) .tans .tbtn.bad{opacity:.5}
@media (max-width:760px){.trainer.with-vivi{grid-template-columns:1fr}.trainer.with-vivi .t-vivi{grid-column:1;grid-row:auto;grid-template-columns:72px 1fr;justify-items:start;align-items:center;position:static}.trainer.with-vivi .t-vivi .vivi{width:72px}.trainer.with-vivi .t-bub{order:0;text-align:left}.trainer.with-vivi :is(.tq,.tvis,.tans,.tfoot){grid-column:1}}

/* ====== wynik serii (wszystkie) ====== */
.result-scr .res-box{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(20px,3vw,44px);border-radius:28px;background:var(--surface);border:1px solid var(--line);margin-top:24px}
html[data-layout="uklad"] .result-scr .res-box{grid-template-columns:1fr}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .result-scr .res-box{background:color-mix(in srgb,var(--gold) 22%,var(--surface));border:0;box-shadow:0 6px 0 var(--lift)}
.result-scr .res-vivi .vivi{width:min(100%,220px);height:auto}
.result-scr .res-stars.big svg{width:clamp(52px,6vw,84px);height:auto}
.result-scr h1{font-size:clamp(30px,3.4vw,46px);margin:10px 0 6px}.result-scr .res-msg{font-size:19px;color:var(--muted);max-width:60ch;margin:0}
.result-scr .facts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 22px}.result-scr .fact{background:var(--surface-2);border-radius:16px;padding:10px 16px;font-weight:800}
@media (max-width:700px){.result-scr .res-box{grid-template-columns:1fr;text-align:center}.result-scr .facts,.result-scr .btns{justify-content:center}}

/* ====== lekcja w pięciu krokach (wszystkie) ====== */
.lsteps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;list-style:none;padding:0;margin:8px 0 20px}
.lsteps li{padding-top:10px;border-top:6px solid var(--surface-2);font-size:15px;font-weight:700;color:var(--muted)}.lsteps li.ok{border-color:var(--b-teal)}.lsteps li.now{border-color:var(--gold-deep);color:var(--ink)}
.lgrid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(14px,2vw,24px);align-items:start}
.lesson-page.panel{padding:clamp(18px,2.4vw,30px)}.lesson-page h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 10px}.lesson-page p,.lesson-page li{font-size:18px;max-width:62ch}.lesson-page .lead{font-size:20px}
.lesson-page .examples{display:grid;gap:10px;margin:14px 0}.lesson-page .example{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--surface-2)}
.lesson-page .playb{width:56px;height:56px;border-radius:50%;border:0;background:var(--b-violet);color:#fff;font-size:22px;cursor:pointer}
:is(html[data-layout="scena"],html[data-layout="klasa"]) .lesson-page .playb{box-shadow:0 4px 0 color-mix(in srgb,var(--b-violet) 60%,#000)}
.lesson-page .lnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.lesson-page .goal-list li{margin:6px 0}.lesson-page .goal-list.done li::marker{content:"✓  ";color:var(--b-teal)}
.lterms{display:grid;gap:10px;align-content:start}.lterms .lt-h{font-family:var(--font-display);font-size:18px}.lt-list{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}.lt-list li.on{color:var(--ink);font-weight:800}.lt-list li.ok{color:var(--b-teal)}
.lt-vivi{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;padding:12px;border-radius:20px;background:color-mix(in srgb,var(--gold) 22%,var(--surface))}.lt-vivi .vivi{width:80px;height:auto}.lt-vivi .bubble{margin:0;font-size:15px;font-weight:700}
@media (max-width:900px){.lgrid{grid-template-columns:1fr}.lsteps li{font-size:12px}}