/* === v0.3.3: čistá samostatná přihlašovací obrazovka === */
.auth-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  min-height: 100vh !important;
  width: 100vw !important;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 80% 15%, rgba(20,184,212,.15), transparent 28rem),
    radial-gradient(circle at 20% 85%, rgba(11,121,208,.10), transparent 30rem),
    linear-gradient(135deg,#f8fcff,#eaf4fa 55%,#f9fdff) !important;
}

/* Dokud je login viditelný, CRM se vůbec nezobrazuje. */
.auth-gate:not([hidden]) + .app-shell {
  display: none !important;
}

/* Hidden musí mít absolutní prioritu. */
[hidden] {
  display: none !important;
}


/* === v0.3.2: HTML hidden must always win over component display rules === */
[hidden] {
  display: none !important;
}


:root {
  --bg: #eef5fb;
  --panel: rgba(255,255,255,.88);
  --panel-solid: #ffffff;
  --ink: #10253e;
  --muted: #6c7e91;
  --line: #dce8f2;
  --navy: #07192e;
  --navy-2: #0a2848;
  --blue: #0b79d0;
  --cyan: #14b8d4;
  --ice: #eaf9ff;
  --good: #17a672;
  --warn: #f0a020;
  --danger: #e45656;
  --shadow: 0 14px 40px rgba(34,72,104,.10);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 92% 7%, rgba(20,184,212,.12), transparent 28rem),
    radial-gradient(circle at 18% 92%, rgba(11,121,208,.09), transparent 30rem),
    linear-gradient(135deg, #f8fcff 0%, #edf6fb 48%, #f8fcff 100%);
}
button, input, textarea, select { font: inherit; }

.app-shell { min-height: 100vh; display: flex; }

.sidebar {
  width: 268px;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: #eaf4ff;
  background:
    radial-gradient(circle at 15% 0%, rgba(20,184,212,.18), transparent 18rem),
    linear-gradient(180deg, #07192e 0%, #081d34 55%, #061425 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 23px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(96,213,244,.6);
  border-radius: 14px;
  color: #8be8ff;
  background: rgba(25,156,199,.12);
  box-shadow: inset 0 0 20px rgba(20,184,212,.12);
  font-size: 24px;
}
.brand-title { font-weight: 800; letter-spacing: .08em; }
.brand-subtitle { margin-top: 2px; font-size: 12px; color: #81a2bf; letter-spacing: .18em; }

.nav {
  overflow-y: auto;
  padding: 18px 3px 16px;
  scrollbar-width: thin;
}
.nav-label {
  margin: 20px 10px 7px;
  color: #607e9c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin: 3px 0;
  padding: 0 12px;
  border-radius: 12px;
  color: #b9cee1;
  font-size: 14px;
  text-decoration: none;
  transition: .18s ease;
}
.nav-item span { width: 20px; text-align: center; opacity: .95; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.065); transform: translateX(2px); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(11,121,208,.45), rgba(20,184,212,.16));
  box-shadow: inset 3px 0 0 #5fd8f1;
}

.sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding: 15px 10px 5px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #b7cde0;
  font-size: 12px;
}
.sidebar-footer small { display: block; margin-top: 2px; color: #6688a8; }
.status-dot { width: 9px; height: 9px; border-radius: 99px; background: #40d99e; box-shadow: 0 0 15px rgba(64,217,158,.8); }

.main { width: calc(100% - 268px); margin-left: 268px; min-height: 100vh; }

.topbar {
  height: 92px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 30px;
  backdrop-filter: blur(16px);
  background: rgba(245,251,255,.82);
  border-bottom: 1px solid rgba(175,201,220,.45);
}
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.topbar h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.03em; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.date-box { text-align: right; font-size: 13px; color: #526b82; }
.date-box small { display: block; margin-top: 3px; color: #94a4b2; }
.user-chip {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.84);
  padding: 7px 11px 7px 7px;
  border-radius: 14px;
  color: var(--ink);
}
.avatar {
  width: 34px; height: 34px; display:grid; place-items:center;
  border-radius: 10px;
  background: linear-gradient(135deg, #0b79d0, #14b8d4);
  color: #fff; font-size: 12px; font-weight: 800;
}
.user-meta { display: grid; text-align:left; line-height: 1.1; }
.user-meta strong { font-size:12px; }
.user-meta small { color: var(--muted); font-size: 10px; margin-top:3px; }
.menu-button { display: none; }

.content { padding: 28px 30px 46px; max-width: 1500px; margin: 0 auto; }

.hero {
  display:flex; justify-content:space-between; gap:24px; align-items:flex-end;
  margin-bottom: 22px;
}
.hero h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.hero p { margin:6px 0 0; color:var(--muted); font-size:14px; }
.live-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#eafaf4; color:#14845e; border:1px solid #cceee1;
  font-size:12px; font-weight:800;
}
.live-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#31c38b; }

.stats-grid {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
  margin-bottom:16px;
}
.card {
  background:var(--panel);
  border:1px solid rgba(190,214,230,.72);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.stat-card { padding:20px; min-height:138px; position:relative; overflow:hidden; }
.stat-card::after {
  content:""; position:absolute; width:100px; height:100px; border-radius:50%;
  right:-28px; top:-31px; background:rgba(20,184,212,.08);
}
.stat-icon {
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:13px; margin-bottom:17px;
  background:var(--ice); color:var(--blue); font-weight:900;
}
.stat-label { color:var(--muted); font-size:12px; font-weight:700; }
.stat-value { margin-top:6px; font-size:28px; font-weight:850; letter-spacing:-.04em; }
.stat-note { margin-top:4px; color:#94a6b6; font-size:11px; }

.quick-actions {
  display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:16px; margin-bottom:16px;
}
.primary-action {
  position:relative; min-height:122px; padding:22px;
  overflow:hidden; color:white;
  background:
    radial-gradient(circle at 85% 15%, rgba(137,235,255,.22), transparent 15rem),
    linear-gradient(135deg, #082746, #0b70b8);
  border:0;
  cursor:pointer;
}
.primary-action::after {
  content:"❄"; position:absolute; right:24px; top:15px;
  font-size:72px; color:rgba(255,255,255,.08);
}
.primary-action small { display:block; color:#bcecff; letter-spacing:.08em; font-weight:800; font-size:10px; }
.primary-action strong { display:block; margin-top:8px; font-size:22px; }
.primary-action span { display:block; margin-top:5px; color:#c9e9ff; font-size:12px; }

.action-card {
  min-height:122px; padding:20px;
  cursor:pointer; transition:.18s ease; text-align:left;
}
.action-card:hover { transform:translateY(-2px); border-color:#a9d7ef; }
.action-icon { font-size:20px; margin-bottom:17px; }
.action-card strong { display:block; font-size:15px; }
.action-card small { display:block; color:var(--muted); margin-top:5px; line-height:1.35; }

.dashboard-grid {
  display:grid; grid-template-columns:1.35fr .9fr .9fr; gap:16px;
}
.panel { padding:22px; min-height:290px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.panel-title { font-size:15px; font-weight:850; }
.panel-link { color:var(--blue); font-size:11px; font-weight:800; text-decoration:none; }

.empty-state {
  min-height:180px; display:grid; place-items:center; text-align:center;
  border:1px dashed #cbdde9; border-radius:17px;
  background:linear-gradient(180deg, rgba(246,252,255,.55), rgba(237,247,252,.45));
  color:var(--muted);
}
.empty-icon {
  width:52px; height:52px; display:grid; place-items:center; margin:0 auto 10px;
  border-radius:17px; background:#e8f6fd; color:#1693cc; font-size:22px;
}
.empty-state strong { display:block; color:#4b657d; font-size:13px; }
.empty-state small { display:block; margin-top:5px; max-width:260px; line-height:1.5; color:#91a2b0; }

.list { display:grid; gap:10px; }
.list-item {
  display:flex; align-items:flex-start; gap:11px; padding:12px;
  border:1px solid #e2edf4; border-radius:14px; background:rgba(250,253,255,.72);
}
.list-icon {
  flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:10px; background:#edf8fd; color:#1688c0; font-size:13px;
}
.list-item strong { display:block; font-size:12px; }
.list-item small { display:block; margin-top:4px; color:var(--muted); line-height:1.4; }

.module-page .module-intro {
  display:grid; grid-template-columns: 1fr auto; gap:20px;
  padding:28px; margin-bottom:16px;
  background:
    radial-gradient(circle at 92% 5%, rgba(20,184,212,.15), transparent 20rem),
    var(--panel);
}
.module-kicker { color:var(--blue); font-size:10px; letter-spacing:.16em; font-weight:900; }
.module-intro h2 { margin:7px 0 8px; font-size:27px; letter-spacing:-.035em; }
.module-intro p { margin:0; max-width:720px; color:var(--muted); line-height:1.6; font-size:14px; }
.module-symbol {
  width:70px; height:70px; display:grid; place-items:center;
  border-radius:21px; font-size:28px; background:#e9f8ff; color:#0b79d0;
  border:1px solid #cfeaf7;
}
.module-body { padding:22px; }
.dev-note {
  display:flex; gap:13px; align-items:flex-start;
  padding:15px 16px; border-radius:15px;
  background:#f4fbff; border:1px solid #d9eef8; color:#567187;
  font-size:13px; line-height:1.55;
}
.dev-note b { color:#17415e; }

.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 15px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; font-size:12px; font-weight:800; text-decoration:none;
}
.button-primary { background:linear-gradient(135deg,#0876c8,#13a8c7); color:#fff; box-shadow:0 9px 22px rgba(11,121,208,.18); }
.button-secondary { background:#fff; color:#24445f; border-color:#d6e6f1; }

.scan-demo {
  display:grid; grid-template-columns:1fr auto; gap:12px; margin-top:18px;
}
.scan-demo input {
  height:48px; border:1px solid #cfe0eb; border-radius:13px; padding:0 15px;
  background:#fff; outline:none; color:#203e56;
}
.scan-demo input:focus { border-color:#43b8dd; box-shadow:0 0 0 4px rgba(20,184,212,.1); }

.toast {
  position:fixed; right:22px; bottom:22px; z-index:400;
  transform:translateY(20px); opacity:0; pointer-events:none;
  max-width:360px; padding:13px 16px; border-radius:13px;
  background:#09233d; color:#fff; box-shadow:0 15px 40px rgba(4,22,39,.24);
  font-size:12px; transition:.22s ease;
}
.toast.show { transform:translateY(0); opacity:1; }

@media (max-width: 1120px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid > :first-child { grid-column:1 / -1; }
}

@media (max-width: 820px) {
  .sidebar {
    transform:translateX(-102%);
    transition:transform .22s ease;
    box-shadow:20px 0 50px rgba(3,23,41,.18);
  }
  .sidebar.open { transform:translateX(0); }
  .main { width:100%; margin-left:0; }
  .menu-button {
    display:grid; place-items:center;
    width:40px; height:40px; border-radius:11px;
    border:1px solid var(--line); background:#fff; color:#173f5d; cursor:pointer;
  }
  .topbar { height:82px; padding:12px 18px; }
  .topbar h1 { font-size:22px; }
  .date-box { display:none; }
  .content { padding:20px 16px 38px; }
  .quick-actions { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .dashboard-grid > :first-child { grid-column:auto; }
  .module-intro { grid-template-columns:1fr; }
  .module-symbol { display:none; }
}

@media (max-width: 540px) {
  .stats-grid { grid-template-columns:1fr; }
  .user-meta { display:none; }
  .hero { align-items:flex-start; flex-direction:column; }
  .scan-demo { grid-template-columns:1fr; }
}


/* === v0.2 functional core === */
.test-badge {
  padding: 7px 10px; border-radius: 999px;
  border:1px solid #f0d9a5; background:#fff8e8;
  color:#9a6911; font-size:10px; font-weight:900; letter-spacing:.08em;
}
.toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px; flex-wrap:wrap;
}
.toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }
.data-table { width:100%; border-collapse:collapse; min-width:820px; }
.data-table th {
  padding:11px 12px; text-align:left; font-size:10px; letter-spacing:.08em;
  color:#7890a4; background:#f5faff; border-bottom:1px solid var(--line);
}
.data-table td { padding:12px; font-size:12px; border-bottom:1px solid #edf3f7; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tr:hover td { background:#fbfdff; }
.money { font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap; }
.code {
  display:inline-flex; align-items:center; padding:5px 8px; border-radius:8px;
  background:#eef7fb; color:#22516f; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11px; letter-spacing:.04em;
}
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px;
  font-size:10px; font-weight:850; white-space:nowrap;
}
.badge.good { background:#e9f8f2; color:#157653; }
.badge.warn { background:#fff6e4; color:#9b6910; }
.badge.danger { background:#fff0f0; color:#aa3e3e; }
.badge.info { background:#eaf7fd; color:#126895; }
.badge.muted { background:#f1f4f6; color:#6c7b88; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { color:#587087; font-size:11px; font-weight:800; }
.field input, .field select, .field textarea {
  width:100%; min-height:43px; padding:9px 11px;
  border:1px solid #cfe0eb; border-radius:11px; background:#fff; color:#1c3b53; outline:none;
}
.field textarea { min-height:85px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:#43b8dd; box-shadow:0 0 0 4px rgba(20,184,212,.1);
}
.form-help { color:#8799a8; font-size:10px; line-height:1.45; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap; }
.button-danger { background:#fff; color:#b43b3b; border-color:#f1caca; }
.button-good { background:#e9f8f2; color:#146f4f; border-color:#cdeadc; }

.modal-backdrop {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(2,18,34,.48); padding:20px; backdrop-filter:blur(5px);
}
.modal-backdrop[hidden] { display:none; }
.modal {
  width:min(720px,100%); max-height:90vh; overflow:auto;
  background:#fafdff; border:1px solid rgba(255,255,255,.7);
  border-radius:22px; box-shadow:0 30px 80px rgba(2,19,34,.28); padding:22px;
}
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:19px; }
.modal-head h3 { margin:5px 0 0; font-size:22px; }
.icon-button {
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:#547087; cursor:pointer; font-size:21px;
}

.kpi-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.mini-kpi { padding:15px; }
.mini-kpi small { color:var(--muted); font-size:10px; font-weight:800; }
.mini-kpi strong { display:block; margin-top:5px; font-size:21px; letter-spacing:-.03em; }

.check-shell { display:grid; grid-template-columns:1fr .85fr; gap:16px; }
.check-input-card { padding:23px; }
.big-code-input { display:grid; grid-template-columns:1fr auto; gap:10px; }
.big-code-input input {
  min-height:56px; padding:0 17px; border-radius:15px; border:1px solid #bcd8e8;
  font-size:18px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em;
  outline:none;
}
.big-code-input input:focus { border-color:#1ba8d0; box-shadow:0 0 0 5px rgba(20,184,212,.1); }
.pass-card { padding:22px; }
.pass-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.remaining-big { font-size:42px; line-height:1; font-weight:900; letter-spacing:-.06em; color:#0878c7; }
.pass-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:18px 0; }
.meta-box { padding:11px; border-radius:12px; background:#f5faff; border:1px solid #e1edf4; }
.meta-box small { display:block; color:#8195a6; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.meta-box strong { display:block; margin-top:4px; font-size:12px; }
.warning-banner {
  margin:13px 0; padding:12px 14px; border-radius:12px;
  background:#fff4e6; border:1px solid #f4d5a6; color:#9d5d00; font-size:12px; font-weight:850;
}
.success-banner {
  margin:13px 0; padding:12px 14px; border-radius:12px;
  background:#ebfaf4; border:1px solid #cbeedf; color:#126e4d; font-size:12px; font-weight:850;
}
.segment-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.segment-card { padding:16px; }
.segment-card strong { display:block; font-size:23px; margin:7px 0 4px; }
.segment-card small { color:var(--muted); font-size:10px; line-height:1.4; }
.segment-card .button { margin-top:12px; width:100%; }

.payment-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.payment-option {
  padding:14px; border-radius:14px; border:1px solid #d9e7ef; background:#fff;
  cursor:pointer; text-align:left; transition:.16s ease;
}
.payment-option:hover, .payment-option.selected { border-color:#39afd4; background:#f2fbff; }
.payment-option strong { display:block; font-size:12px; }
.payment-option small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }

.empty-compact {
  padding:24px; text-align:center; color:var(--muted);
  border:1px dashed #cbdde9; border-radius:15px; background:#f9fcfe;
}
.inline-actions { display:flex; gap:6px; flex-wrap:wrap; }
.small-button {
  min-height:31px; padding:0 9px; border-radius:9px; border:1px solid #d8e6ef;
  background:#fff; color:#27506c; cursor:pointer; font-size:10px; font-weight:800;
}
.small-button:hover { border-color:#9dcfe5; background:#f4fbff; }
.small-button.good { color:#166d50; border-color:#c8e7da; background:#effaf5; }
.small-button.danger { color:#a33b3b; border-color:#edcccc; }

hr.soft { border:0; border-top:1px solid #e7eff4; margin:18px 0; }

@media (max-width: 1120px) {
  .segment-grid { grid-template-columns:repeat(3,1fr); }
  .check-shell { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .test-badge { display:none; }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .segment-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 540px) {
  .kpi-row, .segment-grid, .payment-choice { grid-template-columns:1fr; }
  .big-code-input { grid-template-columns:1fr; }
  .pass-meta { grid-template-columns:1fr; }
}

.modal-error {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #fff0f0;
  border: 1px solid #efcaca;
  color: #9f3434;
  font-size: 12px;
  font-weight: 750;
}


/* === v0.3 Supabase / Auth === */
.auth-gate {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 80% 15%, rgba(20,184,212,.15), transparent 28rem),
    radial-gradient(circle at 20% 85%, rgba(11,121,208,.10), transparent 30rem),
    linear-gradient(135deg,#f8fcff,#eaf4fa 55%,#f9fdff);
}
.auth-card {
  width:min(440px,100%);
  padding:30px;
  border:1px solid rgba(180,210,228,.8);
  border-radius:26px;
  background:rgba(255,255,255,.91);
  box-shadow:0 30px 80px rgba(27,69,101,.15);
}
.auth-brand {
  display:flex; align-items:center; gap:12px;
  padding-bottom:20px; margin-bottom:23px;
  border-bottom:1px solid #e4edf3;
}
.auth-card h1 { margin:6px 0 8px; font-size:30px; letter-spacing:-.04em; }
.auth-card > p { margin:0 0 20px; color:var(--muted); font-size:13px; line-height:1.6; }
.auth-card form { display:grid; gap:13px; }
.auth-submit { width:100%; min-height:48px; margin-top:4px; }
.auth-message {
  margin-top:14px; padding:11px 13px; border-radius:11px;
  background:#fff0f0; border:1px solid #efcaca; color:#983737;
  font-size:12px; line-height:1.45;
}
.auth-foot { margin-top:19px; text-align:center; color:#93a4b1; font-size:10px; letter-spacing:.08em; }
.loading-screen {
  min-height:420px; display:grid; place-items:center; text-align:center;
  color:#71889a;
}
.loading-spinner {
  width:38px; height:38px; margin:0 auto 12px;
  border-radius:50%; border:3px solid #d9edf6; border-top-color:#0b8ec8;
  animation:kryoSpin .8s linear infinite;
}
@keyframes kryoSpin { to { transform:rotate(360deg); } }

.db-error {
  padding:20px; border-radius:18px;
  border:1px solid #efcccc; background:#fff6f6; color:#7f3030;
}
.db-error strong { display:block; margin-bottom:7px; }
.db-error code {
  display:block; margin-top:10px; padding:10px; border-radius:10px;
  white-space:pre-wrap; background:#fff; color:#8d4444; font-size:11px;
}


/* === v0.4.0: Uživatelé === */
.users-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.users-summary {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.user-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
}
.user-status::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#13b87a;
}
.user-status.off::before { background:#aab7c1; }
.user-role-admin { color:#0b7fbd; }
.user-role-staff { color:#687e90; }
.user-role-external { color:#9a6810; }

.invite-hint {
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #cfe6f1;
  background:#f2faff;
  color:#4a6d81;
  font-size:12px;
  line-height:1.55;
}

@media (max-width: 700px) {
  .users-toolbar { align-items:stretch; flex-direction:column; }
  .users-toolbar .button { width:100%; }
}


/* v0.4.2 — Odbavení fotoaparátem */
.camera-checkin-button{width:100%;display:grid;grid-template-columns:54px 1fr 22px;align-items:center;gap:14px;border:1px solid rgba(22,151,205,.28);border-radius:18px;padding:15px 17px;margin-bottom:16px;cursor:pointer;text-align:left;color:#fff;background:radial-gradient(circle at 90% 20%,rgba(91,225,244,.24),transparent 34%),linear-gradient(135deg,#0b355d,#128bd0 72%,#16a7c1);box-shadow:0 12px 28px rgba(20,117,167,.16);transition:transform .16s ease,box-shadow .16s ease}
.camera-checkin-button:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(20,117,167,.21)}
.camera-checkin-button:active{transform:translateY(0)}
.camera-checkin-button small{display:block;margin-bottom:3px;font-size:9px;letter-spacing:.16em;font-weight:900;color:#9feeff}
.camera-checkin-button strong{display:block;font-size:15px;letter-spacing:-.015em}
.camera-checkin-button em{display:block;margin-top:3px;font-size:10px;font-style:normal;font-weight:500;color:rgba(255,255,255,.74)}
.camera-checkin-button b{font-size:27px;font-weight:300;color:#baf5ff}
.camera-checkin-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;font-size:22px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.10)}
.check-divider{display:flex;align-items:center;gap:10px;margin:13px 0 17px;color:#92a4b2;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.check-divider::before,.check-divider::after{content:"";flex:1;height:1px;background:#e1ebf1}
.modal.scanner-modal{width:min(720px,calc(100vw - 26px));max-height:calc(100vh - 26px)}
.scanner-wrap{margin-top:2px}
.scanner-video-shell{position:relative;overflow:hidden;width:100%;aspect-ratio:4/3;min-height:280px;max-height:62vh;border-radius:18px;background:#031322;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#scannerVideo{display:block;width:100%;height:100%;object-fit:cover;background:#031322}
.scanner-mask{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:linear-gradient(rgba(1,12,23,.36),rgba(1,12,23,.10) 29%,rgba(1,12,23,.10) 71%,rgba(1,12,23,.36))}
.scanner-target{position:relative;width:min(78%,480px);height:min(37%,150px);border-radius:15px}
.scanner-target span{position:absolute;width:32px;height:32px;border-color:#71e8ff;border-style:solid;filter:drop-shadow(0 0 7px rgba(61,218,246,.42))}
.scanner-target span:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-radius:9px 0 0 0}
.scanner-target span:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-radius:0 9px 0 0}
.scanner-target span:nth-child(3){right:0;bottom:0;border-width:0 3px 3px 0;border-radius:0 0 9px 0}
.scanner-target span:nth-child(4){left:0;bottom:0;border-width:0 0 3px 3px;border-radius:0 0 0 9px}
.scanner-target i{position:absolute;left:5%;right:5%;top:50%;height:2px;border-radius:4px;background:#73eaff;box-shadow:0 0 12px rgba(72,224,255,.8);animation:kryoScannerLine 1.7s ease-in-out infinite alternate}
@keyframes kryoScannerLine{from{transform:translateY(-45px);opacity:.5}to{transform:translateY(45px);opacity:1}}
.scanner-status{margin-top:12px;padding:10px 12px;border-radius:11px;font-size:11px;font-weight:750;color:#4b6b7e;border:1px solid #d4e6ef;background:#f3f9fc}
.scanner-status[data-type="ready"]{color:#14774f;border-color:#c5eadb;background:#effaf5}
.scanner-status[data-type="error"]{color:#973d3d;border-color:#efcccc;background:#fff2f2}
.scanner-help{margin-top:8px;font-size:10px;line-height:1.55;color:#8296a5}
.scanner-actions{margin-top:12px}
@media(max-width:650px){
  .modal.scanner-modal{width:100vw;max-width:none;min-height:100dvh;max-height:100dvh;height:100dvh;border-radius:0;overflow:auto}
  .scanner-video-shell{aspect-ratio:3/4;max-height:64dvh}
  .scanner-target{width:84%;height:120px}
  .camera-checkin-button{grid-template-columns:48px 1fr 18px}
  .camera-checkin-icon{width:46px;height:46px}
}