/* ===== Vivialto: trzy układy (data-layout: uklad, scena, klasa) ===== */
/* --- szerokość: stała na każdym ekranie --- */
html[data-layout="uklad"] .wrap,html[data-layout="uklad"] .wrap.wide{max-width:1120px}
html[data-layout="uklad"] #app>:not(.wrap){max-width:1120px;margin-inline:auto}
html[data-layout="scena"] .wrap,html[data-layout="scena"] .wrap.wide,html[data-layout="klasa"] .wrap,html[data-layout="klasa"] .wrap.wide{max-width:none;padding-inline:clamp(16px,3vw,44px)}
html[data-layout="scena"] #app>:not(.wrap),html[data-layout="klasa"] #app>:not(.wrap){max-width:none;margin-inline:0}
.rail{display:none}
@media (min-width:1080px){
  html[data-layout="scena"] #app,html[data-layout="klasa"] #app{margin-left:108px}
  html[data-layout="scena"] .rail,html[data-layout="klasa"] .rail{display:flex;flex-direction:column;align-items:center;gap:6px;position:fixed;left:0;top:0;bottom:0;width:108px;padding:14px 0;background:var(--surface);border-right:1px solid var(--line);z-index:20;overflow-y:auto}
  html[data-layout="scena"] .top .mainmenu,html[data-layout="klasa"] .top .mainmenu,html[data-layout="scena"] .top .logo,html[data-layout="klasa"] .top .logo{display:none}
  .more-m{display:none}
}
.rail-logo{width:64px;height:64px;margin-bottom:8px}.rail-logo .vivi{width:64px;height:64px}
.rail a,.rail button{width:88px;border:0;background:none;border-radius:20px;padding:8px 0 10px;display:grid;justify-items:center;gap:4px;font:700 13px var(--font-body,inherit);color:var(--muted);text-decoration:none;cursor:pointer}
.rail .bub{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;color:#fff;background:var(--c);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000)}.rail .bub svg{width:28px;height:28px}
.rail a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}.rail a:not([aria-current]) .bub{filter:saturate(.8)}
.mm-more{border:0;background:none;font:inherit;font-weight:700;color:var(--muted);padding:8px 12px;border-radius:999px;cursor:pointer}
html[data-layout="scena"] .nav a.on svg,html[data-layout="klasa"] .nav a.on svg{color:var(--c)}
.th-ic{font-size:22px;line-height:1}
/* --- siatka i karty --- */
.lh .g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:8px}
.lh .s4{grid-column:span 4}.lh .s5{grid-column:span 5}.lh .s7{grid-column:span 7}.lh .s8{grid-column:span 8}.lh .s12{grid-column:span 12}
.lh .col{display:grid;gap:clamp(14px,1.6vw,22px);align-content:start}
@media (max-width:980px){.lh .s4,.lh .s5,.lh .s7,.lh .s8{grid-column:span 12}}
.lh .lcard{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.lh .h-sm{font-size:20px;margin:0 0 12px}.lh .h-sec{font-size:24px;margin:18px 0 12px}.lh .mut{color:var(--muted)}.lh .sm{font-size:14px}
.lh .next-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.lh .next-card h2{font-size:clamp(22px,2.4vw,30px);margin:4px 0 0}
html[data-layout="uklad"] .lh .s8>.next-card{background:var(--surface);border:3px solid var(--gold);border-radius:24px;padding:22px}
.lh .btn.gold{background:var(--gold);color:#1d1745;box-shadow:inset 0 -4px 0 var(--gold-deep);border:0}.lh .btn.soft{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.lh .btn.sm{min-height:44px;padding:0 16px;font-size:16px}
/* --- plan dnia, cel --- */
.lh .plan{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lh .plan a{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface-2);color:var(--ink);text-decoration:none;min-height:44px}
.lh .plan .chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--line)}
.lh .goal{display:flex;gap:14px;align-items:center}
.lh .ring{--p:0;width:84px;height:84px;flex:none;border-radius:50%;background:conic-gradient(var(--b-teal) calc(var(--p)*1%),var(--surface-2) 0);display:grid;place-items:center}
.lh .ring span{width:66px;height:66px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:19px}
/* --- przedmioty (1.0) --- */
.lh .lsubj{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.lh .lsubj a{display:grid;gap:4px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:104px}
.lh .lsubj b{font-family:var(--font-display);font-size:17px}.lh .lsubj small{color:var(--muted);font-size:14px}.lh .dot{width:12px;height:12px;border-radius:50%;display:inline-block}
/* --- ścieżka na pięciolinii (1.0, 3.0) --- */
.lh .staffpath{width:100%;height:auto;display:block}.lh .staffpath .ln{stroke:var(--muted);stroke-width:1.6;opacity:.5}
.lh .staffpath .done{fill:var(--b-teal)}.lh .staffpath .open{fill:var(--surface);stroke:var(--b-violet);stroke-width:3}.lh .staffpath .lock{fill:none;stroke:var(--line);stroke-width:3;stroke-dasharray:5 4}
.lh .staffpath .cur{fill:var(--gold);stroke:var(--gold-deep);stroke-width:3}.lh .staffpath .halo{fill:none;stroke:var(--gold);stroke-width:4;opacity:.6}
.lh .staffpath text{font-size:15px;fill:var(--muted);font-weight:700}.lh .staffpath .lc{fill:var(--ink);font-weight:800}.lh .staffpath .bar2{stroke:var(--ink);stroke-width:2}.lh .staffpath .bar3{stroke:var(--ink);stroke-width:6}
.lh .pathbox{padding:20px}
/* --- mapa (2.0) --- */
.lh .map{border-radius:28px;background:var(--surface-2);padding:clamp(12px,2vw,24px)}.lh .mappath{width:100%;height:auto;display:block}
.lh .road{fill:none;stroke:var(--surface);stroke-width:34;stroke-linecap:round}.lh .road2{fill:none;stroke:var(--line);stroke-width:4;stroke-dasharray:2 14;stroke-linecap:round}
.lh .st-done circle{fill:var(--b-teal);stroke:#fff;stroke-width:5}.lh .st-cur circle{fill:var(--gold);stroke:#fff;stroke-width:6}.lh .st-open circle{fill:var(--surface);stroke:var(--b-violet);stroke-width:5}.lh .st-lock circle{fill:var(--surface-2);stroke:var(--line);stroke-width:5}
.lh .ststar{fill:#fff;font-size:20px}.lh .tsm{font-size:17px;fill:var(--ink);font-weight:700}.lh .trophy{fill:var(--gold);stroke:#fff;stroke-width:6}
.lh .station{display:grid;gap:10px;align-content:start}.lh .station h2{font-size:24px}.lh .station p{margin:0}
/* --- plansze (2.0, 3.0) --- */
.lh .ltiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:clamp(14px,1.6vw,22px)}.lh .ltiles.sm{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.lh .ltile{position:relative;border-radius:26px;padding:18px 18px 16px;background:var(--c);color:#fff;box-shadow:0 7px 0 color-mix(in srgb,var(--c) 62%,#000);display:grid;gap:8px;min-height:220px;overflow:hidden;text-decoration:none;transition:transform .12s}
.lh .ltiles.sm .ltile{min-height:180px;padding:14px}
.lh .ltile:hover{transform:translateY(-3px)}.lh .ltile:active{transform:translateY(4px);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 62%,#000)}
.lh .ltile::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14)}
.lh .ltile .art{width:80px;height:80px;position:relative;z-index:1}.lh .ltiles.sm .ltile .art{width:60px;height:60px}
.lh .ltile b{font-family:var(--font-display);font-size:21px;line-height:1.1}.lh .ltiles.sm .ltile b{font-size:18px}
.lh .ltile .meta{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}.lh .ltile .lvl{background:rgba(255,255,255,.25);padding:4px 10px;border-radius:999px}
.lh .ltile .bar{width:auto;height:10px;border-radius:999px;background:rgba(0,0,0,.18);overflow:hidden;display:block}.lh .ltile .bar i{display:block;height:100%;background:#fff;border-radius:999px}
.lh .ltile .st{color:#FFE7A3;letter-spacing:2px}.lh .ltile .st i{font-style:normal;color:rgba(255,255,255,.4)}
@media (max-width:600px){.lh .ltiles,.lh .ltiles.sm{grid-template-columns:1fr 1fr}.lh .ltile{min-height:170px}.lh .ltile b{font-size:17px}.lh .ltile .art{width:56px;height:56px}}
/* --- scena z Vivi i pianinkiem --- */
.lh .stage{position:relative;border-radius:32px;background:color-mix(in srgb,var(--gold) 22%,var(--surface));padding:clamp(18px,2.4vw,30px);display:grid;grid-template-columns:minmax(170px,.75fr) minmax(300px,1.5fr) minmax(260px,1fr);gap:clamp(16px,2vw,30px);align-items:center;margin-top:8px}
.lh .mini-stage{border-radius:24px;background:color-mix(in srgb,var(--gold) 22%,var(--surface));padding:16px;display:grid;gap:10px}
.lh .vivi-wrap{display:grid;justify-items:center;gap:10px}.lh .mini-stage .vivi-wrap{grid-template-columns:96px 1fr;justify-items:start;align-items:center}
.lh .stage .vivi{width:min(100%,180px);height:auto}.lh .mini-stage .vivi{width:96px;height:auto;order:-1}
.lh .bubble{background:var(--surface);border-radius:20px;padding:12px 16px;font-weight:700;font-size:17px;box-shadow:var(--shadow)}
.lh .piano-box{display:grid;gap:10px}.lh .staffcard{background:#fffdf8;color:#221a4f;border-radius:18px;padding:6px 16px;display:grid;grid-template-columns:1fr auto;align-items:center}
.lh .staffcard svg{width:100%;max-width:240px;height:auto}.lh .staffcard b{font-family:var(--font-display);font-size:42px;min-width:1.4em;text-align:center}
.lh .mini-stage .staffcard{display:none}
.lh .mission{background:var(--surface);border-radius:22px;padding:18px;display:grid;gap:12px;box-shadow:var(--shadow)}.lh .mission h2{font-size:21px}
.lh .mission ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}.lh .mission a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-weight:700;min-height:44px}
.lh .mission .mi{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--c)}.lh .mission .mi .ico,.lh .gi .ico{width:28px;height:28px}
@media (max-width:980px){.lh .stage{grid-template-columns:1fr}.lh .stage .vivi-wrap{grid-template-columns:110px 1fr;justify-items:start;align-items:center}.lh .stage .vivi{width:110px;order:-1}}
/* --- 3.0: od nauczyciela, tydzień, pulpit --- */
.lh .teacher{border-left:8px solid var(--b-blue)}
.lh .asg{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}.lh .asg li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:18px;border:1px solid var(--line)}
.lh .gi{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--c)}
.lh .week{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.lh .day{border-radius:16px;padding:12px;background:var(--surface-2);display:grid;gap:4px}.lh .day.today{outline:3px solid var(--gold)}
.lh .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}.lh .kpi{border-radius:22px;padding:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}.lh .kpi b{display:block;font-family:var(--font-display);font-size:32px}.lh .kpi span{color:var(--muted);font-weight:700}
.lh .insight{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--b-orange) 14%,var(--surface));border:2px solid color-mix(in srgb,var(--b-orange) 55%,transparent)}.lh .insight .big{font-size:30px}
.lh .sched{list-style:none;margin:0;padding:0;display:grid;gap:10px}.lh .sched li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:18px;background:var(--surface-2)}
.lh .face{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:var(--c)}
@media (max-width:700px){.lh .week{grid-template-columns:1fr 1fr}.lh .kpis{grid-template-columns:1fr 1fr}.lh .insight{grid-template-columns:auto 1fr}.lh .insight .btn{grid-column:1/-1}.lh .asg li{grid-template-columns:48px 1fr}.lh .asg li .btn{grid-column:2;justify-self:start}.lh .next-card{grid-template-columns:1fr}}
/* jednakowe marginesy boczne każdego ekranu (lekcje, trenażery, gry, narzędzia) */
html[data-layout="uklad"] #app>*{box-sizing:border-box;padding-left:18px;padding-right:18px}
html[data-layout="scena"] #app>*,html[data-layout="klasa"] #app>*{box-sizing:border-box;padding-left:clamp(16px,3vw,44px);padding-right:clamp(16px,3vw,44px)}
/* nagłówek na wąskich ekranach */
@media (max-width:600px){.top{gap:6px}.top .logo span{display:none}.top .code-btn span{display:none}.top .icon-btn,.top .code-btn{width:40px;height:40px;min-width:40px;padding:0}.top .lang-sel select{min-width:50px;padding:0 6px;height:40px}}
.lh .lsec{margin-top:28px}.lh .sec-h{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;flex-wrap:wrap}.lh .sec-h h2{font-size:24px;margin:0}.lh .sec-h span{color:var(--muted)}
@media (min-width:1080px){html[data-layout="scena"] .top,html[data-layout="klasa"] .top{justify-content:flex-end}}
/* --- 3.0: Moja klasa, program roku, pytania, ogłoszenia --- */
.lh .classhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.lh .classhead .btn{margin-left:auto}
.lh .units{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.lh .unit{border-radius:22px;padding:16px;border:1px solid var(--line);background:var(--surface);display:grid;gap:8px;align-content:start}
.lh .unit .mo{font-size:13px;font-weight:800;color:var(--muted);text-transform:none}.lh .unit b{font-family:var(--font-display);font-size:18px}
.lh .unit.now{outline:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.lh .pbar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}.lh .pbar i{display:block;height:100%;background:var(--b-teal);border-radius:999px}
.lh .qs,.lh .posts{list-style:none;margin:0;padding:0;display:grid;gap:10px}.lh .qa{display:grid;gap:8px;padding:12px;border-radius:16px;background:var(--surface-2)}
.lh .ans-t{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--b-teal) 16%,var(--surface))}.lh .ans-f{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.lh textarea{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px;font:inherit}
.lh .posts li{position:relative;padding:10px 44px 10px 12px;border-radius:14px;background:var(--surface-2)}.lh .posts p{margin:4px 0 0}.lh .posts .icon-btn{position:absolute;right:6px;top:6px}
.lh .prog-ctl{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:12px}.lh .prog-ctl label{display:grid;gap:4px;font-weight:700;font-size:14px}
.lh .prog-ctl select,.lh .uedit select,.lh .uedit input{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 10px;font:inherit}
.lh .uedit{display:grid;gap:8px;padding-left:22px;margin:0 0 14px}.lh .uedit li{display:grid;grid-template-columns:1fr 150px 160px 44px;gap:8px;align-items:center}
.lh .tmsg{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.ask-t{white-space:nowrap}
@media (max-width:700px){.lh .uedit li{grid-template-columns:1fr 1fr}.lh .uedit li input:first-child{grid-column:1/-1}.lh .ans-f{grid-template-columns:1fr}.trainer .g-top{row-gap:6px}.trainer .g-top .ask-t{grid-column:1/-1;justify-self:start;min-height:40px}}