:root{
 --bg:#0d0f18;--panel:#151927;--panel2:#1d2335;--text:#f8f9ff;--muted:#aeb6cf;
 --line:rgba(255,255,255,.11);--accent:#8f94ff;--gold:#ffd166;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#1b2140,#0a0c13 58%);color:var(--text);
font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
.modul{max-width:1200px;margin:auto;padding:24px}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid var(--line);border-radius:24px;
padding:28px;background:linear-gradient(135deg,rgba(143,148,255,.12),rgba(255,209,102,.08))}
.oznaka{font-size:12px;letter-spacing:.16em;color:#aeb4ff;font-weight:800}
h1{font-size:42px;margin:5px 0}.hero p{color:var(--muted)}
.xp{padding:11px 14px;border:1px solid var(--line);background:#111522;border-radius:14px;white-space:nowrap}
.zavihki{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.zavihki button,.kontrole button,.kartica button,.lekcija button,.izziv button{
border:1px solid var(--line);background:var(--panel);color:#fff;padding:10px 13px;border-radius:11px;cursor:pointer}
.zavihki button.aktiven{background:#40486f}.pogled{display:none}.pogled.aktiven{display:block}
.laboratorij{display:grid;grid-template-columns:270px 1fr;gap:16px}
.kontrole,.delovna-povrsina,.kartica,.lekcija,.izziv{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px}
.kontrole label{display:block;margin:0 0 17px;color:var(--muted)}
.kontrole input[type=color]{display:block;width:100%;height:52px;margin-top:7px;border:0;background:transparent}
.kontrole input[type=range],.kontrole select{width:100%;margin-top:7px}
.kontrole select{padding:9px;border-radius:9px;background:#0f1320;color:#fff;border:1px solid var(--line)}
.kontrole button{width:100%;margin-top:8px}
.paleta{display:grid;grid-template-columns:repeat(var(--stolpci,7),1fr);min-height:170px;border-radius:16px;overflow:hidden}
.barvni-korak{display:flex;align-items:end;justify-content:center;padding:9px 5px;min-width:45px}
.barvni-korak span{font-size:10px;background:rgba(0,0,0,.46);padding:4px 5px;border-radius:5px;color:#fff}
#graf{width:100%;height:250px;margin-top:14px;background:#0d111d;border-radius:14px;border:1px solid var(--line)}
.razlaga{margin-top:13px;color:var(--muted);line-height:1.5}
.mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lekcija p,.izziv p,.kartica p{color:var(--muted);line-height:1.55}.ikona{font-size:35px}
.odgovori{display:grid;gap:8px;margin-top:10px}.odgovori button{text-align:left}.status{margin-top:12px;color:var(--gold);font-weight:700}
@media(max-width:760px){.modul{padding:12px}.hero{flex-direction:column;align-items:flex-start;padding:20px}h1{font-size:32px}.laboratorij{grid-template-columns:1fr}.paleta{overflow:auto}.barvni-korak{min-height:105px}}