/* admaker web — jednoduché, čitateľné, kontrast WCAG AA (research R-14) */
:root {
  --bg: #0b1020; --panel: #121a2e; --line: #26324f; --text: #eef2f8; --muted: #a9b4c8;
  --accent: #34d399; --accent-ink: #062b1d; --danger: #f87171; --radius: 10px;
  font-family: "DejaVu Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #000; padding: 6px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 24px; border-bottom: 1px solid var(--line); }
.topbar nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.2rem; color: var(--text); text-decoration: none; }
main { max-width: 1200px; margin: 0 auto; padding: 24px; }
.footer { text-align: center; color: var(--muted); padding: 24px; font-size: .9rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card.narrow { max-width: 460px; margin: 32px auto; }
.stack { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
label.check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
input, select, textarea { background: #0d1426; color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font: inherit; }
button, .button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .button.secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
button.link { background: none; color: var(--accent); padding: 0; font-weight: 400; text-decoration: underline; }
button.danger { background: var(--danger); color: #2a0606; }
button[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
.hint { color: var(--muted); font-size: .9rem; margin: -8px 0 0; }
.error { color: #fecaca; background: #3b0d0d; border: 1px solid #7f1d1d; padding: 10px 12px; border-radius: 8px; }
.notice { background: #0f2a1f; border: 1px solid #14532d; padding: 10px 12px; border-radius: 8px; }
.badge { background: #fbbf24; color: #241500; border-radius: 999px; padding: 0 8px; font-size: .8rem; font-weight: 700; margin-left: 4px; }
.hero { text-align: center; padding: 64px 16px; } .hero h1 { font-size: 2.2rem; } .lead { color: var(--muted); max-width: 640px; margin: 0 auto 24px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.facts dt { color: var(--muted); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.muted { color: var(--muted); }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
ul.plain { list-style: none; padding: 0; }
.project a { display: flex; flex-direction: column; gap: 8px; color: var(--text); text-decoration: none; }
.project img { width: 100%; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.grow { flex: 1; }
.slide-body { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
@media (max-width: 720px) { .slide-body { grid-template-columns: 1fr; } }
.thumb { max-width: 220px; max-height: 300px; border-radius: 6px; margin-top: 8px; }
.error-inline { color: #fecaca; font-weight: 400; font-size: .9rem; }
fieldset { border: 1px solid var(--line); border-radius: 8px; }
.output video { width: 100%; max-height: 480px; background: #000; border-radius: 6px; }
.output { display: flex; flex-direction: column; gap: 8px; }
progress { width: 100%; }
ol.slides { list-style: none; padding: 0; }
/* editor (US2) */
.editor { display: flex; flex-direction: column; gap: 16px; }
.editor-grid { display: grid; grid-template-columns: 220px 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } }
.slide-list li { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.slide-list li.active { background: #1b2742; } .slide-list li.invalid .slide-pick { color: #fca5a5; }
.slide-pick { background: none; color: var(--text); text-align: left; flex: 1; font-weight: 400; padding: 8px; }
.preview { background: #000; border-radius: 8px; overflow: hidden; }
.preview-frame { position: relative; } .preview-frame img { display: block; width: 100%; }
.preview.portrait .preview-frame { max-width: 420px; margin: 0 auto; }
.hit { position: absolute; background: transparent; border: 2px dashed transparent; padding: 0; border-radius: 4px; }
.hit:hover, .hit:focus-visible { border-color: #fbbf24; background: rgba(251, 191, 36, .08); }
.inline-edit { position: absolute; z-index: 2; min-width: 200px; }
.inline-edit textarea { width: 100%; font-size: 1rem; box-shadow: 0 4px 18px rgba(0,0,0,.6); }
.settings-panel { max-height: 80vh; overflow: auto; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.tabs button[aria-selected="true"] { color: var(--text); border-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.field label { gap: 2px; } .field-label { font-weight: 700; }
.field .hint { margin: 0; font-weight: 400; }
.lint-inline { color: #fde68a; font-size: .9rem; }
.save-state { font-size: .9rem; color: var(--muted); } .save-state.conflict, .save-state.offline { color: #fca5a5; }
.conflict { background: #3b0d0d; border: 1px solid #7f1d1d; padding: 10px 12px; border-radius: 8px; display: flex; gap: 12px; align-items: center; }
button.on { border-color: var(--accent); color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.check-panel li.lint { color: #fde68a; } .check-panel li { display: flex; gap: 8px; align-items: baseline; }
.sample { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.actions { display: flex; gap: 8px; align-items: center; }
.small-actions { font-size: .9rem; flex-wrap: wrap; }
.danger-link { color: #fca5a5 !important; }
.thumb-empty { width: 100%; aspect-ratio: 16/9; background: #0d1426; border-radius: 6px; }
.swatches { display: flex; gap: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }
/* cenník a platby (US6) */
.plan { display: flex; flex-direction: column; gap: 8px; }
.plan.current { border-color: var(--accent); }
.plan .price { font-size: 1.6rem; font-weight: 700; margin: 0; }
.plan .limits { padding-left: 18px; margin: 0; flex: 1; color: var(--muted); }
.plan .limits li { margin: 4px 0; }
.plan button, .plan .button { align-self: flex-start; }
.small { font-size: .85rem; }
.plan .price .per { font-size: 1rem; font-weight: 400; color: var(--muted); }
pre.log { white-space: pre-wrap; overflow-x: auto; max-height: 70vh; font-size: .85rem; }
.admin-nav { display: flex; gap: 12px; flex-wrap: wrap; }
/* kredity (002, US4) */
[x-cloak] { display: none !important; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; color: var(--text); text-decoration: none; min-height: 32px; font-size: .9rem; }
.chip span[aria-hidden] { color: var(--accent); font-size: .7rem; }
.balance-big { margin: 0; font-size: 1.6rem; } .balance-big strong { font-size: 2.2rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.packs { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 12px; }
.pack { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.pack-credits { margin: 0; font-size: 1.1rem; } .pack-credits strong { font-size: 1.8rem; }
table.compact th, table.compact td { padding: 6px 8px; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.plus { color: var(--accent); } td.minus { color: var(--muted); }
ul.lots li { padding: 6px 0; border-bottom: 1px solid var(--line); }
dialog.sheet { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  max-width: 520px; width: calc(100% - 32px); padding: 20px; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .6); }
.offers { display: flex; flex-direction: column; gap: 8px; }
button.offer { width: 100%; display: flex; justify-content: space-between; gap: 12px; min-height: 48px; align-items: center; }
button.offer.plan { background: transparent; color: var(--text); border: 1px solid var(--accent); }
@media (max-width: 600px) {
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* administrácia AI (002, US2) */
.period { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.inline-label { flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.button.small, button.small { padding: 6px 10px; font-size: .9rem; }
.chart { margin: 0; } .chart svg { width: 100%; height: auto; }
.chart .bar { fill: var(--accent); } .chart .grid-line { stroke: var(--line); }
.chart .axis { fill: var(--muted); font-size: 11px; }
.table-scroll { overflow-x: auto; }
pre.dump { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow: auto; background: #0d1426; padding: 12px; border-radius: 8px; font-size: .85rem; }
.pager { display: flex; gap: 8px; align-items: center; }
.w6 { width: 6em; }
.funnel { list-style: none; padding: 0; display: grid; gap: 6px; }
.funnel li { display: grid; grid-template-columns: 120px 1fr 60px; gap: 8px; align-items: center; }
.funnel meter { width: 100%; }
/* horná lišta na telefóne: navigácia sa zalomí, aby „Odhlásiť sa“ nebolo skryté za okrajom */
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .topbar nav { flex-wrap: wrap; width: 100%; gap: 4px 14px; font-size: .95rem; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a, .topbar nav button.link { white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
  main { padding: 16px 12px; }
}
label.file-pick { cursor: pointer; text-align: center; }
label.file-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }