/* Tokeny a reset su v assets/base.css — nacitava sa pred tymto suborom. */
/* ---- ikony --------------------------------------------------------------
   Jednofarebne ciarove ikony zo sady Tabler, vlozene ako sprite v stranke.
   Dedia farbu textu, takze sa o ne netreba starat pri prepinani motivu
   ani pri farbe odboru. */
.ico{width:1.25em;height:1.25em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}
.navitem .nico{display:inline-flex;color:var(--mut);margin-right:2px}
.navitem.on .nico{color:var(--track)}
.play .ico{width:22px;height:22px;stroke-width:2.2}
.card.fraza .play .ico{width:19px;height:19px}
.ibtn .ico{width:19px;height:19px}
.tbtn .ico{width:19px;height:19px}
.burger .ico{width:22px;height:22px}
header{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:30;background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--line);padding:14px 20px 12px;padding-top:max(14px,env(safe-area-inset-top))}
.hrow{display:flex;align-items:center;gap:12px}
.burger,.tbtn{display:none;background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:10px;width:var(--tap);height:var(--tap);font-size:17px;cursor:pointer;flex:0 0 auto}
/* Prepinac motivu ma tri stavy, takze nesie aj nazov — samotna ikona
   by nepovedala, ci je zapnute "podla systemu". Sirka je auto, vyska --tap. */
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-left:auto;width:auto;min-width:var(--tap);min-height:var(--tap);height:auto;padding:0 13px;font-family:inherit;font-size:13px;color:var(--ink2)}
.tbtn .tlabel{white-space:nowrap}
@media(max-width:560px){.tbtn .tlabel{display:none}.tbtn{padding:0;width:var(--tap)}}
.burger{display:none}
.logo{display:flex;align-items:center;gap:11px;min-width:0}
/* Znacka. Ziadny podklad ani prechod — matica z dvoch polovic je logo sama
   o sebe a jantarovy stvorec by s jej modrou polovicou bojoval. */
.spark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--ink)}
/* 44 px, nie 32. Diera v matici ma polomer 12 z mriezky 96 — pri 32 px z nej
   ostane 8 px a zlepi sa so skarou medzi polovicami, takze znak sa cita ako
   zalozka, nie ako matica. Az od ~40 px sa diera oddeli a znak dava zmysel. */
.spark .ico{width:44px;height:44px;stroke:none;fill:none}
@media(max-width:560px){.spark .ico{width:38px;height:38px}}
.logo h1{font-size:15px;letter-spacing:.16em;text-transform:uppercase;margin:0;font-weight:700;white-space:nowrap}
.logo .tag{font-family:var(--font-mono);color:var(--mut);font-size:11px;white-space:nowrap}
/* Pruh pod hlavickou nesie AKTIVNY ODBOR. Predtym to bola duha L/N/PE, teda
   farby vodicov — pre elektrikara to zmysel malo, pre opatrovatelku nie. */
.wires{display:flex;height:4px;border-radius:4px;overflow:hidden;margin:12px 0}
.wires i{flex:1;background:var(--track)}
.wires .b{opacity:.66}
.wires .c{opacity:.36}
.controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:150px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--mut);pointer-events:none}
input[type=search]{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px 10px 34px;font-size:14px;font-family:inherit;outline:none}
input[type=search]:focus{border-color:var(--signal);box-shadow:0 0 0 3px var(--ring-signal)}
.speed,.vbox{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden;flex:0 0 auto}
.speed button{background:var(--panel);border:0;color:var(--ink2);padding:0 14px;min-height:var(--tap);cursor:pointer;font-family:var(--font-mono);font-size:13px}
.speed button.on{background:var(--track);color:var(--track-ink);font-weight:600}
.vbox select{background:var(--panel);border:0;color:var(--ink2);padding:0 10px;font-family:inherit;font-size:12px;outline:none;max-width:150px}
aside{position:fixed;top:var(--hh);left:0;bottom:0;width:var(--sbw);overflow-y:auto;background:var(--bg2);border-right:1px solid var(--line);padding:8px 0 40px;z-index:20}
.grp{display:flex;align-items:center;gap:8px;padding:16px 18px 6px}
.grp .rn{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--accent-text);background:var(--tint-signal-3);border:1px solid var(--edge-signal);border-radius:5px;padding:1px 6px}
.grp .gl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);font-weight:600}
.navitem{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;color:var(--ink2);padding:11px 16px 11px 16px;font-size:var(--fs-ui);cursor:pointer;font-family:inherit;line-height:1.35;min-height:var(--tap)}
.navitem:hover{color:var(--ink);background:var(--panel2)}
.navitem.on{color:var(--ink);background:linear-gradient(90deg,var(--track-tint),transparent);border-left-color:var(--track);font-weight:600}
.navitem>span:first-of-type{flex:1;min-width:0}
.navitem .nn{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);flex:0 0 auto;margin-left:auto}
.navitem.on .nn{color:var(--accent-text)}
.navitem .due{background:var(--badge-bg);color:var(--badge-ink);border-radius:11px;padding:1px 8px;font-size:12px;font-weight:600;margin-left:auto}
.special{margin:6px 10px 2px;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.special .navitem{border-left:0;padding:11px 14px}
.special .navitem.on{background:var(--track-tint)}
main{margin-left:var(--sbw);padding:calc(var(--hh) + 22px) 22px 100px;max-width:940px}
.chead .code{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--track-ink);background:var(--track);border-radius:7px;padding:3px 9px;margin-bottom:10px}
.chead h2{font-size:var(--fs-h2);font-weight:600;margin:0;letter-spacing:-.015em;line-height:1.2}
.chead .meta{color:var(--mut);font-size:13px;margin-top:7px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.playall{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:0 16px;min-height:var(--tap);font-size:14px;font-family:inherit;cursor:pointer}
.playall:hover{border-color:var(--signal);color:var(--accent-text)}.playall.on{background:var(--PE);color:var(--pe-ink);border-color:var(--PE)}
.diagram{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:14px 0}
.diagram svg{width:100%;height:auto;max-width:480px;display:block;margin:0 auto}
.diagram .dtitle{font-family:var(--font-mono);font-size:11px;color:var(--mut);margin-bottom:8px;letter-spacing:.04em;text-transform:uppercase}
.prog{display:flex;align-items:center;gap:9px;margin:12px 0 2px;max-width:460px}
.prog .track{flex:1;height:10px;background:var(--panel2);border-radius:6px;overflow:hidden}
.prog .bar{height:100%;background:var(--track);width:0;transition:width .3s}
.prog .lbl{font-family:var(--font-mono);font-size:13px;color:var(--ink2);flex:0 0 auto}
.chips{display:flex;gap:7px;margin:14px 0 2px;flex-wrap:wrap}
.chips button{background:var(--panel);border:1px solid var(--line2);color:var(--ink2);border-radius:22px;padding:0 16px;min-height:var(--tap);font-size:14px;font-family:inherit;cursor:pointer}
.chips button.on{background:var(--track);color:var(--track-ink);border-color:var(--track);font-weight:600}
.headwire{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--L),var(--N),var(--PE));margin:14px 0 6px;max-width:420px;opacity:.85}
.sec{font-family:var(--font-mono);font-size:13px;color:var(--accent-text);margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
/* Jednostranny ram so zaoblenim vyzera rozbito — na strane pruhu sa nezaobluje.
   Pruh je hrubsi (4 px), aby bol citatelny aj cez rukavicu a na slnku. */
.card{display:grid;grid-template-columns:1fr auto;gap:3px 16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line-dim);border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin:10px 0;transition:border-color .12s,opacity .12s;outline:none}
.card:hover{border-color:var(--line2)}.card:focus-visible{border-color:var(--signal);box-shadow:0 0 0 2px var(--edge-signal)}
/* Pruh nesie ROLU HOVORIACEHO, nie typ hesla. Nadvazuje na farby vodicov,
   ktore stranka odboru vysvetluje:
     slovnik            farba odboru
     2,5) co povies ty  hneda (L)
     3) co ti povedia   zelena
     4) na co sa spytaju zelenozlta (PE)
     6) ked nerozumies  zelenozlta zvyraznena
   Sekcie bez cisla (bezpecnostne frazy, dialogy) ostavaju neutralne — zadanie
   im rolu neurcilo a vymyslat si ju by bolo horsie nez ju nemat. */
.card{border-left-color:var(--track)}
.card[data-role="2"],.card[data-role="5"]{border-left-color:var(--L)}
.card[data-role="3"]{border-left-color:var(--ok)}
.card[data-role="4"]{border-left-color:var(--PE)}
.card[data-role="6"]{border-left-color:var(--PE);border-left-width:6px}
.card[data-role="7"],.card[data-role="8"],.card[data-role="9"]{border-left-color:var(--line-dim)}
.card.learned{opacity:.55}.card.learned:hover,.card.learned:focus-visible{opacity:1}
/* Pojem je kratky, znesie 21 px. Fraza je dlha veta — pri 21 px by sa na
   telefone lamala do styroch riadkov, preto 18 px. */
.de{grid-column:1;font-family:var(--font-mono);font-weight:500;font-size:var(--fs-de);color:var(--ink);word-break:break-word;line-height:1.35}
.card.fraza .de{font-size:var(--fs-de-phrase)}
/* Fonetika nesie farbu odboru, nie sivu. Je to vec, ktoru si clovek naozaj
   potrebuje precitat — predtym bola najmensia aj najsvetlejsia naraz. */
.pron{grid-column:1;font-family:var(--font-mono);font-size:var(--fs-pron);color:var(--track);margin-top:4px}
.sk{grid-column:1;color:var(--ink);font-size:var(--fs-sk);margin-top:3px;line-height:1.4}
.card.fraza .sk{font-size:var(--fs-sk-phrase);color:var(--ink2)}
.note{color:var(--mut);font-size:var(--fs-note);font-style:italic;margin-top:2px}
.actions{grid-column:2;grid-row:1/5;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px}
/* Prehravanie je HLAVNA AKCIA karty: vyplnene koliesko vo farbe odboru.
   Pri pojme 56 px, pri fraze 48 px s obrysom — fraza sa pocuva menej casto
   a nema prekryt kratke heslo vedla nej. */
.play{width:56px;height:56px;border-radius:50%;background:var(--track);border:2px solid var(--track);color:var(--track-ink);cursor:pointer;font-size:19px;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .12s;flex:0 0 auto}
.card.fraza .play{width:48px;height:48px;background:transparent;color:var(--track);font-size:16px}
.play:hover{transform:scale(1.06)}
.card.fraza .play:hover{background:var(--track);color:var(--track-ink)}
.play:focus-visible{outline:3px solid var(--track);outline-offset:3px}
/* Pocas prehravania: pulzujuci prstenec a pauza namiesto sipky. */
.play.speaking{background:var(--PE);color:var(--pe-ink);border-color:var(--PE);animation:pulse 1s infinite}
.play.speaking::after{content:"\2759\2759";letter-spacing:1px}
.play.speaking{font-size:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow-pe)}50%{box-shadow:0 0 0 7px var(--glow-pe-out)}}
.iconrow{display:flex;gap:8px}
/* Vedlajsie akcie: viditelne 36 px, ale dotykovy ciel 44 px cez ::before.
   Zadanie chce oboje — 36 px vzhlad aj 44 px minimum. */
.ibtn{position:relative;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid var(--line2);color:var(--mut);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.ibtn::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap)}
.ibtn:hover{color:var(--ink);background:var(--panel2)}
.ibtn.star.on{color:var(--accent-text);border-color:var(--signal);background:var(--tint-signal)}
.ibtn.check.on{color:var(--pe-text);border-color:var(--PE);background:var(--tint-pe)}
.ibtn.copied{color:var(--pe-text);border-color:var(--PE)}
.srchlabel{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--dim);margin:6px 0 2px}
.count{color:var(--mut);font-size:12.5px;font-family:var(--font-mono);margin-bottom:6px}
.empty{color:var(--mut);text-align:center;padding:60px 0;font-family:var(--font-mono);line-height:1.7}
.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);font-size:12px;padding:9px 11px;border-radius:9px;margin:10px 0 0}
.khint{color:var(--dim);font-size:11px;font-family:var(--font-mono);margin-top:18px}.khint b{color:var(--mut);font-weight:600}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.stat .big{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--accent-text);line-height:1.1}
.stat .lab{color:var(--mut);font-size:12px;margin-top:5px}
.stat.g .big{color:var(--pe-text)}.stat.b .big{color:var(--n-text)}
.namebox{display:flex;gap:9px;align-items:center;margin:6px 0 4px;max-width:420px}
input.text{background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;width:100%}
input.text:focus{border-color:var(--signal);box-shadow:0 0 0 3px var(--ring-signal)}
.goalbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;margin:8px 0 4px}
.goalbox .gt{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:13px;color:var(--ink2)}
.goalbox .gt b{color:var(--accent-text);font-family:var(--font-mono)}
.goalbox input{width:64px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:7px;padding:5px 8px;font-family:var(--font-mono);text-align:center}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.badge{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--mut)}
.badge.on{border-color:var(--signal);color:var(--ink);background:var(--tint-signal)}
.secrow{display:grid;grid-template-columns:130px 1fr 54px;gap:10px;align-items:center;margin:7px 0;font-size:13px}
.secrow .snm{color:var(--ink2);font-family:var(--font-mono);font-size:12px}
.secrow .track{height:7px;background:var(--panel2);border-radius:5px;overflow:hidden}
.secrow .bar{height:100%;background:linear-gradient(90deg,var(--PE),var(--pe-bright))}
.secrow .pc{color:var(--mut);font-family:var(--font-mono);font-size:11.5px;text-align:right}
.btn{background:var(--signal);color:var(--signalink);border:0;border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink2);font-weight:500}
.btn.ghost:hover{border-color:var(--signal);color:var(--accent-text)}
.btn.danger{background:transparent;border:1px solid var(--danger-line);color:var(--bad-text)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hist{margin-top:10px}
.histrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink2);font-family:var(--font-mono)}
.histrow .sc{color:var(--accent-text)}
.selrow{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.sel{display:flex;flex-direction:column;gap:5px}
.sel label{font-size:11px;color:var(--mut);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.sel select{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;outline:none}
.qtop{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
.qbar{flex:1;height:7px;background:var(--panel2);border-radius:5px;overflow:hidden}.qbar .b{height:100%;background:var(--signal);transition:width .25s}
.qnum{font-family:var(--font-mono);font-size:12px;color:var(--mut)}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;text-align:center;margin-bottom:16px}
.qprompt{font-size:20px;font-weight:600;line-height:1.4}
.qprompt.de{font-family:var(--font-mono);color:var(--ink)}
.qsub{color:var(--mut);font-size:12px;margin-top:8px;font-family:var(--font-mono)}
.qplay{margin:6px auto 0;width:56px;height:56px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);color:var(--accent-text);font-size:20px;cursor:pointer}
.qplay:hover{background:var(--signal);color:var(--signalink)}
.opts{display:grid;gap:10px}
.opt{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:14px 16px;font-size:15px;font-family:var(--font-mono);text-align:left;cursor:pointer;transition:.1s}
.opt:hover{border-color:var(--signal)}
.opt.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-ink)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-ink)}
.opt:disabled{cursor:default}
.answerbox{display:flex;gap:9px;margin-top:4px}
.answerbox input{flex:1;background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:14px 16px;font-family:var(--font-mono);font-size:15px;outline:none}
.answerbox input:focus{border-color:var(--signal)}
.fb{margin-top:12px;padding:12px 14px;border-radius:11px;font-size:14px}
.fb.ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok-ink)}
.fb.no{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad-ink)}
.fb .corr{font-family:var(--font-mono);color:var(--ink);font-weight:600}
.result{text-align:center;padding:14px 0}
.result .score{font-family:var(--font-mono);font-size:52px;font-weight:600;color:var(--accent-text)}
.result .pct{color:var(--mut);font-family:var(--font-mono);margin-top:2px}.result .msg{font-size:16px;margin:12px 0 4px}
.miss{margin-top:18px;text-align:left}
.missrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.missrow .d{font-family:var(--font-mono);color:var(--ink)}.missrow .s{color:var(--mut)}
/* SRS flashcard */
.flash{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px 22px;text-align:center;margin:8px 0 14px;min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.flash .front{font-size:22px;font-weight:600;line-height:1.4}
.flash .front.de{font-family:var(--font-mono)}
.flash .back{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);width:100%}
.flash .bde{font-family:var(--font-mono);font-size:24px;font-weight:500;color:var(--ink)}
.flash .bpron{font-family:var(--font-mono);font-size:var(--fs-pron);color:var(--track);margin-top:6px}
.flash .bsk{color:var(--ink);margin-top:8px;font-size:var(--fs-sk)}
.rate{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.rate button{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:10px;padding:11px 6px;font-size:12.5px;font-family:inherit;cursor:pointer;line-height:1.3}
.rate button small{display:block;color:var(--dim);font-family:var(--font-mono);font-size:10px;margin-top:2px}
.rate button.again:hover{border-color:var(--bad);color:var(--bad-text)}
.rate button.hard:hover{border-color:var(--signal-dark);color:var(--signal-dark)}
.rate button.good:hover{border-color:var(--ok);color:var(--ok-text)}
.rate button.easy:hover{border-color:var(--N);color:var(--n-text)}
/* grammar */
.gcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:12px 0}
.gcard h3{margin:0 0 8px;font-size:16px;color:var(--ink)}
.gcard p{margin:6px 0;color:var(--ink2);font-size:13.5px}
.gcard .ex{font-family:var(--font-mono);font-size:13px;color:var(--ink);background:var(--panel2);border-radius:7px;padding:8px 10px;margin:7px 0}
.gcard .ex b{color:var(--accent-text)}
.gtable{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.gtable th,.gtable td{border:1px solid var(--line);padding:7px 9px;text-align:left}
.gtable th{color:var(--mut);font-weight:600;font-family:var(--font-mono);font-size:11.5px}
.gtable td{color:var(--ink2);font-family:var(--font-mono)}
.scrim{display:none}
footer{margin-left:var(--sbw);padding:22px;color:var(--dim);font-size:11px;font-family:var(--font-mono);text-align:center}
@media(max-width:960px){:root{--hh:150px}.burger{display:flex;align-items:center;justify-content:center}
 aside{width:min(86vw,340px);transform:translateX(-102%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:0 0 50px var(--scrim-strong);border-right:1px solid var(--line2)}
 body.nav aside{transform:translateX(0)}main,footer{margin-left:0}
 .scrim{display:block;position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:.24s;z-index:15}
 body.nav .scrim{opacity:.55;pointer-events:auto}}
@media(max-width:560px){main{padding-left:16px;padding-right:16px}.chead h2{font-size:23px}.khint{display:none}.secrow{grid-template-columns:96px 1fr 48px}.rate{grid-template-columns:repeat(2,1fr)}}
@media print{
 header,aside,footer,.scrim,.actions,.chips,.playall,.khint,.headwire{display:none!important}
 main{margin:0;padding:0;max-width:none}
 body{background:var(--print-bg);color:var(--print-ink)}
 .card{break-inside:avoid;border:1px solid var(--print-line);box-shadow:none;page-break-inside:avoid}
 .de{color:var(--print-ink)}.sk{color:var(--print-ink2)}.pron{color:var(--print-mut)}.sec{color:var(--print-ink);border-color:var(--print-line2)}
 .chead .code{background:var(--print-ink);color:var(--print-bg)}.chead h2{color:var(--print-ink)}
 .diagram{border:1px solid var(--print-line)}
}

/* ---- osobny plan v bocnom paneli ---------------------------------------- */
.segmented{display:flex;gap:3px;margin:10px 10px 4px;padding:3px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px}
.segmented button{flex:1;background:transparent;border:0;border-radius:7px;color:var(--ink2);padding:0 8px;min-height:var(--tap);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.segmented button.on{background:var(--track);color:var(--track-ink)}
.navhint{display:block;margin:10px 10px 4px;padding:11px 13px;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--signal);border-radius:10px;text-decoration:none}
.navhint strong{display:block;color:var(--ink);font-size:13px;font-weight:600}
.navhint span{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.grp.phase{justify-content:flex-start}
.grp.phase .wk{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
/* Hotova kapitola: zretelna fajka v kruhu, nie len stlmenie. Je to jedina
   spatna vazba o postupe, ktoru clovek v paneli vidi. */
.navitem .tick{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--ok);color:var(--pe-ink);font-size:12px;font-weight:700;margin-right:8px;flex:0 0 auto}
.navitem.done{color:var(--mut)}
.navitem.done:not(.on) span:first-child{text-decoration:line-through;text-decoration-color:var(--line2)}
.navfoot{padding:14px 18px 4px;font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.offplan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--signal);border-radius:var(--radius);padding:10px 13px;margin:0 0 14px;font-size:13px;color:var(--ink2)}
.btnlink{background:none;border:0;padding:0;color:var(--accent-text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline}

/* ---- pas pokroku planu -------------------------------------------------- */
.planbar{position:sticky;top:calc(var(--hh) - 8px);z-index:10;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:12px 14px;margin:0 0 18px}
/* Hlavicka je fixna a pas pokroku lepiaci, takze oba prekryvaju vrch obsahu.
   Appka si vlastne rolovanie centruje (scrollIntoView block:'center'), ale
   prehliadac to nerobi — ked sa clovek dostane na kartu tabulatorom alebo
   cez odkaz s kotvou, karta skonci pod hlavickou. scroll-margin-top mu povie,
   kde je skutocny vrch. Hodnota s pasom je vacsia, lebo pas je vysoky ~76 px. */
main{--stick:calc(var(--hh) + 22px)}
main:has(#planbar){--stick:calc(var(--hh) + 104px)}
.chead,.card,main details,main [id]{scroll-margin-top:var(--stick)}
.planbar.doneall{border-color:var(--PE)}
.pbtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pbphase{font-size:16px;font-weight:600;color:var(--ink)}
.pbcount{font-family:var(--font-mono);font-size:12px;color:var(--mut);margin-left:auto}
.pbgo{background:var(--track);color:var(--track-ink);border:0;border-radius:10px;padding:0 16px;min-height:var(--tap);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;flex:0 0 auto}
.pbghost{background:transparent;color:var(--ink2);border:1px solid var(--line2);border-radius:9px;padding:9px 14px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;min-height:40px}
.pbrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.pbtrack{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-top:12px}
.pbfill{height:100%;background:var(--track);transition:width .3s}
@media (prefers-reduced-motion:reduce){.pbfill{transition:none}}
@media(max-width:560px){
 .pbcount{margin-left:0;width:100%;order:3}
 .pbgo{margin-left:auto}
 .planbar{padding:11px 12px;margin-bottom:14px}
}

/* ---- gramaticka os ------------------------------------------------------ */
.gcard.axis{padding:18px}
.gcard.axis.pending{opacity:.9;border-style:dashed}
.ghead{display:grid;grid-template-columns:30px 1fr;gap:4px 13px;align-items:start;margin-bottom:10px}
.gnum{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);color:var(--accent-text);font-family:var(--font-mono);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.ghead h3{margin:0;font-size:17px}
.glead{color:var(--mut);font-size:13px;margin-top:2px}
.gtags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.gtags:empty{display:none}
.gtag{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px;white-space:nowrap}
.gtag.now{background:var(--tint-signal-2);color:var(--accent-text);border:1px solid var(--glow-signal)}
.gtag.soon{background:var(--panel2);color:var(--mut);border:1px solid var(--line2)}
.gsub{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
.glines{display:grid;gap:7px}
.gline{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.gline>div{flex:1;min-width:0}
.gde{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--ink);line-height:1.35;word-break:break-word}
.gsk{color:var(--mut);font-size:12.5px;margin-top:2px}
.gline .play{width:36px;height:36px;font-size:12px}
.gnote{background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--signal);border-radius:10px;padding:11px 13px;color:var(--ink2);font-size:13px;margin-top:14px}
.gdrill{margin-top:16px}
.gqnum{font-family:var(--font-mono);font-size:11.5px;color:var(--mut);margin-bottom:8px}
.gprompt{font-size:16px;font-weight:600;margin-bottom:12px}
.gopts{display:grid;gap:8px}
.gopt{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:10px;padding:12px 14px;font-family:var(--font-mono);font-size:13.5px;text-align:left;cursor:pointer;min-height:46px}
.gopt.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-ink)}
.gopt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad-ink)}
.gopt:disabled{cursor:default}
.gresult{font-size:16px;margin-bottom:12px}
.gresult b{font-family:var(--font-mono);font-size:22px;color:var(--accent-text)}
.gcard.basics summary{cursor:pointer;font-size:15px;font-weight:600;padding:2px 0;list-style:none}
.gcard.basics summary::-webkit-details-marker{display:none}
.gcard.basics summary::before{content:"+ ";font-family:var(--font-mono);color:var(--accent-text)}
.gcard.basics[open] summary::before{content:"− "}
@media (hover:hover) and (pointer:fine){.gopt:hover:not(:disabled){border-color:var(--signal)}}

/* Odbor je zvoleny, ale este nema vlastny obsah. */
.planned{margin:14px 16px 6px;padding:11px 13px;border-radius:10px;
  background:var(--track-tint);border:1px solid var(--line2);
  color:var(--ink2);font-size:13.5px;line-height:1.45}

/* ---- paticka appky ------------------------------------------------------
   Z appky sa predtym nedalo dostat na web — ani k podmienkam, ani ku kontaktu.
   Az spustime platby, clovek narazi na zamknutu kapitolu a nebude mat kam ist. */
footer .flinks{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:10px}
footer .flinks a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2);
  padding:4px 0;font-family:var(--font-sans);font-size:13px}
footer .flinks a:hover{color:var(--track);border-bottom-color:var(--track)}
footer .fnote{margin:0;max-width:62ch;margin-inline:auto;line-height:1.5}
.logo{text-decoration:none;color:inherit}
.logo:hover h1{color:var(--track)}
.logo:focus-visible{outline:2px solid var(--track);outline-offset:4px;border-radius:8px}

/* Výzva na aktualizáciu, keď je balík starší, než server podporuje.
   V natívnej appke to znamená preinštalovať — obsah je zapečený v balíku. */
.updbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);
  border-radius:var(--radius);padding:14px 16px;font-size:14px;
  box-shadow:0 10px 30px var(--shadow-deep);max-width:640px;margin-inline:auto}
.updbar .btn{margin-left:auto}

/* Stav zaplateného prístupu v profile. */
.pristup{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:12px 14px;margin:10px 0}
.pristup .pnadpis{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pristup .pkedy{font-size:13px;color:var(--mut);margin-top:3px}
.pristup .pkedy.vyprsal{color:var(--bad-text,var(--mut));font-weight:600}
.updbar.vyprsal{border-color:var(--bad-line,var(--line))}