/* ==========================================================================
   AktualniZpravy.cz v2
   Paleta vychází z české trikolóry + novinového papíru:
   modrá = navigace a odkazy, červená = POUZE čerstvost („nyní“), šedý papír.
   ========================================================================== */
:root {
  --paper:   #F2F4F7;
  --surface: #FFFFFF;
  --ink:     #1B2233;
  --muted:   #67707F;
  --line:    #DCE0E8;
  --blue:    #11457E;   /* CZ vlajková modrá */
  --blue-soft:#E8EFF7;
  --red:     #D7141A;   /* CZ vlajková červená — jen indikátor čerstvosti */
  --radius:  10px;
  --dock-h:  60px;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --card:    #FFFFFF;
  --card-2:  #FAFBFD;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- hlavička ---------- */
.site-header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 3px solid var(--blue);
  position: sticky; top: 0; z-index: 40;
}
.logo { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-svg { flex: none; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700; font-size: 25px; letter-spacing: -0.2px; color: #1a2340;
}
.logo-name b { color: #a01512; font-weight: 700; }
.logo-motto { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
html[data-theme="dark"] .logo-name { color: #e6eaf3; }
html[data-theme="dark"] .logo-name b { color: #e0574f; }
@media (max-width: 560px) {
  .logo-motto { display: none; }
  .logo-name { font-size: 21px; }
  .logo-svg { width: 40px; height: 40px; }
}

.desktop-nav { flex: 1; min-width: 0; }
.desktop-nav > ul { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.desktop-nav > ul > li { position: relative; }
.desktop-nav > ul > li > a {
  display: block; padding: 6px 9px; border-radius: 6px;
  font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.desktop-nav > ul > li > a:hover { background: var(--blue-soft); text-decoration: none; }
.dropdown {
  position: absolute; left: 0; top: 100%;
  min-width: 190px; max-height: 70vh; overflow: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 12px 28px rgba(27,34,51,.14);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s, transform .12s;
  z-index: 50;
}
.desktop-nav li:hover > .dropdown,
.desktop-nav li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; }
.dropdown a:hover { background: var(--blue-soft); text-decoration: none; }

.header-search { display: flex; gap: 0; }
.header-search input {
  width: 190px; padding: 7px 10px;
  border: 1px solid var(--line); border-right: 0;
  border-radius: 8px 0 0 8px; font: inherit; background: var(--paper);
}
.header-search button {
  padding: 7px 12px; border: 0; border-radius: 0 8px 8px 0;
  background: var(--blue); color: #fff; font-weight: 600;
}
.btn-account {
  padding: 7px 14px; border: 1.5px solid var(--blue); border-radius: 999px;
  background: none; color: var(--blue); font-weight: 600; white-space: nowrap;
}
.btn-account:hover { background: var(--blue-soft); text-decoration: none; }

/* ---------- ticker (datum, kurzy, ovládání) ---------- */
.ticker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 16px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.ticker-mid, .ticker-right { display: flex; align-items: center; gap: 6px; }
.chip {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-size: 12px;
}
.chip:hover { border-color: var(--blue); }
#filterBadge { color: var(--red); }

/* ---------- sloupce a bloky ---------- */
main { max-width: 1280px; margin: 14px auto; padding: 0 14px; }
.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.column, .col { display: grid; gap: 14px; min-width: 0; }

.feedbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feedbox-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, #FBFCFE, #F4F6FA);
}
.feedbox-title {
  font-family: var(--font-display);
  font-weight: 700; font-size: 14.5px; color: var(--ink);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feedbox-expand {
  border: 0; background: none; color: var(--muted);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px;
  transition: transform .15s;
}
.feedbox-expand:hover { background: var(--blue-soft); color: var(--blue); }
.feedbox.expanded .feedbox-expand { transform: rotate(180deg); }

.feed-items { margin: 0; padding: 4px 0; list-style: none; }
.feed-item {
  display: grid;
  grid-template-columns: 10px 44px minmax(0, 1fr) auto;
  align-items: baseline; gap: 7px;
  padding: 5px 12px;
}
.feed-item > a, .feed-item .feed-title { min-width: 0; overflow-wrap: anywhere; }
.feed-item + .feed-item { border-top: 1px dotted var(--line); }

/* signatura webu: puls čerstvosti */
.dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.feed-item[data-fresh="now"]   .dot { background: var(--red); box-shadow: 0 0 0 0 rgba(215,20,26,.5); animation: pulse 2.2s infinite; }
.feed-item[data-fresh="today"] .dot { background: var(--blue); }
.feed-item[data-fresh="yday"]  .dot { background: #9AB0C9; }
.feed-item[data-fresh="week"]  .dot { border: 2px solid #9AB0C9; }
.feed-item[data-fresh="old"]   .dot { border: 2px solid var(--line); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(215,20,26,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(215,20,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(215,20,26,0); }
}
.age { font-size: 11px; color: var(--muted); white-space: nowrap; }
.feed-item[data-fresh="now"] .age { color: var(--red); font-weight: 700; }

.item-link { color: var(--ink); font-size: 13.8px; }
.item-link:visited { color: var(--muted); }
.item-link:hover { color: var(--blue); }

.perex-toggle {
  border: 0; background: none; color: var(--muted);
  padding: 0 4px; font-size: 15px; transition: transform .15s;
}
.perex-toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--blue); }
.perex {
  grid-column: 3 / -1;
  font-size: 12.5px; color: var(--muted);
  padding: 4px 0 2px;
}
.perex-more { display: inline-block; margin-left: 6px; font-size: 12px; }

/* položky skryté filtrem */
.feed-item.filtered { display: none; }
.filtered-note {
  padding: 4px 12px; font-size: 11.5px; color: var(--muted); font-style: italic;
}

/* ---------- perex bublina (desktop) ---------- */
.perex-bubble {
  position: absolute; top: 0; left: 0;
  max-width: 340px; z-index: 90;
  padding: 10px 12px;
  background: var(--ink); color: #F5F6FA;
  font-size: 12.8px; line-height: 1.5;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(27,34,51,.35);
  pointer-events: none;
}
.perex-bubble .arrow {
  position: absolute; width: 10px; height: 10px;
  background: var(--ink); transform: rotate(45deg);
}

/* ---------- hledání / detail ---------- */
.search-results h2, .detail h2, .account-page h2 {
  font-family: var(--font-display); font-size: 21px;
}
.search-hit, .detail-main, .detail-related, .account-grid article {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.search-hit h3 { margin: 0 0 6px; font-size: 15.5px; }
.search-hit p { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
.search-hit time { font-size: 12px; color: var(--muted); }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.pagination a.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.detail-related ul { margin: 0; padding: 0 0 0 18px; }
.detail-related li { margin-bottom: 8px; font-size: 13.5px; }
.account-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 16px; }

/* ---------- patička ---------- */
.site-footer {
  margin: 30px 0 0; padding: 16px;
  padding-bottom: calc(16px + var(--dock-h) + env(safe-area-inset-bottom));
  text-align: center; font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.perf { font-size: 11px; opacity: .7; }
.linklike { border: 0; background: none; color: var(--blue); padding: 0; font-size: inherit; }
.linklike:hover { text-decoration: underline; }

/* ---------- spodní dock (mobil) ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(27,34,51,.08);
}
.dock-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 0; background: none; color: var(--muted);
  font-size: 10.5px; font-weight: 600;
  min-height: 44px; /* palec */
}
.dock-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock-btn:active, .dock-btn.active { color: var(--blue); }
.dock-add {
  margin-top: -18px;
  width: 54px; height: 54px; justify-self: center; align-self: start;
  border-radius: 50%;
  background: var(--blue); color: #fff;
  box-shadow: 0 6px 16px rgba(17,69,126,.4);
}
.dock-add svg { width: 26px; height: 26px; }
.dock-add:active { transform: scale(.94); color: #fff; }

/* ---------- sheets ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(27,34,51,.45);
  opacity: 0; transition: opacity .18s;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; z-index: 80;
  left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow: auto;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(27,34,51,.25);
  transform: translateY(102%);
  transition: transform .22s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open { transform: none; }
.sheet header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 8px;
  position: sticky; top: 0; background: var(--surface);
}
.sheet header::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 2px; background: var(--line);
}
.sheet h2 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.sheet-close { border: 0; background: none; font-size: 24px; color: var(--muted); line-height: 1; padding: 4px 8px; }
.sheet-body { padding: 4px 18px 22px; }

/* menu sheet */
.sheet-menu .menu-top {
  display: block; padding: 10px 12px; margin-bottom: 6px;
  background: var(--blue-soft); border-radius: 8px; font-weight: 700;
}
.sheet-menu details { border-bottom: 1px solid var(--line); }
.sheet-menu summary {
  padding: 12px 4px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between;
}
.sheet-menu summary::after { content: "›"; color: var(--muted); transition: transform .15s; }
.sheet-menu details[open] summary::after { transform: rotate(90deg); }
.menu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-bottom: 10px; }
.menu-links a { padding: 9px 8px; border-radius: 6px; font-size: 14px; }
.menu-links a:active { background: var(--blue-soft); }

/* formuláře v sheets */
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--muted); }
.field input, .field textarea, .sheet input[type=search] {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: var(--paper);
}
.btn-primary {
  display: inline-block; width: 100%;
  padding: 12px; border: 0; border-radius: 8px;
  background: var(--blue); color: #fff; font-weight: 700; text-align: center;
}
.btn-secondary {
  display: inline-block; padding: 9px 16px; border: 1.5px solid var(--blue);
  border-radius: 8px; color: var(--blue); font-weight: 600;
}
.hp { position: absolute; left: -9999px; }
.form-result { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; }
.form-result.ok  { background: #E6F4EA; color: #17603A; }
.form-result.err { background: #FCE8E8; color: #96261F; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.switch-row input { width: 22px; height: 22px; flex: none; }
.filter-note { font-size: 12px; color: var(--muted); }

/* účet sheet */
.auth-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.auth-tab {
  flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); font-weight: 600;
}
.auth-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.account-links a { display: block; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.premium-link { color: #8A6D00; font-weight: 700; }
.premium-teaser {
  margin-top: 16px; padding: 14px;
  background: linear-gradient(135deg, #FFF9E8, #FFF3D1);
  border: 1px solid #EAD9A0; border-radius: var(--radius);
}
.premium-teaser h3 { margin: 0 0 6px; }

/* ==========================================================================
   RESPONSIVITA
   ========================================================================== */
@media (max-width: 1080px) {
  .columns { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .columns { grid-template-columns: 1fr; }
  .desktop-nav, .header-search, .header-account { display: none; }
  .site-header { justify-content: center; padding: 10px; position: static; }
  .ticker { justify-content: center; }
  .ticker-right { display: none; }
  .dock { display: grid; }
  .feed-item { padding: 8px 12px; }        /* větší dotykové cíle */
  .perex-toggle { padding: 4px 10px; }
  .item-link { font-size: 14.5px; }
}

@media (min-width: 761px) {
  .sheet {                                   /* na desktopu sheet = modal */
    left: 50%; right: auto; bottom: auto; top: 12vh;
    width: min(480px, 92vw);
    transform: translate(-50%, 12px);
    opacity: 0;
    border-radius: var(--radius);
    transition: transform .18s, opacity .18s;
  }
  .sheet.open { transform: translate(-50%, 0); opacity: 1; }
  .sheet header::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .dock, .sheet, .sheet-backdrop, .ticker, .site-footer .perf { display: none !important; }
}

/* ===== Moje zprávy (/moje) ===== */
.moje-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.moje-head h1{font-family:var(--display,inherit);font-size:26px;margin:0}
.btn-chip{display:inline-block;padding:8px 14px;border:1.5px solid var(--blue);border-radius:999px;color:var(--blue);text-decoration:none;font-weight:600;background:var(--card);cursor:pointer;font:inherit}
.btn-chip.solid{background:var(--blue);color:#fff}
.flash{padding:9px 12px;border-radius:8px;margin:8px 0}
.flash.ok{background:#E6F4EA;color:#17603A}.flash.err{background:#FCE8E8;color:#96261F}
.moje-manage{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.moje-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.moje-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.moje-form input,.moje-form select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;font:inherit}
.moje-form input[type=number]{width:70px}
.moje-myfeeds{display:flex;gap:6px;flex-wrap:wrap}
.moje-myfeeds .chip{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;font-size:13px}
.moje-myfeeds .chip button{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:#96261F}
.ub-wrap{position:relative;margin-bottom:14px}
.ub-controls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;background:var(--blue);border-radius:10px 10px 0 0;padding:5px 8px}
.ub-controls .ub-title{color:#fff;font-size:12px;font-weight:600;margin-right:auto}
.ub-controls button{min-width:30px;min-height:30px;border:0;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font-size:14px}
.ub-controls button:hover{background:rgba(255,255,255,.3)}
.ub-controls button.danger{background:#B3261E}
.ub-controls input[type=number]{width:52px;min-height:28px;border:0;border-radius:6px;padding:2px 6px;font:inherit}
.moje-columns.editing .ub-wrap{border:2px solid var(--blue);border-radius:12px;overflow:hidden;margin-bottom:16px}
.moje-columns.editing .feedbox{border-radius:0;border:0;margin-top:0}
.moje-columns.editing .ub-controls{border-radius:0}
.col-empty{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--muted)}
.reset-details summary{cursor:pointer;color:var(--blue);margin-top:8px}
.reset-hint{font-size:13px;margin-top:6px}
@media(max-width:760px){
  .ub-controls button{min-width:38px;min-height:38px}
  /* na mobilu je jen jeden sloupec pod sebou → šipky doprava/dolů nedávají smysl */
  .moje-columns.editing .ub-controls button[value="move_right"],
  .moje-columns.editing .ub-controls button[value="move_down"]{display:none}
}

/* ===== Zdroj 24h / Témata / Detail rozšíření / Monitoring ===== */
.feedbox-24h{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;text-decoration:none;white-space:nowrap}
.feedbox-24h:hover{color:var(--blue);border-color:var(--blue)}
.source-head h1,.topic-head h1,.topics-page h1{font-family:var(--display,inherit);font-size:24px;margin:0 0 4px}
.source-meta,.topic-meta{color:var(--muted);font-size:14px;margin:0 0 14px}
.source-hour{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:10px}
.source-hour h2{font-size:14px;color:var(--blue);margin:0 0 8px}
.source-hour ul,.topic-items{list-style:none;margin:0;padding:0}
.source-hour li,.topic-items li{padding:5px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.source-hour li:last-child,.topic-items li:last-child{border-bottom:0}
.ctx-link{font-size:12px;color:var(--muted);white-space:nowrap}
.topic-kind{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0}
.topic-src,.rel-src{font-size:11px;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--muted);white-space:nowrap}
.topics-cloud{list-style:none;margin:14px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topics-cloud a{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;color:var(--ink)}
.topics-cloud a:hover{border-color:var(--blue);color:var(--blue)}
.topics-cloud small{color:var(--muted)}
.detail-src{font-size:13px;color:var(--muted)}
.detail-perex{font-size:17px;line-height:1.6}
.detail-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag-chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;text-decoration:none;color:var(--ink)}
.tag-chip:hover{border-color:var(--blue);color:var(--blue)}
.rel-src{margin-right:2px}
.monitoring-card .premium-badge{font-size:11px;background:#FEF3D8;border:1px solid #E7C566;color:#7A5A00;border-radius:999px;padding:2px 8px;vertical-align:middle}
.mon-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.mon-form .field{flex:1;min-width:220px}
.mon-list{list-style:none;margin:12px 0 0;padding:0}
.mon-list li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line)}
.mon-list li.inactive{opacity:.5}
.mon-list small{color:var(--muted)}
.mon-actions{margin-left:auto}
.mon-actions button{border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px;margin-left:4px}

/* ===== Premium platba + licenční přihlášení ===== */
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:13px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.license-form input{font-family:ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}
.license-note{font-size:12px;color:var(--muted)}
.pay-box{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:10px;flex-wrap:wrap}
.pay-box img{border-radius:8px;background:var(--card)}
.pay-info p{margin:4px 0}
.pay-vs{font-family:ui-monospace,monospace;font-size:18px}
.pay-note{font-size:12px;color:var(--muted)}


/* ===== Tmavý režim (html[data-theme=dark], výchozí auto dle systému) ===== */
html[data-theme="dark"] {
  --paper:    #0E1524;
  --surface:  #16203A;
  --card:     #16203A;
  --card-2:   #1B2745;
  --ink:      #E5EAF3;
  --muted:    #8B95A9;
  --line:     #2A3654;
  --blue:     #6FA3E0;   /* světlejší modrá kvůli kontrastu na tmavé */
  --blue-soft:#1C2C4C;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] img { opacity: .92; }
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .dock { background: #0B1220; }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .dock-add { background: #2E62A8; }
html[data-theme="dark"] .perex-bubble { background: #060A12; border-color: var(--line); }


/* ===== "Nové od vaší poslední návštěvy" ===== */
.since-visit { position: relative; }
.since-visit::after {
  content: "nové"; display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-soft);
  border-radius: 4px; padding: 1px 5px; vertical-align: 1px;
}
.since-visit-note {
  background: var(--blue-soft); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: 14px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.since-clear { border: 0; background: none; color: var(--blue); cursor: pointer; font-size: 13px; text-decoration: underline; }
.push-setup { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.push-status { font-size: 13px; color: var(--muted); }

/* ===== Vlna 2: trending, brief, souhrny, osobní RSS ===== */
.trending-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:14px}
.trending-label{font-weight:700;color:var(--red);font-size:13px;white-space:nowrap}
.trending-chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--ink);font-size:13px}
.trending-chip:hover{border-color:var(--red);color:var(--red)}
.trending-chip small{color:var(--muted)}
.trending-brief{margin-left:auto;font-size:13px;color:var(--blue);text-decoration:none;white-space:nowrap}
.brief-page h1{font-family:var(--display,inherit);font-size:26px;margin:0 0 4px}
.brief-meta{color:var(--muted);font-size:14px;margin:0 0 16px}
.brief-topic{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:12px}
.brief-topic h2{font-size:17px;margin:0 0 6px}
.brief-topic h2 small{color:var(--muted);font-weight:400;font-size:12px}
.brief-topic ul{list-style:none;margin:8px 0 0;padding:0}
.brief-topic li{padding:3px 0;font-size:14px}
.brief-archive{color:var(--muted);font-size:13px}
.brief-archive a{margin-right:8px}
.topic-summary{background:var(--blue-soft);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.topic-summary p{margin:0 0 4px}
.topic-summary small{color:var(--muted)}
.moje-rss{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;border-top:1px dashed var(--line);padding-top:10px}
.rss-url{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:11px;word-break:break-all}

/* ===== Lišta: odkazy Moje zprávy / Deník / Discord ===== */
a.chip{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.chip-moje{border:1.5px solid var(--red)!important;color:var(--red)!important;font-weight:600}
.chip-moje:hover{background:var(--red);color:#fff!important}
.chip-discord{border-color:#5865F2!important;color:#5865F2!important;font-weight:600}
.chip-discord:hover{background:#5865F2;color:#fff!important}
.chip-discord svg{flex:none}

/* ===== Deník vývoje (/devblog) ===== */
.devblog-index h1,.devblog-post h1{font-family:var(--font-display,inherit);font-size:26px;margin:0 0 6px}
.devblog-lead{color:var(--muted);margin:0 0 18px}
.devblog-list{list-style:none;margin:0;padding:0}
.devblog-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.devblog-list li a{font-weight:600;font-size:16px;text-decoration:none;color:var(--ink)}
.devblog-list li a:hover{color:var(--blue)}
.devblog-list time{color:var(--muted);font-size:13px;white-space:nowrap}
.devblog-post{max-width:720px}
.devblog-post h1{font-size:28px}
.devblog-post h2{font-size:20px;margin:22px 0 8px}
.devblog-post h3{font-size:16px;margin:18px 0 6px}
.devblog-post p{line-height:1.7;margin:0 0 14px}
.devblog-post code{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:.9em}
.devblog-post ul{margin:0 0 14px;padding-left:22px;line-height:1.7}
.devblog-back{margin:0 0 16px}
.devblog-back a{color:var(--blue);text-decoration:none;font-size:14px}

/* ===== /moje — CTA pro nepřihlášené ===== */
.moje-cta{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--blue-soft);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:16px}
.moje-cta-text strong{font-size:16px;color:var(--ink)}
.moje-cta-text p{margin:6px 0 0;color:var(--ink);opacity:.85;line-height:1.6;max-width:640px}
.moje-cta-btn{white-space:nowrap;flex:none}
html[data-theme="dark"] .moje-cta{background:#1C2C4C}

/* ===== /moje: masonry ve view režimu (bez děr, funguje všude přes CSS columns) ===== */
.moje-masonry{column-count:3;column-gap:14px}
.moje-masonry .ub-wrap{break-inside:avoid;margin-bottom:14px;display:inline-block;width:100%}
@media (max-width:1080px){ .moje-masonry{column-count:2} }
@media (max-width:760px){ .moje-masonry{column-count:1} }