/* InsightHub — styl portálu (Sprint 1). Layout podle starého artifactu
   „Přehledy týdne" (levý panel oborů + seznam + čtečka), ale čitelný
   systémový sans-serif font, mono jen na drobné popisky, světlá teplá
   paleta, akcent per sekce, hero náhledy v kartách. */
:root {
  color-scheme: light;
  --bg: #faf8f3;
  --paper: #ffffff;
  --panel: #f5f2ec;
  --panel2: #ece8df;
  --ink: #1f1c17;
  --soft: #6c685f;
  --faint: #9c988e;
  --hair: #e6e1d6;
  --hair2: #d8d3c8;
  --accent: #b87a7a;          /* default akcent (staroružová), per sekce přepsán --ccol */
  --ccol: var(--accent);
  --tint: #f6eeee;            /* světlý nádech akcentu */
  --ok: #2f7d6b;
  --warn: #c8742a;
  --err: #b04a3a;
  /* čitelný systémový sans-serif (jako v dřívější variantě, kterou Misho chválil) */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 3px rgba(31, 28, 23, .04);
  /* aliasy pro admin/settings.html (starší názvy tokenů) */
  --ink-soft: var(--soft);
  --ink-faint: var(--faint);
  --line: var(--hair);
  --line-soft: #efe9dd;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ===================== dvoupanelový layout ===================== */
.app { display: flex; min-height: 100vh; }

/* ---- levý panel oborů ---- */
.side {
  width: 270px; flex: 0 0 270px; background: var(--panel); border-right: 1px solid var(--hair);
  height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: 20px 0 24px;
}
.side-brand { display: block; font-family: var(--ui); font-size: 27px; letter-spacing: -.02em;
  font-weight: 750; color: var(--ink); padding: 4px 20px 2px; line-height: 1.05; }
.side-brand span { color: var(--accent); }
.side-tag { font-family: var(--ui); font-size: 12.5px; letter-spacing: 0; color: var(--soft);
  padding: 2px 20px 16px; line-height: 1.4; }
.nav-h { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); padding: 14px 20px 8px; margin-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; margin: 0 8px 4px; padding: 11px 12px;
  border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; color: var(--ink);
  transition: background .12s, border-color .12s;
}
.nav-item:hover { background: var(--panel2); }
.nav-item.active { background: var(--paper); border-left-color: var(--ccol);
  color: var(--ccol); box-shadow: var(--shadow); }
.nav-item .nav-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ccol); flex: 0 0 9px; }
.nav-item .nav-lbl { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 560; line-height: 1.2; }
.nav-item.active .nav-lbl { font-weight: 640; }
.nav-item .nav-lbl small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); font-weight: 500; margin-top: 3px; }
.nav-item .nav-badge { font-family: var(--mono); font-size: 10px; color: var(--soft); background: var(--panel2);
  min-width: 24px; text-align: center; padding: 2px 8px; border-radius: 11px; font-weight: 600; }
.nav-item.active .nav-badge { color: var(--ccol); background: var(--tint); }
.nav-item.muted { opacity: .5; }
/* Nastavení i Oblíbené = stejný vzhled jako obory (.nav-item) */
.nav-settings { margin-top: 14px; padding-top: 18px; border-top: 1px dashed var(--hair2); border-radius: 0 0 8px 8px; }

/* hledání v levém panelu (nad obory i nastavením) */
.side-search { padding: 2px 14px 12px; }
.side-search input { width: 100%; font-family: var(--ui); font-size: 13.5px; padding: 9px 12px 9px 32px;
  border: 1px solid var(--hair2); border-radius: 9px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239c988e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--ink); }
.side-search input:focus { outline: none; border-color: var(--accent); }
.side-search input::placeholder { color: var(--faint); }

/* panel „nech mi vytvořit článek" nad výsledky hledání */
.reqbox { background: var(--panel); border: 1px solid var(--hair); border-left: 3px solid var(--ccol, var(--accent));
  border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 0 0 22px; }
.reqbox h3 { font-family: var(--ui); font-size: 16px; font-weight: 680; margin: 0 0 5px; }
.reqbox p { font-size: 13px; color: var(--soft); margin: 0 0 12px; line-height: 1.45; }
.reqbox textarea { width: 100%; font-family: var(--ui); font-size: 14px; line-height: 1.5; padding: 10px 13px;
  border: 1px solid var(--hair2); border-radius: 9px; min-height: 66px; resize: vertical; color: var(--ink); background: var(--paper); }
.reqbox textarea:focus { outline: none; border-color: var(--accent); }
.reqbox .reqfoot { display: flex; gap: 12px; align-items: center; margin-top: 11px; }
.reqbox .req-saved { font-family: var(--ui); font-size: 13px; color: var(--ok); opacity: 0; transition: opacity .25s; }
.reqbox .req-saved.show { opacity: 1; }

/* ---- pravá plocha ---- */
.main { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; }
.main-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 13px 26px; background: rgba(250, 248, 243, .94); backdrop-filter: saturate(1.3) blur(7px);
  border-bottom: 1px solid var(--hair);
}
.main-top .crumbs { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soft); }
.main-top .crumbs a:hover { color: var(--accent); }
.main-top .spacer { flex: 1; }
.langtog { display: inline-flex; border: 1px solid var(--hair2); border-radius: 7px; overflow: hidden; }
.langtog button { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 6px 13px;
  border: 0; background: var(--paper); color: var(--soft); cursor: pointer; }
.langtog button.on { background: var(--ccol); color: #fff; }
.langtog button:disabled { opacity: .4; cursor: not-allowed; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .04em; color: var(--soft); padding: 5px 11px; border: 1px solid var(--hair2);
  border-radius: 999px; background: var(--paper); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c8c8c8; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--err); }

/* ---- seznam článků ---- */
.docs { max-width: 860px; margin: 0 auto; padding: 22px 30px 90px; }
.docs-h { display: flex; align-items: baseline; gap: 13px; margin: 10px 0 4px; }
.docs-h h1 { font-family: var(--ui); font-weight: 680; font-size: 30px; letter-spacing: -.02em; margin: 0; }
.docs-h .cad { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.docs-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--soft); margin: 0 0 20px; }
.doc {
  display: flex; gap: 18px; align-items: flex-start; height: 212px; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 12px;
  padding: 17px 18px; margin-bottom: 14px; background: var(--paper); cursor: pointer; box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.doc:hover { box-shadow: 0 8px 26px rgba(31, 28, 23, .1); transform: translateY(-1px); }
.doc:active { transform: translateY(0); }
/* nepřečtený článek — výrazný akcentový rámeček */
.doc.unread { border-color: var(--ccol); box-shadow: inset 0 0 0 1px var(--ccol), var(--shadow); }
.doc.read { opacity: .96; }
/* cover časopisu — JEDNOTNÝ pevný rozměr u všech karet (A4 poměr 210:297) */
.doc .doc-cover { flex: 0 0 126px; width: 126px; height: 178px;
  border-radius: 7px; object-fit: cover; object-position: center; background: var(--panel2);
  border: 1px solid rgba(0,0,0,.06); box-shadow: 0 3px 10px rgba(31, 28, 23, .16); }
.doc.read .doc-cover { filter: saturate(.92); opacity: .9; }
.doc .doc-cover-ph { background: linear-gradient(150deg, var(--ccol) 0%, var(--ink) 130%); }
.doc .doc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc .obor { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ccol); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc .unread-tag { display: inline-block; margin-left: 9px; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ccol); padding: 2px 7px;
  border-radius: 10px; vertical-align: 1px; }
/* nadpis vždy max 2 řádky a rezervuje 2 řádky → karty stejně vysoké */
.doc h3 { font-family: var(--ui); font-weight: 660; font-size: 19px; line-height: 1.3; margin: 5px 0 0;
  letter-spacing: -.01em; color: var(--ink); min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc .meta { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 8px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .03em; color: var(--faint); }
.doc .meta b { color: var(--soft); font-weight: 600; }
.doc .tip { margin: 10px 0 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: var(--panel); border-left: 2.5px solid var(--ccol); padding: 9px 13px; border-radius: 0 7px 7px 0; }
.doc .tip-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc .tip b { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ccol); display: block; margin-bottom: 3px; font-weight: 600; }
.docs .empty { font-family: var(--mono); font-size: 12px; color: var(--faint); padding: 30px 0; text-align: center; }

/* ---- čtečka (inline HTML náhled) ---- */
.reader { max-width: 1120px; margin: 0 auto; padding: 16px clamp(16px, 3vw, 36px) 60px; }
.reader .back { display: inline-block; margin: 6px 0 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--soft); cursor: pointer; }
.reader .back:hover { color: var(--accent); }
.reader-head { border-left: 3px solid var(--ccol); padding: 2px 0 2px 17px; margin-bottom: 16px; }
.reader-head .obor { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ccol); }
.reader-head h1 { font-family: var(--ui); font-weight: 680; font-size: 29px; line-height: 1.18; letter-spacing: -.02em; margin: 8px 0 0; }
.reader-head .dek { font-family: var(--ui); color: var(--soft); font-size: 16px; margin: 10px 0 0; line-height: 1.45; }

/* akční tlačítka čtečky — větší a čitelná (sans, ne drobný mono) */
.reader-actions { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.reader-actions .btn {
  font-family: var(--ui); font-size: 14.5px; font-weight: 600; letter-spacing: 0;
  padding: 11px 20px; border-radius: 10px; gap: 9px;
}
.reader-actions .btn .ico { font-size: 17px; }
.btn.fb-open { margin-left: auto; }

.reader-frame { width: 100%; border: 1px solid var(--hair); border-radius: 13px; background: #fff;
  box-shadow: var(--shadow); overflow: hidden; }
.reader-frame iframe { display: block; width: 100%; border: 0; min-height: 60vh; }
.reader .relrow { margin-top: 24px; }
.reader .relrow h3 { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); margin: 0 0 10px; }
.reader .relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 9px; }
.reader .relgrid a { display: block; padding: 11px 14px; background: var(--panel);
  border-left: 2px solid var(--ccol); border-radius: 0 8px 8px 0; }
.reader .relgrid a:hover { background: var(--panel2); }
.reader .relgrid .rtopic { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ccol); font-weight: 700; }
.reader .relgrid .rtitle { display: block; margin-top: 3px; font-family: var(--ui); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* ---- Nastavení sekcí (uvnitř SPA, stejný layout jako čtečka) ---- */
.settings { max-width: 940px; margin: 0 auto; padding: 22px 30px 90px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 16px; margin-top: 20px; }
.set-card { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--ccol);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); transition: opacity .15s; }
.set-card:not(.on) { opacity: .62; }
.set-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--hair); background: var(--panel); }
.set-head .set-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ccol); flex: 0 0 11px; }
.set-name { flex: 1; font-family: var(--ui); font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; color: var(--ink); }
.set-name small { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); font-weight: 500; margin-top: 2px; letter-spacing: .02em; }
/* přepínač aktivní */
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 46px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--hair2); border-radius: 13px; transition: background .16s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s; }
.switch input:checked + .track { background: var(--ccol); }
.switch input:checked + .track::after { transform: translateX(20px); }
.set-body { padding: 16px 18px 6px; }
.set-row { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; margin-bottom: 13px; }
.set-row > label { font-family: var(--ui); font-size: 13.5px; color: var(--ink-soft); font-weight: 560; }
.set-in { font-family: var(--ui); font-size: 14px; height: 40px; line-height: normal; padding: 0 12px;
  border: 1px solid var(--hair2); border-radius: 9px; background: var(--paper); color: var(--ink);
  width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.set-in:focus { outline: none; border-color: var(--ccol); }
/* žádné posuvníky u čísel ani u času — hodnoty se píšou ručně */
.set-in[type=number] { -moz-appearance: textfield; }
.set-in[type=number]::-webkit-outer-spin-button,
.set-in[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.set-in[type=time]::-webkit-calendar-picker-indicator { display: none; }
/* vlastní šipka u selectů (appearance:none ji jinak skryje) */
select.set-in { padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c685f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
input[type=number].set-in, input[type=time].set-in { max-width: 130px; }
.set-langs { display: flex; gap: 18px; }
.set-langs label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ui); font-size: 14px; color: var(--ink); cursor: pointer; }
.set-foot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--hair); }
.set-foot .btn.primary { font-family: var(--ui); font-size: 14.5px; font-weight: 600; letter-spacing: 0; padding: 10px 22px; border-radius: 9px; }
.set-saved { font-family: var(--ui); font-size: 13.5px; color: var(--ok); }

/* ---- Nový obor ---- */
.ns-form { max-width: 660px; }
.ns-grouph { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ccol); margin: 22px 0 13px; padding-bottom: 7px; border-bottom: 1px solid var(--hair); }
.ns-grouph:first-child { margin-top: 2px; }
.chips-row, .ns-notes-row { align-items: start; }
.chips-row > label, .ns-notes-row > label { padding-top: 9px; }
.chips-field { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ui); font-size: 13px; font-weight: 500;
  padding: 5px 6px 5px 12px; background: var(--panel); border: 1px solid var(--hair2); border-radius: 16px; color: var(--ink); }
.chip button { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 50%; }
.chip button:hover { color: var(--err); }
.ns-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-swatches .sw { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ns-swatches .sw.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 2px var(--paper); }
.ns-notes-row .fb-text { min-height: 96px; }

/* toast (SPA) */
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 11px; font-family: var(--ui); font-size: 14.5px;
  box-shadow: 0 12px 34px rgba(0,0,0,.26); opacity: 0; pointer-events: none; transition: all .22s; z-index: 60; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--err); }

/* ---- panel zpětné vazby (NEMODÁLNÍ vysouvací zprava) ----
   Žádné ztmavení/blokování — s náhledem jde dál pracovat (výběr, kopírování).
   Na širokém okně se obsah odsune doleva, ať ho panel nepřekrývá. */
.fbpanel { position: fixed; top: 0; right: 0; height: 100vh; width: 392px; max-width: 96vw; background: var(--paper);
  border-left: 1px solid var(--hair); box-shadow: -12px 0 40px rgba(31,28,23,.14); z-index: 41;
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; }
.fbpanel.open { transform: translateX(0); }
.main { transition: padding-right .24s cubic-bezier(.4,0,.2,1); }
@media (min-width: 1180px) { .app.fb-open .main { padding-right: 404px; } }
.fbpanel .fb-top { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.fbpanel .fb-top h2 { font-family: var(--ui); font-size: 17px; font-weight: 680; margin: 0; flex: 1; }
.fbpanel .fb-close { font-size: 22px; line-height: 1; color: var(--faint); cursor: pointer; background: none; border: 0; padding: 4px; }
.fbpanel .fb-close:hover { color: var(--ink); }
.fbpanel .fb-art { font-size: 12.5px; color: var(--soft); padding: 12px 20px 0; line-height: 1.4; }
.fbpanel .fb-body { flex: 1; overflow-y: auto; padding: 14px 20px 20px; }
.fb-group { margin-bottom: 20px; }
.fb-group > label { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 9px; }
.fb-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-rate button { display: flex; align-items: center; gap: 9px; font-family: var(--ui); font-size: 14px; font-weight: 560;
  padding: 11px 13px; border: 1px solid var(--hair2); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; }
.fb-rate button .e { font-size: 19px; }
.fb-rate button:hover { border-color: var(--ccol); }
.fb-rate button.on { background: var(--ccol); border-color: var(--ccol); color: #fff; }
.fb-seg { display: flex; border: 1px solid var(--hair2); border-radius: 9px; overflow: hidden; }
.fb-seg button { flex: 1; font-family: var(--ui); font-size: 13.5px; font-weight: 560; padding: 10px 8px; border: 0;
  border-right: 1px solid var(--hair2); background: var(--paper); color: var(--soft); cursor: pointer; }
.fb-seg button:last-child { border-right: 0; }
.fb-seg button.on { background: var(--ccol); color: #fff; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fb-chip { font-family: var(--ui); font-size: 13px; padding: 7px 13px; border: 1px solid var(--hair2); background: var(--paper);
  color: var(--soft); border-radius: 16px; cursor: pointer; user-select: none; }
.fb-chip:hover { border-color: var(--ccol); color: var(--ink); }
.fb-chip.on { background: var(--ccol); border-color: var(--ccol); color: #fff; }
.fb-text { width: 100%; font-family: var(--ui); font-size: 14px; line-height: 1.5; padding: 11px 13px; border: 1px solid var(--hair2);
  border-radius: 10px; resize: vertical; min-height: 84px; color: var(--ink); background: var(--paper); }
.fb-text:focus { outline: none; border-color: var(--ccol); }
.fbpanel .fb-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--hair); }
.fbpanel .fb-foot .btn { font-family: var(--ui); font-size: 14.5px; font-weight: 600; padding: 11px 20px; }
.fbpanel .fb-saved { font-family: var(--ui); font-size: 13px; color: var(--ok); opacity: 0; transition: opacity .25s; }
.fbpanel .fb-saved.show { opacity: 1; }
.fbpanel .fb-draft { font-family: var(--ui); font-size: 12px; color: var(--warn); margin-left: auto; opacity: 0; transition: opacity .2s; }
.fbpanel .fb-draft.show { opacity: 1; }

/* ---- pin / oblíbené ---- (Oblíbené i Nastavení = .nav-item jako obory) */
.reader-actions .btn.pin-on { background: var(--ccol); border-color: var(--ccol); color: #fff; }
.doc .pin-badge { display: inline-block; margin-left: 9px; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #c8902a; }
.fav-group-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); margin: 24px 0 11px; padding-bottom: 7px; border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: 9px; }
.fav-group-h:first-child { margin-top: 4px; }
.fav-group-h .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- tlačítka (mono, jako v artifactu) ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; padding: 8px 14px; border: 1px solid var(--hair2); border-radius: 6px;
  background: var(--paper); color: var(--soft); cursor: pointer; transition: all .12s;
}
.btn:hover { border-color: var(--ccol); color: var(--ccol); background: var(--tint); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; color: #fff; }
.btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }

/* ---- stavové hlášky ---- */
.loading, .errbox { font-family: var(--mono); font-size: 12px; color: var(--faint); padding: 40px 0; text-align: center; }
.errbox { color: var(--err); }


/* ============================================================
   Sprint 3 — přihlášení, uživatel v panelu, viditelnost oborů
   ============================================================ */

/* ---- uživatel + odhlášení v levém panelu ---- */
.side-user { position: sticky; bottom: -24px; margin-top: 14px; padding: 13px 18px 24px;
  background: var(--panel); border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-user:empty { display: none; }
.su-who { display: flex; align-items: center; gap: 8px; font-family: var(--ui);
  font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.su-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px rgba(47, 125, 107, .14); }
.su-logout { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; flex: none;
  padding: 5px 10px; border: 1px solid var(--hair2); border-radius: 6px; background: var(--paper);
  color: var(--soft); cursor: pointer; transition: all .12s; }
.su-logout:hover { border-color: var(--err); color: var(--err); background: #fbeeec; }

/* ---- přihlašovací obrazovka ---- */
.login-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: 24px;
  background: radial-gradient(120% 120% at 50% -10%, #fff 0%, var(--bg) 60%, #f0ece3 100%); }
.login-gate[hidden] { display: none; }
.login-card { width: 100%; max-width: 360px; background: var(--paper); border: 1px solid var(--hair);
  border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 18px 50px rgba(31, 28, 23, .12);
  display: flex; flex-direction: column; }
.login-brand { font-family: var(--ui); font-weight: 800; font-size: 26px; letter-spacing: -.02em;
  color: var(--ink); text-align: center; }
.login-brand span { color: var(--accent); }
.login-sub { font-family: var(--ui); font-size: 13px; color: var(--soft); text-align: center;
  margin: 6px 0 24px; }
.login-l { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px; }
.login-card input { font-family: var(--ui); font-size: 15px; padding: 11px 13px; margin-bottom: 16px;
  border: 1px solid var(--hair2); border-radius: 9px; background: var(--bg); color: var(--ink);
  transition: border-color .12s, background .12s; }
.login-card input:focus { outline: none; border-color: var(--accent); background: #fff; }
.login-btn { justify-content: center; font-size: 11.5px; padding: 12px; margin-top: 4px; }
.login-err { font-family: var(--ui); font-size: 13px; color: var(--err); text-align: center;
  margin-top: 14px; background: #fbeeec; border: 1px solid #efcfc9; border-radius: 8px; padding: 9px; }

/* ---- viditelnost oborů (v Nastavení) ---- */
.vis-card { grid-column: 1 / -1; }
.vis-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.vis-mini { font-size: 9.5px; padding: 5px 11px; }
.vis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.vis-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 9px; background: var(--bg); transition: all .12s; }
.vis-item:hover { border-color: var(--ccol); background: #fff; }
.vis-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.vis-sw { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--hair2);
  background: var(--paper); flex: none; position: relative; transition: all .12s; }
.vis-item input:checked ~ .vis-sw { background: var(--ccol); border-color: var(--ccol); }
.vis-item input:checked ~ .vis-sw::after { content: "✓"; position: absolute; inset: 0;
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.vis-lbl { font-family: var(--ui); font-size: 13.5px; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-item input:not(:checked) ~ .vis-lbl { color: var(--faint); }
.vis-cnt { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: none; }
.vis-others { display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer;
  font-family: var(--ui); font-size: 13.5px; color: var(--ink); padding-top: 14px;
  border-top: 1px solid var(--hair); }
.vis-others input { position: absolute; opacity: 0; width: 0; height: 0; }
.track-mini { width: 34px; height: 19px; border-radius: 11px; background: var(--hair2); flex: none;
  position: relative; transition: background .14s; }
.track-mini::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .14s; }
.vis-others input:checked ~ .track-mini { background: var(--ok); }
.vis-others input:checked ~ .track-mini::after { transform: translateX(15px); }

/* ---- Novinky (nepřečtené) — badge svítí akcentem, když něco je ---- */
.nav-news-item:not(.muted) .nav-badge { color: #fff; background: var(--ccol); }

/* ============================================================
   Sprint 4 + správa uživatelů — Inbox požadavků, hesla, uživatelé
   ============================================================ */
.nav-inbox-item:not(.muted) .nav-badge { color: #fff; background: var(--ccol); }

/* ---- Inbox: požadavky na články ---- */
.inbox-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui);
  font-size: 13px; color: var(--soft); margin: 0 0 16px; cursor: pointer; }
.reqcard { background: var(--paper); border: 1px solid var(--hair); border-left: 3px solid var(--ccol, #9a6fb0);
  border-radius: 0 12px 12px 0; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.reqcard.done { opacity: .62; border-left-color: var(--hair2); }
.reqcard-head { display: flex; align-items: baseline; gap: 10px; }
.reqcard-head .prio { font-size: 15px; flex: none; }
.reqcard-topic { font-family: var(--ui); font-weight: 660; font-size: 16px; color: var(--ink); flex: 1; line-height: 1.3; }
.req-donetag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ok); background: #eaf3ef; padding: 3px 8px; border-radius: 999px; flex: none; }
.reqcard-instr { font-family: var(--ui); font-size: 13.5px; color: var(--soft); margin: 8px 0 0; line-height: 1.5; }
.reqcard-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; }
.req-link { font-family: var(--mono); font-size: 11px; color: #2a5bd7; }
.req-link:hover { text-decoration: underline; }
.reqcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.reqcard-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--faint); }
.reqcard-meta b { color: var(--soft); }
.req-done-btn { font-size: 10px; padding: 6px 12px; }

/* ---- karta změny hesla ---- */
.pw-card .set-in { font-family: var(--ui); font-size: 14px; }

/* ---- správa uživatelů ---- */
.usr-card { grid-column: 1 / -1; }
.usr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.usr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg);
  border: 1px solid var(--hair); border-radius: 10px; }
.usr-badge { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; flex: none; color: var(--soft); background: var(--panel2); }
.usr-badge.admin { color: #fff; background: #b0473a; }
.usr-nm { flex: 1; min-width: 0; font-family: var(--ui); font-weight: 620; font-size: 14.5px; color: var(--ink); }
.usr-nm em { font-style: normal; color: var(--faint); font-weight: 500; font-size: 12px; }
.usr-nm small { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); font-weight: 500; margin-top: 3px; }
.usr-acts { display: flex; gap: 7px; flex: none; }
.usr-mini { font-size: 9.5px; padding: 6px 11px; }
.usr-del:hover { border-color: var(--err); color: var(--err); background: #fbeeec; }
.usr-add { border-top: 1px dashed var(--hair2); padding-top: 14px; }
.usr-passwrap { display: flex; gap: 8px; flex: 1; }
.usr-passwrap .set-in { flex: 1; }

/* ---- Sprint 6: plánovač (řádek v kartě oboru) ---- */
.sched-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px; margin: 0; background: var(--bg); border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 10px; }
.sched-next { color: var(--soft); letter-spacing: .03em; }
.sched-row.due .sched-next { color: var(--ink); }
.sched-due { color: #fff; background: var(--warn); padding: 3px 8px; border-radius: 999px;
  letter-spacing: .04em; font-weight: 600; white-space: nowrap; }
.sched-banner { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: #fff;
  background: var(--warn); border-radius: 10px; padding: 11px 16px; margin: 0 0 18px; }

/* ============================================================
   Sprint 7 — tmavý režim (přepínač v horní liště) + brand
   ============================================================ */
.theme-tog { font-size: 15px; line-height: 1; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--hair2); background: var(--paper); color: var(--soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .12s; }
.theme-tog:hover { color: var(--accent); border-color: var(--accent); }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130e;
  --paper: #1e1b15;
  --panel: #1a1712;
  --panel2: #272118;
  --ink: #efe9dd;
  --soft: #b0a896;
  --faint: #7c7567;
  --hair: #2c2820;
  --hair2: #3b3528;
  --tint: #2b2320;
  --shadow: 0 1px 3px rgba(0, 0, 0, .45);
  --line-soft: #241f17;
}
/* opravy míst s natvrdo světlou barvou */
html[data-theme="dark"] .main-top { background: rgba(21, 19, 14, .92); }
html[data-theme="dark"] .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-theme="dark"] .btn.primary:hover { background: #fff; color: #000; }
html[data-theme="dark"] .login-gate {
  background: radial-gradient(120% 120% at 50% -10%, #221e18 0%, var(--bg) 60%, #100e0a 100%); }
html[data-theme="dark"] .doc-cover-ph { background: var(--panel2); }
html[data-theme="dark"] .langtog button.on,
html[data-theme="dark"] .nav-news-item:not(.muted) .nav-badge,
html[data-theme="dark"] .nav-inbox-item:not(.muted) .nav-badge { color: #fff; }

/* ============================================================
   Sprint 8 — důvěryhodnost, štítky, podkategorie
   ============================================================ */
.cred-badge { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #fff; margin-left: 8px; }
.cred-badge.official { background: #1f6f57; } .cred-badge.study { background: #2a5bd7; }
.cred-badge.claim { background: #c8742a; } .cred-badge.speculation { background: #8a4b3a; }

.doc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.doc-tags .tg { font-family: var(--mono); font-size: 9.5px; color: var(--soft); background: var(--panel2);
  padding: 2px 7px; border-radius: 999px; }
.reader-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.reader-tags .tg { font-family: var(--mono); font-size: 11px; color: var(--ccol); background: var(--tint);
  padding: 4px 11px; border-radius: 999px; transition: all .12s; }
.reader-tags .tg:hover { background: var(--ccol); color: #fff; }

/* podkategorie (Health) — záložky */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.subtab { font-family: var(--ui); font-size: 13px; font-weight: 560; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--hair2); border-radius: 999px; background: var(--paper); color: var(--soft);
  display: inline-flex; align-items: center; gap: 7px; transition: all .12s; }
.subtab:hover { border-color: var(--ccol, var(--accent)); color: var(--ink); }
.subtab span { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.subtab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.subtab.on span { color: rgba(255,255,255,.7); }
html[data-theme="dark"] .subtab.on { background: var(--ink); color: var(--bg); }

/* ---- iMessage picker popover ---- */
.imsg-pop { position: fixed; z-index: 120; width: 270px; background: var(--paper); border: 1px solid var(--hair2);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 10px; }
.imsg-pop-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 2px 4px 8px; }
.imsg-ct { display: block; width: 100%; text-align: left; padding: 9px 11px; margin-bottom: 4px; border-radius: 8px;
  border: 1px solid var(--hair); background: var(--bg); cursor: pointer; font-family: var(--ui); font-size: 14px;
  font-weight: 600; color: var(--ink); }
.imsg-ct:hover { border-color: var(--accent); background: var(--tint); }
.imsg-ct small { display: block; font-family: var(--mono); font-size: 10px; color: var(--faint); font-weight: 500; margin-top: 2px; }
.imsg-empty { font-family: var(--ui); font-size: 12.5px; color: var(--soft); padding: 6px 4px 10px; }
.imsg-new { display: flex; gap: 6px; border-top: 1px solid var(--hair); padding-top: 9px; margin-top: 4px; }
.imsg-new input { flex: 1; min-width: 0; font-family: var(--ui); font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--hair2); border-radius: 8px; background: var(--bg); color: var(--ink); }
.imsg-new .btn { font-size: 10px; padding: 8px 12px; }

/* ---- zvýraznění nadpisu Obory + oddělení skupiny Správa ---- */
.nav-h-obory { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .16em;
  border-top: 1px solid var(--hair); margin-top: 10px; padding-top: 15px; }
.nav-manage { margin-top: 16px; padding-top: 6px; border-top: 2px solid var(--hair2); }
.nav-h-manage { color: var(--soft); font-weight: 700; }
/* zruš starý dashed oddělovač (skupinu odděluje nav-manage) */
.nav-settings { margin-top: 0; padding-top: 11px; border-top: 0; }