:root { --fg:#111; --bg:#fff; --dim:#666; --line:#ccc; --acc:#1f4e5f; --accfg:#fff; --soft:#f2f2f2; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.4;
       color:var(--fg); background:var(--bg); padding-bottom:env(safe-area-inset-bottom); }
a { color:var(--acc); }
main { max-width:52rem; margin:0 auto; padding:1rem 1rem 3rem; }
h1 { font-size:1.5rem; margin:.2rem 0 .5rem; }
h2 { font-size:1.1rem; margin:1.5rem 0 .5rem; }
.dim { color:var(--dim); } .small { font-size:.85rem; } .center { text-align:center; }
.narrow { max-width:26rem; margin:3rem auto; }
.box { border:1px solid var(--line); border-radius:8px; padding:1.2rem; }
.warn { background:#fff4d6; border:1px solid #e0b040; padding:.8rem; border-radius:6px; font-size:.9rem; }
code { background:var(--soft); padding:0 .3em; border-radius:3px; }

header.top { display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem;
             border-bottom:2px solid var(--fg); }
header .brand { font-weight:800; text-decoration:none; color:var(--fg); font-size:1.1rem; }
header nav { display:flex; gap:.2rem; }
header nav a { text-decoration:none; color:var(--fg); padding:.5rem .7rem; border-radius:6px; font-weight:600; }
header nav a.on { background:var(--fg); color:var(--bg); }
header nav a.dim { color:var(--dim); font-weight:400; }

.btn { display:inline-block; background:var(--acc); color:var(--accfg); text-decoration:none; padding:.8rem 1.4rem;
       border-radius:8px; font-weight:700; border:0; font-size:1rem; }
.btn.big { font-size:1.15rem; padding:1rem 1.6rem; margin:1rem 0; }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.8rem; }
.card { display:flex; flex-direction:column; gap:.2rem; padding:1.1rem; border:2px solid var(--fg); border-radius:10px;
        text-decoration:none; color:var(--fg); }
.card b { font-size:1.15rem; } .card span { color:var(--dim); font-size:.9rem; }

form.search { display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0 .6rem; }
form.search input[type=search] { flex:1 1 14rem; font-size:1.05rem; padding:.7rem .8rem; border:2px solid var(--fg); border-radius:8px; min-width:0; }
form.search select, form.search button { font-size:1rem; padding:.6rem .8rem; border:2px solid var(--fg); border-radius:8px; background:var(--bg); color:var(--fg); }
form.search button { background:var(--fg); color:var(--bg); font-weight:700; }
form.inline { display:inline; }
button.link { background:none; border:0; padding:0; color:var(--acc); text-decoration:underline; font:inherit; cursor:pointer; }

ul.list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
ul.list li a { display:flex; align-items:center; gap:.8rem; padding:.7rem .2rem; border-bottom:1px solid var(--line);
               text-decoration:none; color:var(--fg); min-height:3.4rem; }
ul.list .t { flex:1; min-width:0; display:flex; flex-direction:column; }
ul.list .t b { overflow-wrap:anywhere; } ul.list .t i { color:var(--dim); font-style:normal; }
ul.list .t small { color:var(--dim); font-size:.8rem; overflow-wrap:anywhere; }
ul.list .fmt { flex:0 0 3.6rem; text-align:center; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
               border:2px solid var(--fg); border-radius:6px; padding:.35rem 0; }
ul.list .arrow { font-size:1.5rem; padding:0 .4rem; }
ul.list .cov { flex:0 0 3.4rem; width:3.4rem; height:3.4rem; object-fit:cover; border-radius:6px; background:var(--soft); }
ul.list .cov.ph { display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--dim); }
.bar { display:block; height:5px; background:var(--soft); border-radius:3px; margin-top:.35rem; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--acc); }
nav.pager { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0; }
nav.pager a { padding:.6rem .9rem; border:2px solid var(--fg); border-radius:8px; text-decoration:none; color:var(--fg); font-weight:600; }

/* přehrávač */
.player .phead { display:flex; gap:1rem; align-items:flex-start; }
.player .pcov { width:6rem; height:6rem; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.player .now { margin:1.2rem 0 .3rem; font-weight:600; min-height:1.4em; overflow-wrap:anywhere; }
.scrub input[type=range] { width:100%; height:2.2rem; margin:0; accent-color:var(--acc); }
.scrub .times { display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; color:var(--dim); font-size:.9rem; }
.ctl { display:flex; justify-content:center; align-items:center; gap:.6rem; margin:.8rem 0; }
.ctl button { font-size:1.15rem; min-width:3.4rem; height:3.4rem; border:2px solid var(--fg); background:var(--bg); color:var(--fg);
              border-radius:50%; font-weight:700; cursor:pointer; }
.ctl button.main { width:4.6rem; height:4.6rem; font-size:1.8rem; background:var(--fg); color:var(--bg); }
.ctl2 { display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; justify-content:center; font-size:.9rem; color:var(--dim); }
.ctl2 select { font-size:1rem; padding:.3rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
ol.chapters { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); counter-reset:k; }
ol.chapters li button { display:flex; width:100%; justify-content:space-between; gap:.8rem; text-align:left; font:inherit; background:none;
                        border:0; border-bottom:1px solid var(--line); padding:.7rem .3rem; color:var(--fg); cursor:pointer; counter-increment:k; }
ol.chapters li button::before { content:counter(k) "."; color:var(--dim); flex:0 0 2rem; }
ol.chapters li button span { flex:1; overflow-wrap:anywhere; } ol.chapters li button small { color:var(--dim); white-space:nowrap; }
ol.chapters li.on button { font-weight:700; background:var(--soft); }
@media (max-width:480px) { header nav a { padding:.5rem .5rem; } body { font-size:16px; } }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1rem; margin:.8rem 0; }
dl.kv dt { color:var(--dim); } dl.kv dd { margin:0; overflow-wrap:anywhere; }
dl.kv code { font-size:1rem; padding:.15em .4em; }
.box form { margin-top:.6rem; }