/* assets/css/ucenie.css
   UČENIE NA PRÍKLADOCH – vzhľad novej sekcie. Existujúce štýly webu sa nemenia;
   všetky triedy tu začínajú na „u-“, aby sa s ničím nezrazili.
   Farby a písma preberá z /assets/css/theme-overrides.css (Nunito, Fraunces, modrá paleta). */

:root{
  --u-ink:#0B1A35; --u-blue:#0073E6; --u-blue-d:#005BB5; --u-line:#DCE8F6; --u-muted:#526A8A; --u-bg:#F6FAFF;
  --u-ok:#0CA30C; --u-ok-t:#006300; --u-ok-bg:#E7F6E7; --u-am:#FAB219; --u-am-t:#8A5200; --u-am-bg:#FFF4D6;
  --u-bad:#D03B3B; --u-bad-t:#A21C1C; --u-bad-bg:#FDF3F3; --u-lock:#8A97AB;
  --mat:#0073E6; --mat-bg:#EBF4FF; --sjl:#C2410C; --sjl-bg:#FFF1E8; --aj:#0E7C66; --aj-bg:#E4F5F0;
}
body.u-body{ margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--u-bg); }
body.u-body > main{ flex:1 0 auto; }

/* hlavička a menu – rovnaké ako na dashboarde */
body.u-body header{ text-align:center; }
body.u-body header h1{ margin:0; font-size:clamp(26px,6vw,40px); line-height:1.15; }
body.u-body nav .nav-inner{ max-width:1000px; margin:0 auto; padding:0 18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
body.u-body nav .links{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; grid-column:2; }
body.u-body nav .auth-slot{ grid-column:3; justify-self:end; }
body.u-body nav a.on{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
@media (max-width:760px){
  body.u-body nav .nav-inner{ grid-template-columns:1fr; justify-items:center; padding:6px 12px 10px; }
  body.u-body nav .links{ grid-column:auto; }
  body.u-body nav .auth-slot{ grid-column:auto; justify-self:center; width:100%; display:flex; justify-content:center; }
}
body.u-hra > header, body.u-hra > nav{ display:none; }
body.u-body .auth-chip .auth-text{ max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.u-wrap{ max-width:1000px; width:100%; margin:16px auto; padding:0 12px 28px; box-sizing:border-box; color:var(--u-ink); }
.u-wrap *, .u-play *, .u-bar *, .u-modal *{ box-sizing:border-box; }
.u-card{ background:#fff; border:1px solid var(--u-line); border-radius:16px; padding:14px; box-shadow:0 4px 16px rgba(0,60,140,.07); }
.u-card + .u-card, .u-gap{ margin-top:12px; }
.u-h{ margin:0; font-size:17px; font-weight:800; color:var(--u-ink); line-height:1.25; }
.u-sub{ font-size:13px; color:var(--u-muted); line-height:1.4; }
.u-hide{ display:none !important; }
.u-center{ text-align:center; }
.u-msg{ padding:22px 16px; text-align:center; color:var(--u-muted); font-weight:700; }

.u-child{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.u-child b{ font-size:15px; }
.u-sel{ border:1px solid #CFE0F5; border-radius:999px; padding:7px 12px; font-weight:800; color:var(--u-blue-d); background:#fff; font-size:14px; font-family:inherit; max-width:60%; }
.u-grades{ display:flex; gap:6px; margin-top:12px; }
.u-grade{ flex:1; text-align:center; padding:9px 0; border-radius:12px; border:1px solid #CFE0F5; font-weight:800; color:var(--u-blue-d); background:#fff; font-size:15px; cursor:pointer; font-family:inherit; line-height:1.2; }
.u-grade.on{ background:var(--u-blue); border-color:var(--u-blue); color:#fff; }
.u-grade small{ display:block; font-size:10.5px; font-weight:700; opacity:.8; }
.u-grade:disabled{ opacity:.45; cursor:default; }
.u-subj{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.u-s{ border-radius:14px; padding:10px 10px 9px; border:1.5px solid transparent; background:#fff; min-width:0; text-align:left; cursor:pointer; font-family:inherit; color:var(--u-ink); }
.u-s:disabled{ cursor:default; }
.u-s .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:17px; color:#fff; }
.u-s .nm{ margin-top:7px; font-weight:800; font-size:14px; line-height:1.2; }
.u-s .ct{ font-size:12px; color:var(--u-muted); margin-top:1px; }
.u-s .pc{ font-size:20px; font-weight:800; margin-top:5px; line-height:1; }
.u-s .pc.wait{ font-size:12.5px; line-height:1.25; padding-top:3px; }
.u-s.MAT{ background:var(--mat-bg); } .u-s.MAT .ic{ background:var(--mat); } .u-s.MAT .pc{ color:var(--u-blue-d); }
.u-s.SJL{ background:var(--sjl-bg); } .u-s.SJL .ic{ background:var(--sjl); } .u-s.SJL .pc{ color:var(--sjl); }
.u-s.AJ{ background:var(--aj-bg); } .u-s.AJ .ic{ background:var(--aj); } .u-s.AJ .pc{ color:var(--aj); }
.u-s.on{ border-color:var(--u-blue); box-shadow:0 0 0 3px rgba(0,115,230,.14); }

.u-meter{ position:relative; height:8px; border-radius:999px; background:#EAF1FA; overflow:hidden; }
.u-meter > span{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--u-blue); }
.u-meter.ok > span{ background:var(--u-ok); }
.u-cont{ display:flex; align-items:center; gap:12px; border-left:5px solid var(--u-am); }
.u-cont.free{ border-left-color:var(--u-ok); }
.u-cont .t{ flex:1; min-width:0; }

.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 16px; border-radius:12px; border:1px solid var(--u-blue); background:var(--u-blue); color:#fff !important; font-weight:800; font-size:15px; white-space:nowrap; cursor:pointer; font-family:inherit; text-decoration:none !important; line-height:1.2; }
.u-btn:hover{ background:var(--u-blue-d); }
.u-btn.sec{ background:#fff; color:var(--u-blue-d) !important; border-color:#CFE0F5; }
.u-btn.sec:hover{ background:#EEF6FF; }
.u-btn.big{ width:100%; padding:14px 16px; font-size:16.5px; border-radius:14px; }
.u-btn.sm{ padding:7px 12px; font-size:13.5px; border-radius:10px; }
.u-btn:disabled{ opacity:.55; cursor:default; }
.u-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; vertical-align:1px; }
.u-pill.free, .u-pill.ok{ background:var(--u-ok-bg); color:var(--u-ok-t); }
.u-pill.am{ background:var(--u-am-bg); color:var(--u-am-t); }
.u-pill.gr{ background:#EEF2F7; color:#45526B; }
.u-pill.bl{ background:#EBF4FF; color:var(--u-blue-d); }
.u-pill.off{ background:#FBE4E4; color:var(--u-bad-t); }

.u-okr{ padding:12px 0; border-top:1px solid #EEF3F9; }
.u-okr:first-of-type{ border-top:0; padding-top:4px; }
.u-okr-head{ display:block; width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; color:inherit; }
.u-okr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.u-okr-n{ font-weight:800; font-size:15px; } .u-okr-n i{ font-style:normal; color:var(--u-muted); font-weight:700; margin-right:6px; }
.u-okr-p{ font-weight:800; font-size:15px; color:var(--u-ink); white-space:nowrap; }
.u-okr-m{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--u-muted); margin-top:5px; }
.u-sets{ margin-top:10px; border:1px solid var(--u-line); border-radius:14px; overflow:hidden; }
.u-set{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-top:1px solid #EEF3F9; background:#fff; }
.u-set:first-child{ border-top:0; }
.u-st{ width:28px; height:28px; border-radius:50%; flex:0 0 28px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.u-st.ok{ background:var(--u-ok); color:#fff; }
.u-st.am{ background:var(--u-am-bg); color:var(--u-am-t); border:1.5px solid var(--u-am); }
.u-st.new{ background:#fff; border:1.5px solid #B9CDE6; color:var(--u-muted); }
.u-st.done{ background:#EEF2F7; color:#45526B; border:1.5px solid #C4CFDE; }
.u-st.lock{ background:#EEF2F7; color:var(--u-lock); }
.u-set .nm{ flex:1; min-width:0; font-weight:700; font-size:14.5px; line-height:1.25; }
.u-set .nm small{ display:block; font-weight:600; font-size:12px; color:var(--u-muted); margin-top:1px; }
.u-set.lk .nm{ color:#6B7890; }

.u-week{ display:flex; gap:6px; align-items:flex-end; height:86px; margin-top:10px; }
.u-day{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; font-size:11.5px; color:var(--u-muted); font-weight:700; }
.u-day .bar{ width:100%; max-width:30px; border-radius:6px 6px 3px 3px; background:var(--u-blue); min-height:3px; }
.u-day .bar.z{ background:#E3ECF7; height:3px !important; }
.u-day .v{ font-size:11.5px; color:var(--u-ink); font-weight:800; min-height:14px; }
.u-kp{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.u-kp > div{ border:1px solid var(--u-line); border-radius:12px; padding:9px 10px; background:linear-gradient(180deg,#F5F9FF,#fff); min-width:0; }
.u-kp .l{ font-size:11.5px; font-weight:700; color:var(--u-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-kp .v{ font-size:21px; font-weight:800; line-height:1.15; margin-top:1px; color:var(--u-ink); }

/* prehrávač sady */
.u-bar{ position:sticky; top:0; z-index:50; background:linear-gradient(135deg,#0066CC,#004A94); color:#fff; padding:10px 12px 11px; }
.u-bar .r{ display:flex; align-items:center; gap:10px; max-width:640px; margin:0 auto; }
.u-bar .bk{ font-weight:800; font-size:14px; color:#DCEBFF !important; white-space:nowrap; background:none; border:0; cursor:pointer; font-family:inherit; padding:4px 0; }
.u-bar .ti{ flex:1; min-width:0; text-align:center; font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-bar .ct{ font-weight:800; font-size:14px; white-space:nowrap; }
.u-dots{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin:9px auto 0; max-width:640px; }
.u-dots i{ height:6px; border-radius:999px; background:rgba(255,255,255,.28); }
.u-dots i.g{ background:#5BE37A; } .u-dots i.b{ background:#FFB4A8; } .u-dots i.c{ background:#fff; }
.u-play{ max-width:640px; margin:0 auto; padding:14px 12px 104px; color:var(--u-ink); }
.u-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.u-q{ font-size:19px; font-weight:800; line-height:1.45; margin:0; color:var(--u-ink); }
.u-q.small{ font-size:16px; }
.u-fig{ margin:12px 0 2px; background:#F7FBFF; border:1px solid var(--u-line); border-radius:14px; padding:10px; overflow:hidden; }
.u-fig svg, .u-rich svg{ display:block; max-width:100%; height:auto; margin:8px auto; }
.u-fig svg{ width:auto; max-width:100%; margin:0 auto; }
.u-opts{ display:grid; gap:9px; margin-top:14px; }
.u-opt{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1.5px solid #CFE0F5; border-radius:14px; background:#fff; font-size:17px; font-weight:700; text-align:left; width:100%; cursor:pointer; font-family:inherit; color:var(--u-ink); line-height:1.35; }
.u-opt .k{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:1.5px solid #B9CDE6; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:var(--u-blue-d); }
.u-opt.sel{ border-color:var(--u-blue); background:#F1F7FF; box-shadow:0 0 0 3px rgba(0,115,230,.14); }
.u-opt.sel .k{ background:var(--u-blue); border-color:var(--u-blue); color:#fff; }
.u-opt.good{ border-color:var(--u-ok); background:#F1FAF1; } .u-opt.good .k{ background:var(--u-ok); border-color:var(--u-ok); color:#fff; }
.u-opt.bad{ border-color:var(--u-bad); background:var(--u-bad-bg); } .u-opt.bad .k{ background:var(--u-bad); border-color:var(--u-bad); color:#fff; }
.u-opt.dim{ opacity:.6; }
.u-opt:disabled{ cursor:default; }
.u-opt .tg{ margin-left:auto; font-size:12.5px; font-weight:800; white-space:nowrap; }
.u-input{ width:100%; padding:14px; border:1.5px solid #CFE0F5; border-radius:14px; font-size:18px; font-weight:700; font-family:inherit; margin-top:14px; color:var(--u-ink); }
.u-input:focus{ outline:none; border-color:var(--u-blue); box-shadow:0 0 0 3px rgba(0,115,230,.14); }
.u-links{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; flex-wrap:wrap; }
.u-link{ font-size:14px; font-weight:800; color:var(--u-blue-d); display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid #CFE0F5; border-radius:999px; background:#fff; cursor:pointer; font-family:inherit; }
.u-foot{ position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); border-top:1px solid var(--u-line); padding:10px 12px calc(12px + env(safe-area-inset-bottom)); z-index:40; }
.u-foot .in{ max-width:616px; margin:0 auto; }
.u-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.u-theory{ border:1px solid #BBD6F5; background:#F5FAFF; border-radius:16px; padding:14px; }
.u-theory h3{ margin:0 0 8px; font-family:'Fraunces',Georgia,serif; font-size:19px; color:var(--u-blue-d) !important; line-height:1.25; }
.u-rich p{ margin:0 0 9px; font-size:15.5px; line-height:1.55; }
.u-rich p:last-child{ margin-bottom:0; }
.u-rich b, .u-rich strong{ color:var(--u-blue-d); }
.u-rich ul, .u-rich ol{ margin:0 0 9px 20px; padding:0; } .u-rich li{ margin:0 0 4px; font-size:15.5px; line-height:1.5; }
.u-rich table{ border-collapse:collapse; margin:6px 0 10px; font-size:15px; } .u-rich td, .u-rich th{ border:1px solid var(--u-line); padding:5px 9px; }
.u-rich .tip{ background:#FFF8E6; border-radius:10px; padding:8px 10px; }
.u-rich .mem{ background:#EEF7EE; border-radius:10px; padding:8px 10px; }
/* zlomky: <span class="zl"><sup>2</sup><span class="zl-l">⁄</span><sub>3</sub></span> */
.zl{ display:inline-flex; flex-direction:column; align-items:stretch; vertical-align:middle; line-height:1.08; margin:0 .08em; font-size:.9em; text-align:center; }
.zl sup, .zl sub{ display:block; font-size:1em; line-height:1.08; vertical-align:baseline; position:static; padding:0 .16em; }
.zl sup{ border-bottom:.09em solid currentColor; padding-bottom:.05em; }
.zl sub{ padding-top:.06em; }
.zl .zl-l{ display:none; }
.u-verdict{ border-radius:14px; padding:11px 13px; font-weight:800; font-size:16px; line-height:1.35; }
.u-verdict.bad{ background:var(--u-bad-bg); color:var(--u-bad-t); border:1px solid #F1C7C7; }
.u-verdict.good{ background:#F1FAF1; color:var(--u-ok-t); border:1px solid #BFE5BF; }
.u-exp{ margin-top:12px; border:1px solid var(--u-line); border-radius:16px; padding:14px; background:#fff; }
.u-exp h4{ margin:0 0 8px; font-size:15px; font-weight:800; color:var(--u-ink); }
.u-res{ text-align:center; padding:20px 14px 16px; }
.u-ring{ width:132px; height:132px; margin:0 auto; position:relative; }
.u-ring b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:27px; font-weight:800; line-height:1; color:var(--u-ink); }
.u-ring b small{ font-size:13px; color:var(--u-muted); font-weight:700; margin-top:4px; }
.u-res h2{ font-family:'Fraunces',Georgia,serif; margin:12px 0 4px; font-size:23px; }
.u-res h2.ok{ color:var(--u-ok-t) !important; } .u-res h2.no{ color:var(--u-am-t) !important; }
.u-miss{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #EEF3F9; font-size:14.5px; font-weight:700; }
.u-miss:first-of-type{ border-top:0; }
.u-miss .n{ width:26px; height:26px; border-radius:50%; background:var(--u-bad-bg); color:var(--u-bad-t); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex:0 0 26px; }

/* okno (zamknutá sada, teória, nahlásenie chyby) */
.u-modal{ position:fixed; inset:0; background:rgba(11,26,53,.55); display:flex; align-items:flex-end; justify-content:center; z-index:200; padding:12px; }
.u-modal .box{ background:#fff; border-radius:18px; max-width:560px; width:100%; max-height:calc(100vh - 24px); overflow:auto; padding:16px; box-shadow:0 24px 72px rgba(0,60,140,.25); color:var(--u-ink); }
.u-modal .hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.u-modal textarea{ width:100%; min-height:110px; border:1.5px solid #CFE0F5; border-radius:12px; padding:10px; font-family:inherit; font-size:15px; }
@media (min-width:640px){ .u-modal{ align-items:center; } }
.u-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:92px; background:#0B1A35; color:#fff; padding:10px 14px; border-radius:12px; font-weight:700; font-size:14px; z-index:300; max-width:90vw; box-shadow:0 12px 30px rgba(0,0,0,.25); }

@media (min-width:900px){
  .u-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:start; }
  .u-cols > div > .u-card:first-child{ margin-top:0; }
  .u-subj{ gap:12px; } .u-s{ padding:14px; } .u-s .pc{ font-size:26px; }
}
@media (max-width:360px){ .u-s .nm{ font-size:13px; } .u-grade{ font-size:14px; } }

/* karta v dashboarde (assets/js/ucenie-karta.js) */
.u-dash{ margin-top:14px; border:1px solid #BBD6F5; border-radius:14px; padding:14px; background:linear-gradient(180deg,#F5FAFF,#fff); }
.u-dash .top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.u-dash h3{ margin:0; font-size:19px; }
.u-dash .note{ border-top:1px dashed #C8DCEF; margin-top:12px; padding-top:10px; display:flex; align-items:center; gap:10px; }