/* Štýly konvertora; tokeny, hlavička, päta a cookie lišta sú v base.css. */
main{min-height:60vh}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1{font-weight:800;font-size:clamp(28px,5vw,44px);margin:0 0 12px}
.hero{padding:48px 0 24px;max-width:var(--read)}
.hero p{color:var(--muted);font-size:18px;margin:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:32px}
.drop{border:2px dashed var(--line);text-align:center;transition:border-color .15s}
.drop.over,.drop:hover{border-color:var(--accent)}
.drop-text{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 16px}
.btn{display:inline-block;background:var(--accent);color:var(--ink-deep);border:0;border-radius:999px;padding:12px 28px;font:600 16px 'Inter',sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-2)}
.btn.secondary{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.btn.secondary:hover{border-color:var(--ink)}
#panel{margin-top:24px;display:grid;gap:12px;justify-items:center}
.fname{font-weight:600;margin:0;word-break:break-all}
select{font:inherit;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.where{color:var(--muted);font-size:14px;margin:0;max-width:480px}
.bar-wrap{width:100%;max-width:420px;height:8px;border-radius:99px;background:rgba(10,61,68,.12);overflow:hidden}
.bar-wrap .bar{height:100%;width:0;background:var(--accent);transition:width .2s}
#msg{margin:16px 0 0;min-height:1.5em}
#msg.err{color:#b3261e;font-weight:600}
.read{max-width:var(--read);padding-top:48px}
.read h1{margin-bottom:20px}
.read a{color:var(--ink);text-decoration:underline}
[hidden]{display:none!important}
.all{margin-top:48px}
.all h2{font-size:26px;margin:0 0 8px}
.all h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:24px 0 8px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:14px;color:var(--ink)}
.chips a:hover{border-color:var(--accent);box-shadow:var(--shadow)}