:root {
  color-scheme: light;
  --ink: #102326;
  --muted: #617174;
  --line: #d9e1e3;
  --surface: #ffffff;
  --surface-soft: #f3f7f8;
  --brand-deep: #073f46;
  --brand: #0d5961;
  --brand-light: #5aaeb0;
  --blue: #4c78b9;
  --green: #2f8f6f;
  --yellow: #b88900;
  --red: #b94242;
  --gold: #f5c430;
  --gold-deep: #d4a317;
  --shadow: 0 16px 40px rgba(11, 31, 35, 0.12);
  --radius: 8px;
  --font-head: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--surface-soft);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(90, 174, 176, 0.1), transparent 35%),
    linear-gradient(180deg, #f8fbfb, #eef4f5);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 18%, rgba(90, 174, 176, 0.18), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(76, 120, 185, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(7, 63, 70, 0.05), transparent 42%);
  content: "";
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.is-hidden {
  display: none !important;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  align-items: center;
  padding: 32px;
}

.login-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(300px, 0.8fr);
  grid-template-areas:
    "title brand"
    "subtitle brand"
    "form brand";
  align-items: center;
  column-gap: 42px;
  row-gap: 18px;
  width: min(1020px, 100%);
  min-height: 430px;
  margin: 0 auto;
  padding: 38px 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(7, 63, 70, 0.96), rgba(10, 28, 31, 0.98)),
    var(--brand-deep);
  box-shadow: 0 28px 80px rgba(8, 27, 31, 0.26);
  color: #ffffff;
}

.login-panel::after {
  position: absolute;
  right: -150px;
  top: 20px;
  width: 540px;
  height: 540px;
  opacity: 0.34;
  background:
    linear-gradient(45deg, transparent 38%, rgba(255, 255, 255, 0.08) 38% 62%, transparent 62%),
    linear-gradient(-45deg, transparent 42%, rgba(90, 174, 176, 0.22) 42% 58%, transparent 58%);
  content: "";
  transform: rotate(0deg);
}

.login-panel h1 {
  grid-area: title;
  max-width: 520px;
  align-self: end;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.login-screen[data-mode="reauth"] .login-panel {
  background:
    linear-gradient(135deg, rgba(7, 63, 70, 0.94), rgba(13, 89, 97, 0.96)),
    var(--brand-deep);
}

.login-screen[data-mode="reauth"] .login-panel h1::before {
  display: inline-block;
  margin-right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(245, 196, 48, 0.18);
  content: "";
  vertical-align: middle;
}

.login-subtitle {
  grid-area: subtitle;
  align-self: start;
  max-width: 520px;
  margin: 0 0 8px;
  color: #cde5e6;
  font-size: 1.12rem;
  line-height: 1.5;
}

.brand-lockup,
.login-brand {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.brand-lockup img,
.login-brand img {
  width: min(260px, 100%);
  height: auto;
}

.login-brand {
  grid-area: brand;
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  text-align: center;
}

.login-brand img {
  width: min(340px, 100%);
  max-width: none;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.22));
}

.login-brand p {
  color: #9fd0d2;
}

.brand-symbol {
  position: absolute;
  right: -450px;
  top: 20px;
  width: 390px;
  height: 390px;
  transform: rotate(45deg);
}

.brand-symbol span {
  position: absolute;
  display: block;
  border-radius: 18px;
  background: var(--brand);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}

.brand-symbol span:nth-child(1) {
  left: 22px;
  top: 154px;
  width: 170px;
  height: 72px;
  background: #0d5961;
}

.brand-symbol span:nth-child(2) {
  left: 118px;
  top: 64px;
  width: 112px;
  height: 112px;
  background: #5aaeb0;
}

.brand-symbol span:nth-child(3) {
  left: 218px;
  top: 24px;
  width: 122px;
  height: 122px;
  background: #073f46;
}

.brand-symbol span:nth-child(4) {
  left: 236px;
  top: 154px;
  width: 72px;
  height: 72px;
  background: #a6a19c;
}

.brand-symbol span:nth-child(5) {
  left: 304px;
  top: 120px;
  width: 82px;
  height: 180px;
  background: #4c78b9;
}

.brand-symbol span:nth-child(6) {
  left: 218px;
  top: 244px;
  width: 106px;
  height: 106px;
  background: #6d6d68;
}

.brand-symbol.mini {
  position: relative;
  inset: auto;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  transform: rotate(45deg);
}

.brand-symbol.mini span {
  border-radius: 4px;
  box-shadow: none;
}

.brand-symbol.mini span:nth-child(1) {
  left: 2px;
  top: 20px;
  width: 20px;
  height: 9px;
}

.brand-symbol.mini span:nth-child(2) {
  left: 15px;
  top: 8px;
  width: 13px;
  height: 13px;
}

.brand-symbol.mini span:nth-child(3) {
  left: 27px;
  top: 2px;
  width: 15px;
  height: 15px;
}

.brand-symbol.mini span:nth-child(4) {
  left: 28px;
  top: 21px;
  width: 9px;
  height: 9px;
}

.brand-symbol.mini span:nth-child(5) {
  left: 37px;
  top: 16px;
  width: 10px;
  height: 23px;
}

.brand-symbol.mini span:nth-child(6) {
  left: 26px;
  top: 33px;
  width: 13px;
  height: 13px;
}

.brand-lockup p,
.eyebrow {
  margin: 0;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.login-form,
.settings-form,
.form-grid {
  display: grid;
  gap: 12px;
}

.login-form {
  grid-area: form;
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.login-form label,
.settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.login-form label {
  color: #d8efef;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 220ms ease;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(7, 63, 70, 0.98), rgba(5, 51, 57, 0.98)),
    var(--brand-deep);
  color: #effafa;
  overflow: hidden;
  transition: padding 220ms ease;
}

.sidebar-toggle {
  width: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  gap: 4px;
}

.sidebar-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 88px minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar {
  padding-inline: 14px;
}

.app-shell.sidebar-collapsed .brand {
  justify-content: center;
  padding-inline: 0;
}

.app-shell.sidebar-collapsed .brand img {
  max-width: 54px;
}

.app-shell.sidebar-collapsed .nav-item span:not(.nav-icon),
.app-shell.sidebar-collapsed .side-status {
  display: none;
}

.app-shell.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline: 0;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 8px;
}

.brand img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

.module-nav {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  color: #d7eeee;
  background: transparent;
  text-align: left;
}

.nav-item:hover,
.nav-item:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.is-active {
  color: #ffffff;
  background: rgba(90, 174, 176, 0.24);
}

.legacy-settings-item {
  display: none;
}

.nav-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  font-weight: 800;
}

.side-status {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}

.side-status div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-status p {
  margin: 8px 0 0;
  color: #bfdddd;
  font-size: 0.86rem;
  line-height: 1.45;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #60d394;
  box-shadow: 0 0 0 4px rgba(96, 211, 148, 0.18);
}

.workspace {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.eyebrow {
  margin-bottom: 4px;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.18;
}

h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

h3 {
  margin: 0;
  font-size: 0.95rem;
}

.topbar-actions,
.toolbar,
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Horní lišta: Hledat / Instalovat / firma / Odhlásit — VŠE zarovnané doprava,
   i když se blok zalomí na víc řádků. */
.topbar-actions {
  justify-content: flex-end;
  margin-left: auto;
}
.topbar-actions .search span { text-align: right; }

/* HTML atribut hidden MUSÍ vždy vyhrát nad display pravidly tříd (jinak
   skrytý prvek — např. PWA Instalovat — dál zabírá místo a rozhazuje layout). */
[hidden] { display: none !important; }

.search {
  display: grid;
  gap: 4px;
  min-width: min(360px, 100%);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.search input,
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
}

.search input {
  min-height: 42px;
  padding: 0 12px;
}

input,
select {
  min-height: 38px;
  padding: 0 10px;
}

textarea {
  padding: 10px;
  resize: vertical;
}

.primary-button,
.ghost-button,
.danger-button,
.text-button {
  min-height: 40px;
  border-radius: var(--radius);
  font-weight: 800;
}

.primary-button {
  border: 1px solid var(--brand);
  padding: 0 14px;
  color: #ffffff;
  background: var(--brand);
}

.ghost-button {
  border: 1px solid var(--line);
  padding: 0 14px;
  color: var(--brand-deep);
  background: #ffffff;
}

.danger-button {
  border: 1px solid rgba(185, 66, 66, 0.28);
  padding: 0 14px;
  color: #842b2b;
  background: #fff2f2;
}

.text-button {
  min-height: auto;
  border: 0;
  padding: 0;
  color: var(--blue);
  background: transparent;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.kpi-grid,
.module-cards,
.connector-grid,
.account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
}

.module-tile-board {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/*
 * SEZNAM MODULŮ SE MUSÍ UKÁZAT VŽDY.
 *
 * Je to nejdůležitější věc v řídicím centru — rozcestník do celého systému.
 * Nesmí záviset na tom, jestli se povedlo rozvržení panelů: uložená výška
 * z dřívějška, nedoběhlý Gridstack ani cokoli jiného ho nesmí smrsknout na
 * proužek (stalo se 19. 8. a nedalo se z toho dostat).
 *
 * Panel s moduly i jeho vnitřní plocha proto mají pevné minimum. Když si
 * uživatel panel zvětší, platí jeho hodnota — minimum jen brání zmizení.
 */
#home-panels > .grid-stack-item[gs-id="modules"] {
  min-height: 340px;
}
#home-panels > .grid-stack-item[gs-id="modules"] > .grid-stack-item-content {
  min-height: 320px;
  overflow: auto;
}
#home-modules {
  min-height: 240px;
}
/* Dokud Gridstack dlaždice nerozmístí, ukáže je aspoň prostý mřížkový layout. */
#home-modules:not(.grid-stack-animate) > .grid-stack-item {
  position: relative;
}

.kpi,
.panel,
.module-card,
.connector-card,
.account-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.module-card[draggable="true"] {
  cursor: grab;
}

.module-card.is-dragging {
  opacity: 0.55;
}

/* ── Gridstack modulové dlaždice (zákon panelů) — řídící centrum ──
   Desktop ≥1025: 4 sloupce · tablet 701–1024: 2 sloupce · telefon ≤700: 1 sloupec */
#home-modules.grid-stack { display: block; min-height: 220px; }
@media (min-width: 1025px) and (max-width: 1899px) {
  #home-modules.grid-stack > .grid-stack-item:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 25% !important; left: 0 !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 50% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 75% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="4"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 100% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="1"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 25% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 50% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 75% !important; }
}
/* Široký monitor ≥1900: ŠEST sloupců. Se čtyřmi sloupci a 16 moduly panel přeroste
   výšku obrazovky a poslední řádek spadne pod okraj — a všechny aktivní moduly
   musí být vidět. (Gridstack u custom počtu sloupců šířky negeneruje, viz zákon panelů.) */
@media (min-width: 1900px) {
  #home-modules.grid-stack > .grid-stack-item:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 16.6667% !important; left: 0 !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 33.3333% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 50% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="4"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 66.6667% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="5"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 83.3333% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="6"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 100% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="1"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 16.6667% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 33.3333% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 50% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="4"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 66.6667% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="5"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 83.3333% !important; }
}

/* Tablet 701–1024: dlaždice ve DVOU sloupcích (engine přepne přes columnOpts) */
@media (min-width: 701px) and (max-width: 1024px) {
  #home-modules.grid-stack > .grid-stack-item:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 50% !important; left: 0 !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-w="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing),
  #home-modules.grid-stack > .grid-stack-item[gs-w="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing),
  #home-modules.grid-stack > .grid-stack-item[gs-w="4"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 100% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="1"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing),
  #home-modules.grid-stack > .grid-stack-item[gs-x="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 50% !important; }
  #home-modules.grid-stack > .grid-stack-item[gs-x="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 0 !important; }
}
/* Telefon ≤700: dlaždice v JEDNOM sloupci přes celou šířku */
@media (max-width: 700px) {
  #home-modules.grid-stack > .grid-stack-item { width: 100% !important; left: 0 !important; }
}
#home-modules.grid-stack > .grid-stack-item > .grid-stack-item-content { inset: 0 !important; width: auto !important; }
.grid-stack-item-content.module-card { display: flex; flex-direction: column; overflow: hidden; }  /* výšku řeší grow-to-fit → žádné scrollbary */
/* Děti se NESMÍ flex-smršťovat: jinak se obsah stlačí místo přetečení
   a grow-to-fit measurement přetečení nikdy neuvidí. */
.grid-stack-item-content.module-card > * { flex: 0 0 auto; }
.grid-stack-item .module-card > header h3 {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;      /* název modulu se NIKDY nezalamuje */
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-stack-item .module-card > header .badge,
.grid-stack-item .module-card > header .dash-w-badge { flex: 0 0 auto; }
/* Spodní dekorace v dlaždicích VYPNUTÁ: rotovaný ::after s bottom:-28px vytvářel
   trvalý scroll-overflow ~46 px → auto-výška dlaždice nikdy nekonvergovala. */
.grid-stack-item-content.module-card::after { display: none; }
.grid-stack-item-content.module-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;                 /* dva řádky popisu — dlaždice musí zůstat kompaktní */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
/* Kompaktní dlaždice: cesta a výčet rolí jsou v tooltipu, na dlaždici zůstává
   jen verze a počet rolí na JEDNOM řádku. Bez toho panel s 16 moduly přeroste
   obrazovku a poslední řádek modulů uživatel nikdy neuvidí. */
.grid-stack-item-content.module-card { padding: 12px 14px; gap: 0; }
.grid-stack-item-content.module-card .module-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}
.grid-stack-item-content.module-card .mini-link,
.grid-stack-item-content.module-card .mini-button { margin-top: 10px; align-self: flex-start; }
.grid-stack-item .module-card > header h3 { font-size: 14px; }
.module-drag-handle { cursor: grab; }
.module-drag-handle:active { cursor: grabbing; }
.grid-stack-item .module-card > header { display: flex; align-items: center; gap: 8px; min-height: 24px; }
/* Název modulu má přednost před odznakem stavu. Na úzké dlaždici se dřív
   scvrkl na jedno písmeno a odznak vypadal, jako by ho překrýval. */
.grid-stack-item .module-card > header h3 { flex: 1 1 auto; min-width: 60px; }
.grid-stack-item .module-card > header .badge {
  flex: 0 1 auto; min-width: 0; max-width: 46%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Hlavní panely řídícího centra (#home-panels, 4 sloupce) — explicitní šířky
   (Gridstack u custom column počtu negeneruje spolehlivě, viz zákon panelů)
   Tablet a telefon ≤1024: panely POD SEBOU v plné šířce (uvnitř mají dlaždice 2/1 sl.) ── */
#home-panels.grid-stack { display: block; min-height: 120px; }
@media (min-width: 1025px) {
  #home-panels.grid-stack > .grid-stack-item:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 25% !important; left: 0 !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-w="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 50% !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-w="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 75% !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-w="4"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { width: 100% !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-x="1"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 25% !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-x="2"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 50% !important; }
  #home-panels.grid-stack > .grid-stack-item[gs-x="3"]:not(.ui-draggable-dragging):not(.ui-resizable-resizing) { left: 75% !important; }
}
@media (max-width: 1024px) {
  #home-panels.grid-stack > .grid-stack-item { width: 100% !important; left: 0 !important; }
}
#home-panels.grid-stack > .grid-stack-item > .grid-stack-item-content { inset: 0 !important; width: auto !important; }
#home-panels .panel-heading { cursor: grab; }
#home-panels .panel-heading:active { cursor: grabbing; }
#home-panels .grid-stack-item.is-hidden { display: none !important; }
#home-panels { margin-top: 14px; }

/* Skrýt panel ✕ + chipy pro obnovení */
.panel-hide-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.panel-hide-btn:hover { border-color: var(--red); color: var(--red); }
.hidden-panels-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hidden-panel-chip {
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
}
.hidden-panel-chip:hover { border-color: var(--brand); color: var(--brand); }

/* Jemné resize úchyty — jeden roh, lehké čárky místo tlusté šipky */
.grid-stack > .grid-stack-item > .ui-resizable-se {
  width: 12px;
  height: 12px;
  right: 7px;
  bottom: 7px;
  background: none;
  border-right: 2px solid rgba(7, 63, 70, 0.28);
  border-bottom: 2px solid rgba(7, 63, 70, 0.28);
  border-radius: 0 0 3px 0;
  transform: none;
}
.grid-stack > .grid-stack-item > .ui-resizable-se:hover {
  border-right-color: var(--brand);
  border-bottom-color: var(--brand);
}
.dash-w-badge {
  /* Vpravo v hlavičce, ve všech modulech stejně. Bez tohohle sedí odznak
     hned za nadpisem a v každém panelu jinde. */
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  flex: 0 0 auto;
  cursor: pointer;
  margin-left: auto;
}
.dash-w-badge:hover { border-color: var(--brand); color: var(--brand); }

/* ── Menu: Nastavení jako skupina — legacy config položky vizuálně vnořené pod Nastavení ── */
.module-nav .legacy-settings-item {
  margin-left: 18px;
  font-size: 0.92em;
  border-left: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
}
.module-nav .legacy-settings-item .nav-icon {
  transform: scale(0.82);
  opacity: 0.78;
}
.module-nav .legacy-settings-item:hover { border-left-color: var(--brand); }

/* ── Klientský branding — název firmy v záhlaví + formulář/náhled ── */
.brand-client-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.branding-form { display: grid; gap: 12px; max-width: 760px; }
.branding-form .full-row { grid-column: 1 / -1; }
.branding-preview { min-height: 40px; }
.branding-preview img {
  max-height: 64px;
  max-width: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
}

/* ── Varianty loga ──────────────────────────────────────────────────
 * Náhled se ukazuje na tom podkladu, pro který je varianta určená —
 * jinak by klient neviděl to, co uvidí uživatel, a světlé logo na bílém
 * poli by vypadalo jako prázdné místo. */
.branding-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.branding-slot {
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.branding-slot-cap { font-weight: 800; font-size: .78rem; color: var(--brand-deep); }
.branding-slot .branding-preview {
  display: grid;
  place-items: center;
  min-height: 76px;
  border-radius: 8px;
  padding: 8px;
}
.branding-slot .branding-preview img { border: 0; padding: 0; background: none; max-height: 56px; }
.branding-preview.is-light { background: #ffffff; border: 1px dashed var(--line); }
.branding-preview.is-dark { background: #0f3b41; border: 1px dashed rgba(255, 255, 255, .3); }
.branding-preview.is-dark .row-meta { color: rgba(255, 255, 255, .65); }
.branding-slot input[type="file"] { font-size: .76rem; }

.accent-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.client-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfd;
}

.client-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.client-card h3,
.client-card span {
  margin: 0;
}

.client-brand-strip {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-left: 6px solid var(--client-color, var(--brand));
  border-radius: var(--radius);
  background: #ffffff;
}

.client-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.84rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 23, 26, 0.58);
}

.modal {
  width: min(940px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
}

/*
 * Karta dialogu.
 *
 * Tahle třída v CSS CHYBĚLA — dialog aktivace modulu se tedy vykresloval bez
 * pozadí a text se mísil s dlaždicemi pod ním. Zákon zní: každý dialog má
 * neprůhledné pozadí; poloprůhledné smí být jen zatemnění za ním.
 */
.modal-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line, #dce4e6);
  box-shadow: 0 24px 60px rgba(4, 23, 26, 0.34);
}

.modal-card .modal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-card .modal-header h2 { margin: 0; font-size: 18px; }

.kpi {
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 16px;
}

.kpi span,
.kpi small,
.meta,
.row-meta {
  color: var(--muted);
}

.kpi strong {
  font-size: 2.25rem;
  line-height: 1;
}

.kpi.warning {
  border-color: rgba(184, 137, 0, 0.34);
  background: #fff9e8;
}

.kpi.danger {
  border-color: rgba(185, 66, 66, 0.34);
  background: #fff2f2;
}

.dashboard-layout,
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  margin-top: 14px;
}

.panel {
  padding: 16px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.pill {
  min-height: 26px;
  padding: 0 9px;
  color: var(--brand-deep);
  background: #dff2f2;
}

.badge {
  color: #ffffff;
  background: var(--brand);
}

.badge.warning {
  color: #3c2e00;
  background: #ffd86b;
}

.badge.danger {
  background: var(--red);
}

.badge.neutral {
  color: var(--ink);
  background: #e7ecee;
}

.module-card,
.connector-card,
.account-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 18px;
  overflow: hidden;
}

.module-card::before,
.module-card::after {
  position: absolute;
  content: "";
  transform: rotate(45deg);
  pointer-events: none;
}

.module-card::before {
  right: -34px;
  top: -26px;
  width: 118px;
  height: 118px;
  border-radius: 18px;
  background: rgba(90, 174, 176, 0.18);
}

.module-card::after {
  right: 38px;
  bottom: -28px;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  background: rgba(76, 120, 185, 0.16);
}

.module-card.is-open {
  border-color: rgba(13, 89, 97, 0.3);
  background: linear-gradient(180deg, #ffffff, #f5fbfb);
}

.module-card.is-planned {
  background: linear-gradient(180deg, #ffffff, #f7f8f8);
}

/* Značka dlaždice = malý decentní klastr (poloviční), NESMÍ přesahovat do titulku.
   Rotace zvětší vizuální obálku ~o 40 % → margin dává rezervu nahoře i dole. */
.module-tile-mark {
  position: relative;
  width: 36px;
  height: 31px;
  margin: 8px 0 12px 6px;
  transform: rotate(45deg);
}
/* V dlaždici modulu je značka zároveň úchyt pro tažení — patří do hlavičky
   vedle názvu, ne na vlastní řádek. Samostatný řádek stál 55 px výšky na
   každé dlaždici a kvůli tomu se poslední řádek modulů nevešel na obrazovku. */
.grid-stack-item .module-card > header .module-tile-mark {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 19px;
  margin: 0 2px 0 0;
  transform: rotate(45deg) scale(0.6);
  transform-origin: center;
}

.module-tile-mark span {
  position: absolute;
  border-radius: 3px;
  background: var(--brand);
}

.module-tile-mark span:nth-child(1) { left: 0; top: 12px; width: 15px; height: 6px; background: #0d5961; }
.module-tile-mark span:nth-child(2) { left: 11px; top: 4px; width: 9px; height: 9px; background: #5aaeb0; }
.module-tile-mark span:nth-child(3) { left: 21px; top: 0; width: 10px; height: 10px; background: #073f46; }
.module-tile-mark span:nth-child(4) { left: 21px; top: 13px; width: 7px; height: 7px; background: #a6a19c; }
.module-tile-mark span:nth-child(5) { left: 29px; top: 10px; width: 7px; height: 16px; background: #4c78b9; }
.module-tile-mark span:nth-child(6) { left: 19px; top: 22px; width: 9px; height: 9px; background: #6d6d68; }

.module-card header,
.connector-card header,
.account-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.module-card p,
.connector-card p,
.account-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  position: relative;
  z-index: 1;
}

.module-meta {
  display: grid;
  gap: 6px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.module-meta span {
  color: var(--muted);
  font-size: 0.82rem;
}

.checklist,
.user-list,
.role-matrix,
.slot-list,
.audit-list {
  display: grid;
  gap: 10px;
}

.check-item,
.user-item,
.role-row,
.slot-item,
.audit-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfdfd;
}

.audit-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 11px;
}
.audit-item-head strong {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: var(--brand-deep);
}

.check-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

/* Kompaktní pravidlo: checkbox 16×16, žádné obří boxy */
.check-item input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
  cursor: pointer;
}

.check-item .row-title { font-weight: 600; font-size: 0.85rem; line-height: 1.35; }
.check-item.is-done .row-title { color: var(--muted); text-decoration: line-through; }

.check-remove {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms;
}
.check-item:hover .check-remove { opacity: 1; }
.check-remove:hover { background: #fdeaea; color: var(--red); }

.checklist-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.checklist-add input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.85rem;
}
.checklist-add .ghost-button { flex: 0 0 auto; min-height: 32px; padding: 0 12px; }

.settings-branding { margin-top: 14px; max-width: 760px; }

/* 2FA dialog */
.totp-secret {
  font-family: "Courier New", monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  -webkit-user-select: all;
  user-select: all;
}
.totp-code-row { display: flex; gap: 8px; align-items: center; }
.totp-code-row input {
  width: 130px;
  flex: 0 0 auto;
  font-family: "Courier New", monospace;
  letter-spacing: 0.22em;
  font-size: 1rem;
}

.row-title {
  font-weight: 800;
}

.toolbar {
  margin-bottom: 14px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  background: #f4f8f9;
  font-size: 0.78rem;
  text-transform: uppercase;
}

tbody tr:hover {
  background: #f8fbfb;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-button,
.mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--brand-deep);
  background: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.mini-button:disabled,
.mini-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

.user-item,
.role-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.role-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #c7d2d5;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  transition: transform 160ms ease;
}

.switch input:checked + span {
  background: var(--brand);
}

.switch input:checked + span::after {
  transform: translateX(20px);
}

.connector-grid,
.account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.connector-card .form-grid,
.account-card .form-grid,
.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.full-row {
  grid-column: 1 / -1;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border-radius: var(--radius);
  color: #ffffff;
  background: var(--brand-deep);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1240px) {
  .kpi-grid,
  .module-cards,
  .connector-grid,
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .brand {
    min-height: 54px;
    padding: 0;
  }

  .brand img {
    max-width: 58px;
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .nav-item span:last-child,
  .side-status p,
  .side-status strong {
    display: none;
  }

  .side-status {
    display: grid;
    place-items: center;
    padding: 12px 6px;
  }

  .dashboard-layout,
  .split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .login-screen {
    padding: 14px;
  }

  .login-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "title"
      "subtitle"
      "form";
    min-height: calc(100vh - 28px);
    padding: 24px;
  }

  .login-panel h1 {
    font-size: 2.35rem;
  }

  .login-brand {
    justify-self: start;
    text-align: left;
  }

  .login-brand img {
    width: min(260px, 100%);
  }

  .brand-symbol {
    right: -240px;
    top: 60px;
    width: 280px;
    height: 280px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: auto;
    padding: 10px;
  }

  .brand,
  .side-status {
    display: none;
  }

  .module-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    min-width: 74px;
  }

  .workspace {
    padding: 16px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .kpi-grid,
  .module-cards,
  .connector-grid,
  .account-grid,
  .form-grid,
  .connector-card .form-grid,
  .account-card .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Accomodeus Design System — sdílený snippet pro všechny moduly
 * Verze: 20260603
 *
 * Přidává:
 *  · Globální button systém (obdélníkové/čtvercové se zaoblenými rohy)
 *  · Status-light pattern (světelné semafory s popiskem)
 *  · Normalizaci checkboxů (16×16, brand accent, 20px gap)
 *
 * Připojuje se na konec styles.css každého modulu. Pravidla mají vysokou
 * specificity / pozdější pořadí, takže přepíší starší definice.
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  --acc-brand-deep: #073f46;
  --acc-brand: #0d5961;
  --acc-brand-light: #5aaeb0;
  --acc-line: #d9e1e3;
  --acc-ink: #102326;
  --acc-muted: #617174;
  --acc-radius: 8px;
  --acc-radius-sm: 6px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.primary-button,
.ghost-button,
.action-button,
.danger-button,
.warning-button,
.incident-button,
.draft-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--acc-radius);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}

.primary-button,
.action-button {
  border-color: var(--acc-brand);
  color: #ffffff;
  background: var(--acc-brand);
}
.primary-button:hover,
.action-button:hover {
  background: var(--acc-brand-deep);
  border-color: var(--acc-brand-deep);
}

.ghost-button {
  border-color: var(--acc-line);
  color: var(--acc-brand-deep);
  background: #ffffff;
}
.ghost-button:hover { border-color: var(--acc-brand); }

.danger-button {
  border-color: rgba(185, 66, 66, 0.5);
  color: #842b2b;
  background: #fff2f2;
}
.danger-button:hover { background: #ffe6e6; border-color: #b94242; }

.warning-button {
  border-color: rgba(212, 163, 23, 0.55);
  color: #7a5a00;
  background: #fdf5dd;
}
.warning-button:hover { background: #fbecb6; border-color: #d4a317; }

.incident-button {
  border-color: #7d2738;
  color: #ffffff;
  background: #7d2738;
}
.incident-button:hover { background: #5e1d2a; border-color: #5e1d2a; }

.draft-button {
  border-color: rgba(46, 143, 111, 0.55);
  color: #1d6b46;
  background: #d9f0e2;
}
.draft-button:hover { background: #c2e6cf; border-color: #2e8f6f; }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #4c78b9;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.text-button:hover { text-decoration: underline; }

.mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--acc-line);
  border-radius: var(--acc-radius-sm);
  color: var(--acc-brand-deep);
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mini-button:hover { border-color: var(--acc-brand); color: var(--acc-brand); }
.mini-button.is-secondary { background: #fafdfd; }

/* ── Status světla (semafor) ──────────────────────────────────────────── */
.status-light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border: 1px solid currentColor;
  border-radius: var(--acc-radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  vertical-align: middle;
  background: var(--status-bg, transparent);
  color: var(--status-fg, var(--acc-ink));
}
.status-light::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-fg, currentColor);
  box-shadow: 0 0 0 2px var(--status-glow, rgba(0, 0, 0, 0.08));
}
.status-light-ok      { --status-fg: #1d6b46; --status-bg: #d9f0e2; --status-glow: rgba(46, 143, 111, 0.22); border-color: rgba(46, 143, 111, 0.45); }
.status-light-warn    { --status-fg: #8a6800; --status-bg: #fdf5dd; --status-glow: rgba(212, 163, 23, 0.22); border-color: rgba(212, 163, 23, 0.45); }
.status-light-danger  { --status-fg: #7a3a3a; --status-bg: #fdecec; --status-glow: rgba(185, 66, 66, 0.22); border-color: rgba(185, 66, 66, 0.45); }
.status-light-info    { --status-fg: #1c4b7a; --status-bg: #e3f0fa; --status-glow: rgba(76, 120, 185, 0.22); border-color: rgba(76, 120, 185, 0.45); }
.status-light-pending { --status-fg: #7a4500; --status-bg: #fcecd4; --status-glow: rgba(212, 130, 23, 0.22); border-color: rgba(212, 130, 23, 0.45); }
.status-light-idle    { --status-fg: #4f5b5e; --status-bg: #eaeeef; --status-glow: rgba(100, 110, 115, 0.18); border-color: rgba(100, 110, 115, 0.35); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--status-fg, currentColor);
  box-shadow: 0 0 0 2px var(--status-glow, rgba(0, 0, 0, 0.08));
}
.status-dot-ok      { --status-fg: #2e8f6f; --status-glow: rgba(46, 143, 111, 0.22); }
.status-dot-warn    { --status-fg: #d4a317; --status-glow: rgba(212, 163, 23, 0.22); }
.status-dot-danger  { --status-fg: #b94242; --status-glow: rgba(185, 66, 66, 0.22); }
.status-dot-info    { --status-fg: #4c78b9; --status-glow: rgba(76, 120, 185, 0.22); }
.status-dot-idle    { --status-fg: #8896a0; --status-glow: rgba(100, 110, 115, 0.18); }

/* ── Checkbox normalizace ──────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  flex: 0 0 auto;
  accent-color: var(--acc-brand);
  cursor: pointer;
}
input[type="radio"] { border-radius: 50%; }
label.compact-check,
.compact-check {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc-brand-deep);
}


/* Demo lead-magnet banner (2026-06-29) */
.demo-banner { display:flex; align-items:center; gap:16px; padding:14px 20px; margin-bottom:18px; border-radius:14px; background:linear-gradient(120deg,#0d5961,#0a7d72); color:#fff; box-shadow:0 6px 20px rgba(13,89,97,.25); }
.demo-banner-tag { font-weight:800; font-size:13px; letter-spacing:.06em; background:rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; white-space:nowrap; }
.demo-banner-text { flex:1; display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.demo-banner-text strong { font-size:15px; }
.demo-banner-text span { font-size:13px; color:#d6f0ee; }
.demo-banner-cta { background:#fff; color:#073f46; font-weight:700; padding:9px 16px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.demo-banner-cta:hover { background:#eafaf7; }
@media (max-width:720px){ .demo-banner { flex-direction:column; align-items:flex-start; } }

/* ── Panel AliBEE Lite ke stažení (řídicí centrum) ── */
.alibee-panel { display: flex; flex-direction: column; gap: 10px; }
.alibee-lead { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted, #617174); }
.alibee-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--line, #d9e1e3); border-radius: 10px; background: #ffffff; }
.alibee-qr svg { width: 132px; height: 132px; display: block; }
.alibee-qr span { font-size: .72rem; color: var(--muted, #617174); text-align: center; }
.alibee-actions { display: flex; flex-direction: column; gap: 8px; }
.alibee-actions .primary-button,
.alibee-actions .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; text-decoration: none; text-align: center; }
.alibee-meta { margin: 0; font-size: .76rem; color: var(--muted, #617174); text-align: center; }
.alibee-note { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--muted, #617174); }
.alibee-mandatory { margin: 0; padding: 7px 10px; border: 1px solid #edd9b1; border-radius: 8px; background: #fdf9f0; color: #8a5a13; font-size: .78rem; font-weight: 700; }
.alibee-changelog { font-size: .78rem; color: var(--muted, #617174); }
.alibee-changelog strong { display: block; color: var(--ink, #102326); font-size: .8rem; margin-bottom: 3px; }
.alibee-changelog ul { margin: 0; padding-left: 16px; }
.alibee-changelog li { margin: 2px 0; line-height: 1.4; }
.alibee-sha { margin: 0; font-size: .68rem; color: var(--muted, #617174); }
.alibee-sha code { font-family: ui-monospace, SFMono-Regular, monospace; }

/* ── Modulové dlaždice: kompaktní na tabletu a telefonu ──
   Na malém displeji je cesta k modulu, verze a výčet rolí balast, kvůli kterému
   dlaždice narostly na ~280 px a scrollovalo se přes několik obrazovek.
   Na velkém monitoru zůstávají — tam je místo. */
@media (max-width: 1024px) {
  #home-modules .module-card { padding: 12px 14px; }
  #home-modules .module-card .module-meta { display: none; }
  #home-modules .module-card > p { margin: 4px 0 8px; font-size: .84rem; line-height: 1.4; }
  #home-modules .module-card > header { margin-bottom: 2px; }
  #home-modules .module-card .mini-link,
  #home-modules .module-card .mini-button { margin-top: 4px; }
  /* dekorativní značka bere výšku a na malém displeji nic nepřináší */
  #home-modules .module-tile-mark { display: none; }
}
/* Dlaždice sedí na obsahu (viz grow/shrink-to-fit), takže `margin-top:auto`
   u patičky už jen dělalo prázdné místo uprostřed karty. */
#home-modules .module-card .module-meta { margin-top: 8px; }

/* ── Řídicí centrum na tabletu a telefonu: dlaždice jako obyčejný seznam ──
   Stejný postup jako u dashboardu Dispečinku. Mřížka drží pevné výšky řádků
   (dlaždice pak měly 240 px, i když obsah zabral 120) a v responzivním režimu
   si je vynutí zpět i po přepočtu. Na malém displeji ji proto vypneme úplně:
   dlaždice se poskládají pod sebe a jsou přesně tak vysoké, jak potřebují. */
@media (max-width: 1024px) {
  #home-modules.grid-stack,
  #home-panels.grid-stack {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    height: auto !important;
  }
  /* panely vždy pod sebou; dlaždice modulů na telefonu 1 sloupec, na tabletu 2 */
  #home-panels.grid-stack > .grid-stack-item { flex: 1 1 100%; }
  #home-modules.grid-stack > .grid-stack-item { flex: 1 1 100%; }
  #home-modules.grid-stack > .grid-stack-item,
  #home-panels.grid-stack > .grid-stack-item,
  #home-modules.grid-stack > .grid-stack-item[gs-w],
  #home-modules.grid-stack > .grid-stack-item[gs-x],
  #home-panels.grid-stack > .grid-stack-item[gs-w],
  #home-panels.grid-stack > .grid-stack-item[gs-x] {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }
  #home-modules.grid-stack > .grid-stack-item > .grid-stack-item-content,
  #home-panels.grid-stack > .grid-stack-item > .grid-stack-item-content {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* přesouvání a změna velikosti nemá na dotykovém displeji smysl a plete se se scrollem */
  #home-modules .ui-resizable-handle,
  #home-panels .ui-resizable-handle,
  #home-modules .dash-w-badge,
  #home-panels .dash-w-badge { display: none !important; }
  #home-modules .panel-heading,
  #home-panels .panel-heading { cursor: default; }
}

/* Tablet: dlaždice modulů ve dvou sloupcích (panely zůstávají pod sebou). */
@media (min-width: 701px) and (max-width: 1024px) {
  #home-modules.grid-stack > .grid-stack-item { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); }
}

/* ── poweradmin: výběr modulů firmy ─────────────────────────────────────── */
.picker-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.picker-head h3 { font-size: 14px; margin: 0; }
.picker-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.picker-tools input[type="search"] { width: 190px; padding: 5px 9px; font-size: 12px; }
.module-group { margin-bottom: 12px; }
.module-group__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.module-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.module-checks label {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.3; cursor: pointer;
}
.module-checks label:hover { background: rgba(13, 89, 97, .06); }
.module-checks label input[type="checkbox"] { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; }
.module-checks label small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
@media (max-width: 700px) { .module-checks { grid-template-columns: 1fr; } .picker-tools input[type="search"] { width: 100%; } }

/* ── poweradmin: dialog nabídky modulů ──────────────────────────────────── */
.offer-dialog { width: min(760px, 96vw); max-width: 760px; }
.offer-for { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 0 14px; }
.offer-for__label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.offer-table td, .offer-table th { padding: 5px 8px; font-size: 12.5px; }
.offer-table .num { text-align: right; white-space: nowrap; }
.offer-table tr.is-off { opacity: .5; }
.offer-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.offer-pick input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; }
/* Pozor na název: `.offer-price` je zároveň políčko s cenou v tabulce nabídky
 * A panel s cenou v dialogu aktivace. Pravidlo bez `input` srazilo celý panel
 * na 82 px a cena se lámala po jednom slově do úzkého sloupečku. */
input.offer-price { width: 82px; padding: 3px 6px; font-size: 12px; text-align: right; }
.offer-sum { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.offer-discount { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.offer-discount input { width: 64px; padding: 3px 6px; text-align: right; }
.offer-line { display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; padding: 2px 0; min-width: 260px; }
.offer-line--total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-size: 15px; }
@media (max-width: 700px) { .offer-for { grid-template-columns: 1fr; } .offer-sum { flex-direction: column; } }

/* ── Zkušební provoz: odpočet a co bude s daty ──────────────────────────── */
.trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(26, 122, 74, .28); background: rgba(26, 122, 74, .08);
}
.trial-banner.is-soon { border-color: rgba(214, 158, 46, .45); background: rgba(214, 158, 46, .12); }
.trial-banner.is-readonly { border-color: rgba(198, 40, 40, .35); background: rgba(198, 40, 40, .08); }
.trial-banner__text { display: grid; gap: 3px; min-width: 0; }
.trial-banner__text strong { font-size: 14px; }
.trial-banner__text span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.trial-banner__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.trial-banner__actions .primary-button { text-decoration: none; }
@media (max-width: 700px) { .trial-banner { flex-direction: column; align-items: stretch; } }


/* ═══════ Nezaplacený modul: vidět, ale zašedlý (2026-08-11) ═══════ */
.module-card.is-locked { opacity: .72; background: repeating-linear-gradient(135deg, #f6f8f9, #f6f8f9 9px, #f1f5f6 9px, #f1f5f6 18px); }
.module-card.is-locked h3, .module-card.is-locked p { color: #64777d; }
.module-card.is-locked:hover { opacity: 1; }
.module-card .module-activate { width: 100%; justify-content: center; font-weight: 700;
  background: #0d5961; color: #fff; border-color: #0d5961; }
.module-card .module-activate:hover { background: #0a464c; }

.module-offer-card { max-width: 520px; }
.module-offer-card .offer-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.module-offer-card .offer-head h3 { margin: 0; font-size: 18px; }
.module-offer-card .offer-pitch { margin: 0 0 14px; color: #47585d; font-size: 13.5px; line-height: 1.5; }
.module-offer-card .offer-price { border: 1px solid #dce4e6; border-radius: 10px; padding: 12px 14px; background: #f7fbfb; margin-bottom: 12px; }
.module-offer-card .offer-price-main { display: flex; align-items: baseline; gap: 8px; }
.module-offer-card .offer-price-main strong { font-size: 26px; color: #0d5961; }
.module-offer-card .offer-price-main span { font-size: 12px; color: #64777d; }
.module-offer-card .offer-price-note { margin-top: 4px; font-size: 12px; color: #64777d; }
.module-offer-card .offer-facts { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; color: #47585d; line-height: 1.6; }
.module-offer-card .offer-note { min-height: 18px; margin: 0; font-size: 12.5px; font-weight: 600; color: #0d5961; }


/* Tlačítka na dlaždici modulu — ve zkušební verzi dvě vedle sebe, stejně velká. */
.module-card .tile-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; }
.module-card .tile-actions.is-two { grid-template-columns: 1fr 1fr; }
.module-card .tile-button { display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 10px; border: 1px solid var(--line, #dce4e6); border-radius: 9px;
  background: #fff; color: var(--brand, #0d5961); font-size: 12.5px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit; box-sizing: border-box; }
.module-card .tile-button:hover { background: #f2f9f9; }
.module-card .tile-button[disabled] { opacity: .5; cursor: default; }
.module-card .tile-button.is-order,
.module-card .tile-button.is-activate { background: var(--brand, #0d5961); border-color: var(--brand, #0d5961); color: #fff; }
.module-card .tile-button.is-order:hover,
.module-card .tile-button.is-activate:hover { background: #0a464c; }
@media (max-width: 480px) { .module-card .tile-actions.is-two { grid-template-columns: 1fr; } }


/* Zálohový list po objednávce modulu */
.pay-grid { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start;
  border: 1px solid var(--line, #dce4e6); border-radius: 10px; padding: 14px; background: #f7fbfb; margin-bottom: 10px; }
.pay-qr svg { width: 132px; height: 132px; display: block; }
.pay-noqr { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #c9d6d8; border-radius: 8px; font-size: 11px; color: #64777d; text-align: center; }
.pay-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.pay-facts dt { color: #64777d; font-size: 12px; }
.pay-facts dd { margin: 0; font-weight: 600; }
.pay-facts dd span { font-weight: 500; font-size: 11.5px; color: #64777d; }
.pay-facts dd strong { font-size: 18px; color: var(--brand, #0d5961); }
.pay-facts .pay-vs { font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .5px; }
@media (max-width: 480px) { .pay-grid { grid-template-columns: 1fr; justify-items: center; } }


/* Dlaždice modulu s tlačítky se musí vejít do 5 řádků mřížky (200 px).
   Měřeno: bez tohoto doladění přetékala o 10 px a překrývala řadu pod sebou. */
.grid-stack-item-content.module-card { padding: 10px 12px; }
.grid-stack-item-content.module-card p { margin-top: 4px; }
.module-card .tile-actions { margin-top: 8px; gap: 6px; }
.module-card .tile-button { min-height: 30px; font-size: 12px; }
.grid-stack-item-content.module-card .module-meta { margin-top: 4px; }


/* PŘÍČINA PŘEKRÝVAJÍCÍCH SE DLAŽDIC (nalezeno měřením 2026-08-11):
   `.module-card` má z původního, negridového rozvržení `min-height: 210px`.
   V mřížce má ale dlaždice výšku danou počtem řádek (5 × 40 = 200 px), takže
   každá dlaždice přesahovala o 10 px do řady pod sebou — a při dřívější výšce
   čtyř řádek (160 px) dokonce o 50 px. Uvnitř mřížky výšku určuje MŘÍŽKA. */
#home-modules .grid-stack-item-content.module-card { min-height: 0; }


/* Tlačítko sedí u spodní hrany dlaždice, text u horní — `margin-top: auto`
   spotřebuje volné místo mezi nimi. (Předchozí doladění výšky ho omylem
   přebilo pevnou hodnotou, takže tlačítko zůstávalo nalepené na popisu.) */
#home-modules .module-card .tile-actions { margin-top: auto; }
#home-modules .module-card p { margin-bottom: 2px; }


/* Podklady k platbě v dialogu aktivace modulu.
 * Stejný vzhled jako v Business modulu — klient i obchodník mají vidět totéž. */
.module-offer-card { max-width: 560px; }
.pay-grid { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: start;
  border: 1px solid var(--line, #dce4e6); border-radius: 12px; padding: 16px; background: #f7fbfb; margin: 4px 0 12px; }
.pay-qr svg { width: 190px; height: 190px; display: block; }
.pay-noqr { width: 190px; height: 190px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #c9d6d8; border-radius: 10px; font-size: 12px; color: var(--muted, #64777d); text-align: center; }
.pay-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-content: start; }
.pay-facts dt { color: var(--muted, #64777d); font-size: 12px; font-weight: 700; }
.pay-facts dd { margin: 0; font-weight: 700; font-size: 14px; }
.pay-facts dd strong { font-size: 24px; color: var(--brand, #0d5961); }
.pay-facts dd span { font-size: 11.5px; font-weight: 500; color: var(--muted, #64777d); }
.pay-facts .pay-vs { font-family: ui-monospace, Consolas, monospace; font-size: 17px; letter-spacing: .5px; }
@media (max-width: 600px) {
  .pay-grid { grid-template-columns: 1fr; justify-items: center; }
  .pay-facts { justify-self: stretch; }
}

.pay-actions { display: flex; gap: 8px; margin-bottom: 8px; }


/* Poměrná část při doobjednávce */
.prorata { border: 1px solid #dce4e6; border-radius: 11px; padding: 12px 14px; background: #f7fbfb; margin-bottom: 12px; }
.prorata-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prorata-row span { font-size: 13px; color: #47585d; }
.prorata-row span em { font-style: normal; font-size: 11.5px; color: #64777d; }
.prorata-row strong { font-size: 21px; color: #0d5961; font-variant-numeric: tabular-nums; }
.prorata-next { margin-top: 10px; padding-top: 9px; border-top: 1px solid #dce4e6; }
.prorata-next strong { font-size: 16px; color: #47585d; }
.prorata-note { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: #64777d; }


/* Vaše data — export */
.export-list { display: grid; gap: 4px; margin: 10px 0; }
.export-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 11px;
  border: 1px solid var(--line, #dce4e6); border-radius: 8px; background: #fbfdfd; font-size: 13px; }
.export-label { font-weight: 600; }
.export-size { color: var(--muted, #64777d); font-variant-numeric: tabular-nums; }
.export-more { justify-content: center; color: var(--muted, #64777d); font-size: 12px; background: transparent; border-style: dashed; }
.export-warn { padding: 9px 12px; border-radius: 9px; background: #fff7ed; border: 1px solid #f0d9b5; }


/* Omezení přístupu při neuhrazené platbě */
.restriction-banner { margin-bottom: 16px; border: 2px solid #d9a441; border-radius: 14px;
  background: #fffaf0; box-shadow: 0 2px 8px rgba(146, 64, 14, .08); }
.restriction-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 20px; flex-wrap: wrap; }
.restriction-inner strong { display: block; font-size: 16px; color: #92400e; margin-bottom: 4px; }
.restriction-inner p { margin: 0 0 4px; font-size: 13px; color: #6b4a1a; max-width: 62ch; }
.restriction-safe { color: #15803d !important; font-weight: 600; }
.restriction-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tile-button.is-locked-link { background: #f5f0e4; color: #92400e; border: 1px solid #e0c98a; cursor: not-allowed; }

/* ── Číselné řady ─────────────────────────────────────────────────────────────
   Dvousloupcové: vlevo seznam řad, vpravo editor. Není to přehled, ale formulář,
   takže se sem Gridstack panely netáhnou. */
.rady-layout { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.rady-seznam { display: grid; gap: 4px; }
.rady-radek {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nazev cisla" "modul cisla";
  gap: 2px 10px; text-align: left; padding: 9px 12px; border: 1px solid var(--line, #d9e1e3);
  border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.rady-radek:hover { border-color: var(--brand, #0d5961); }
.rady-radek.is-active { border-color: var(--brand, #0d5961); background: var(--surface-soft, #f3f7f8); }
.rady-nazev { grid-area: nazev; font-weight: 700; color: var(--brand-deep, #073f46); }
.rady-modul { grid-area: modul; font-size: .74rem; color: var(--muted, #617174); }
.rady-cisla { grid-area: cisla; align-self: center; font-size: .8rem; color: var(--muted, #617174); font-variant-numeric: tabular-nums; }
.rady-cisla strong { color: var(--brand-deep, #073f46); }

.rady-editor { display: grid; gap: 2px; border: 1px solid var(--line, #d9e1e3); border-radius: 12px; padding: 16px 18px; background: #fff; }
.rady-editor h3 { margin: 0 0 10px; }
.rady-pole { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; font-size: .84rem; }
.rady-pole input[type="text"], .rady-pole input[type="number"], .rady-pole select {
  font-weight: 400; padding: 7px 10px; border: 1px solid var(--line, #d9e1e3); border-radius: 8px; font-size: .92rem;
}
.rady-pole input#rady-maska { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
fieldset.rady-pole { border: 0; padding: 0; margin-top: 12px; }
fieldset.rady-pole legend { padding: 0; font-weight: 600; font-size: .84rem; }
/* Zaškrtávátka 16×16 dle zvyklostí prostředí. */
.rady-check { display: flex; align-items: center; gap: 7px; font-weight: 400; font-size: .88rem; margin-top: 5px; }
.rady-check input { width: 16px; height: 16px; margin: 0; flex: 0 0 16px; }

.rady-nahled { margin: 8px 0 0; font-size: .95rem; }
.rady-nahled strong { font-family: ui-monospace, Consolas, monospace; font-size: 1.08rem; color: var(--brand-deep, #073f46); background: var(--surface-soft, #f3f7f8); padding: 2px 8px; border-radius: 6px; }
.rady-ukazka { margin: 5px 0 0; font-size: .78rem; color: var(--muted, #617174); font-family: ui-monospace, Consolas, monospace; }
.rady-vysvetlivka { margin: 4px 0 0; font-size: .78rem; color: var(--muted, #617174); line-height: 1.45; }
.rady-stav-radek { margin: 10px 0 0; font-size: .8rem; color: var(--muted, #617174); }
.rady-napoveda { margin-top: 10px; font-size: .8rem; }
.rady-napoveda summary { cursor: pointer; color: var(--brand, #0d5961); font-weight: 600; }
.rady-napoveda ul { margin: 8px 0 4px; padding-left: 18px; line-height: 1.7; }
.rady-napoveda code { background: var(--surface-soft, #f3f7f8); padding: 1px 5px; border-radius: 4px; font-size: .95em; }

@media (max-width: 900px) { .rady-layout { grid-template-columns: 1fr; } }