/* stream.exchange.cz — styl 2026. Systémová písma, světlý i tmavý režim, breakpointy 480 / 720 / 1024 px. */
:root {
  --brand: #153f7b;            /* modrá EXCHANGE (barva ze starého webu) */
  --brand-2: #1f5aa6;
  --accent: #e8890c;
  --bg: #f3f6fa;
  --surface: #fff;
  --surface-2: #f6f8fb;
  --text: #13233a;
  --muted: #5b6b7d;
  --line: #dce4ee;
  --ok: #12804a;  --ok-bg: #e5f5ec;
  --warn: #8a5300; --warn-bg: #fff3dc;
  --bad: #b3261e;  --bad-bg: #fde8e6;
  --focus: #2f7fd6;
  --radius: 14px; --radius-s: 9px;
  --shadow: 0 1px 2px rgba(19,35,58,.06), 0 6px 20px rgba(19,35,58,.07);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #8fb8f0; --brand-2: #2a5f9e; --accent: #f5a33a;
    --bg: #0d151f; --surface: #142131; --surface-2: #192a3d; --text: #e5ecf4; --muted: #9fb1c4; --line: #26394f;
    --ok: #6fd6a0; --ok-bg: #133628; --warn: #f3c27a; --warn-bg: #3a2b12; --bad: #ff8f84; --bad-bg: #3d1a17;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 var(--font); color: var(--text); background: var(--bg); }
a { color: var(--brand-2); }
@media (prefers-color-scheme: dark) { a { color: var(--brand); } }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 1.12rem; margin: 0 0 .6em; }
p { margin: 0 0 .8em; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 20px; padding-bottom: 40px; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px; z-index: 9; }

/* záhlaví */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); line-height: 1.1; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-mark rect { fill: var(--brand); } .brand-mark path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .brand-mark circle { fill: var(--accent); }
@media (prefers-color-scheme: dark) { .brand-mark rect { fill: #24508a; } }
.brand small { display: block; color: var(--muted); font-size: .78rem; }
.brand strong { color: var(--brand-2); }
.mainnav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.mainnav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem; }
.mainnav a:hover { background: var(--surface-2); }
.mainnav a[aria-current] { background: var(--brand); color: #fff; }
@media (prefers-color-scheme: dark) { .mainnav a[aria-current] { background: #24508a; } }
.testbar { background: var(--warn-bg); color: var(--warn); text-align: center; font-size: .85rem; padding: 4px; }
main { padding: 20px 16px 40px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; padding: 18px 0 32px; }

/* karty a rozvržení */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
@media (min-width: 720px) { .card { padding: 24px 28px; } }
.card.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.card-warn { border-color: var(--accent); }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2 .card { margin: 0; } }
.hero { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; border: 0; }
.hero .lead { font-size: 1.08rem; max-width: 760px; opacity: .95; }
.hero .btn { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08); }
.hero .btn-primary { background: var(--accent); border-color: var(--accent); color: #1d1200; }
.hero .btn-link { color: #fff; }
/* hover v tmavém pruhu: obecné .btn:hover (světlé pozadí) by tu udělalo bílý text na téměř bílé ploše */
.hero .btn:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
.hero .btn-primary:hover { background: #f3a53a; border-color: #f3a53a; color: #1d1200; }
.hero .btn-link:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #17345c 0%, #224c80 100%); } }
.steps, .terms { padding-left: 1.2em; margin: 0; } .steps li, .terms li { margin-bottom: .45em; }

/* tlačítka */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; min-height: 44px; padding: 9px 18px;
  border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
@media (prefers-color-scheme: dark) { .btn-primary { background: #2a5f9e; border-color: #2a5f9e; } }
.btn-danger { color: var(--bad); border-color: var(--bad); }
.btn-link { border: 0; background: none; text-decoration: underline; }
.btn-small { min-height: 34px; padding: 4px 12px; font-size: .9rem; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.icon { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.icon:disabled { opacity: .35; cursor: default; }

/* formuláře */
fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 18px 0 6px; }
fieldset:first-of-type { border-top: 0; }
legend { font-weight: 800; font-size: 1.05rem; padding: 0; margin-bottom: 10px; float: left; width: 100%; }
legend + * { clear: left; }
.row { display: grid; gap: 0 14px; }
@media (min-width: 720px) { .row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .row .grow { grid-column: span 2; } }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; min-width: 0; }
.field label { font-weight: 600; font-size: .9rem; }
.opt { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; min-height: 44px; width: 100%; max-width: 100%; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.hint { color: var(--muted); font-size: .84rem; }
.field-error { color: var(--bad); font-size: .86rem; font-weight: 600; }
.form-error { background: var(--bad-bg); color: var(--bad); padding: 10px 14px; border-radius: var(--radius-s); margin: 12px 0 0; }
.form-ok { background: var(--ok-bg); color: var(--ok); padding: 10px 14px; border-radius: var(--radius-s); margin: 12px 0 0; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: none; }
.check.inactive { color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
details summary { cursor: pointer; font-weight: 600; margin: 4px 0 12px; color: var(--brand-2); }
.form-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: thin; }
.form-steps a { flex: none; font-size: .85rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0; border-top: 1px solid var(--line); margin-bottom: -8px; }

/* výběr měn */
.cur-picker { display: grid; gap: 14px; }
@media (min-width: 720px) { .cur-picker { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.cur-available { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cur-chip { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 6px 10px; cursor: pointer; }
.cur-chip input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; }
.cur-chip:has(input:checked) { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 8%, transparent); }
.cur-code { font-family: var(--mono); font-weight: 700; }
.cur-name { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-selected { list-style: none; margin: 0; padding: 8px; border: 1px dashed var(--line); border-radius: var(--radius-s); counter-reset: c; min-height: 60px; }
.cur-selected li { display: flex; align-items: center; gap: 8px; padding: 4px 0; counter-increment: c; }
.cur-selected li::before { content: counter(c) "."; color: var(--muted); width: 1.8em; text-align: right; font-size: .85rem; }
.cur-selected li.empty::before { content: none; }
.cur-selected li .cur-name { flex: 1; }
.subject-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }

/* stav, fakta, odznaky */
.status-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-head h1 { margin: 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge.small { margin-left: 6px; font-size: .7rem; }
.download { margin: 16px 0; }
.download label { font-weight: 600; display: block; margin-bottom: 4px; }
.copy-row { display: flex; gap: 8px; } .copy-row input { flex: 1; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; word-break: break-word; }
@media (max-width: 479px) { .facts { grid-template-columns: 1fr; } .facts dt { margin-top: 6px; } }
.note { padding: 10px 14px; border-radius: var(--radius-s); margin: 12px 0 0; }
.note-warn { background: var(--warn-bg); color: var(--warn); }
.done h1 { color: var(--ok); }

/* dokumentace */
.doc { overflow-wrap: anywhere; }
.doc code, .doc pre { background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }
.doc-nav a { margin-right: 4px; }
.dynban_list { font-size: .92rem; margin-top: 20px; background: var(--surface-2); border-left: 3px solid var(--ok); padding: 4px 10px; }
.dynban_list a { font-family: var(--mono); padding: 1px; }
.dynban_list a[name] { display: block; font-weight: 700; color: var(--ok); font-size: 1.05rem; }
.doc table { border-collapse: collapse; width: 100%; } .doc td, .doc th { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }

/* administrace */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; }
div.tile { cursor: default; }
.tile-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.tile-label { color: var(--muted); font-size: .85rem; }
.tile-warn { border-color: var(--accent); } .tile-warn .tile-value { color: var(--warn); }
.tile-wide { grid-column: span 2; } .tile-formats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 600; margin-top: 6px; }
@media (max-width: 479px) { .tile-wide { grid-column: span 1; } }
.filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filterbar input { max-width: 340px; }
.tabs-inline { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs-inline button { font: inherit; font-size: .88rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.tabs-inline button[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
table.list { width: 100%; border-collapse: collapse; }
.list th, .list td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.list thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); }
.list tbody tr { cursor: pointer; } .list tbody tr:hover { background: var(--surface-2); }
.list .col-check { width: 36px; padding-right: 0; } .list .col-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.list tbody tr.selected { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.bulkbar { position: sticky; top: var(--topbar-h, 0px); z-index: 4; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); }
.bulkbar span { font-weight: 600; margin-right: auto; }
.list-foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 8px; }
.list-foot p { margin: 0; }
.danger-zone { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); align-items: center; }
@media (max-width: 719px) {
  .list thead { display: none; }
  .list, .list tbody, .list tr, .list td { display: block; }
  .list tr { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px; margin-bottom: 8px; }
  .list td { border: 0; padding: 2px 0; }
  .list td::before { content: attr(data-label) ": "; color: var(--muted); font-size: .8rem; }
  .list tr { position: relative; } .list td.col-check { position: absolute; top: 8px; right: 12px; width: auto; padding: 0; }
  .list td.col-check::before { content: none; }
}
.detail-head .back { display: inline-block; margin-bottom: 10px; text-decoration: none; }
.preview { max-height: 480px; overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; font: .82rem/1.45 var(--mono); white-space: pre-wrap; word-break: break-all; }
.wrap-actions { gap: 8px; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--surface); padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); z-index: 20; }
.setup-secret { font-size: 1.15rem; letter-spacing: .05em; word-break: break-all; }

/* telefonní čísla a podobné údaje nezalamovat */
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- Friendly Captcha (registrace)
   Styl widgetu friendly-challenge 0.9.20 převzatý sem: widget běží se skipStyleInjection, aby CSP nemusela povolit inline styly. */
.frc-captcha *{margin:0;padding:0;border:0;text-align:initial;border-radius:0;filter:none!important;transition:none!important;font-weight:400;font-size:14px;line-height:1.2;text-decoration:none;background-color:initial;color:#222}
.frc-captcha{position:relative;min-width:250px;max-width:312px;border:1px solid #f4f4f4;padding-bottom:12px;background-color:#fff}
.frc-captcha b{font-weight:700}
.frc-container{display:flex;align-items:center;min-height:52px}
.frc-icon{fill:#222;stroke:#222;flex-shrink:0;margin:8px 8px 0}
.frc-icon.frc-warning{fill:#c00}
.frc-success .frc-icon{animation:1s ease-in both frc-fade-in}
.frc-content{white-space:nowrap;display:flex;flex-direction:column;margin:4px 6px 0 0;overflow-x:auto;flex-grow:1}
.frc-banner{position:absolute;bottom:0;right:6px;line-height:1}
.frc-banner *{font-size:10px;opacity:.8;text-decoration:none}
.frc-progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:3px 0;height:4px;border:none;background-color:#eee;color:#222;width:100%;transition:.5s linear}
.frc-progress::-webkit-progress-bar{background:#eee}
.frc-progress::-webkit-progress-value{background:#222}
.frc-progress::-moz-progress-bar{background:#222}
.frc-button{cursor:pointer;padding:2px 6px;background-color:#f1f1f1;border:1px solid transparent;text-align:center;font-weight:600;text-transform:none}
.frc-button:focus{border:1px solid #333}
.frc-button:hover{background-color:#ddd}
.frc-captcha-solution{display:none}
.frc-err-url{text-decoration:underline;font-size:.9em}
.frc-rtl{direction:rtl}
.frc-rtl .frc-content{margin:4px 0 0 6px}
.frc-banner.frc-rtl{left:6px;right:auto}
.dark.frc-captcha{color:#fff;background-color:#222;border-color:#333}
.dark.frc-captcha *{color:#fff}
.dark.frc-captcha button{background-color:#444}
.dark .frc-icon{fill:#fff;stroke:#fff}
.dark .frc-progress{background-color:#444}
.dark .frc-progress::-webkit-progress-bar{background:#444}
.dark .frc-progress::-webkit-progress-value{background:#ddd}
.dark .frc-progress::-moz-progress-bar{background:#ddd}
@keyframes frc-fade-in{from{opacity:0}
to{opacity:1}
}

.captcha-box { margin: 12px 0; }