/* Nyxium Docs — vzhled podle pasu karet Wordu, tmavy obal, bila stranka. */

:root {
  --nd-bg:      #1f1f1f;
  --nd-bar:     #2b2b2b;
  --nd-pas:     #252525;
  --nd-plocha:  #3b3b3b;
  --nd-line:    #3a3a3a;
  --nd-line-2:  #4a4a4a;
  --nd-tx:      #f2f2f2;
  --nd-tx-2:    #c0c0c0;
  --nd-tx-3:    #949494;
  --nd-acc:     var(--acc-deep, #2b579a);
  --nd-acc-sv:  var(--acc, #4a8ae0);
  --nd-hover:   #363636;
  --nd-sel:     #404040;
  /* Obal aplikace. Hodnoty jsou presne ty, ktere byly napsane natvrdo
     v pravidlech, takze tmavy rezim zustava bajt na bajt stejny. */
  --nd-tx-hi:      #fff;                    /* text na modrem titulkovem pruhu */
  --nd-tx-pas:     #fff;                    /* text na pasu karet, v panelech a ve spodni liste */
  --nd-tx-hi-2:    rgba(255,255,255,.8);
  --nd-tx-off:     #6a6a6a;
  --nd-hover-hi:   rgba(255,255,255,.18);
  --nd-pole-hi:    rgba(255,255,255,.1);    /* pole se jmenem v titulku */
  --nd-okraj-hi:   rgba(255,255,255,.35);
  --nd-prep:       rgba(255,255,255,.25);   /* draha prepinace */
  --nd-ohnisko:    #fff;                    /* obrys ohniska na tmavem */
  --nd-invert:     #fff;                    /* zapnuty rezim: plocha naopak */
  --nd-invert-tx:  #111;
  --nd-pole:       #1c1c1c;
  --nd-btn:        #3a3a3a;
  --nd-btn-2:      #333;
  --nd-btn-hover:  #3d3d3d;
  --nd-btn-2-hover:#45506b;
  --nd-menu-bg:    #2f2f2f;
  --nd-kom-bg:     #2f2f2f;                 /* bublina komentare */
  --nd-dlg-bg:     #2b2b2b;
  --nd-dlg-btn:    #363636;
  --nd-dlg-btn-hover:#414141;
  --nd-pop-br:     #4a4a4a;
  --nd-mrizka-br:  #666;                    /* mrizka na vyber tabulky */
  --nd-scroll:     #555;
  --nd-scrim:      rgba(0,0,0,.5);
  --nd-el-menu:    rgba(0,0,0,.5);
  --nd-el-dlg:     rgba(0,0,0,.6);
  --nd-acc-plocha: #3f5b86;                 /* zapnute tlacitko v pasu */
  --nd-acc-hover:  #326bbd;
  --nd-danger:     #c42b1c;
  --nd-na-barve:   #fff;                    /* text na barevnem tlacitku */
  /* Dokument. Papir je bily a pismo cerne v obou rezimech — stranka Wordu se
     rezimem aplikace nemeni a na tmavy papir uz je `.nd.tmavy-editor`. `--nd-papir`,
     `--nd-pap-tx` a `--nd-uchyt-barva` proto svetlou obdobu schvalne nemaji; stin
     papiru ano, protoze ten patri ke stolu pod nim, ne ke strance. */
  --nd-papir:      #fff;
  --nd-pap-tx:     #111;
  --nd-papir-stin: rgba(0, 0, 0, .5);
  --nd-uchyt-barva:#fff;
  --nd-knof:       #fff;                    /* knoflik prepinace a uchyty objektu */
  --nd-vodic:      #ff3b9a;                 /* vodici linka pri tazeni */
  --nd-font: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --nd-zoom: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--nd-bg);
  color: var(--nd-tx);
  font: 12px var(--nd-font);
}
.nd-spacer { flex: 1; min-width: 0; }
button { font: inherit; }

.nd {
  display: grid;
  grid-template-rows: 40px 34px auto 24px minmax(0, 1fr) 26px;
  height: 100%;
}

/* ── titulek ───────────────────────────────────────────────────── */

.nd-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--nd-acc);
  color: var(--nd-tx-hi);
}
.nd-zpet {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 4px; color: var(--nd-tx-hi); text-decoration: none;
}
.nd-zpet { transition: background-color var(--wui-faster) var(--wui-implicit); }
.nd-zpet:hover { background: var(--nd-hover-hi); }
.nd-zpet svg { width: 16px; height: 16px; }
.nd-logo { font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.nd-nazev {
  width: 320px; height: 26px; padding: 0 8px;
  background: var(--nd-pole-hi);
  border: 1px solid transparent; border-radius: 4px;
  color: var(--nd-tx-hi); font: 13px var(--nd-font); outline: none;
}
.nd-nazev:hover { background: var(--nd-hover-hi); }
.nd-nazev:focus { background: var(--nd-invert); color: var(--nd-invert-tx); border-color: var(--nd-invert); }
.nd-stav { color: var(--nd-tx-hi-2); font-size: 11px; white-space: nowrap; }
.nd-load {
  width: 96px; height: 3px; border-radius: 2px; overflow: hidden;
  --wui-progress-fill: var(--nd-tx-hi);
  --wui-ind-start: -100%; --wui-ind-end: 250%;
  --wui-ind2-start: -160%; --wui-ind2-end: 250%;
  display: none;
}
.nd.uklada .nd-load { display: block; }
.nd-auto {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; cursor: pointer; user-select: none;
  color: var(--nd-tx-hi-2); font-size: 11px; white-space: nowrap;
}
.nd-auto input { position: absolute; opacity: 0; width: 0; height: 0; }
.nd-auto-p {
  position: relative; width: 26px; height: 14px; border-radius: 999px;
  background: var(--nd-prep);
  box-shadow: inset 0 0 0 1px var(--nd-okraj-hi);
  transition: background-color var(--wui-faster) var(--wui-fast-out-slow-in);
}
.nd-auto-p::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--nd-knof); transition: translate var(--wui-faster) var(--wui-fast-out-slow-in);
}
.nd-auto input:checked + .nd-auto-p { background: rgba(255,255,255,.85); }
.nd-auto input:checked + .nd-auto-p::after { translate: 12px 0; background: var(--nd-acc); }
.nd-auto input:focus-visible + .nd-auto-p { outline: 2px solid var(--nd-ohnisko); outline-offset: 2px; }
.nd-auto:hover { color: var(--nd-tx-hi); }

.nd-rezimy { display: flex; gap: 2px; }
.nd-rezimy button, .nd-tb {
  height: 26px; padding: 0 12px;
  border: 1px solid var(--nd-okraj-hi); border-radius: 4px;
  background: transparent; color: var(--nd-tx-hi); cursor: pointer; white-space: nowrap;
}
.nd-rezimy button, .nd-tb { transition: background-color var(--wui-faster) var(--wui-implicit), color var(--wui-faster) var(--wui-implicit); }
.nd-rezimy button:hover, .nd-tb:hover { background: rgba(255,255,255,.18); }
.nd-rezimy button.on { background: var(--nd-invert); color: var(--nd-acc); border-color: var(--nd-invert); font-weight: 600; }

/* ── pás karet ─────────────────────────────────────────────────── */

.nd-karty {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 10px;
  background: var(--nd-bar);
  border-bottom: 1px solid var(--nd-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.nd-karty::-webkit-scrollbar { display: none; }
.nd-kt {
  height: 30px; padding: 0 14px;
  border: 0; border-radius: 4px 4px 0 0;
  background: transparent; color: var(--nd-tx-2);
  cursor: pointer; white-space: nowrap;
}
.nd-kt { transition: background-color var(--wui-faster) var(--wui-implicit), color var(--wui-faster) var(--wui-implicit); }
.nd-kt:hover { background: var(--nd-hover); color: var(--nd-tx-pas); }
.nd-kt.on { background: var(--nd-pas); color: var(--nd-tx-pas); box-shadow: inset 0 2px 0 var(--nd-acc-sv); }

.nd-pas {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 8px;
  background: var(--nd-pas);
  border-bottom: 1px solid var(--nd-line);
  overflow-x: auto;
  min-height: 68px;
}
.nd-pas::-webkit-scrollbar { height: 6px; }
.nd-pas::-webkit-scrollbar-thumb { background: var(--nd-scroll); border-radius: 3px; }
.nd-skupina {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  border-right: 1px solid var(--nd-line);
  flex: none;
}
.nd-skupina:last-child { border-right: 0; }
.nd-skupina-obsah { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; max-width: 420px; }
.nd-skupina-nazev { text-align: center; color: var(--nd-tx-3); font-size: 10px; padding-top: 3px; }

.nd-b {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; min-width: 26px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--nd-tx);
  cursor: pointer; white-space: nowrap;
}
.nd-b { transition: background-color var(--wui-faster) var(--wui-implicit), color var(--wui-faster) var(--wui-implicit); }
.nd-b:active:not(:disabled) { transition: none; }
.nd-b:hover { background: var(--nd-hover); border-color: var(--nd-line-2); }
.nd-b.on { background: var(--nd-acc-plocha); border-color: var(--nd-acc-sv); }
.nd-b:disabled { color: var(--nd-tx-off); cursor: default; background: none; border-color: transparent; }
.nd-b svg { width: 15px; height: 15px; flex: none; }
.nd-b.velke { flex-direction: column; height: 52px; gap: 2px; padding: 4px 8px; font-size: 11px; }
.nd-b.velke svg { width: 20px; height: 20px; }
.nd-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--nd-line); }

.nd-sel-pole, .nd-cislo {
  height: 26px; padding: 0 6px;
  background: var(--nd-pole); border: 1px solid var(--nd-line-2); border-radius: 4px;
  color: var(--nd-tx); font: 12px var(--nd-font); outline: none;
}
.nd-sel-pole:focus, .nd-cislo:focus { border-color: var(--nd-acc-sv); }
.nd-cislo { width: 58px; }
.nd-barva {
  width: 26px; height: 26px; padding: 2px;
  border: 1px solid var(--nd-line-2); border-radius: 4px;
  background: var(--nd-pole); cursor: pointer;
}

/* ── pravítko ──────────────────────────────────────────────────── */

.nd-pravitko {
  position: relative;
  height: 24px;
  background: var(--nd-bar);
  border-bottom: 1px solid var(--nd-line);
  overflow: hidden;
}
.nd-pravitko-pas {
  position: absolute; top: 0; height: 100%;
  background: #f3f3f3;
}
.nd-pravitko-okraj { position: absolute; top: 0; height: 100%; background: #c9c9c9; }
.nd-pravitko-znacka { position: absolute; top: 12px; width: 1px; height: 6px; background: #777; }
.nd-pravitko-cislo { position: absolute; top: 1px; font-size: 9px; color: #555; transform: translateX(-50%); }
.nd-pravitko-uchyt {
  position: absolute; width: 10px; height: 10px; top: 7px;
  margin-left: -5px; background: #2b579a; cursor: ew-resize;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ── tělo ──────────────────────────────────────────────────────── */

.nd-telo { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
.nd-telo.ma-pravy { grid-template-columns: 250px minmax(0, 1fr) 280px; }
.nd-telo.bez-leveho { grid-template-columns: minmax(0, 1fr); }
.nd-telo.bez-leveho.ma-pravy { grid-template-columns: minmax(0, 1fr) 280px; }
.nd-telo.bez-leveho .nd-levy { display: none; }

.nd-levy {
  background: var(--nd-bar);
  border-right: 1px solid var(--nd-line);
  display: flex; flex-direction: column; min-height: 0;
}
.nd-levy-karty { display: flex; border-bottom: 1px solid var(--nd-line); }
.nd-lk {
  flex: 1; height: 30px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--nd-tx-2); cursor: pointer; font-size: 11px;
}
.nd-lk:hover { color: var(--nd-tx-pas); }
.nd-lk.on { color: var(--nd-tx-pas); border-bottom-color: var(--nd-acc-sv); }
.nd-levy-obsah { flex: 1; overflow: auto; padding: 8px; }

.nd-osnova-p { padding: 4px 6px; border-radius: 4px; cursor: pointer; color: var(--nd-tx-2); }
.nd-osnova-p:hover { background: var(--nd-hover); color: var(--nd-tx-pas); }
.nd-osnova-p[data-u="1"] { font-weight: 600; color: var(--nd-tx-pas); }
.nd-osnova-p[data-u="2"] { padding-left: 16px; }
.nd-osnova-p[data-u="3"] { padding-left: 28px; font-size: 11px; }
.nd-osnova-p[data-u="4"], .nd-osnova-p[data-u="5"], .nd-osnova-p[data-u="6"] { padding-left: 40px; font-size: 11px; }

.nd-nahled-s {
  width: 100%; aspect-ratio: 210 / 297; margin-bottom: 10px;
  background: var(--nd-papir); border: 1px solid var(--nd-line-2); border-radius: 2px;
  cursor: pointer; position: relative; overflow: hidden;
}
.nd-nahled-s.on { outline: 2px solid var(--nd-acc-sv); }
.nd-nahled-c { position: absolute; bottom: 2px; right: 4px; font-size: 10px; color: #666; }
.nd-nahled-mini { transform-origin: top left; pointer-events: none; }

.nd-kom {
  border: 1px solid var(--nd-line-2); border-radius: 6px;
  padding: 8px; margin-bottom: 8px; background: var(--nd-kom-bg);
}
.nd-kom.vyreseno { opacity: .55; }
.nd-kom-hl { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--nd-tx-3); }
.nd-kom-t { margin: 6px 0; white-space: pre-wrap; }
.nd-kom-akce { display: flex; gap: 6px; }
.nd-kom-akce button { height: 22px; padding: 0 8px; border: 1px solid var(--nd-line-2); border-radius: 4px; background: var(--nd-btn); color: var(--nd-tx); cursor: pointer; font-size: 11px; }

/* ── plocha se stránkou ────────────────────────────────────────── */

.nd-plocha {
  background: var(--nd-plocha);
  overflow: auto;
  padding: 24px 0 60px;
  min-height: 0;
  position: relative;
}
.nd-zoomobal { display: flex; justify-content: center; }
.nd-papir {
  position: relative;
  transform: scale(var(--nd-zoom));
  transform-origin: top center;
  background: var(--nd-papir);
  color: var(--nd-pap-tx);
  box-shadow: 0 2px 14px var(--nd-papir-stin);
  font: 11pt/1.5 "Calibri", "Segoe UI", sans-serif;
}
.nd-tok {
  position: relative;
  z-index: 2;
  outline: none;
  min-height: 200px;
  word-wrap: break-word;
}
.nd-tok:focus { outline: none; }
.nd-objekty { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nd-objekty .nd-obj { pointer-events: auto; }
.nd-zlomy { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.nd-zlom-cara {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed #c8c8c8;
}
.nd-zlom-pas {
  position: absolute; left: -14px; right: -14px;
  background: var(--nd-plocha);
  box-shadow: 0 -2px 10px rgba(0,0,0,.4) inset;
}
.nd-vodoznak {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  pointer-events: none; overflow: hidden;
}
.nd-vodoznak span {
  font-size: 90px; font-weight: 800; color: rgba(0, 0, 0, .07);
  transform: rotate(-35deg); white-space: nowrap; user-select: none;
}
.nd-zahlavi, .nd-zapati {
  position: absolute; left: 0; right: 0; z-index: 2;
  color: #666; font-size: 10pt; pointer-events: none;
}
.nd-zahlavi.edit, .nd-zapati.edit { pointer-events: auto; outline: 1px dashed #9ab; }

/* obsah stranky */
.nd-tok h1 { font-size: 20pt; font-weight: 600; margin: 18pt 0 6pt; color: #1f3864; }
.nd-tok h2 { font-size: 16pt; font-weight: 600; margin: 14pt 0 5pt; color: #2e5496; }
.nd-tok h3 { font-size: 13pt; font-weight: 600; margin: 12pt 0 4pt; color: #1f4e79; }
.nd-tok h4 { font-size: 12pt; font-weight: 600; font-style: italic; margin: 10pt 0 4pt; }
.nd-tok h5 { font-size: 11pt; font-weight: 600; margin: 10pt 0 4pt; }
.nd-tok h6 { font-size: 10pt; font-weight: 600; color: #444; margin: 10pt 0 4pt; }
.nd-tok p { margin: 0 0 8pt; }
.nd-tok blockquote {
  margin: 10pt 0 10pt 18pt; padding-left: 12pt;
  border-left: 3px solid #b8cce4; color: #444; font-style: italic;
}
.nd-tok pre, .nd-tok .nd-kod {
  font: 10pt/1.45 Consolas, "Cascadia Mono", monospace;
  background: #f4f4f4; border: 1px solid #e0e0e0; border-radius: 3px;
  padding: 8px 10px; white-space: pre-wrap; margin: 8pt 0;
}
.nd-tok code { font: .92em Consolas, monospace; background: #f4f4f4; padding: 1px 4px; border-radius: 3px; }
.nd-tok .nd-titul { font-size: 28pt; font-weight: 300; margin: 0 0 4pt; }
.nd-tok .nd-podtitul { font-size: 14pt; color: #666; margin: 0 0 14pt; }
.nd-tok ul, .nd-tok ol { margin: 0 0 8pt; padding-left: 26pt; }
.nd-tok li { margin: 0 0 3pt; }
.nd-tok ul.nd-ukol { list-style: none; padding-left: 16pt; }
.nd-tok ul.nd-ukol > li::before { content: '☐'; margin-right: 8px; }
.nd-tok ul.nd-ukol > li.hotovo::before { content: '☑'; }
.nd-tok ul.nd-ukol > li.hotovo { color: #888; text-decoration: line-through; }
.nd-tok table { border-collapse: collapse; margin: 8pt 0; width: 100%; }
.nd-tok th, .nd-tok td { border: 1px solid #999; padding: 4px 7px; vertical-align: top; }
.nd-tok th { background: #eef2f7; font-weight: 600; }
.nd-tok table.bez-ram th, .nd-tok table.bez-ram td { border-color: transparent; }
.nd-tok a { color: #0563c1; }
.nd-tok hr { border: 0; border-top: 1px solid #bbb; margin: 12pt 0; }
.nd-tok img { max-width: 100%; }
.nd-tok .nd-zlom-rucni { display: block; height: 0; border-top: 1px dashed #bbb; margin: 6pt 0; }
.nd-tok .nd-mezera { display: block; }
.nd-tok .nd-pozn { vertical-align: super; font-size: .75em; color: #0563c1; cursor: pointer; }
.nd-tok .nd-komentar { background: #fff3bf; border-bottom: 2px solid #e8b400; cursor: pointer; }
.nd-tok .nd-komentar.vyreseno { background: transparent; border-bottom: 0; }
.nd-tok ins { background: #d9f2d9; text-decoration: none; border-bottom: 1px solid #4a4; }
.nd-tok del { background: #ffe0e0; }
.nd-tok mark.nd-nalez { background: #ffe066; }
.nd-tok mark.nd-nalez.akt { background: #ff9f1a; }
.nd-tok .nd-obsah { border: 1px solid #ddd; padding: 10px 14px; margin: 10pt 0; }
.nd-tok .nd-obsah-p { display: flex; gap: 8px; }
.nd-tok .nd-obsah-p a { flex: 1; text-decoration: none; }
.nd-tok .nd-obsah-nadpis { font-weight: 600; margin-bottom: 6px; }

/* volne objekty */
.nd-obj { position: absolute; }
.nd-obj.vybrany { outline: 1px solid var(--nd-acc-sv); }
.nd-obj-in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.nd-obj img, .nd-obj svg { display: block; width: 100%; height: 100%; }
.nd-obj .nd-obj-text { width: 100%; height: 100%; padding: 6px; outline: none; overflow: hidden; }
.nd-uchyt {
  position: absolute; width: 9px; height: 9px;
  background: var(--nd-uchyt-barva); border: 1px solid var(--nd-acc-sv); border-radius: 50%;
  z-index: 5;
}
.nd-uchyt.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.nd-uchyt.n  { left: calc(50% - 4px); top: -5px; cursor: ns-resize; }
.nd-uchyt.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.nd-uchyt.e  { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.nd-uchyt.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.nd-uchyt.s  { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }
.nd-uchyt.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.nd-uchyt.w  { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.nd-uchyt.rot { left: calc(50% - 4px); top: -26px; cursor: grab; background: var(--nd-acc-sv); }
.nd-vodic { position: absolute; background: var(--nd-vodic); z-index: 9; pointer-events: none; }

/* ── pravý panel ───────────────────────────────────────────────── */

.nd-pravy {
  background: var(--nd-bar);
  border-left: 1px solid var(--nd-line);
  overflow: auto;
  padding: 12px;
}
.nd-pravy h4 { margin: 0 0 10px; font-size: 12px; }
.nd-radek { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nd-radek label { width: 92px; color: var(--nd-tx-3); flex: none; }
.nd-radek input[type="range"] { flex: 1; }
.nd-mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; }
.nd-mrizka button {
  height: 28px; border: 1px solid var(--nd-line-2); border-radius: 4px;
  background: var(--nd-btn-2); color: var(--nd-tx); cursor: pointer; font-size: 11px;
}
.nd-mrizka button:hover { background: var(--nd-btn-hover); }

/* ── stavový řádek ─────────────────────────────────────────────── */

.nd-stavovy {
  display: flex; align-items: center; gap: 16px;
  padding: 0 12px;
  background: var(--nd-bar);
  border-top: 1px solid var(--nd-line);
  color: var(--nd-tx-2); font-size: 11px;
}
.nd-pohledy { display: flex; gap: 2px; }
.nd-pohledy button, .nd-zbtn {
  width: 24px; height: 20px; border: 0; border-radius: 3px;
  background: transparent; color: var(--nd-tx-2); cursor: pointer;
}
.nd-pohledy button, .nd-zbtn { transition: background-color var(--wui-faster) var(--wui-implicit), color var(--wui-faster) var(--wui-implicit); }
.nd-pohledy button:hover, .nd-zbtn:hover { background: var(--nd-hover); color: var(--nd-tx-pas); }
.nd-pohledy button.on { background: var(--nd-sel); color: var(--nd-tx-pas); }
#ndZoom { width: 120px; }

/* ── nabídky a dialogy ─────────────────────────────────────────── */

.nd-menu {
  position: fixed; z-index: 900;
  min-width: 200px; max-height: 70vh; overflow: auto;
  padding: 4px;
  background: var(--nd-menu-bg); border: 1px solid var(--nd-pop-br); border-radius: 8px;
  box-shadow: 0 10px 28px var(--nd-el-menu);
  animation: wui-flyout-in var(--wui-faster) linear,
             wui-flyout-slide var(--wui-fast) var(--wui-fast-out-slow-in);
}
.nd-mi {
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 10px; border-radius: 4px;
  cursor: pointer; white-space: nowrap;
}
/* MenuFlyoutItem_themeresources.xaml: vsechny keyframy KeyTime=0 -> bez prechodu */
.nd-mi:hover { background: var(--nd-btn-hover); }
.nd-mi.on { background: var(--nd-acc-plocha); }
.nd-mi svg { width: 15px; height: 15px; flex: none; }
.nd-mi .nd-mi-t { flex: 1; }
.nd-mi .nd-mi-k { color: var(--nd-tx-3); font-size: 11px; }
.nd-msep { height: 1px; margin: 4px 6px; background: var(--nd-pop-br); }

.nd-paleta { display: grid; grid-template-columns: repeat(10, 20px); gap: 3px; padding: 6px; }
.nd-paleta button { width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.35); border-radius: 3px; cursor: pointer; }

.nd-znaky { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.nd-znaky button {
  height: 28px; border: 1px solid var(--nd-line-2); border-radius: 4px;
  background: var(--nd-btn-2); color: var(--nd-tx-pas); cursor: pointer; font-size: 15px;
}
.nd-znaky button:hover { background: var(--nd-btn-2-hover); }

.nd-dlgbg { position: fixed; inset: 0; z-index: 950; background: var(--nd-scrim); display: grid; place-items: center; }
.nd-dlg {
  width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: var(--nd-dlg-bg); border: 1px solid var(--nd-pop-br); border-radius: 8px;
  box-shadow: 0 18px 50px var(--nd-el-dlg);
  animation: wui-dialog-in var(--wui-normal) var(--wui-fast-out-slow-in),
             wui-fade-in var(--wui-faster) linear;
}
.nd-dlgbg { animation: wui-fade-in var(--wui-faster) linear; }
.nd-dlgbg.zaviram { animation: wui-fade-out var(--wui-faster) linear forwards; }
.nd-dlgbg.zaviram .nd-dlg {
  animation: wui-dialog-out var(--wui-fast) var(--wui-fast-out-slow-in) forwards,
             wui-fade-out var(--wui-faster) linear forwards;
}
.nd-dlg-h { display: flex; align-items: center; height: 40px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--nd-line); font-weight: 600; }
.nd-dlg-h span { flex: 1; }
.nd-dlg-x { width: 32px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: var(--nd-tx-2); cursor: pointer; font-size: 15px; }
.nd-dlg-x:hover { background: var(--nd-danger); color: var(--nd-na-barve); }
.nd-dlg-b { padding: 16px; overflow: auto; }
.nd-dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--nd-line); }
.nd-dlg-btn {
  min-width: 92px; height: 30px; padding: 0 14px;
  border: 1px solid var(--nd-pop-br); border-radius: 4px;
  background: var(--nd-dlg-btn); color: var(--nd-tx); cursor: pointer;
}
.nd-dlg-btn { transition: background-color var(--wui-faster) var(--wui-implicit); }
.nd-dlg-btn:active { transition: none; }
.nd-dlg-btn:hover { background: var(--nd-dlg-btn-hover); }
.nd-dlg-btn.hlavni { background: var(--nd-acc); border-color: var(--nd-acc); }
.nd-dlg-btn.hlavni:hover { background: var(--nd-acc-hover); }
.nd-vstup, .nd-textarea {
  width: 100%; padding: 7px 10px;
  background: var(--nd-pole); border: 1px solid var(--nd-line-2); border-radius: 4px;
  color: var(--nd-tx); font: 12px var(--nd-font); outline: none;
}
.nd-textarea { min-height: 90px; resize: vertical; }
.nd-vstup:focus, .nd-textarea:focus { border-color: var(--nd-acc-sv); }
.nd-pole { margin-bottom: 12px; }
.nd-pole > label { display: block; margin-bottom: 4px; color: var(--nd-tx-3); }
.nd-sloupce2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nd-sablony { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nd-sablona { border: 1px solid var(--nd-line-2); border-radius: 6px; background: var(--nd-btn-2); cursor: pointer; overflow: hidden; }
.nd-sablona:hover { border-color: var(--nd-acc-sv); }
.nd-sablona-nahled { aspect-ratio: 210/297; background: var(--nd-papir); }
.nd-sablona-jm { padding: 6px; text-align: center; font-size: 11px; }
.nd-tabmrizka { display: grid; grid-template-columns: repeat(10, 18px); gap: 2px; }
.nd-tabmrizka div { width: 18px; height: 18px; border: 1px solid var(--nd-mrizka-br); background: var(--nd-btn-2); }
.nd-tabmrizka div.akt { background: var(--nd-acc-plocha); border-color: var(--nd-acc-sv); }

.nd-najit {
  position: absolute; top: 10px; right: 26px; z-index: 40;
  width: 340px; padding: 10px;
  background: var(--nd-menu-bg); border: 1px solid var(--nd-pop-br); border-radius: 8px;
  box-shadow: 0 10px 28px var(--nd-el-menu);
}
.nd-najit .nd-radek label { width: 70px; }
.nd-najit-stav { color: var(--nd-tx-3); font-size: 11px; }

/* ── režimy ────────────────────────────────────────────────────── */

.nd.rezim-cteni .nd-karty, .nd.rezim-cteni .nd-pas, .nd.rezim-cteni .nd-pravitko { display: none; }
.nd.rezim-cteni { grid-template-rows: 40px minmax(0, 1fr) 26px; }
.nd.rezim-cteni .nd-tok { caret-color: transparent; }
.nd.bez-pravitka .nd-pravitko { display: none; }
.nd.bez-pravitka { grid-template-rows: 40px 34px auto minmax(0, 1fr) 26px; }
/* Pozor: `display:none` vyřadí pravítko z automatického umísťování, takže
   mřížka musí mít o řádek míň. S šesti řádky spadne `.nd-telo` do nulového
   řádku a dokument má nulovou výšku. */
.nd.tmavy-editor .nd-papir { background: #232323; color: #e6e6e6; }
.nd.tmavy-editor .nd-tok h1, .nd.tmavy-editor .nd-tok h2, .nd.tmavy-editor .nd-tok h3 { color: #9dc3ff; }
.nd.tmavy-editor .nd-tok pre, .nd.tmavy-editor .nd-tok code, .nd.tmavy-editor .nd-tok .nd-kod { background: #2d2d2d; border-color: #3d3d3d; color: #eee; }
.nd.tmavy-editor .nd-tok th { background: #2f3a49; }

@media print {
  body { overflow: visible; background: var(--nd-papir); }
  .nd-titlebar, .nd-karty, .nd-pas, .nd-pravitko, .nd-levy, .nd-pravy, .nd-stavovy,
  .nd-zlomy, .nd-uchyt, .nd-najit { display: none !important; }
  .nd { display: block; height: auto; }
  .nd-telo { display: block; }
  .nd-plocha { overflow: visible; padding: 0; background: var(--nd-papir); }
  .nd-papir { transform: none !important; box-shadow: none; }
  @page { margin: 0; }
}

@media (max-width: 1100px) {
  .nd-telo, .nd-telo.ma-pravy { grid-template-columns: minmax(0, 1fr); }
  .nd-levy, .nd-pravy { display: none; }
}

/* ── vypnuty pohyb ─────────────────────────────────────────────────
   Obsah stranky, objekty a pravitko se neanimuji nikdy — psani
   a formatovani musi byt okamzite. */

.nd-tok, .nd-tok *, .nd-obj, .nd-obj *, .nd-papir, .nd-pravitko, .nd-pravitko * {
  transition: none !important;
  animation: none !important;
}

html.wui-bez-pohybu .nd-menu,
html.wui-bez-pohybu .nd-dlg,
html.wui-bez-pohybu .nd-dlgbg,
html[data-wui-motion="off"] .nd-menu,
html[data-wui-motion="off"] .nd-dlg,
html[data-wui-motion="off"] .nd-dlgbg { animation: none !important; }
html.wui-bez-pohybu *,
html[data-wui-motion="off"] * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-wui-motion="on"]) .nd-menu,
  html:not([data-wui-motion="on"]) .nd-dlg,
  html:not([data-wui-motion="on"]) .nd-dlgbg { animation: none !important; }
  html:not([data-wui-motion="on"]) * { transition: none !important; }
  html:not([data-wui-motion="on"]) .wui-progress > span { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   SVĚTLÝ REŽIM
   Přepíná se `data-mode="light"` na <html> (viz /nyx-rezim.js). Mění se
   jen obal aplikace: pás karet, panely, dialogy. Stránka zůstává bílá
   s černým písmem, protože dokument se režimem aplikace nemění — na tmavý
   papír je zvlášť `.nd.tmavy-editor`.
   Kontrast měřen: text na pásu 15,7:1, ztlumený 4,9:1, bílý text na Word
   modré 7,2:1, na červené 5,7:1.
   ═══════════════════════════════════════════════════════════════════ */

html[data-mode="light"] {
  color-scheme: light;
  --nd-bg:      #eeeeee;
  --nd-bar:     #f9f9f9;
  --nd-pas:     #f3f3f3;
  --nd-plocha:  #dcdcdc;   /* stůl pod papírem: ve světlém tmavší než okno, ať papír vynikne */
  --nd-line:    #e5e5e5;
  --nd-line-2:  #d9d9d9;
  --nd-tx:      #1a1a1a;
  --nd-tx-pas:  #1a1a1a;   /* na světlém pásu je text tmavý. Titulkový pruh zůstává modrý
                              i ve světlém, takže text a ovladače na něm zůstávají bílé —
                              jejich tokeny tu proto schválně nejsou. */
  --nd-tx-2:    #444444;
  --nd-tx-3:    #6a6a6a;
  --nd-acc:     var(--acc-deep, #2b579a);
  --nd-acc-sv:  var(--acc-deep, #2b579a);   /* v tmavém je to světlá modrá na okraje, tady musí ztmavnout */
  --nd-hover:   #eaeaea;
  --nd-sel:     #dcdcdc;

  --nd-tx-off:     #a0a0a0;
  --nd-pole:       #ffffff;
  --nd-btn:        #f0f0f0;
  --nd-btn-2:      #f3f3f3;
  --nd-btn-hover:  #e6e6e6;
  --nd-btn-2-hover:#dbe4f3;
  --nd-menu-bg:    #f9f9f9;
  --nd-kom-bg:     #fff8e1;   /* komentář je ve Wordu žlutá bublina */
  --nd-dlg-bg:     #f9f9f9;
  --nd-dlg-btn:    #fbfbfb;
  --nd-dlg-btn-hover:#f0f0f0;
  --nd-pop-br:     #d9d9d9;
  --nd-mrizka-br:  #c8c8c8;
  --nd-scroll:     rgba(0,0,0,.35);
  --nd-scrim:      rgba(0,0,0,.28);
  --nd-el-menu:    rgba(0,0,0,.16);
  --nd-el-dlg:     rgba(0,0,0,.22);
  --nd-acc-plocha: #cddcf0;   /* zapnuté tlačítko: plocha 1,3:1 proti pásu, poznat ho dává hlavně okraj akcentem */
  --nd-acc-hover:  #1f4478;
  --nd-danger:     #c42b1c;
  --nd-papir-stin: rgba(0,0,0,.18);
}

/* ══════════════════════════════════════════════════════════════════
   DOTYK                                             (změřeno 18. 10.)

   Na telefonu mělo rozhraní 44 ovládacích prvků pod 40 px — pás měl
   tlačítka 26 px vysoká a záložky 30 px. Pás i záložky se naštěstí už
   posouvaly do strany, takže se nic neschovávalo; chyběla jen výška
   pro prst. Mění se proto jen rozměry, ne rozvržení, a jen na dotyku —
   na myši zůstává hustý pás jako ve Wordu.
   ══════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .nd-b { height: 44px; min-width: 44px; padding: 0 10px; }
  .nd-kt { height: 44px; padding: 0 16px; }
  .nd-karty { align-items: center; }

  /* Název skupiny pod tlačítky bere svislé místo, které na telefonu
     chybí — a co skupina znamená, stejně napoví ikony. */
  .nd-skupina-nazev { display: none; }
  .nd-pas { min-height: 0; padding: 4px 6px; }

  /* Pole v pásu: pod 16 px by iOS při klepnutí přiblížil celý editor. */
  .nd-pas input, .nd-pas select, .nd-nazev, .nd-zoom { font-size: 16px; }
  .nd-pas select, .nd-pas input[type="number"] { min-height: 44px; }

  /* Vodorovné posouvání pásu patří pásu, ne stránce. */
  .nd-pas, .nd-karty { touch-action: pan-x; overscroll-behavior-x: contain; }
}

@media (pointer: coarse) {
  /* Titulní lišta: přepínač režimů, sdílení a lupa zůstaly pod 30 px.
     Stavový řádek má na telefonu volnou výšku, takže se do něj 44 px
     vejde — dřív tu bylo 36 px jen proto, že byl řádek pevný. */
  .nd-rezimy button, .nd-tb { min-height: 44px; min-width: 44px; }
  .nd-zoom-b, .nd-stavovy button { min-height: 44px; min-width: 44px; }
  .nd-zpet { width: 44px; height: 44px; }
  .nd-auto { min-width: 44px; justify-content: center; }
}

/* ── telefon a tablet: vodorovné rozměry ──────────────────────────
   Mřížka #app byla ve 390px výřezu 567 px široká (na 768 dokonce 947)
   a protože stránka nic neposouvá, přebytek byl trvale nedosažitelný.
   Roztahovaly ji dvě lišty: titulková (devět prvků v řadě) a stavová
   (čtyři texty, přepínače pohledu a posuvník přiblížení). Titulková se
   zalomí, stavová na telefonu odhodí, co se dá dopočítat jinde. */

@media (max-width: 980px) {
  .nd { grid-template-rows: auto 34px auto 24px minmax(0, 1fr) 26px; }
  .nd.rezim-cteni { grid-template-rows: auto minmax(0, 1fr) 26px; }
  .nd.bez-pravitka { grid-template-rows: auto 34px auto minmax(0, 1fr) 26px; }

  .nd-titlebar {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 2px;
    padding: 4px 8px;
  }
  .nd-logo, .nd-titlebar .nd-spacer { display: none; }
  .nd-nazev { width: auto; flex: 1 1 110px; min-width: 0; }
  .nd-rezimy { flex: 0 1 auto; }
  .nd-stav { font-size: 11px; }
}

/* Pravítko je široké jako stránka (794 px). Jakmile se celé nevejde, ukazuje
   jinou polohu, než na které dokument zrovna stojí — posouvá se totiž
   dokument, ne pravítko. Pod 820 px se proto nekreslí, a protože tím vypadne
   z mřížky, mají tu všechny varianty o řádek míň. */
@media (max-width: 820px) {
  .nd-pravitko { display: none; }
  .nd, .nd.bez-pravitka { grid-template-rows: auto 34px auto minmax(0, 1fr) 26px; }
  .nd.rezim-cteni { grid-template-rows: auto minmax(0, 1fr) 26px; }
}

@media (max-width: 600px) {
  /* Posuvník přiblížení je na dotyku 44 px vysoký, takže stavový řádek
     dostane volnou výšku — do pevných 26 px by se nevešel. */
  .nd, .nd.bez-pravitka { grid-template-rows: auto 34px auto minmax(0, 1fr) auto; }
  .nd.rezim-cteni { grid-template-rows: auto minmax(0, 1fr) auto; }

  .nd-auto-t { display: none; }

  .nd-stavovy { gap: 10px; min-height: 26px; }
  .nd-stavovy #ndZnaky,
  .nd-stavovy #ndJazyk,
  .nd-stavovy #ndPohledy { display: none; }
  .nd-stavovy #ndZoom { width: 70px; min-width: 0; flex: 0 0 70px; }
  .nd-stavovy .nd-spacer { flex: 1 1 0; min-width: 0; }
}

/* ══════════ zalozka Soubor (zakulisi) ══════════
   Ve Wordu je Soubor barevne tlacitko a otevira celou obrazovku, ne pas.
   Vsechno jede na tokenech, takze svetly rezim nepotrebuje vlastni sadu. */

.nd-kt-soubor {
  background: var(--nd-acc);
  color: var(--nd-tx-hi);
  font-weight: 600;
  margin-right: 4px;
}
.nd-kt-soubor:hover { background: var(--nd-acc-hover); color: var(--nd-tx-hi); }
.nd-kt-soubor.on { box-shadow: none; }

.nd-bs {
  position: fixed; inset: 0; z-index: 90;
  display: flex;
  background: var(--nd-bg);
  opacity: 0;
  transition: opacity var(--wui-fast) var(--wui-implicit);
}
.nd-bs.on { opacity: 1; }
.nd-bs[hidden] { display: none; }

.nd-bs-rail {
  flex: 0 0 216px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px;
  background: var(--nd-acc);
  overflow-y: auto;
}
.nd-bs-zpet {
  width: 40px; height: 40px; margin-bottom: 14px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--nd-hover-hi); color: var(--nd-tx-hi);
  cursor: pointer;
  transition: background-color var(--wui-faster) var(--wui-implicit);
}
.nd-bs-zpet:hover { background: var(--nd-okraj-hi); }
.nd-bs-zpet svg { width: 20px; height: 20px; }

.nd-bs-r {
  display: block; width: 100%; text-align: left;
  min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--nd-tx-hi);
  font: inherit; font-size: 14px; line-height: 40px;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--wui-faster) var(--wui-implicit);
}
.nd-bs-r:hover { background: var(--nd-hover-hi); }
.nd-bs-r.on { background: var(--nd-okraj-hi); font-weight: 600; }
.nd-bs-cara { height: 1px; margin: 8px 10px; background: var(--nd-okraj-hi); }

.nd-bs-obsah {
  flex: 1 1 auto; min-width: 0;
  padding: 34px 40px 48px;
  overflow-y: auto;
  color: var(--nd-tx);
}
.nd-bs-h { margin: 0 0 6px; font-size: 30px; font-weight: 600; letter-spacing: -.5px; }
.nd-bs-h3 { margin: 22px 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase;
            letter-spacing: .08em; color: var(--nd-tx-3); }
.nd-bs-p { margin: 0 0 18px; color: var(--nd-tx-2); font-size: 13.5px; }
.nd-bs-prazdne { color: var(--nd-tx-3); font-size: 13.5px; margin: 14px 0; }

.nd-bs-seznam { display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
.nd-bs-radek {
  display: flex; align-items: center; gap: 13px;
  padding: 9px 12px; border-radius: 5px;
  text-decoration: none; color: inherit;
  transition: background-color var(--wui-faster) var(--wui-implicit);
}
.nd-bs-radek:hover { background: var(--nd-hover); }
.nd-bs-radek.je { background: var(--nd-sel); }
.nd-bs-ik { width: 26px; height: 26px; flex: 0 0 26px; color: var(--nd-acc-sv); }
.nd-bs-radek-t { min-width: 0; flex: 1 1 auto; }
.nd-bs-radek-t b { display: block; font-size: 14px; font-weight: 600;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-bs-radek-t span { display: block; font-size: 12px; color: var(--nd-tx-3); margin-top: 1px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-bs-ted { font-style: normal; font-size: 11.5px; color: var(--nd-acc-sv); flex: 0 0 auto; }

.nd-bs-odkaz { display: inline-block; margin-top: 18px; font-size: 13.5px; color: var(--nd-acc-sv); }

.nd-bs-dlazdice { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.nd-bs-dl {
  width: 150px; padding: 0 0 12px;
  border: 1px solid var(--nd-line); border-radius: 6px;
  background: var(--nd-bar); color: inherit;
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--wui-faster) var(--wui-implicit);
}
.nd-bs-dl:hover { border-color: var(--nd-acc-sv); }
.nd-bs-dl b { display: block; font-size: 13px; font-weight: 600; }
.nd-bs-dl-list {
  width: 92px; height: 120px; margin: 12px auto 10px;
  background: var(--nd-papir);
  box-shadow: 0 1px 4px var(--nd-papir-stin);
}
.nd-bs-dl-list.sablona {
  background: linear-gradient(var(--nd-acc) 0 22px, var(--nd-papir) 22px);
}

.nd-bs-info { margin: 10px 0 0; max-width: 520px; }
.nd-bs-info > div {
  display: flex; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--nd-line);
}
.nd-bs-info dt { flex: 0 0 120px; color: var(--nd-tx-3); font-size: 13px; }
.nd-bs-info dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.nd-bs-akce { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.nd-bs-btn {
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--nd-line-2); border-radius: 5px;
  background: var(--nd-btn); color: inherit;
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background-color var(--wui-faster) var(--wui-implicit);
}
.nd-bs-btn:hover { background: var(--nd-btn-hover); }
.nd-bs-btn.hlavni { border-color: transparent; background: var(--nd-acc); color: var(--nd-na-barve); }
.nd-bs-btn.hlavni:hover { background: var(--nd-acc-hover); }

@media (max-width: 760px) {
  .nd-bs { flex-direction: column; }
  .nd-bs-rail {
    flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 4px; padding: 8px 10px;
  }
  .nd-bs-zpet { margin-bottom: 0; }
  .nd-bs-r { width: auto; min-height: 40px; line-height: 40px; padding: 0 12px; font-size: 13px; }
  .nd-bs-cara { display: none; }
  .nd-bs-obsah { padding: 20px 16px 40px; }
  .nd-bs-h { font-size: 23px; }
  .nd-bs-dl { width: calc(50% - 8px); }
  .nd-bs-info dt { flex-basis: 96px; }
}